🧥 MERN Clothify Frontend

Frontend client for the Clothify e-commerce application — a modern online clothing store built with the MERN stack (MongoDB, Express, React, Node). This project handles the user interface, product browsing, cart flows, authentication screens, and more.

🔗 Live Demo: (https://mern-clothify.pages.dev/) 📦 Backend API: https://github.com/YasithWijesuriya/MERN-Clothify-backend

---

Features

• Product listing and browsing
• Shopping cart operations (add/remove/update)
• User authentication (signin & signup)
• Order placement UI (connects to backend API)
• Responsive mobile & desktop layout
• Client-side routing with React Router

This repo contains only the frontend UI — the backend logic lives in the linked backend repo.

---

Tech Stack

• React — UI library
• Vite — Build tool for fast development
• React Router — Client routing
• CSS — Styling
• Axios / Fetch — API communication
• Context / State Management — For cart & auth state

---

🛠️ Installation

1. Clone the repository

   git clone https://github.com/YasithWijesuriya/MERN-clothify-Frontend.git
   cd MERN-clothify-Frontend
   

2. Install dependencies

   npm install
   

3. Start development server

   npm run dev
   

Your frontend will be running at http://localhost:5173 by default.

4. Environment variables (Optional) If needed, create a .env file to point API calls to your backend:

   VITE_API_URL=http://localhost:5000/api
   
   
   
   MERN-clothify-Frontend/
   ├── public/               # Static assets
   ├── src/
   │   ├── components/       # UI components (Navbar, ProductCard, Cart, etc.)
   │   ├── pages/            # Screen views (Home, Product, Cart, Signin, etc.)
   │   ├── context/          # State management (auth, cart state)
   │   ├── services/         # API service functions
   │   ├── App.jsx           # Main application file
   │   └── main.jsx          # Entry point (Vite)
   ├── .gitignore
   ├── package.json
   └── vite.config.js
   

Backend Repository

This frontend communicates with the Clothify backend API for products, users, carts, and orders: https://github.com/YasithWijesuriya/MERN-Clothify-backend