diff --git a/Projects/2-Intermediate/ecommerce-frontend-clone.md b/Projects/2-Intermediate/ecommerce-frontend-clone.md new file mode 100644 index 00000000..dc555c6b --- /dev/null +++ b/Projects/2-Intermediate/ecommerce-frontend-clone.md @@ -0,0 +1,46 @@ +E-Commerce Website Frontend Clone + +Tier: 2-Intermediate + +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. +The app will showcase product listings, search, filtering, cart UI, and responsive design. + +Purpose: +- 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 simulate shopping experience on the client side (add/remove items to cart, view product details). + +Resources Needed: +- Basic knowledge of React.js (or chosen frontend framework) and CSS. +- Access to mock data or a JSON file representing products. +- Optional: UI component libraries like Material UI or Bootstrap. + +User Stories +- [ ] User can view a homepage with featured products and categories. +- [ ] User can browse product listings with pagination or infinite scroll. +- [ ] User can search products by name or category. +- [ ] User can filter products by price, rating, or category. +- [ ] User can view detailed product information on a separate page. +- [ ] User can add/remove products to/from a shopping cart. +- [ ] User can view and edit the shopping cart. +- [ ] User interface is responsive and works well on desktop and mobile. + +Bonus Features +- [ ] User can sort products by price, popularity, or newest. +- [ ] User can “favorite” or “wish list” products. +- [ ] Implement animations/transitions for UI interactions. +- [ ] Add a mock checkout flow (without payment processing). +- [ ] Add user login/signup UI (frontend only, no backend). + +Useful Links and Resources +- React Documentation: https://reactjs.org/docs/getting-started.html +- Material UI: https://mui.com/ +- Bootstrap: https://getbootstrap.com/ +- Fake Store API: https://fakestoreapi.com/ +- CSS Tricks - Responsive Design: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ + +Example Projects +- Amazon UI Clone by Clever Programmer: https://github.com/cleverprogrammer/react-amazon-clone +- Fake Store React App: https://github.com/rohitgupta14/fake-store-react +- React Ecommerce Template: https://github.com/dmitribre/react-ecommerce-template