🏖️ Hit the Bucket! 🏖️
Hit the Bucket is a browser-based, front-end bucket list application built with React. Users can add, update or delete items from their bucket list, set an eagerness level for bucket list items, and find their list stored locally when they refresh or revisit the page.
The project was an assignment for the University of Birmingham Full-Stack Development Coding Bootcamp. This version of the project, however, was built after finishing the course - in order to consolidate my knowledge about React. It was built with starter code - but most of the React logic itself is my own.
Contents
About
This project was a classroom assignment for the University of Birmingham Full-Stack Development Coding Bootcamp: a 24-week intensive coding bootcamp programme that aimed to teach us the full-range of skills required for front-end, back-end and React development. This project was assigned during Week 20, which covered the fundamentals of React.
The classroom assignments were tasks we were given in the third session of each week. Each of these tasks were based on a real world scenario and they would require us to apply the technology and critical concepts we had just learned in order to solve it. This task required us to put into practice every core feature of React we had learned so far: components, props, state, forms and event handling, conditional rendering and the useEffect hook. You can read the brief for the project here.
The project was built from starter code: however most of the essential React logic is mine. The key blocks of code that are required to make this application function are lines of code that I wrote. I have outlined the process I followed to meet the criteria set out in the brief, and how I used the core features React specifically to solve these problems, in the sections below.
User Guide
With this application, you are able to:
- View the bucket list
- Add an item to the bucket
- Update an item in the bucket
- Remove an item from the bucket
- Mark an item as complete
- Set an eagerness level depending on how keen you are to get an item on your bucket complete
- Refresh the page, or navigate away and return, and find your bucket list where you left it
I will edit in with short demonstration GIFs of each of these features at a later date.
Key Features
Hit the Bucket is built with React, Node.js and JavaScript. Its most complex features are built in React. These features include:
- Multiple React components, a component tree
- State objects to store different values
- Props, passing both static values, state objects, and state-altering functions between components
- Event handling and forms with React
- Conditional rendering, a component that is reused in more than one context using conditional elements
- Saving user data with localStorage
- Retrieving user data using the useEffect hook
I will edit in with a code snippet and explanation of where specifically in the project I used each of these things.
Version History
0.3.0 Make user data persist using localStorage; deploy
0.2.0 Mark complete; remove; edit/update bucket items
0.1.0 Add bucket item; render bucket items
Please take a look at the notes I made here, they are very detailed!
0.0.0 Starter Code
Contact
You can contact me at djbowen95@gmail.com, to collaborate or if you are looking to hire.