TechStore - Modern E-commerce Web Application

A modern, responsive e-commerce web application built with React 19, featuring a comprehensive public-facing site with authentication, product catalog, shopping cart, and more.

---

• Frontend Repository: ahad1033/TechStore
• Backend Repository: ahad1033/TechStore-Server
• Live Demo: tech-store-mu-ashen.vercel.app

---

🚀 Features

Public Site Features

• Authentication System: Login and signup pages with form validation
• Responsive Navigation: Sticky navbar with mega menu, search bar, and mobile hamburger menu
• Landing Page: 10+ sections including hero, categories, featured products, testimonials, and newsletter
• Product Catalog: Grid layout with filters, search, pagination, and view mode toggle
• Product Details: Image gallery, product information, reviews, and add to cart functionality
• Shopping Cart: Cart management with quantity updates, item removal, and checkout
• Contact Page: Contact form with validation and company information

Technical Features

• React 19 with Vite for fast development and building
• React Router DOM v7+ for client-side routing
• Tailwind CSS with centralized theme configuration
• ShadCN UI components for consistent design
• Redux Toolkit for state management
• React Hook Form + Yup for form validation
• Responsive Design with mobile-first approach
• Modern JavaScript (ES6+) features

🛠️ Tech Stack

• Frontend Framework: React 19
• Build Tool: Vite
• Routing: React Router DOM v7+
• Styling: Tailwind CSS v4
• UI Components: ShadCN UI
• State Management: Redux Toolkit + React Redux
• Form Handling: React Hook Form + Yup
• Icons: Lucide React
• Development: ESLint, Hot Module Replacement

📁 Project Structure

src/
├── components/
│   ├── dashboard/          # Admin dashboard components
│   ├── guard/             # Route protection components
│   ├── layouts/           # Layout components
│   ├── sections/          # Home page sections
│   ├── shared/            # Shared components
│   └── ui/                # ShadCN UI components
├── pages/                 # Page components
├── routes/                # Route configuration
├── store/                 # Redux store
├── data/                  # Mock data
├── lib/                   # Utility functions
├── hooks/                 # Custom React hooks
├── assets/                # Static assets
├── App.jsx                # Main app component
├── main.jsx               # Entry point
└── index.css              # Global styles

⚙️ Environment Variables (.env Setup)

Create a .env file in the project root. Example:

# Backend API URLs
VITE_API_BASE_URL=https://tech-store-server.onrender.com/api/v1
VITE_API_REFRESH_URL=https://tech-store-server.onrender.com/api/v1/refresh-token

# ImgBB (Image Upload) API
VITE_IMGBB_API_KEY=your_imgbb_api_key_here
VITE_IMGBB_UPLOAD_URL=https://api.imgbb.com/1/upload

Note:

• For local development, you can use http://localhost:5000/api/v1 for VITE_API_BASE_URL and http://localhost:5000/api/v1/refresh-token for VITE_API_REFRESH_URL.
• Never commit your real API keys to version control.

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/ahad1033/TechStore.git
   cd TechStore

2. Install dependencies

   npm install

3. Configure environment variables
   • Copy .env.example to .env and fill in your values (create .env.example if not present).
4. Start the development server

   npm run dev

5. Open your browser
   • Navigate to http://localhost:5173

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📱 Routes

Public Routes

• / - Home page with landing sections
• /products - Product catalog with filters
• /products/:id - Product detail page
• /cart - Shopping cart
• /contact - Contact page
• /login - User login
• /signup - User registration

Future Dashboard Routes

• /dashboard - Admin dashboard
• /dashboard/products - Product management
• /dashboard/orders - Order management
• /dashboard/users - User management

🎨 Design System

• Theme: Tailwind CSS with centralized configuration in src/index.css
• Components: ShadCN UI for consistent, accessible UI
• Typography: Inter font family
• Color Scheme: Blue-based, modern, accessible

🔧 Customization

• Add Products: Edit src/data/mockData.js and add to the products array
• Modify Categories: Update the categories array in src/data/mockData.js
• Styling: Change theme variables in src/index.css or use Tailwind classes

🚀 Build & Deploy

Production Build

npm run build

Deploy to Vercel

1. Install Vercel CLI: npm i -g vercel
2. Run: vercel
3. Follow the prompts

Deploy to Netlify

1. Build the project: npm run build
2. Upload the dist folder to Netlify
3. Configure build settings if needed

🧪 Testing

Manual Testing Checklist

• Responsive design on all screen sizes
• Navigation functionality
• Product filtering and search
• Cart operations (add, remove, update)
• Form validation
• Authentication flows
• Cross-browser compatibility

Future Testing Implementation

• Unit tests with Jest
• Component tests with React Testing Library
• E2E tests with Playwright or Cypress

🔮 Future Enhancements

• Admin Dashboard: Product, order, and user management
• User Dashboard: Order history, profile, wishlist
• Payment Integration: Stripe, PayPal
• Real-time Features: Live chat, stock notifications
• Advanced Search: Elasticsearch
• PWA Features: Offline support, push notifications
• Multi-language Support: Internationalization
• Dark Mode: Theme switching
• Performance: Code splitting, lazy loading
• SEO: Meta tags, structured data
• Accessibility: ARIA labels, keyboard navigation
• Security: Input sanitization, CSRF protection
• Analytics: Google Analytics, user behavior tracking

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Commit changes: git commit -m 'Add feature'
4. Push to branch: git push origin feature-name
5. Submit a pull request

Code Style

• Use consistent formatting with Prettier
• Follow ESLint rules
• Write meaningful commit messages
• Add comments for complex logic

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• ShadCN UI for the component library
• Tailwind CSS for the utility-first CSS framework
• Vite for the fast build tool
• React Team for the amazing framework
• Unsplash for the placeholder images

📞 Support

• Create an issue in the repository
• Contact: support@techstore.com
• Documentation: Wiki

---

TechStore - Your one-stop destination for the latest technology products.