https://github.com/x404/shoppinglist
Piche, testwork
https://github.com/x404/shoppinglist
bootstrap5 css github-pages javascript react react-tooltip redux-toolkit ts tsx typescript vitejs
Last synced: about 2 months ago
JSON representation
Piche, testwork
- Host: GitHub
- URL: https://github.com/x404/shoppinglist
- Owner: x404
- Created: 2025-03-31T15:41:44.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-02T14:09:27.000Z (12 months ago)
- Last Synced: 2025-06-03T02:57:49.926Z (12 months ago)
- Topics: bootstrap5, css, github-pages, javascript, react, react-tooltip, redux-toolkit, ts, tsx, typescript, vitejs
- Language: TypeScript
- Homepage: https://x404.github.io/shoppinglist/
- Size: 3.76 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + Vite
https://x404.github.io/shoppinglist/
## Inststurction for start project
1. Clone the project repository to your local machine
```
git clone https://github.com/x404/shoppinglist.git
cd shoppinglist-app
```
2. Install Dependencies
```
npm install
```
3. Running the App
```
npm run dev
```
4. Open the app in your browser by URL
```
http://localhost:5173/
```
## Architecture and Design Decisions
### - State Management with Redux Toolkit
All product data and UI state (like selected category) are managed in one place
### - Component Structure and Composition
Modular component architecture with clear separation of concerns
### - Form Handling and Validation
Consistent form handling pattern in 'add product' modal and edit product form
### - Accessibility Considerations
Built with attemption for accessibility (partially)
### - Using Typescript
Added type definitions for all components and state
### - UI/UX Decisions
Thoughtful user experience design
## LocalStorage Data
**productList** key
```
[{"name":"Banana","quantity":2,"category":"Fruits","purchased":false,"id":1},{"name":"Apple","quantity":3,"category":"Vegetables","purchased":false,"id":2},{"name":"Milk","quantity":4,"category":"Dairy","purchased":false,"id":3},{"name":"Chees","quantity":5,"category":"Dairy","purchased":false,"id":4},{"id":1743520846384,"name":"foo","category":"Fruits","purchased":false,"quantity":1}]
```
## What you would improve if given more time
1. Implement routing for categories with React Router
2. Add support for nested/sub-categories hierarchy
3. ~~Add internationalization support~~
4. Improve a11y following WCAG standards
5. ~~Add in "View" section the option about hidding purchased products~~
6. Auth
7. Bulk actions (Multiple select for deleting/ mark as purchased)
8. ~~Add sorting by: status, title, quantity~~
9. ~~Option to hide empty categories~~
10. Pagination for large list
12. Dark mode support
13. Reduce unnecessary re-renders
14. ~~Create the store category Redux slice~~
15. Product drag and drop
16. ~~Clear categories~~
17. Move category to another category
18. Cart with Undo options
19. ~~Resize sidebar~~
20. ~~Show/hide sidebar~~
21. Local/remote storage with option save local to remote
22. ~~Search~~
23. SSR
24. Toggle visibility sidebar on the smartphones
25. Add color & icon for folders
26.