- 🌟 Features
- 🚀 Tech Stack
- 🏗️ Project Structure
- ⚡ Quick Start
- 🎨 Design System
- 🛍️ Product Catalog
- 🤖 AI Chatbot
- 📱 Mobile Experience
- 🔧 Configuration
- 📈 Performance
- 🤝 Contributing
- 📄 License
- Product Catalog: Browse 300+ products across 6 categories
- Smart Search: Real-time product search with filtering and sorting
- Shopping Cart: Add, remove, and manage cart items with persistent storage
- Wishlist: Save favorite products for later purchasing
- Product Details: Comprehensive product pages with specifications and reviews
- Category Navigation: Organized product browsing by category
- Deals Page: Special offers and discounted products
- Products Page: Complete product listing with advanced filters
- Secure Checkout: Complete payment processing flow
- Multiple Payment Options: Credit cards, debit cards, and digital wallets
- Order Summary: Detailed breakdown of purchases with tax and shipping
- Billing Information: Secure form handling for customer details
- Payment Validation: Real-time form validation and error handling
- Order Confirmation: Success states and order tracking information
- Responsive Design: Perfect experience across all devices and screen sizes
- Dark/Light Mode: Theme switching with system preference detection
- Smooth Animations: Framer Motion powered interactions and transitions
- Accessibility: WCAG compliant design with keyboard navigation
- Loading States: Beautiful skeleton loaders and smooth transitions
- Toast Notifications: User feedback with elegant toast messages
- Intelligent Responses: Advanced rule-based AI for customer support
- Product Recommendations: Smart suggestions based on user queries
- Order Assistance: Help with order tracking, returns, and exchanges
- Multi-topic Support: Handles pricing, shipping, warranties, and policies
- Interactive UI: Modern chat interface with typing indicators
- Quick Suggestions: Contextual response options for faster interaction
- User Authentication: Complete login and registration system
- Profile Management: Update personal information and preferences
- Settings Panel: Comprehensive settings for notifications, appearance, and security
- Account Security: Password management and security options
- Preferences: Customizable app behavior and display options
- Theme Control: Manual theme switching with preference persistence
- TypeScript: Full type safety throughout the application
- Redux Toolkit: Predictable state management with modern patterns
- Component Library: Reusable UI components built with Shadcn/ui
- SEO Optimized: Meta tags, structured data, and semantic HTML
- Performance Optimized: Code splitting, lazy loading, and bundle optimization
- Development Tools: Hot reload, debugging tools, and component tagging
- Framework: React 18.3.1 with TypeScript for type safety
- Build Tool: Vite for lightning-fast development and building
- Styling: Tailwind CSS with custom design system and semantic tokens
- Animations: Framer Motion for smooth interactions and page transitions
- Icons: Lucide React icon library for consistent iconography
- State Management: Redux Toolkit with persistence for cart and wishlist
- Shadcn/ui: High-quality, accessible component library
- Radix UI: Primitive components for complex UI patterns
- React Hook Form: Efficient form handling with validation
- Sonner: Beautiful toast notifications and alerts
- React Hot Toast: Additional toast notification system
- TypeScript: Static type checking and enhanced developer experience
- ESLint: Code linting and formatting for consistency
- Vite: Fast development server with hot module replacement
- Component Tagger: Development debugging and component identification
- React Router DOM: Client-side routing with nested routes
- Dynamic Imports: Code splitting for better performance
- Route Guards: Protected routes for authenticated users
src/
├── components/ # Reusable UI components
│ ├── Chatbot/ # AI chatbot system
│ │ ├── ChatbotButton.tsx # Floating chat button
│ │ ├── ChatWindow.tsx # Main chat interface
│ │ ├── ChatMessage.tsx # Individual message component
│ │ ├── chatbotLogic.ts # AI response logic
│ │ └── index.tsx # Chatbot entry point
│ ├── ui/ # Shadcn/ui component library
│ │ ├── button.tsx # Button variants and styles
│ │ ├── card.tsx # Card components
│ │ ├── input.tsx # Form input components
│ │ └── ... # Other UI primitives
│ ├── Footer.tsx # Site footer with links
│ ├── Navbar.tsx # Navigation header with search
│ └── ProductCard.tsx # Product display component
├── data/ # Static data and product catalog
│ ├── products.ts # Core product definitions
│ └── expandedProducts.ts # Extended product catalog (300+ items)
├── hooks/ # Custom React hooks
│ ├── use-mobile.tsx # Mobile device detection
│ └── use-toast.ts # Toast notification hook
├── lib/ # Utility functions and helpers
│ └── utils.ts # Common utility functions
├── pages/ # Route components and main pages
│ ├── Index.tsx # Homepage with hero and categories
│ ├── Products.tsx # Product listing with filters
│ ├── Deals.tsx # Special offers and deals page
│ ├── Cart.tsx # Shopping cart management
│ ├── Checkout.tsx # Payment and checkout flow
│ ├── Settings.tsx # User settings and preferences
│ ├── Wishlist.tsx # Saved products page
│ ├── Login.tsx # User authentication
│ └── NotFound.tsx # 404 error handling
├── store/ # Redux store configuration
│ ├── slices/ # Redux Toolkit slices
│ │ ├── authSlice.ts # Authentication state
│ │ ├── cartSlice.ts # Shopping cart management
│ │ ├── productSlice.ts # Product catalog state
│ │ └── wishlistSlice.ts # Wishlist management
│ └── store.ts # Store configuration and persistence
├── assets/ # Static assets and images
│ ├── categories/ # Category preview images
│ └── hero-banner.jpg # Homepage hero image
├── index.css # Global styles and design system
└── App.tsx # Main application with routing
- Node.js (v18 or higher recommended)
- npm or yarn package manager
- Git for version control
-
Clone the repository
git clone https://github.com/PrietyGoyal24/Mega-Mart-Project.git cd mega-mart -
Install dependencies
npm install # or with yarn yarn install -
Start development server
npm run dev # or with yarn yarn dev -
Open in browser Navigate to
http://localhost:5173to see the application
# Development build with hot reload
npm run dev
# Production build
npm run build
# Preview production build
npm run preview
# Lint code
npm run lintOur design system provides consistent styling across the entire application using semantic tokens and Tailwind CSS.
All colors use HSL values for better manipulation and theming:
- Primary: Deep blue gradients for brand identity and main actions
- Secondary: Warm orange tones for secondary actions and highlights
- Success: Green variants for positive feedback and confirmations
- Warning: Amber shades for attention and cautionary states
- Destructive: Red tones for errors and dangerous actions
- Muted: Subtle grays for backgrounds and disabled states
- Headings: Semi-bold weight with optimized letter spacing
- Body Text: Regular weight optimized for readability
- Captions: Smaller text for metadata and supplementary information
- Code: Monospace font for technical content
- Buttons: Default, outline, ghost, destructive, and hero variants
- Cards: Standard, featured, and interactive card styles
- Forms: Consistent input styling with validation states
- Navigation: Responsive menu systems with active states
- Page Transitions: Smooth enter/exit animations with Framer Motion
- Hover Effects: Subtle scaling and color transitions
- Loading States: Skeleton loaders and spinner animations
- Micro-interactions: Button clicks, form interactions, and feedback
-
📱 Electronics
- Smartphones (iPhone, Samsung, OnePlus)
- Laptops (MacBook, Dell, HP)
- Accessories (Headphones, Chargers, Cases)
- Smart Devices (Watches, Speakers, Cameras)
-
👕 Fashion
- Clothing (Shirts, Pants, Dresses, Jackets)
- Footwear (Sneakers, Boots, Sandals)
- Accessories (Bags, Belts, Jewelry)
- Seasonal Collections
-
🏠 Home & Garden
- Furniture (Sofas, Tables, Chairs, Beds)
- Kitchen Appliances (Blenders, Microwaves)
- Decor Items (Lamps, Vases, Artwork)
- Garden Tools and Plants
-
📚 Books
- Fiction (Novels, Short Stories)
- Non-Fiction (Biography, Self-Help, History)
- Educational (Textbooks, Technical Books)
- Children's Books and Comics
-
⚽ Sports
- Equipment (Bats, Balls, Rackets)
- Fitness (Yoga Mats, Weights, Bands)
- Apparel (Sportswear, Shoes)
- Outdoor Gear (Camping, Hiking)
-
🎮 Toys
- Educational Toys (LEGO, Puzzles)
- Electronic Toys (RC Cars, Drones)
- Action Figures and Collectibles
- Board Games and Card Games
- High-Resolution Images: Professional product photography
- Detailed Descriptions: Comprehensive specifications and features
- Customer Reviews: Rating system with star ratings
- Price Information: Original price, discounts, and special offers
- Stock Status: Real-time availability indicators
- Quick Actions: Add to cart/wishlist with one click
Our intelligent chatbot provides 24/7 customer support with advanced conversational abilities:
- Product Information: Detailed specs, availability, and recommendations
- Order Support: Tracking, returns, exchanges, and modifications
- Shipping Details: Delivery times, costs, and tracking information
- Payment Help: Payment methods, billing issues, and refunds
- Policy Information: Return policies, warranties, and terms
- Technical Support: Account issues and troubleshooting
- Natural Language Processing: Understands various question formats
- Context Awareness: Remembers conversation history during session
- Smart Suggestions: Provides relevant quick-reply options
- Multi-turn Conversations: Handles complex, multi-step inquiries
- Fallback Responses: Graceful handling of unrecognized queries
- Product recommendations based on budget and preferences
- Price comparisons and deal notifications
- Shipping and delivery information
- Return and exchange procedures
- Warranty and guarantee details
- Account management assistance
- Responsive Layouts: Optimized for screens from 320px to 2560px
- Touch Interactions: Large tap targets and gesture-friendly navigation
- Mobile Navigation: Collapsible menu with easy access to key features
- Swipe Gestures: Product gallery swiping and list interactions
- Fast Loading: Optimized bundle size and lazy loading
- Offline Support: Basic functionality available without internet
- PWA Features: Installable web app with offline capabilities
- Image Optimization: WebP format with responsive sizing
- One-handed Usage: Important actions within thumb reach
- Quick Actions: Swipe-to-add cart functionality
- Mobile Payments: Integrated mobile wallet support
- Camera Integration: Barcode scanning for product search
For local development, create a .env.local file:
# API Configuration (when backend is integrated)
VITE_API_URL=http://localhost:3000/api
# Payment Integration (for future payment processing)
VITE_STRIPE_PUBLISHABLE_KEY=pk_test_...
# Analytics (optional)
VITE_GA_TRACKING_ID=G-XXXXXXXXXXEdit src/index.css to modify the color scheme:
:root {
--primary: 220 90% 56%;
--secondary: 24 95% 53%;
/* Add your custom colors */
}- Core Products: Edit
src/data/products.ts - Extended Catalog: Modify
src/data/expandedProducts.ts - Categories: Update category definitions in product files
Customize AI responses in src/components/Chatbot/chatbotLogic.ts:
// Add new conversation topics and responses
export const chatbotLogic = (userInput: string) => {
// Your custom logic here
}- Buttons: Modify
src/components/ui/button.tsxfor new variants - Cards: Update
src/components/ui/card.tsxfor styling changes - Forms: Customize form components in
src/components/ui/
- Code Splitting: Automatic route-based code splitting with React.lazy()
- Image Optimization: WebP format with lazy loading and responsive images
- Bundle Analysis: Built-in Vite bundle analyzer for size optimization
- Caching Strategy: Browser caching for static assets and API responses
- First Contentful Paint (FCP): < 1.5 seconds
- Largest Contentful Paint (LCP): < 2.5 seconds
- Cumulative Layout Shift (CLS): < 0.1
- Time to Interactive (TTI): < 3.5 seconds
- Bundle Size: < 500KB gzipped main bundle
- Lazy Loading: Components and routes loaded on demand
- Memoization: React.memo() and useMemo() for expensive operations
- Virtual Scrolling: For large product lists (when implemented)
- Image Optimization: Proper sizing, compression, and format selection
- Dead Code Elimination: Tree shaking and unused code removal
The application uses Redux Toolkit for predictable state management:
store/
├── slices/
│ ├── authSlice.ts # User authentication
│ ├── cartSlice.ts # Shopping cart management
│ ├── productSlice.ts # Product catalog
│ └── wishlistSlice.ts # Saved products
└── store.ts # Store configuration- Persistence: Cart and wishlist data saved to localStorage
- Middleware: Redux Toolkit Query for API calls (future)
- DevTools: Redux DevTools integration for debugging
- Type Safety: Full TypeScript integration
interface AuthState {
user: User | null;
isAuthenticated: boolean;
loading: boolean;
}interface CartState {
items: CartItem[];
total: number;
itemCount: number;
shippingCost: number;
tax: number;
}interface WishlistState {
items: Product[];
itemCount: number;
}# Install Vercel CLI
npm i -g vercel
# Deploy to production
npm run build
vercel --prod# Build the project
npm run build
# Deploy via Netlify CLI
npm install -g netlify-cli
netlify deploy --prod --dir=dist# Install gh-pages
npm install -g gh-pages
# Deploy to GitHub Pages
npm run build
gh-pages -d dist- Environment Variables: Set production API endpoints
- Security Headers: Configure proper CORS and CSP headers
- Analytics: Integrate Google Analytics or similar tools
- Error Monitoring: Set up Sentry or similar error tracking
- Performance Monitoring: Configure Web Vitals tracking
We welcome contributions from the community! Here's how you can help:
- Fork the repository on GitHub
- Clone your fork locally
git clone https://github.com/PrietyGoyal24/Mega-Mart-Project.git
- Create a feature branch
git checkout -b feature/amazing-new-feature
- Make your changes and commit them
git commit -m 'Add some amazing feature' - Push to your fork
git push origin feature/amazing-new-feature
- Open a Pull Request on GitHub
- Code Style: Follow the existing TypeScript and React patterns
- Testing: Add tests for new features (when testing is implemented)
- Documentation: Update README and code comments
- Commits: Use clear, descriptive commit messages
- Pull Requests: Provide detailed descriptions of changes
- 🐛 Bug Fixes: Help identify and fix issues
- ✨ New Features: Add new functionality and components
- 🎨 UI/UX: Improve design and user experience
- 📚 Documentation: Enhance guides and documentation
- 🚀 Performance: Optimize loading times and bundle size
- 🔒 Security: Improve security practices and code
- Use TypeScript for all new code
- Follow React Hooks patterns
- Use Tailwind CSS utility classes
- Implement responsive design principles
- Add proper error handling
- Include loading states for async operations
- Product catalog with 300+ items
- Shopping cart and wishlist functionality
- AI chatbot with intelligent responses
- Payment and checkout flow
- User settings and preferences
- Responsive design and animations
- User Authentication: Complete login/register system
- Backend Integration: REST API connectivity
- Real Payments: Stripe/PayPal integration
- Order Management: Order history and tracking
- Product Reviews: User-generated reviews and ratings
- Search Engine: Advanced product search with filters
- Recommendations: AI-powered product suggestions
- Social Features: Product sharing and wishlists
- Admin Panel: Product and order management
- Analytics Dashboard: Sales and user behavior insights
- Multi-vendor Support: Marketplace functionality
- Inventory Management: Real-time stock tracking
- Advanced Analytics: Business intelligence features
- Mobile Apps: React Native mobile applications
- Internationalization: Multi-language and currency support
This project is licensed under the MIT License. This means you are free to:
- ✅ Use the code for personal and commercial projects
- ✅ Modify and adapt the code to your needs
- ✅ Distribute copies of the software
- ✅ Sell software that includes this code
Requirements:
- 📝 Include the original license notice in all copies
- 📝 Include copyright notice of the original author
See the LICENSE file for complete license text.
Built with ❤️ using React, TypeScript, and Tailwind CSS
A modern e-commerce platform that combines beautiful design with powerful functionality
