Table of contents

• Overview
• User-Stories
• The challenges
• Links
• Built with
• What I learned
• Continued development
• Useful resources
• Author

Overview

Create my Shoppingify app. Use any front-end libraries of your choice. Create your API. Don’t look at the existing solution.

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

The-challenges

• The task includes creatiom of frontend of the Shoppingify. I was able to fulfill all the user stories.
• But there are so many things to handle, I was overwhelmed once.
• I could have use any CSS Framework, it would save tons of the time but now-a-days I am exploring vanilla css therefore tried with vanilla css.
• Using reducer was the most challenging part also interesting because there are a lot of things I have learned.
• I have used Date-fns library before but this time I had to dig deep because there are quite a lot of stuffs related to Date time.

Links

• Client Side Github Link: https://github.com/zillur-rgb/shop-scribe-client-ts-react
• Live URL: https://shop-scribe-ts-react.netlify.app/

Built with

• TypeScript
• ReactJS
• Reducer
• date-fns
• Reacharts

What I learned

• Of course, for the first time managed state using reducer. There was a lot of learning.
• Beside that, I used Yup and Formik for form and validation. It was also interesting.

Continued development

• So many things I have plan to work with, among them I need to define types properly.
• There are still few bugs that needs to go away.
• I will transform this to a fullstack project.
• Also, I will add user authentication.

Useful resources

• (date-fns)[https://date-fns.org/]
• (Recharts)[https://recharts.org/en-US/]

Author

• LinkedIn - LinkedIn Link
• Github- Github Link