A high-performance, responsive e-commerce application built with React 19. This project replicates the core shopping experience of Amazon, focusing on state management, dynamic UI updates, and clean architectural patterns. This project was developed under the professional guidance of the SuperSimpleDev React Course , where I mastered foundational concepts and then extended the application with custom enterprise-grade features and refactoring.
This project was created while following the tutorial:
Additional experimentation, feature exploration, and custom modifications were implemented independently during development.
- Cart item update, delete and delivery updates
- Realtime payment summary updates
- Handles Cart renders and update
- Library: React 19
- Build Tool: Vite
- Testing: Vitest, React Testing Library
- Styling: CSS3 (Flexbox, Grid, Responsive Design)
- Version Control: Git & GitHub
- Product listing and browsing
- Component-based architecture
- Backend integration
- Automated testing using Vitest
- State management using React hooks
- Search functionality
- Add to cart / remove from cart functionality
- Dynamic cart updates
- Responsive layout
- Interactive UI elements
I took this project beyond the standard tutorial requirements by implementing industry-standard practices and custom features:
- Modular Component Design: I refactored the code into small, atomic components (e.g.,
ProductsGrid,CheckoutHeader,PaymentSummary). This improved readability and reusability. - Folder Structuring: Organized the
srcdirectory by components, pages, assets and utils
- Search Engine: Developed a real-time search functionality that filters products as the user types.
- Update Cart Feature: Implemented custom logic to allow users to update quantities directly within the cart view, rather than just adding/removing.
- Responsive Improvements: Fixed several layout breaks on mobile and tablet views using pure CSS.
- Defensive Programming: Implemented data validation checks. For example, added fallback UI and logic to handle missing product data or empty cart states gracefully to prevent app crashes.
- UI Polishing: Added several minor UI elements (icons, hover effects, and loading states) to make the interface feel more premium and interactive.
- Unit Testing: Wrote test cases using Vitest and React Testing Library for core utilities and component rendering to ensure logic remains intact during future updates.
- Integration Testing: Created test cases for functionalities like Add to Cart and Product Grid diaply for ensuring consistency and correctness.
project-root
├── data/
├── public/
├── src/
│ ├── assets/
│ │ └── icons/
│ ├── components/
│ ├── pages/
│ │ ├── checkout/
│ │ ├── home/
│ │ ├── orders/
│ │ └── tracking/
│ ├── utils/
│ ├── App.jsx
│ └── Main.jsx
├── .gitignore
├── eslint.config.js
├── index.html
└── package.json
- Clone the repository:
git clone https://github.com/Tejasgaware17/react-ecommerce-website.git - Install dependencies:
npm install - Start the dev server:
npm run dev
- Built a complete React application from scratch following guided learning
- Improved understanding of component architecture
- Implemented state management using hooks
- Practiced debugging and feature experimentation
- Explored customization beyond tutorial implementation