Table of Contents
Shoppingify List allows you to take your shopping lists wherever you want. This project works both on desktop and mobile. You will be able to find this application in this link and start using it right away.
While building this great project, I had a very good experience. There were very complicated features to implement and at a certain point I thought that I was not going to be able to achieve it and that I had to redo the project from scratch, however I did not give up and I was able to complete all the user stories that the challenge required. I learned a ton about how Redux handles data and used best practices for cleaner code.
I improved my React, CSS and Redux skills a lot, it was really a very challenging project and it helped me a lot to gain a lot of experience.
This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories:
-
✅ User story: When I select the items tab, I can see a list of items under different categories.
-
✅ User story: I can add a new item with name, category, note, and image.
-
✅ User story: When I add a new item, I can select one from the existing categories or add a new one if the category does not exist
-
✅ User story: When I select an item, I can see its details and I can choose to add the current list or delete the item.
-
✅ User story: I can add items to the current list
-
✅ User story: I can increase the number of item in the list
-
✅ User story: I can remove the item from the list
-
✅ User story: I can save/update the list with a name (user can have only one active list at a time)
-
✅ User story: I can toggle between editing state and completing state
-
✅ User story: When I am at completing state, I can save my progress by selecting the item
-
✅ User story: I can cancel the active list
-
✅ User story: When I try to cancel a list, I can see a confirmation notification
-
✅ User story: I can see my shopping history and I can see the details of it
-
✅ User story: I can see some statistics: top items, top categories, and monthly comparison.
-
✅ User story (optional): I can search for items
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer.
From your command line:
# Clone this repository
$ git clone https://github.com/Leninner/shoppingify-list
# Install dependencies
$ npm install
# Run the app
$ npm start- Steps to replicate a design with only HTML and CSS
- React-Redux Hooks: useSelector and useDispatch
- Node.js
- Marked - a markdown parser
- Share data between two reducers
- FAQs Redux
- PX to REM Converter
- Warning: Can't perform a React state update on an unmounted component.
- Redux Persist
- Website leninner.vercel.app
- GitHub @leninner
- Twitter @_leninner