Shoppingify List

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

Overview
- Built With
Features
How To Use
Acknowledgements
Contact

Overview

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.

Built With

Features

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

How To Use

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

Acknowledgements

Contact

Website leninner.vercel.app
GitHub @leninner
Twitter @_leninner

leninner / shoppingify-list Goto Github PK