A modern e-commerce platform for premium gadgets and electronics, featuring an intuitive interface for browsing, shopping, and managing purchases.
- Frontend Framework: React.js with Vite
- State Management: Context API
- Routing: React Router DOM
- Styling: Tailwind CSS
- Data Persistence: Local Storage
- UI Components: Headless UI
- Toast Notifications: React Hot Toast
- Charts: Recharts
- Dynamic category-based product filtering with nested routing
- Persistent shopping cart and wishlist functionality
- Interactive product details with add to cart/wishlist capabilities
- Dashboard with sortable cart items and wishlist management
- Dynamic background colors based on current route
- Statistical visualization of product prices and ratings
- Toast notifications for user actions
- Purchase flow with congratulatory modal
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.x",
"tailwindcss": "^3.x",
"@headlessui/react": "^1.x",
"react-hot-toast": "^2.x",
"recharts": "^2.x"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.x",
"autoprefixer": "^10.x",
"postcss": "^8.x",
"vite": "^4.x"
}
}-
Clone the Repository
git clone [your-repository-url] cd gadget-heaven -
Install Dependencies
npm install
-
Set Up Environment Variables
cp .env.example .env # Configure your environment variables -
Run Development Server
npm run dev
-
Build for Production
npm run build npm run preview
-
Navigation Bar
Logo and brand name - Dashboard and Stats navigation
- Active route highlighting
- Cart badge with item count
-
Home Page
- Dynamic banner with CTA
- Category sidebar (computers, phones, smartwatches, etc.)
- Product grid with detailed cards
- Responsive footer
-
Product Details
- Comprehensive product information
- Add to cart/wishlist functionality
- Real-time inventory status
-
Dashboard
- Cart management with price sorting
- Wishlist organization
- Purchase flow with modal
- Total price calculation
- Context API for global state management
- LocalStorage for data persistence
- Cart value limit implementation
- Wishlist duplication prevention
- Custom hooks for data fetching and state management
- Context API for global state
- React Router for navigation
- useLocation for dynamic styling
- useNavigate for programmatic navigation
- Custom error boundaries
- Component composition
- Proper prop drilling prevention
- Figma Design: View Design
- Requirements Document: View Requirements
This project is private and part of an assignment. All rights reserved.# GadgetHeaven-