ElectroCart is a modern, fully responsive e-commerce web application for purchasing electronic gadgets like phones, laptops, smartwatches, earphones, and more. Built with React and TypeScript, it features a beautiful UI with dark mode support, user authentication, shopping cart functionality, and order tracking.
Click here to view the live project
- User signup with full name, email, password, and gender
- Secure login system
- Protected routes for authenticated users
- Profile management
- Browse products by category (Phones, Laptops, Smartwatches, Earphones)
- Featured products and top-rated items on homepage
- Product search functionality
- Detailed product pages with specifications
- Add/remove items to/from cart
- Real-time cart updates
- Place orders with order confirmation
- View order history with timeline tracking
- Order details with status updates
- Order cancellation (for pending orders)
- Fully responsive design (mobile, tablet, desktop)
- Dark mode / Light mode toggle
- Modern, clean interface with smooth animations
- Optimized mobile layouts for forms and navigation
- Custom back button navigation
- Toast notifications for user feedback
- Frontend Framework: React 18
- Language: TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- Routing: React Router v6
- Icons: Lucide React
- State Management: React Context API
ElectroCart/
├── public/
│ ├── logo.png
│ └── robots.txt
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── Navbar.tsx
│ │ ├── Footer.tsx
│ │ └── ...
│ ├── pages/ # Page components
│ │ ├── HomePage.tsx
│ │ ├── LoginPage.tsx
│ │ ├── SignupPage.tsx
│ │ ├── ProductDetailPage.tsx
│ │ └── ...
│ ├── context/ # React Context providers
│ │ └── CartContext.tsx
│ ├── hooks/ # Custom React hooks
│ │ ├── useAuth.tsx
│ │ ├── useCart.ts
│ │ └── useOrders.ts
│ ├── data/ # Static data
│ │ └── products.ts
│ ├── types/ # TypeScript types
│ │ └── product.ts
│ ├── lib/ # Utilities
│ │ └── utils.ts
│ ├── App.tsx
│ └── main.tsx
├── index.html
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts
- Node.js (v16 or higher)
- npm or bun
- Clone the repository
git clone https://github.com/Akash972004/ElectroCart.git
cd ElectroCart- Install dependencies
npm install
# or
bun install- Start the development server
npm run dev
# or
bun dev- Open your browser and navigate to
http://localhost:5173
npm run build
# or
bun run buildThe production-ready files will be in the dist folder.
- Sign Up: Create a new account with your details
- Browse: Explore products by category or search
- Add to Cart: Select items and add them to your cart
- Checkout: Review your cart and place an order
- Track Orders: View your order history and track status
Currently, the app uses local storage for data persistence. For production, you may want to configure:
- API endpoints
- Authentication services
- Payment gateways
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
Akash
- GitHub: @Akash972004
- Repository: ElectroCart
- shadcn/ui for the beautiful component library
- Tailwind CSS for the utility-first CSS framework
- Lucide for the icon set
Made with ❤️ by Akash