Micro Marketplace 🛍️

A modern, scalable, and responsive React 18 web application built for a seamless e-commerce experience. This project demonstrates production-ready architecture, smooth animations, and optimized performance.

🚀 Use Case

This application serves as a frontend for a micro-marketplace where users can:

• Browse Products: View high-quality product listings with optimized images.
• Search & Filter: Real-time debounced search and pagination.
• User Accounts: Secure Login and Registration with JWT authentication.
• Favorites: Save products to a wishlist with instant optimistic UI updates.
• Responsive Design: Fully optimized for Mobile, Tablet, and Desktop.

🛠️ Tech Stack

• Frontend Core: React 18, Vite
• Styling: Tailwind CSS v4, clsx, tailwind-merge
• State Management: React Context API (Auth), TanStack React Query v5 (Server State)
• Form Handling: React Hook Form
• Animations: Framer Motion
• Networking: Axios
• Icons: Lucide React
• Notifications: React Hot Toast

📂 Project Structure

The project follows a scalable, feature-first directory structure:

src/
├── api/             # Axios instance & interceptors
├── components/      # Reusable UI components (Navbar, Cards, Loaders)
├── context/         # Global State (AuthContext)
├── hooks/           # Custom Hooks (useAuth, useProducts)
├── layouts/         # Layout wrappers (MainLayout)
├── pages/           # Page components (Login, Register, Products)
└── utils/           # Constants & Helper functions

⚡ Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/yourusername/micro-marketplace.git
   cd micro-marketplace

2. Install dependencies

   npm install

3. Configure Environment Variables Create a .env file in the root directory:

   VITE_API_URL=http://localhost:5000/api

   (Note: The app currently uses a mock API fallback if the backend is unreachable, so you can run it immediately without a server.)

4. Run the development server

   npm run dev

5. Build for production

   npm run build

🧪 Demo & Test Credentials

The application includes a Mock Mode for demonstration purposes. If the API is not running, it will automatically fallback to simulated data.

Test User:

• Email: user@example.com
• Password: password123

You can also register a new account, and it will be auto-logged in.

🔌 API Endpoints

The frontend is designed to consume a RESTful API with the following structure:

Method	Endpoint	Description
POST	/auth/login	Authenticate user & return JWT
POST	/auth/register	Register new user
GET	/products	Fetch paginated products with search
GET	/products/:id	Fetch single product details
POST	/products/:id/favorite	Add product to favorites
DELETE	/products/:id/favorite	Remove product from favorites

🎨 Features & Highlights

• Glassmorphism UI: Modern, translucent card designs.
• Dark Mode: Fully supported dark theme toggled via Navbar.
• Optimistic Updates: Favorites toggle instantly revert on error.
• Skeleton Loading: Smooth loading states for better UX.
• Interactive Background: Subtle animated gradient blobs.

---

Developed with ❤️ by [Your Name]