msb-public
/
app-ideas
mirror of https://github.com/florinpop17/app-ideas
2
1
Code Issues Projects Releases Wiki Activity

Update ecommerce-frontend-clone.md

Browse Source
pull/970/head
pawareliza14 1 year ago committed by GitHub
parent dc076529b8
commit 62f8736abb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File

34
Projects/2-Intermediate/ecommerce-frontend-clone.md
Unescape View File

@ -1,22 +1,22 @@
E-Commerce Website Frontend Clone # E-Commerce Website Frontend Clone
Tier: 2-Intermediate **Tier:** 2-Intermediate
This project is a frontend-only clone of a popular e-commerce website (e.g., Amazon). This project is a frontend-only clone of a popular e-commerce website (e.g., Amazon).
It focuses on replicating the user interface and client-side functionality without backend integration. It focuses on replicating the user interface and client-side functionality without backend integration.
The app will showcase product listings, search, filtering, cart UI, and responsive design. The app will showcase product listings, search, filtering, cart UI, and responsive design.
Purpose: ## Purpose
- To practice frontend development skills including React (or any frontend framework), HTML, CSS, and JavaScript. - To practice frontend development skills including React (or any frontend framework), HTML, CSS, and JavaScript.
- To build a clean, functional, and responsive UI resembling a real-world e-commerce platform. - To build a clean, functional, and responsive UI resembling a real-world e-commerce platform.
- To simulate shopping experience on the client side (add/remove items to cart, view product details). - To simulate shopping experience on the client side (add/remove items to cart, view product details).
Resources Needed: ## Resources Needed
- Basic knowledge of React.js (or chosen frontend framework) and CSS. - Basic knowledge of React.js (or chosen frontend framework) and CSS.
- Access to mock data or a JSON file representing products. - Access to mock data or a JSON file representing products.
- Optional: UI component libraries like Material UI or Bootstrap. - Optional: UI component libraries like Material UI or Bootstrap.
User Stories ## User Stories
- [ ] User can view a homepage with featured products and categories. - [ ] User can view a homepage with featured products and categories.
- [ ] User can browse product listings with pagination or infinite scroll. - [ ] User can browse product listings with pagination or infinite scroll.
- [ ] User can search products by name or category. - [ ] User can search products by name or category.
@ -26,21 +26,21 @@ User Stories
- [ ] User can view and edit the shopping cart. - [ ] User can view and edit the shopping cart.
- [ ] User interface is responsive and works well on desktop and mobile. - [ ] User interface is responsive and works well on desktop and mobile.
Bonus Features ## Bonus Features
- [ ] User can sort products by price, popularity, or newest. - [ ] User can sort products by price, popularity, or newest.
- [ ] User can “favorite” or “wish list” products. - [ ] User can “favorite” or “wish list” products.
- [ ] Implement animations/transitions for UI interactions. - [ ] Implement animations/transitions for UI interactions.
- [ ] Add a mock checkout flow (without payment processing). - [ ] Add a mock checkout flow (without payment processing).
- [ ] Add user login/signup UI (frontend only, no backend). - [ ] Add user login/signup UI (frontend only, no backend).
Useful Links and Resources ## Useful Links and Resources
- React Documentation: https://reactjs.org/docs/getting-started.html - [React Documentation](https://reactjs.org/docs/getting-started.html)
- Material UI: https://mui.com/ - [Material UI](https://mui.com/)
- Bootstrap: https://getbootstrap.com/ - [Bootstrap](https://getbootstrap.com/)
- Fake Store API: https://fakestoreapi.com/ - [Fake Store API](https://fakestoreapi.com/)
- CSS Tricks - Responsive Design: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ - [CSS Tricks – Responsive Design](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/)
Example Projects ## Example Projects
- Amazon UI Clone by Clever Programmer: https://github.com/cleverprogrammer/react-amazon-clone - [Amazon UI Clone by Clever Programmer](https://github.com/cleverprogrammer/react-amazon-clone)
- Fake Store React App: https://github.com/rohitgupta14/fake-store-react - [Fake Store React App](https://github.com/rohitgupta14/fake-store-react)
- React Ecommerce Template: https://github.com/dmitribre/react-ecommerce-template - [React Ecommerce Template](https://github.com/dmitribre/react-ecommerce-template)

Write Preview
Loading…
Cancel
Save