MuscleAdda is a modern, responsive e-commerce platform specialized in fitness supplements and muscle-building products. This repository contains the frontend implementation built with React.js, showcasing modern web development practices, clean UI/UX design, and seamless user experience.
⚠️ Note: This repository contains only the frontend code for portfolio demonstration purposes. The backend API, database, and admin panel are privately hosted as this is a production application currently serving real customers.
- Product Catalog: Browse through extensive supplement collections
- Product Details: Comprehensive product information with images
- Shopping Cart: Add, remove, and manage cart items
- Combo Deals: Special product combination offers
- Order Management: Track and manage customer orders
- User Authentication: Secure login/registration system
- Responsive Design: Optimized for all device sizes
- Modern UI/UX: Clean, intuitive interface design
- Fast Loading: Optimized performance with Vite
- Interactive Components: Smooth animations and transitions
- Search & Filter: Easy product discovery
- Contact & Support: Customer service integration
- Home: Landing page with featured products
- Supplements: Product catalog with categories
- Product Detail: Individual product information
- Cart: Shopping cart management
- Orders: Order history and tracking
- About Us: Company information
- Contact: Customer support
- Privacy Policy: Legal compliance
- Delivery: Shipping information
- React.js (v18.2.0) - Modern JavaScript library
- Vite (v5.1.0) - Fast build tool and dev server
- React Router DOM (v6.22.0) - Client-side routing
- React Icons (v5.0.1) - Icon components
- React Responsive Carousel (v3.2.23) - Image sliders
- React Toastify (v10.0.4) - Notification system
- React Intersection Observer (v9.8.0) - Scroll animations
- Axios (v1.6.7) - HTTP client for API calls
- React Context API - Global state management
- Custom Hooks - Reusable logic components
- React Google reCAPTCHA (v3.1.0) - Spam protection
- DOMPurify (v3.0.8) - XSS protection
- React Helmet Async (v2.0.4) - SEO optimization
- ESLint - Code quality and consistency
- Terser - Code minification
- Vite Plugins - Development enhancement
frontend/
├── src/
│ ├── components/ # Reusable UI components
│ │ ├── Navbar/ # Navigation component
│ │ ├── LoginPopup/ # Authentication modal
│ │ └── ...
│ ├── pages/ # Route components
│ │ ├── Home/ # Landing page
│ │ ├── Supplements/ # Product catalog
│ │ ├── Cart/ # Shopping cart
│ │ ├── MyOrders/ # Order management
│ │ └── ...
│ ├── Context/ # Global state management
│ ├── assets/ # Static resources
│ ├── App.jsx # Main app component
│ └── main.jsx # Application entry point
├── public/ # Public assets
├── package.json # Dependencies and scripts
└── vite.config.js # Build configuration
- Node.js (v16 or higher)
- npm or yarn
# Clone the repository
git clone [repository-url]
cd muscle-adda-frontend
# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build- Production Environment: This is a live e-commerce platform serving real customers
- Sensitive Data: Contains payment gateways, user data, and business logic
- Security: API keys, database connections, and admin functionalities are protected
- Compliance: Maintains data privacy and security standards
- ✅ Complete frontend implementation
- ✅ UI/UX components and design
- ✅ React architecture and patterns
- ✅ API integration structure
- ✅ Responsive design implementation
- 🔒 Backend API and database
- 🔒 Admin panel and dashboard
- 🔒 Payment processing logic
- 🔒 User data and analytics
- 🔒 Production deployment configs
- Modern React Patterns: Hooks, Context API, Custom Hooks
- Responsive Design: Mobile-first approach
- Performance Optimization: Code splitting, lazy loading
- API Integration: RESTful API consumption
- State Management: Complex application state handling
- Security Practices: XSS protection, input validation
- SEO Optimization: Meta tags, semantic HTML
- E-commerce Flow: Complete shopping experience
- User Management: Authentication and profile management
- Order Processing: Cart to checkout flow
- Product Management: Dynamic product display
- Content Management: Dynamic content rendering
Note: As this is a production application, the live demo with backend functionality is not publicly accessible. This repository demonstrates the frontend implementation and development skills.
For live demo access or backend code review, please contact:
- 📧 Email: [tabrezrabbani750@gmail.com]
- 💼 LinkedIn: [https://www.linkedin.com/in/tabrezrabbani]
- 🐱 GitHub: [https://github.com/tabrez-rabbani]
Developer: [Tabrez Rabbani]
- Portfolio: [https://tabrezrabbani.in]
- Email: [tabrezrabbani750@gmail.com]
- LinkedIn: [https://www.linkedin.com/in/tabrezrabbani]
- GitHub: [https://github.com/tabrez-rabbani]
This project is proprietary software. The source code is provided for portfolio demonstration purposes only.
All rights reserved. No part of this software may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the developer.
For licensing inquiries, please contact the developer.
⭐ If you're a recruiter or potential collaborator, I'd love to discuss this project and demonstrate the complete application including backend functionality in a private setting!