🛍️ React + Laravel 12 E-Commerce Project

A modern full-stack eCommerce application built using Laravel 12 (API backend) and React (frontend).
This project demonstrates a clean architecture, modular code structure, and seamless API integration — ideal for scalable online stores.

---

🚀 Features

🧩 Core Features

• User authentication (Register / Login / Logout)
• Product management (CRUD)
• Categories, brands, and tags
• Shopping cart and checkout flow
• Order management (User & Admin)
• Payment gateway integration (Stripe / PayPal ready)
• Product search and filters
• Wishlist and reviews
• Responsive and mobile-friendly design

⚙️ Tech Stack

Backend (API):

• Laravel 12
• Laravel Sanctum for authentication
• MySQL / PostgreSQL
• Eloquent ORM
• API Resource Transformers

Frontend:

• React 18 (Vite or CRA)
• Redux Toolkit for state management
• Axios for API communication
• React Router v6
• Tailwind CSS / Bootstrap
• React Hook Form & Yup for validation

---

📁 Project Structure

project-root/
├── backend/                # Laravel 12 API
│   ├── app/
│   ├── routes/
│   ├── database/
│   ├── public/
│   ├── .env
│   └── composer.json
│
├── frontend/               # React app
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── store/
│   │   ├── utils/
│   │   └── App.jsx
│   ├── package.json
│   ├── vite.config.js
│   └── .env
│
└── README.md

---

🧑‍💻 Installation Guide

1️⃣ Clone the Repository

git clone https://github.com/yourusername/react-laravel-ecommerce.git
cd react-laravel-ecommerce

---

2️⃣ Backend Setup (Laravel 12)

cd backend
composer install
cp .env.example .env
php artisan key:generate

Configure your .env file:

APP_URL=http://localhost:8000
DB_CONNECTION=mysql
DB_DATABASE=ecommerce
DB_USERNAME=root
DB_PASSWORD=

SANCTUM_STATEFUL_DOMAINS=localhost:5173
CORS_ALLOWED_ORIGINS=http://localhost:5173

Run migrations and seed data:

php artisan migrate --seed

Start Laravel development server:

php artisan serve

---

3️⃣ Frontend Setup (React)

cd ../frontend
npm install

Create a .env file:

VITE_API_BASE_URL=http://localhost:8000/api

Run the React app:

npm run dev

---

🔐 Authentication Flow

• Laravel Sanctum handles token-based authentication.
• React stores auth token in Redux + localStorage.
• Protected routes are secured via middleware on both frontend and backend.

---

🧾 API Endpoints

Method	Endpoint	Description
POST	/api/register	User registration
POST	/api/login	User login
GET	/api/products	Fetch all products
GET	/api/products/{id}	Get single product
POST	/api/cart	Add item to cart
GET	/api/orders	Get user orders

---

📦 Build for Production

React Build

npm run build

Laravel Build

php artisan optimize

You can serve your built React files via Laravel’s public directory or host them separately.

---

🧠 Developer Notes

• Uses RESTful API architecture.
• Includes CORS & Sanctum configuration.
• Ready for Docker or deployment on VPS.

---

🧑‍💻 Author

Rajendra Tamang
🌐 rajendratamang.dev
💼 Laravel | React | Full-Stack Developer

---

📜 License

This project is open-sourced under the MIT License.