A production-ready, fully responsive, professional Electronics Store Web App built with React, Tailwind CSS, and Framer Motion.
- Modern UI/UX: Clean, professional design with smooth animations
- Fully Responsive: Optimized for mobile, tablet, and desktop devices
- Product Management: Browse products, filter by category, sort by price/rating
- Shopping Cart: Add/remove items, update quantities, persistent storage
- Wishlist: Save favorite products for later
- Checkout Flow: Complete checkout process with delivery and payment options
- Nigerian Naira (₦): All prices displayed in NGN currency
- Smooth Animations: Framer Motion animations throughout the app
- Local Storage: Cart and wishlist persist across sessions
- React 19 - UI library
- React Router DOM - Navigation and routing
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Lucide React - Icon library
- Vite - Build tool and dev server
- Navigate to the project directory:
cd "electronic store"- Install dependencies (already done):
npm install- Start the development server:
npm run dev- Open your browser and visit:
http://localhost:5173
- Electric Blue: #1F7AE0
- Dark Navy: #0A1A2F
- White: #FFFFFF
- Gray/Silver: #F4F4F4
- Neon Accent: #00F0FF
src/
├── assets/ # Images and static assets
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components (Button, Input, Card, etc.)
│ ├── Navbar.jsx
│ ├── Footer.jsx
│ ├── HeroSection.jsx
│ ├── CategoryGrid.jsx
│ ├── ProductCard.jsx
│ └── ...
├── features/ # Feature-specific components
│ ├── products/ # Product listing, filters
│ └── cart/ # Cart-related components
├── pages/ # Page components
│ ├── Home.jsx
│ ├── Products.jsx
│ ├── ProductDetails.jsx
│ ├── Cart.jsx
│ ├── Checkout.jsx
│ ├── Wishlist.jsx
│ ├── Contact.jsx
│ └── About.jsx
├── layouts/ # Layout components
│ └── MainLayout.jsx
├── router/ # Routing configuration
│ └── AppRouter.jsx
├── hooks/ # Custom React hooks
│ ├── useScrollTop.js
│ ├── useMediaQuery.js
│ └── useLocalStorage.js
├── utils/ # Utility functions and constants
│ ├── constants.js
│ └── helpers.js
├── App.jsx
└── main.jsx
- Home (
/) - Hero section, categories, featured products, testimonials - Products (
/products) - Product listing with filters and sorting - Product Details (
/products/:id) - Detailed product view - Cart (
/cart) - Shopping cart with quantity management - Checkout (
/checkout) - Complete checkout flow - Wishlist (
/wishlist) - Saved favorite products - Contact (
/contact) - Contact form and information - About (
/about) - Company information and values
npm run buildThe production-ready files will be in the dist folder.
- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
- Add/remove products
- Update quantities
- Persistent storage using localStorage
- Real-time total calculation
- Free shipping on orders over ₦50,000
- Save favorite products
- Quick add/remove from product cards
- Persistent storage
- Filter by category
- Filter by brand
- Price range slider
- Sort by price, rating, featured
- Page transitions
- Hover effects on cards and buttons
- Floating elements in hero section
- Scroll-triggered animations
- Smooth cart/wishlist updates
Edit tailwind.config.js to customize the color palette:
colors: {
'electric-blue': '#1F7AE0',
'dark-navy': '#0A1A2F',
'gray-silver': '#F4F4F4',
'neon-accent': '#00F0FF',
}Edit src/utils/constants.js to add/modify products, categories, and other data.
This project is open source and available for educational and commercial use.
For support, email support@limo.ng or visit our contact page.
Built with ❤️ using React + Tailwind CSS + Framer Motion