Shoppingify - by Lionel

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Table of Contents
• Overview
  • Built With
• Features
• How To Use
• Acknowledgements
• Contact

Overview

Introduce your projects by taking a screenshot or a gif. Try to tell visitors a story about your project by answering:

• Where can I see your demo?
• What was your experience?
• What have you learned/improved?
• Your wisdom? :)

Built With

• React
• Typescript

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. (Tips: use libraries like recharts for the graph) User story (optional): I can search for items Icon: https://google.github.io/material-design-icons/

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/your-user-name/your-project-name

# Install dependencies
$ npm install

# Run the app
$ npm start

Acknowledgements

• Steps to replicate a design with only HTML and CSS
• Node.js
• Marked - a markdown parser

Contact

• GitHub @Lionprincipe
• Twitter @mouendoulionel