🛍️ React E-commerce - Frontend Application

Frontend Single Page Application (SPA) for a full-stack e-commerce platform. Built with React and Vite, this application consumes a custom REST API to manage products, user authentication, and shopping cart logic.

---

🔗 Architecture & Backend Integration

This frontend is designed to work seamlessly with its dedicated Node.js/Express REST API.

👉 Backend API Repository: https://github.com/m4lcom/node-express-ecommerce-api

Note: If testing against a free-tier cloud deployment, the initial API request may take a few seconds to wake up the server.

---

🚀 Tech Stack

• Core: React 19, Vite
• Routing: React Router DOM
• Styling & UI: Bootstrap / React-Bootstrap
• State Management: Context API
• Data Fetching: Native Fetch API
• Security: JWT (JSON Web Tokens) stored locally

---

⚙️ Key Technical Features

• Global State Management: Shopping cart and user session states handled efficiently via Context API without prop-drilling.
• Role-Based Access Control (RBAC): Private routing implemented to separate standard user views from the Admin dashboard.
• Authentication Flow: Secure login/register processes with token expiration handling and HTTP error interception.
• Environment Configuration: Support for multiple environments (Development/Production) using .env variables.

---

🧪 Testing the Application

1. Register a new user account.
2. Log in with the newly created credentials.
3. Browse the catalog and add products to the cart.
4. Proceed to checkout or continue shopping.
5. Access the user dashboard to view order history. (Admin users can access a dedicated panel for Product CRUD operations and stock control).

---

📦 Local Installation & Setup

1. Clone the repository

git clone https://github.com/m4lcom/react-vite-ecommerce-frontend.git
cd react-vite-ecommerce-frontend

2. Install dependencies

npm install

3. Environment Variables

Create a .env file in the root directory pointing to your local or deployed backend:

VITE_BASE_SERVER_URL=http://localhost:3000
# VITE_BASE_SERVER_URL=https://your-production-api-url.com

4. Run Development Server

npm run dev

---

👥 Development Context

This application was developed collaboratively as part of a comprehensive full-stack solution to demonstrate:

• RESTful API consumption and integration.
• Scalable frontend architecture and directory structure.
• End-to-end JWT authentication flows.