DEV Community: Durgesh Sahani

Full-Stack Laravel, React and MySQL Ecommerce Admin Panel

Durgesh Sahani — Sun, 10 May 2026 06:09:16 +0000

In this tutorial series, we build a complete ecommerce admin panel using Laravel, React and MySQL. The goal is not only to copy code, but to understand how a real full-stack application works from request to response.

The flow is simple:

Browser sends request -> React handles UI -> Laravel API handles business logic -> MySQL stores data -> API sends JSON back -> React updates screen.

If you already know basic PHP, HTML, CSS and JavaScript, this project is a good next step because it upgrades those skills into a modern full-stack workflow.

Who This Tutorial Is For

This tutorial is for beginners who already understand basic PHP, HTML, CSS and JavaScript, and now want to learn how modern full-stack projects are structured.

If you are a college student, freelancer, PHP developer, or job seeker trying to move from normal PHP projects into Laravel and React, this project will help you understand how the backend, frontend and database communicate with each other.

We will not build only a small todo app. We will build an ecommerce admin panel because it gives us a real use case:

admin login
protected API routes
categories
products
image upload
MySQL database
React dashboard
API testing

What We Are Going To Learn

how a Laravel REST API and React single page application work together
how to set up Laravel API routes and connect MySQL
how to design ecommerce tables for categories and products
how to create migrations and Eloquent models
how to build category CRUD APIs in Laravel
how to build product CRUD APIs with image upload
how to add authentication using Laravel Sanctum
how to create a React admin layout with Vite
how to connect React login with Laravel API
how to manage categories and products from React
how to upload product images from React using FormData
how to polish the final dashboard with real API data

Watch The Full Series

Watch the complete series on YouTube:

What We Are Building

We are building an ecommerce admin panel with three main parts:

Laravel backend API
React frontend admin panel
MySQL database

The admin panel includes login, category management, product management with image upload, and a final dashboard showing useful ecommerce summary data.

Required Tools

Before starting, install the following tools:

PHP and Composer
Node.js and npm
MySQL
Laravel installer
Visual Studio Code
Postman

If you are using macOS, you can install many tools using Homebrew. If you are using Windows, you can use Laragon, XAMPP, WAMP, or install PHP, Composer, Node and MySQL separately.

Useful official websites:

PHP: https://www.php.net/
Composer: https://getcomposer.org/
Laravel: https://laravel.com/
Node.js: https://nodejs.org/
MySQL: https://www.mysql.com/
Postman: https://www.postman.com/

For this series, the backend and frontend are kept in one project folder:

ecommerce-admin-panel/
  backend/
  frontend/

What Is Laravel?

Laravel is a PHP framework used to build web applications and APIs. In this project, Laravel is responsible for routes, controllers, validation, authentication, database models, migrations, file upload, and JSON responses.

Instead of writing raw PHP files for every API endpoint, Laravel gives us a clean structure:

routes are defined in routes/api.php
request logic goes inside controllers
database records are represented by Eloquent models
table structure is created using migrations

What Is React?

React is a JavaScript library for building user interfaces. In this project, React handles the admin panel screens: login, dashboard, categories and products.

React does not directly talk to MySQL. Instead, React sends HTTP requests to the Laravel API. Laravel validates the request, works with MySQL, and sends JSON back to React.

What Is MySQL?

MySQL is the database used to store our admin data. In this project, MySQL stores users, categories, products, access tokens, and timestamps.

The important idea is this:

React does not store permanent data. Laravel does not store permanent data in controllers. MySQL is the final storage layer.

What Is REST API?

REST API is a way for two applications to communicate using HTTP requests.

In this project:

React sends GET, POST, PUT and DELETE requests
Laravel receives those requests
Laravel validates the data
Laravel stores or reads data from MySQL
Laravel returns JSON
React updates the UI using that JSON

Example:

GET /api/categories

This means React is asking Laravel: "Please send me all categories."

Laravel responds with JSON:

{
  "data": [
    {
      "id": 1,
      "name": "Laptops",
      "slug": "laptops"
    }
  ]
}

What Is Laravel Sanctum?

Laravel Sanctum is used for API authentication. In simple words, after the admin logs in, Laravel creates a token. React stores that token and sends it with every protected API request.

Without token:

Request blocked

With token:

Request allowed

This is how we protect category and product management from public access.

What Is Vite?

Vite is a frontend build tool. It helps us create and run a React app quickly.

In older React tutorials, you may see create-react-app. In this project, we use Vite because it is faster and is commonly used in modern React projects.

Step 1: Create Laravel Backend

First we create the Laravel backend app.

laravel new backend --no-interaction
cd backend
php artisan install:api --without-migration-prompt --no-interaction

The install:api command enables API support and installs Sanctum-related files so we can later protect routes with tokens.

Then we configure MySQL in the .env file:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=ecommerce_admin
DB_USERNAME=learnwebcoding
DB_PASSWORD=

After the database is ready, run migrations:

php artisan migrate

If you want to create the database from terminal, you can use MySQL commands:

CREATE DATABASE ecommerce_admin;

For local development, make sure the database name, username and password in .env match your MySQL setup.

Step 2: Understand API Routes

Laravel API routes live inside:

backend/routes/api.php

A simple health route can be used to confirm the API is working:

Route::get('/health', function () {
    return response()->json([
        'status' => 'ok',
    ]);
});

When we open /api/health, Laravel returns JSON. This confirms the frontend can later consume Laravel as an API.

Start the Laravel API server:

php artisan serve

Now test:

http://127.0.0.1:8000/api/health

If everything is correct, you should see a JSON response.

Step 3: Database Design

For this ecommerce admin panel, we need two main tables:

categories
products

The categories table stores product groups:

id
name
slug
description
status
created_at
updated_at

The products table stores the actual catalog items:

id
category_id
name
slug
description
price
stock
image
status
created_at
updated_at

The important relationship is:

One category can have many products, and each product belongs to one category.

Step 4: Create Models and Migrations

Laravel can generate a model and migration together:

php artisan make:model Category -m --no-interaction
php artisan make:model Product -m --no-interaction

In the category migration, we add the category fields:

$table->string('name');
$table->string('slug')->unique();
$table->text('description')->nullable();
$table->boolean('status')->default(true);

In the product migration, we add product fields:

$table->foreignId('category_id')->constrained()->cascadeOnDelete();
$table->string('name');
$table->string('slug')->unique();
$table->text('description')->nullable();
$table->decimal('price', 10, 2);
$table->integer('stock')->default(0);
$table->string('image')->nullable();
$table->boolean('status')->default(true);

Then run:

php artisan migrate

Here is the final code for create_categories_table.php:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('slug')->unique();
            $table->text('description')->nullable();
            $table->boolean('status')->default(true);

            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('categories');
    }
};

Here is the final code for create_products_table.php:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->foreignId('category_id')->constrained()->cascadeOnDelete();
            $table->string('name');
            $table->string('slug')->unique();
            $table->text('description')->nullable();
            $table->decimal('price', 10, 2)->default(0);
            $table->unsignedInteger('stock')->default(0);
            $table->string('image')->nullable();
            $table->boolean('status')->default(true);

            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

Step 5: Category Model

In app/Models/Category.php, we allow mass assignment for category fields:

protected $fillable = [
    'name',
    'slug',
    'description',
    'status',
];

Then we define the relationship:

public function products()
{
    return $this->hasMany(Product::class);
}

This tells Laravel that a category can have many products.

Here is the final code for app/Models/Category.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\HasMany;


class Category extends Model
{
    //

    protected $fillable = [
        'name',
        'slug',
        'description',
        'status',
    ];

    protected $casts = [
        'status' => 'boolean',
    ];

    public function products(): HasMany
    {
        return $this->hasMany(Product::class);
    }

}

Step 6: Product Model

In app/Models/Product.php, we add fillable fields:

protected $fillable = [
    'category_id',
    'name',
    'slug',
    'description',
    'price',
    'stock',
    'image',
    'status',
];

Then we define the category relationship:

public function category()
{
    return $this->belongsTo(Category::class);
}

This makes it easy to load each product with its category.

Here is the final code for app/Models/Product.php:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;


class Product extends Model
{
    //

    protected $fillable = [
        'category_id',
        'name',
        'slug',
        'description',
        'price',
        'stock',
        'image',
        'status',
    ];

    protected $casts = [
        'price' => 'decimal:2',
        'status' => 'boolean',
    ];

    public function category(): BelongsTo
    {
        return $this->belongsTo(Category::class);
    }

}

Step 7: Build Category REST API

The category API handles:

list categories
create category
show category
update category
delete category

Create the controller:

php artisan make:controller Api/CategoryController --api --no-interaction

In routes/api.php, register the route:

use App\Http\Controllers\Api\CategoryController;

Route::apiResource('categories', CategoryController::class);

The store method validates incoming data and creates a category:

$validated = $request->validate([
    'name' => ['required', 'string', 'max:255'],
    'slug' => ['required', 'string', 'max:255', 'unique:categories,slug'],
    'description' => ['nullable', 'string'],
    'status' => ['boolean'],
]);

$category = Category::create($validated);

return response()->json([
    'message' => 'Category created successfully.',
    'data' => $category,
], 201);

This same pattern is used for update and delete: validate request, run Eloquent query, return JSON response.

Here is the final code for app/Http/Controllers/Api/CategoryController.php:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Category;
use Illuminate\Http\Request;

class CategoryController extends Controller
{
    public function index()
    {
        $categories = Category::latest()->get();

        return response()->json([
            'data' => $categories,
        ]);
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'slug' => ['required', 'string', 'max:255', 'unique:categories,slug'],
            'description' => ['nullable', 'string'],
            'status' => ['required', 'boolean'],
        ]);

        $category = Category::create($validated);

        return response()->json([
            'message' => 'Category created successfully.',
            'data' => $category,
        ], 201);
    }

    public function show(Category $category)
    {
        return response()->json([
            'data' => $category,
        ]);
    }

    public function update(Request $request, Category $category)
    {
        $validated = $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'slug' => ['required', 'string', 'max:255', 'unique:categories,slug,' . $category->id],
            'description' => ['nullable', 'string'],
            'status' => ['required', 'boolean'],
        ]);

        $category->update($validated);

        return response()->json([
            'message' => 'Category updated successfully.',
            'data' => $category,
        ]);
    }

    public function destroy(Category $category)
    {
        $category->delete();

        return response()->json([
            'message' => 'Category deleted successfully.',
        ]);
    }
}

Step 8: Test Category API With Postman

Before connecting React, test the API using Postman.

Create category:

POST http://127.0.0.1:8000/api/categories

JSON body:

{
  "name": "Laptops",
  "slug": "laptops",
  "description": "Laptop products",
  "status": true
}

List categories:

GET http://127.0.0.1:8000/api/categories

Update category:

PUT http://127.0.0.1:8000/api/categories/1

Delete category:

DELETE http://127.0.0.1:8000/api/categories/1

Postman testing helps confirm Laravel is working before React is added.

Step 9: Build Product REST API With Image Upload

Products are similar to categories, but products also support image upload.

Create the controller:

php artisan make:controller Api/ProductController --api --no-interaction

use App\Http\Controllers\Api\ProductController;

Route::apiResource('products', ProductController::class);

For product image upload, Laravel stores the image file and saves the path in MySQL:

if ($request->hasFile('image')) {
    $validated['image'] = $request->file('image')->store('products', 'public');
}

$product = Product::create($validated);

To make uploaded files accessible from the browser, create the storage link:

php artisan storage:link

Now a product can have name, slug, category, price, stock, status, and image.

When deleting a product, we should also delete the uploaded image from storage:

if ($product->image) {
    Storage::disk('public')->delete($product->image);
}

$product->delete();

This keeps the storage folder clean.

Here is the final code for app/Http/Controllers/Api/ProductController.php:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Product;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ProductController extends Controller
{
    public function index()
    {
        $products = Product::with('category')->latest()->get();

        return response()->json([
            'data' => $products,
        ]);
    }

    public function store(Request $request)
    {
        $validated = $request->validate([
            'category_id' => ['required', 'exists:categories,id'],
            'name' => ['required', 'string', 'max:255'],
            'slug' => ['required', 'string', 'max:255', 'unique:products,slug'],
            'description' => ['nullable', 'string'],
            'price' => ['required', 'numeric', 'min:0'],
            'stock' => ['required', 'integer', 'min:0'],
            'image' => ['nullable', 'image', 'max:2048'],
            'status' => ['required', 'boolean'],
        ]);

        if ($request->hasFile('image')) {
            $validated['image'] = $request->file('image')->storeAs(
                'products',
                $validated['slug'] . '.' . $request->file('image')->extension(),
                'public'
            );
        }

        $product = Product::create($validated);

        return response()->json([
            'message' => 'Product created successfully.',
            'data' => $product->load('category'),
        ], 201);
    }

    public function show(Product $product)
    {
        return response()->json([
            'data' => $product->load('category'),
        ]);
    }

    public function update(Request $request, Product $product)
    {
        $validated = $request->validate([
            'category_id' => ['required', 'exists:categories,id'],
            'name' => ['required', 'string', 'max:255'],
            'slug' => ['required', 'string', 'max:255', 'unique:products,slug,' . $product->id],
            'description' => ['nullable', 'string'],
            'price' => ['required', 'numeric', 'min:0'],
            'stock' => ['required', 'integer', 'min:0'],
            'image' => ['nullable', 'image', 'max:2048'],
            'status' => ['required', 'boolean'],
        ]);

        if ($request->hasFile('image')) {
            if ($product->image) {
                Storage::disk('public')->delete($product->image);
            }

            $validated['image'] = $request->file('image')->storeAs(
                'products',
                $validated['slug'] . '.' . $request->file('image')->extension(),
                'public'
            );
        }

        $product->update($validated);

        return response()->json([
            'message' => 'Product updated successfully.',
            'data' => $product->load('category'),
        ]);
    }

    public function destroy(Product $product)
    {
        if ($product->image) {
            Storage::disk('public')->delete($product->image);
        }

        $product->delete();

        return response()->json([
            'message' => 'Product deleted successfully.',
        ]);
    }
}

Step 10: Authentication With Laravel Sanctum

Authentication protects the admin APIs. We use Laravel Sanctum token authentication.

The login endpoint validates email and password, checks credentials, and creates a token:

$token = $user->createToken('admin-token')->plainTextToken;

return response()->json([
    'message' => 'Login successful.',
    'token' => $token,
    'user' => $user,
]);

Protected routes use Sanctum middleware:

Route::middleware('auth:sanctum')->group(function () {
    Route::apiResource('categories', CategoryController::class);
    Route::apiResource('products', ProductController::class);
});

React must send the token in the Authorization header:

Authorization: Bearer YOUR_TOKEN_HERE

Example auth routes:

Route::post('/login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/user', [AuthController::class, 'user']);
    Route::post('/logout', [AuthController::class, 'logout']);
    Route::apiResource('categories', CategoryController::class);
    Route::apiResource('products', ProductController::class);
});

The main idea is simple:

login route is public
category and product routes are protected
React must send token after login

Here is the final code for app/Http/Controllers/Api/AuthController.php:

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\ValidationException;

use Illuminate\Http\Request;

class AuthController extends Controller
{
    //
    public function login(Request $request)
    {
        $validated = $request->validate([
            'email' => ['required', 'email'],
            'password' => ['required', 'string'],
        ]);

        $user = User::where('email', $validated['email'])->first();

        if (! $user || ! Hash::check($validated['password'], $user->password)) {
            throw ValidationException::withMessages([
                'email' => ['The provided credentials are incorrect.'],
            ]);
        }

        $token = $user->createToken('admin-token')->plainTextToken;

        return response()->json([
            'message' => 'Login successful.',
            'token' => $token,
            'user' => $user,
        ]);
    }

    public function me(Request $request)
    {
        return response()->json([
            'data' => $request->user(),
        ]);
    }

    public function logout(Request $request)
    {
        $request->user()->currentAccessToken()->delete();

        return response()->json([
            'message' => 'Logged out successfully.',
        ]);
    }

}

Here is the final code for routes/api.php:

<?php


use App\Http\Controllers\Api\AuthController;
use App\Http\Controllers\Api\CategoryController;
use App\Http\Controllers\Api\ProductController;
use Illuminate\Support\Facades\Route;

Route::get('/health', function () {
    return response()->json([
        'status' => 'success',
        'message' => 'Laravel API is working.',
        'app' => config('app.name'),
        'timestamp' => now()->toISOString(),
    ]);
});

Route::post('/login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->group(function () {
    Route::get('/me', [AuthController::class, 'me']);
    Route::post('/logout', [AuthController::class, 'logout']);

    Route::apiResource('categories', CategoryController::class);
    Route::apiResource('products', ProductController::class);
});

Step 11: Create React Frontend With Vite

Now we create the React frontend:

npm create vite@latest frontend -- --template react
cd frontend
npm install
npm run dev

We also install icons for the final UI polish:

npm install lucide-react

Vite gives us a fast React development setup. The React app runs on:

http://127.0.0.1:5173

The Laravel API runs on:

http://127.0.0.1:8000

Step 12: Create API Helper File in React

Inside React, create:

frontend/src/api.js

This file keeps API calls in one place:

const API_URL = 'http://127.0.0.1:8000/api';

async function apiRequest(path, options = {}) {
  const token = options.token;
  const isFormData = options.body instanceof FormData;

  const headers = {
    Accept: 'application/json',
    ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
    ...options.headers,
  };

  if (token) {
    headers.Authorization = `Bearer ${token}`;
  }

  const response = await fetch(`${API_URL}${path}`, {
    ...options,
    headers,
  });

  const data = await response.json();

  if (!response.ok) {
    throw new Error(data.message || 'Request failed.');
  }

  return data;
}

This helper handles JSON requests, FormData requests, authentication token, errors, and final response parsing.

Now we can create small reusable functions:

export function getCategories(token) {
  return apiRequest('/categories', {
    token,
  });
}

export function getProducts(token) {
  return apiRequest('/products', {
    token,
  });
}

This keeps components cleaner because components do not need to repeat the full fetch logic again and again.

Here is the final code for frontend/src/api.js:

const API_URL = 'http://127.0.0.1:8000/api';

async function apiRequest(path, options = {}) {
  const token = options.token;
  const isFormData = options.body instanceof FormData;

  const headers = {
    Accept: 'application/json',
    ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
    ...options.headers,
  };

  if (token) {
    headers.Authorization = `Bearer ${token}`;
  }

  const response = await fetch(`${API_URL}${path}`, {
    ...options,
    headers,
  });

  const data = await response.json();

  if (!response.ok) {
    throw new Error(data.message || 'Request failed.');
  }

  return data;
}

export function loginAdmin(credentials) {
  return apiRequest('/login', {
    method: 'POST',
    body: JSON.stringify(credentials),
  });
}

export function getCategories(token) {
  return apiRequest('/categories', {
    token,
  });
}

export function createCategory(category, token) {
  return apiRequest('/categories', {
    method: 'POST',
    token,
    body: JSON.stringify(category),
  });
}

export function updateCategory(id, category, token) {
  return apiRequest(`/categories/${id}`, {
    method: 'PUT',
    token,
    body: JSON.stringify(category),
  });
}

export function deleteCategory(id, token) {
  return apiRequest(`/categories/${id}`, {
    method: 'DELETE',
    token,
  });
}

export function getProducts(token) {
  return apiRequest('/products', {
    token,
  });
}

export function createProduct(product, token) {
  return apiRequest('/products', {
    method: 'POST',
    token,
    body: product,
  });
}

export function updateProduct(id, product, token) {
  product.append('_method', 'PUT');

  return apiRequest(`/products/${id}`, {
    method: 'POST',
    token,
    body: product,
  });
}

export function deleteProduct(id, token) {
  return apiRequest(`/products/${id}`, {
    method: 'DELETE',
    token,
  });
}

Step 13: React Login Page

The login page sends email and password to Laravel:

export function loginAdmin(credentials) {
  return apiRequest('/login', {
    method: 'POST',
    body: JSON.stringify(credentials),
  });
}

After login, React stores the token:

localStorage.setItem('admin_token', response.token);

Then the user is redirected to the dashboard.

A simple login form has:

email state
password state
loading state
error state
submit handler

The submit handler calls Laravel:

async function handleLogin(event) {
  event.preventDefault();

  try {
    const response = await loginAdmin({ email, password });
    localStorage.setItem('admin_token', response.token);
    onLogin(response.user);
  } catch (error) {
    setError(error.message);
  }
}

This is the first real connection between React and Laravel authentication.

Here is the final code for frontend/src/Login.jsx:

import { useState } from 'react';
import { loginAdmin } from './api';

function Login({ onLogin }) {
  const [email, setEmail] = useState('admin@example.com');
  const [password, setPassword] = useState('password');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  async function handleLogin(event) {
    event.preventDefault();
    setLoading(true);
    setError('');

    try {
      const response = await loginAdmin({ email, password });
      localStorage.setItem('admin_token', response.token);
      onLogin(response.user);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <main className="auth-page">
      <section className="auth-card">
        <div className="brand-row login-brand">
          <div className="brand-logo">LW</div>
          <div>
            <p className="eyebrow">Ecommerce Admin</p>
            <h1>Login to dashboard</h1>
          </div>
        </div>

        <p className="muted">
          This form sends credentials to Laravel and stores the Sanctum token in React.
        </p>

        <form className="login-form" onSubmit={handleLogin}>
          <label htmlFor="email">Email address</label>
          <input
            autoFocus
            id="email"
            type="email"
            value={email}
            onChange={(event) => setEmail(event.target.value)}
          />

          <label htmlFor="password">Password</label>
          <input
            id="password"
            type="password"
            value={password}
            onChange={(event) => setPassword(event.target.value)}
          />

          {error && <p className="alert error">{error}</p>}

          <button type="submit" disabled={loading}>
            {loading ? 'Logging in...' : 'Login'}
          </button>
        </form>
      </section>
    </main>
  );
}

export default Login;

Step 14: React Admin Layout

The admin layout includes:

sidebar
dashboard link
categories link
products link
logout button
main content area

In App.jsx, React decides which screen to show:

{activeScreen === 'categories' ? (
  <CategoryManager token={localStorage.getItem('admin_token')} />
) : activeScreen === 'products' ? (
  <ProductManager token={localStorage.getItem('admin_token')} />
) : (
  <Dashboard
    token={localStorage.getItem('admin_token')}
    onOpenProducts={() => setActiveScreen('products')}
    onLogout={handleLogout}
  />
)}

This keeps the app simple while still giving us multiple admin screens.

The logout function removes the token:

function handleLogout() {
  localStorage.removeItem('admin_token');
  setActiveScreen('dashboard');
  setUser(null);
}

After logout, React shows the login page again.

Here is the final code for frontend/src/App.jsx:

import { useState } from 'react';
import './App.css';
import Login from './Login';
import CategoryManager from './CategoryManager';
import ProductManager from './ProductManager';
import Dashboard from './Dashboard';

function App() {
  const [user, setUser] = useState(null);
  const [activeScreen, setActiveScreen] = useState('dashboard');

  function handleLogout() {
    localStorage.removeItem('admin_token');
    setActiveScreen('dashboard');
    setUser(null);
  }

  if (!user) {
    return <Login onLogin={setUser} />;
  }

  return (
    <div className="admin-layout">
      <aside className="sidebar">
        <div className="brand">
          <div className="brand-logo">LW</div>
          <div>
            <h2>Learn Admin</h2>
            <p>Ecommerce Panel</p>
          </div>
        </div>

        <nav className="nav-list" aria-label="Admin navigation">
          <button
            className={activeScreen === 'dashboard' ? 'nav-link active' : 'nav-link'}
            type="button"
            onClick={() => setActiveScreen('dashboard')}
          >
            Dashboard
          </button>
          <button
            className={activeScreen === 'categories' ? 'nav-link active' : 'nav-link'}
            type="button"
            onClick={() => setActiveScreen('categories')}
          >
            Categories
          </button>
          <button
            className={activeScreen === 'products' ? 'nav-link active' : 'nav-link'}
            type="button"
            onClick={() => setActiveScreen('products')}
          >
            Products
          </button>
        </nav>
      </aside>

      <main className="main-content">
        {activeScreen === 'categories' ? (
          <CategoryManager token={localStorage.getItem('admin_token')} />
        ) : activeScreen === 'products' ? (
          <ProductManager token={localStorage.getItem('admin_token')} />
        ) : (
          <Dashboard
            token={localStorage.getItem('admin_token')}
            onOpenProducts={() => setActiveScreen('products')}
            onLogout={handleLogout}
          />
        )}
      </main>
    </div>
  );
}

export default App;

Step 15: Category Management in React

Category management includes:

list categories
create category
edit category
update category
delete category

React loads categories using:

export function getCategories(token) {
  return apiRequest('/categories', {
    token,
  });
}

Create category:

export function createCategory(category, token) {
  return apiRequest('/categories', {
    method: 'POST',
    token,
    body: JSON.stringify(category),
  });
}

The category form uses controlled inputs, which means React state is the source of truth:

<input
  id="name"
  value={form.name}
  onChange={(event) => setForm({ ...form, name: event.target.value })}
/>

When the form is submitted, React calls Laravel, reloads the list, and shows a success message.

The save function chooses create or update:

async function handleSaveCategory(event) {
  event.preventDefault();
  setSaving(true);
  setError('');
  setMessage('');

  try {
    if (editingId) {
      await updateCategory(editingId, form, token);
      setMessage('Category updated successfully.');
    } else {
      await createCategory(form, token);
      setMessage('Category created successfully.');
    }

    resetForm();
    await loadCategories();
  } catch (error) {
    setError(error.message);
  } finally {
    setSaving(false);
  }
}

This is the same CRUD idea from normal PHP projects, but now the UI and API are separated.

Here is the final code for frontend/src/CategoryManager.jsx:

import { useEffect, useRef, useState } from 'react';
import {
  createCategory,
  deleteCategory,
  getCategories,
  updateCategory,
} from './api';

const emptyForm = {
  name: '',
  slug: '',
  description: '',
  status: true,
};

function CategoryManager({ token }) {
  const [categories, setCategories] = useState([]);
  const [form, setForm] = useState(emptyForm);
  const [editingId, setEditingId] = useState(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');
  const nameInputRef = useRef(null);

  async function loadCategories() {
    const response = await getCategories(token);
    setCategories(response.data || []);
  }

  useEffect(() => {
    if (token) {
      loadCategories();
    }
  }, [token]);

  useEffect(() => {
    if (editingId) {
      nameInputRef.current?.focus();
    }
  }, [editingId]);

  function resetForm() {
    setForm(emptyForm);
    setEditingId(null);
  }

  function handleEdit(category) {
    setError('');
    setMessage('');
    setEditingId(category.id);
    setForm({
      name: category.name,
      slug: category.slug,
      description: category.description || '',
      status: Boolean(category.status),
    });
  }

  async function handleSaveCategory(event) {
    event.preventDefault();
    setSaving(true);
    setError('');
    setMessage('');

    try {
      if (editingId) {
        await updateCategory(editingId, form, token);
        setMessage('Category updated successfully.');
      } else {
        await createCategory(form, token);
        setMessage('Category created successfully.');

      }

      resetForm();
      await loadCategories();
    } catch (error) {
      setError(error.message);
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete(id) {
    setError('');
    setMessage('');
    await deleteCategory(id, token);
    setMessage('Category deleted successfully.');
    await loadCategories();
  }

  return (
    <section className="category-page">
      <header className="page-header">
        <div>
          <p className="eyebrow">Catalog</p>
          <h1>Category Management</h1>
        </div>
      </header>

      <div className="content-grid">
        <form className="panel category-form" onSubmit={handleSaveCategory}>
          <h2>{editingId ? 'Edit category' : 'Create category'}</h2>

          <label htmlFor="name">Name</label>
          <input
            id="name"
            ref={nameInputRef}
            value={form.name}
            onChange={(event) => setForm({ ...form, name: event.target.value })}
            placeholder="Laptops"
          />

          <label htmlFor="slug">Slug</label>
          <input
            id="slug"
            value={form.slug}
            onChange={(event) => setForm({ ...form, slug: event.target.value })}
            placeholder="laptops"
          />

          <label htmlFor="description">Description</label>
          <textarea
            id="description"
            value={form.description}
            onChange={(event) => setForm({ ...form, description: event.target.value })}
            placeholder="Laptop products"
          />

          <label className="checkbox-row">
            <input
              type="checkbox"
              checked={form.status}
              onChange={(event) => setForm({ ...form, status: event.target.checked })}
            />
            Active category
          </label>

          {error && <p className="alert error">{error}</p>}
          {message && <p className="alert success">{message}</p>}

          <div className="button-row">
            <button type="submit" disabled={saving}>
              {saving ? 'Saving...' : editingId ? 'Update Category' : 'Create Category'}
            </button>
            {editingId && (
              <button type="button" className="secondary-button" onClick={resetForm}>
                Cancel
              </button>
            )}
          </div>
        </form>

        <section className="panel category-list">
          <div className="list-header">
            <h2>Categories</h2>
            <span>{categories.length} total</span>
          </div>

          {categories.map((category) => (
            <article className="category-row" key={category.id}>
              <div>
                <strong>{category.name}</strong>
                <span>{category.slug}</span>
              </div>
              <small>{category.status ? 'Active' : 'Inactive'}</small>
              <div className="row-actions">
                <button type="button" className="secondary-button" onClick={() => handleEdit(category)}>
                  Edit
                </button>
                <button type="button" className="danger-button" onClick={() => handleDelete(category.id)}>
                  Delete
                </button>
              </div>
            </article>
          ))}
        </section>
      </div>
    </section>
  );
}

export default CategoryManager;

Step 16: Product Management in React

Product management is similar to category management, but products use FormData because of image upload.

function buildProductFormData() {
  const productData = new FormData();

  productData.append('category_id', form.category_id);
  productData.append('name', form.name);
  productData.append('slug', form.slug);
  productData.append('description', form.description);
  productData.append('price', form.price);
  productData.append('stock', form.stock);
  productData.append('status', form.status ? '1' : '0');

  if (form.image) {
    productData.append('image', form.image);
  }

  return productData;
}

For update with file upload, React sends a POST request and appends _method as PUT:

export function updateProduct(id, product, token) {
  product.append('_method', 'PUT');

  return apiRequest(`/products/${id}`, {
    method: 'POST',
    token,
    body: product,
  });
}

This works nicely with Laravel file upload handling.

Product create, edit and delete follow the same pattern:

build form data
send request to Laravel
show success or error message
reload product list

The image field is special because it stores a file object:

<input
  id="image"
  type="file"
  onChange={(event) => setForm({ ...form, image: event.target.files[0] })}
/>

This file object is later appended into FormData.

Here is the final code for frontend/src/ProductManager.jsx:

import { useEffect, useRef, useState } from 'react';
import {
  createProduct,
  deleteProduct,
  getCategories,
  getProducts,
  updateProduct,
} from './api';

const emptyForm = {
  category_id: '',
  name: '',
  slug: '',
  description: '',
  price: '',
  stock: '',
  image: null,
  status: true,
};

function ProductManager({ token }) {
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [form, setForm] = useState(emptyForm);
  const [editingId, setEditingId] = useState(null);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');
  const nameInputRef = useRef(null);

  async function loadProductData() {
    const [productResponse, categoryResponse] = await Promise.all([
      getProducts(token),
      getCategories(token),
    ]);

    const categoryList = categoryResponse.data || [];

    setProducts(productResponse.data || []);
    setCategories(categoryList);
    setForm((currentForm) => ({
      ...currentForm,
      category_id: currentForm.category_id || categoryList[0]?.id || '',
    }));
  }

  useEffect(() => {
    if (token) {
      loadProductData();
    }
  }, [token]);

  useEffect(() => {
    if (editingId) {
      nameInputRef.current?.focus();
    }
  }, [editingId]);

  function resetForm() {
    setForm({
      ...emptyForm,
      category_id: categories[0]?.id || '',
    });
    setEditingId(null);
  }

  function buildProductFormData() {
    const productData = new FormData();

    productData.append('category_id', form.category_id);
    productData.append('name', form.name);
    productData.append('slug', form.slug);
    productData.append('description', form.description);
    productData.append('price', form.price);
    productData.append('stock', form.stock);
    productData.append('status', form.status ? '1' : '0');

    if (form.image) {
      productData.append('image', form.image);
    }

    return productData;
  }

  function handleEdit(product) {
    setError('');
    setMessage('');
    setEditingId(product.id);
    setForm({
      category_id: product.category_id,
      name: product.name,
      slug: product.slug,
      description: product.description || '',
      price: product.price,
      stock: product.stock,
      image: null,
      status: Boolean(product.status),
    });
  }

  async function handleSaveProduct(event) {
    event.preventDefault();
    setSaving(true);
    setError('');
    setMessage('');

    try {
      const productData = buildProductFormData();

      if (editingId) {
        await updateProduct(editingId, productData, token);
        setMessage('Product updated successfully.');
      } else {
        await createProduct(productData, token);
        setMessage('Product created successfully.');
      }

      resetForm();
      await loadProductData();
    } catch (error) {
      setError(error.message);
    } finally {
      setSaving(false);
    }
  }

  async function handleDelete(id) {
    setError('');
    setMessage('');
    await deleteProduct(id, token);
    setMessage('Product deleted successfully.');
    await loadProductData();
  }

  return (
    <section className="product-page">
      <header className="page-header">
        <div>
          <p className="eyebrow">Catalog</p>
          <h1>Product Management</h1>
        </div>
      </header>

      <div className="content-grid product-grid">
        <form className="panel category-form product-form" onSubmit={handleSaveProduct}>
          <h2>{editingId ? 'Edit product' : 'Create product'}</h2>

          <label htmlFor="category_id">Category</label>
          <select
            id="category_id"
            value={form.category_id}
            onChange={(event) => setForm({ ...form, category_id: event.target.value })}
          >
            {categories.map((category) => (
              <option value={category.id} key={category.id}>
                {category.name}
              </option>
            ))}
          </select>

          <label htmlFor="product_name">Name</label>
          <input
            id="product_name"
            ref={nameInputRef}
            value={form.name}
            onChange={(event) => setForm({ ...form, name: event.target.value })}
            placeholder="Wireless Mouse"
          />

          <label htmlFor="product_slug">Slug</label>
          <input
            id="product_slug"
            value={form.slug}
            onChange={(event) => setForm({ ...form, slug: event.target.value })}
            placeholder="wireless-mouse"
          />

          <label htmlFor="product_description">Description</label>
          <textarea
            id="product_description"
            value={form.description}
            onChange={(event) => setForm({ ...form, description: event.target.value })}
            placeholder="Compact wireless mouse"
          />

          <div className="form-row">
            <div>
              <label htmlFor="price">Price</label>
              <input
                id="price"
                type="number"
                value={form.price}
                onChange={(event) => setForm({ ...form, price: event.target.value })}
                placeholder="49.99"
              />
            </div>
            <div>
              <label htmlFor="stock">Stock</label>
              <input
                id="stock"
                type="number"
                value={form.stock}
                onChange={(event) => setForm({ ...form, stock: event.target.value })}
                placeholder="30"
              />
            </div>
          </div>

          <label htmlFor="image">Image</label>
          <input
            id="image"
            type="file"
            onChange={(event) => setForm({ ...form, image: event.target.files[0] })}
          />

          <label className="checkbox-row">
            <input
              type="checkbox"
              checked={form.status}
              onChange={(event) => setForm({ ...form, status: event.target.checked })}
            />
            Active product
          </label>

          {error && <p className="alert error">{error}</p>}
          {message && <p className="alert success">{message}</p>}

          <div className="button-row">
            <button type="submit" disabled={saving}>
              {saving ? 'Saving...' : editingId ? 'Update Product' : 'Create Product'}
            </button>
            {editingId && (
              <button type="button" className="secondary-button" onClick={resetForm}>
                Cancel
              </button>
            )}
          </div>
        </form>

        <section className="panel product-list">
          <div className="list-header">
            <h2>Products</h2>
            <span>{products.length} total</span>
          </div>

          {products.map((product) => (
            <article className="product-row" key={product.id}>
              <div className="product-info">
                <div className="product-thumb">
                  {product.image ? (
                    <img src={`http://127.0.0.1:8000/storage/${product.image}`} alt={product.name} />
                  ) : (
                    <span>No image</span>
                  )}
                </div>
                <div>
                  <strong>{product.name}</strong>
                  <span>{product.category?.name}</span>
                </div>
              </div>
              <div className="price-stock">
                <span>${product.price}</span>
                <small>{product.stock} in stock</small>
              </div>
              <div className="row-actions">
                <button type="button" className="secondary-button" onClick={() => handleEdit(product)}>
                  Edit
                </button>
                <button type="button" className="danger-button" onClick={() => handleDelete(product.id)}>
                  Delete
                </button>
              </div>
            </article>
          ))}
        </section>
      </div>
    </section>
  );
}

export default ProductManager;

Step 17: Show Uploaded Product Image

When Laravel stores the image path, React can show the image using the Laravel storage URL:

{product.image ? (
  <img
    src={`http://127.0.0.1:8000/storage/${product.image}`}
    alt={product.name}
  />
) : (
  <span>No image</span>
)}

This confirms image upload is working end to end:

React form -> Laravel upload -> storage folder -> MySQL image path -> React image preview.

Step 18: Final Dashboard

The final dashboard loads categories and products from Laravel and calculates useful summary values:

const [categoryResponse, productResponse] = await Promise.all([
  getCategories(token),
  getProducts(token),
]);

const categories = categoryResponse.data || [];
const products = productResponse.data || [];
const activeProducts = products.filter((product) => product.status).length;
const stock = products.reduce((total, product) => total + Number(product.stock || 0), 0);

Then React displays:

total categories
total products
active products
stock units
inventory value
recent products

This gives the admin panel a proper starting screen instead of an empty page.

We also use icons to make the UI feel more polished:

import {
  Boxes,
  DollarSign,
  Layers,
  PackageCheck,
  ShoppingBag,
} from 'lucide-react';

The dashboard is not only decorative. It proves that React can load real API data and calculate useful information from it.

Here is the final code for frontend/src/Dashboard.jsx:

import { useEffect, useState } from 'react';
import {
  Boxes,
  DollarSign,
  Layers,
  LogOut,
  PackageCheck,
  PackagePlus,
  RefreshCw,
  ShoppingBag,
} from 'lucide-react';
import { getCategories, getProducts } from './api';

const moneyFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

const emptySummary = {
  categories: 0,
  products: 0,
  activeProducts: 0,
  stock: 0,
  inventoryValue: 0,
};

function Dashboard({ token, onOpenProducts, onLogout }) {
  const [summary, setSummary] = useState(emptySummary);
  const [recentProducts, setRecentProducts] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  async function loadDashboard() {
    setLoading(true);
    setError('');

    try {
      const [categoryResponse, productResponse] = await Promise.all([
        getCategories(token),
        getProducts(token),
      ]);

      const categories = categoryResponse.data || [];
      const products = productResponse.data || [];
      const activeProducts = products.filter((product) => product.status).length;
      const stock = products.reduce((total, product) => total + Number(product.stock || 0), 0);
      const inventoryValue = products.reduce((total, product) => {
        return total + Number(product.price || 0) * Number(product.stock || 0);
      }, 0);

      setSummary({
        categories: categories.length,
        products: products.length,
        activeProducts,
        stock,
        inventoryValue,
      });
      setRecentProducts(products.slice(0, 5));
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  }

  useEffect(() => {
    if (token) {
      loadDashboard();
    }
  }, [token]);

  const statCards = [
    { label: 'Categories', value: summary.categories, note: 'Product groups', Icon: Layers },
    { label: 'Products', value: summary.products, note: 'Catalog items', Icon: ShoppingBag },
    { label: 'Active Products', value: summary.activeProducts, note: 'Visible in store', Icon: PackageCheck },
    { label: 'Stock Units', value: summary.stock, note: 'Total inventory', Icon: Boxes },
  ];

  return (
    <section className="dashboard-page">
      <header className="page-header">
        <div>
          <p className="eyebrow">Dashboard</p>
          <h1>Ecommerce Overview</h1>
        </div>
        <div className="dashboard-actions">
          <button type="button" onClick={onOpenProducts}>
            <PackagePlus size={18} />
            Add Product
          </button>
          <button type="button" className="secondary-button" onClick={loadDashboard}>
            <RefreshCw size={18} />
            Refresh
          </button>
          <button type="button" className="secondary-button" onClick={onLogout}>
            <LogOut size={18} />
            Log Out
          </button>
        </div>
      </header>

      {error && <p className="alert error">{error}</p>}
      {loading && <p className="panel muted">Loading dashboard...</p>}

      <section className="dashboard-grid" aria-label="Dashboard summary">
        {statCards.map((stat) => {
          const Icon = stat.Icon;

          return (
            <article className="dashboard-card" key={stat.label}>
              <Icon size={24} />
              <span>{stat.label}</span>
              <strong>{stat.value}</strong>
              <small>{stat.note}</small>
            </article>
          );
        })}
        <article className="dashboard-card highlight-card">
          <DollarSign size={24} />
          <span>Inventory Value</span>
          <strong>{moneyFormatter.format(summary.inventoryValue)}</strong>
          <small>Based on product price and stock</small>
        </article>
      </section>

      <section className="dashboard-main-grid">
        <article className="panel recent-products-panel">
          <div className="list-header">
            <h2>Recent Products</h2>
            <span>{recentProducts.length} shown</span>
          </div>

          <div className="recent-table">
            {recentProducts.map((product) => (
              <div className="recent-row" key={product.id}>
                <strong>{product.name}</strong>
                <span>{product.category?.name || 'No category'}</span>
                <span>{moneyFormatter.format(Number(product.price || 0))}</span>
                <small>{product.stock} in stock</small>
              </div>
            ))}
          </div>
        </article>

        <aside className="panel final-note">
          <p className="eyebrow">Final polish</p>
          <h2>Full stack flow is complete</h2>
          <p>React talks to Laravel, Laravel validates and stores data, and MySQL keeps the ecommerce records safe.</p>
        </aside>
      </section>
    </section>
  );
}

export default Dashboard;

Here is the final code for frontend/src/App.css:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #eef2f7;
  color: #172033;
  font-family: Arial, Helvetica, sans-serif;
}

button,
a {
  font: inherit;
}

.admin-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}

.sidebar {
  background: #172033;
  color: #ffffff;
  padding: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.brand-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #e11d48;
  font-weight: 700;
}

.brand h2,
.brand p {
  margin: 0;
}

.brand p {
  color: #a7b4c8;
  font-size: 14px;
}

.nav-list {
  display: grid;
  gap: 10px;
}

.nav-link {
  color: #cbd5e1;
  text-decoration: none;
  padding: 12px;
  border-radius: 8px;
}

.nav-link.active,
.nav-link:hover {
  background: #263449;
  color: #ffffff;
}

.main-content {
  padding: 32px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.page-header p,
.page-header h1 {
  margin: 0;
}

.page-header p {
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}

.page-header button {
  border: 0;
  border-radius: 8px;
  background: #e11d48;
  color: #ffffff;
  padding: 12px 16px;
  font-weight: 700;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.info-card {
  background: #ffffff;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  padding: 22px;
}

.info-card span {
  color: #64748b;
}

.info-card strong {
  display: block;
  margin: 10px 0;
  font-size: 36px;
}

.info-card p {
  margin: 0;
  color: #64748b;
}

@media (max-width: 760px) {
  .admin-layout,
  .card-grid {
    grid-template-columns: 1fr;
  }

  .page-header {
    align-items: flex-start;
    flex-direction: column;
  }
}


.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}


.auth-card {
  width: min(100%, 460px);
  background: #ffffff;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(23, 32, 51, 0.08);
}

.login-brand {
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 6px;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.auth-card h1 {
  margin: 0;
  font-size: 30px;
}

.muted {
  color: #64748b;
  line-height: 1.6;
}


.login-form {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.login-form label {
  font-weight: 700;
}

.login-form input {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
}


button:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

button {
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: none;
}

.alert {
  margin: 0;
  border-radius: 8px;
  padding: 10px 12px;
}

.alert.error {
  background: #fee2e2;
  color: #991b1b;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.secondary-button {
  background: #e2e8f0 !important;
  color: #172033 !important;
}


.panel {
  background: #ffffff;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(23, 32, 51, 0.08);
}

.nav-link {
  border: 0;
  text-align: left;
  background: transparent;
}


.content-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 20px;
  align-items: start;
}

.category-form {
  display: grid;
  gap: 12px;
}


.category-form label {
  font-weight: 700;
}

.category-form input,
.category-form textarea {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
}

.category-form textarea {
  min-height: 96px;
  resize: vertical;
}

.checkbox-row,
.button-row,
.row-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.checkbox-row input {
  width: auto;
}


.alert.success {
  background: #dcfce7;
  color: #166534;
}

.danger-button {
  background: #fee2e2;
  color: #991b1b;
}

.list-header,
.category-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.list-header {
  margin-bottom: 14px;
}

.list-header h2 {
  margin: 0;
}

.category-row {
  border-top: 1px solid #e2e8f0;
  padding: 14px 0;
}

.category-row strong,
.category-row span {
  display: block;
}

.category-row span,
.list-header span {
  color: #64748b;
}

.category-row small {
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  padding: 5px 10px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .category-row {
    align-items: flex-start;
    flex-direction: column;
  }
}


.product-grid {
  grid-template-columns: minmax(300px, 460px) 1fr;
}

.category-form select,
.category-form input[type="file"] {
  width: 100%;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 12px 14px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.product-list {
  display: grid;
  gap: 14px;
}

.product-row {
  border-top: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
}

.product-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.product-thumb {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #e2e8f0;
  color: #64748b;
  font-size: 12px;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info strong,
.product-info span,
.price-stock span,
.price-stock small {
  display: block;
}

.product-info span,
.price-stock small {
  color: #64748b;
}

.price-stock {
  text-align: right;
}

@media (max-width: 980px) {
  .product-grid,
  .product-row,
  .form-row {
    grid-template-columns: 1fr;
  }

  .price-stock {
    text-align: left;
  }
}


.dashboard-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dashboard-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.dashboard-card {
  background: #ffffff;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  padding: 20px;
}

.dashboard-card svg {
  color: #0f8db3;
  margin-bottom: 12px;
}

.dashboard-card span,
.dashboard-card small {
  color: #64748b;
}

.dashboard-card strong {
  display: block;
  margin: 10px 0;
  font-size: 30px;
}

.highlight-card {
  border-color: #bae6fd;
  background: #f0f9ff;
}

.dashboard-main-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.recent-table {
  display: grid;
}

.recent-row {
  border-top: 1px solid #e2e8f0;
  display: grid;
  grid-template-columns: 1.5fr 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
}

.recent-row span,
.recent-row small,
.final-note p {
  color: #64748b;
}

.final-note h2 {
  margin-top: 0;
}

@media (max-width: 1100px) {
  .dashboard-grid,
  .dashboard-main-grid,
  .recent-row {
    grid-template-columns: 1fr;
  }
}

Full API Endpoints

Here are the important API endpoints we build in this project:

POST   /api/login
GET    /api/user
POST   /api/logout

GET    /api/categories
POST   /api/categories
GET    /api/categories/{category}
PUT    /api/categories/{category}
DELETE /api/categories/{category}

GET    /api/products
POST   /api/products
GET    /api/products/{product}
PUT    /api/products/{product}
DELETE /api/products/{product}

For product update with image upload, React sends:

POST /api/products/{product}
_method=PUT

This is a common Laravel-friendly way to update records with multipart form data.

Common Issues and Fixes

CORS or API Not Connecting

Make sure Laravel is running:

php artisan serve

And React should call:

http://127.0.0.1:8000/api

Database Error

Check .env:

DB_DATABASE=ecommerce_admin
DB_USERNAME=learnwebcoding
DB_PASSWORD=

Then run:

php artisan migrate

Image Not Showing

Make sure storage link is created:

php artisan storage:link

And image URL should use:

http://127.0.0.1:8000/storage/products/image-name.jpg

Unauthorized Request

If Laravel returns unauthorized, check that React is sending the token:

Authorization: Bearer token_here

Also make sure the token is saved after login:

localStorage.setItem('admin_token', response.token);

Full Series Roadmap

This consolidated tutorial is based on the complete video series:

Course Introduction & Project Overview
Laravel API Setup & MySQL Database
Database Design, Migrations & Models
Build Categories REST API
Build Products REST API With Image Upload
Authentication With Laravel Sanctum
React Admin Setup & Layout
Connect React Login With Laravel API
Category Management In React
Product Management In React
Dashboard & Final Polish

Final Project Flow

Here is the complete full-stack flow:

Admin opens React app.
React shows login page.
Login request goes to Laravel.
Laravel validates user and returns Sanctum token.
React stores token in local storage.
React sends category and product API requests with the token.
Laravel validates requests and runs Eloquent queries.
MySQL stores categories, products, and user data.
Laravel returns JSON.
React updates the screen.

That is the core of a real Laravel and React full-stack application.

What You Should Practice Next

After completing this project, try improving it with:

better validation messages
pagination
product search
category filters
role-based admin users
dashboard charts
deployment

These features can turn the learning project into a more production-ready application.

GitHub Repository

You can also check the complete source code here:

https://github.com/durgesh-sahani/full-stack-laravel-react-mysql/ecommerce-admin-panel

Conclusion

In this full-stack series, we built an ecommerce admin panel using Laravel, React and MySQL. We started from API setup, database design, migrations and models, then created category and product APIs, added image upload, protected everything with Sanctum authentication, and finally connected React screens for login, category management, product management and dashboard polish.

If you are moving from basic PHP, HTML, CSS and JavaScript into modern full-stack development, this project gives you a clear practical path: backend API, database, frontend UI, authentication, CRUD operations and real browser testing.

I Built an Android App Using AI — After Failing Twice Since 2019

Durgesh Sahani — Wed, 08 Apr 2026 05:58:43 +0000

🚀 I Built an Android App Using AI — After Failing Twice Since 2019

In 2019, during COVID, I built a small learning website for my daughter.

👉 https://baalvidya.in

It was a simple tool to help with daily practice:

📚 Alphabets & Varnamala
🔢 Numbers, Tables & Maths
✍️ Patterns & Writing Practice
🎨 Colors & Drawing
🧩 Matching, Puzzles & more

It solved a real problem for us — repetition.

❌ The App That Never Happened

I tried turning it into an Android app.

Attempt 1:
Wrapped the website in a WebView
→ Rejected by Play Store

Attempt 2:
Started a native app with a friend
→ I built APIs, he worked on UI
→ Project abandoned midway

Eventually, I even lost my developer account due to inactivity.

Like many side projects… it stopped.

💡 2026: Trying Again With AI

This year, I decided to revisit the idea — but with a different approach.

Instead of planning everything upfront, I used AI as a development partner.

⚙️ How I Used AI in the Build

Here’s what AI actually helped me with:

Choosing the tech stack
Structuring backend APIs
Generating Android UI components
Fixing layout issues across devices (phones + tablets)
Debugging and iterative improvements
Generating assets (icons, banners, screenshots)
Writing Play Store metadata

The workflow became:

Idea → Prompt → Generate → Test → Iterate

This drastically reduced friction in development.

🧠 Key Observations
AI doesn’t replace thinking
It accelerates execution, but clarity still matters.
Iteration becomes cheap
You can try multiple approaches quickly.
Solo dev is now viable for larger projects
What previously required a team can now be done alone (with AI support).
🔥 The Result

Working mostly on weekends, I was able to complete what I had left unfinished for years.

👉 BaalVidya is now live on Play Store (Android):
https://play.google.com/store/apps/details?id=com.balvidya.learning

🎯 Why I Built This

Two reasons:

To learn
To prove I can finish it

Both happened.

💭 Final Thought

If you have an unfinished project, revisit it.

The ecosystem has changed.
The tools have changed.
You have changed.

Maybe now is the right time to ship.

📦 Bonus: What I’d Do Differently
Start with native instead of WebView
Keep scope smaller in early versions
Test early with real users
Focus on finishing, not perfecting

Migration from Rackspace Server to Google Cloud Platform(GCP)

Durgesh Sahani — Thu, 23 Mar 2023 06:49:18 +0000

Migrating from a Rackspace server to the Google Cloud Platform (GCP) can be a daunting task, but it can also bring many benefits such as scalability, security, and cost savings. In this blog, we will walk through the process of migrating from a Rackspace server to GCP and discuss some of the key considerations and best practices to keep in mind.

Before beginning the migration process, it is important to plan and prepare for the move. This includes identifying which resources and data need to be migrated, as well as determining the most efficient and cost-effective way to move them.

RackSpace Server

Server
- Hardwares
- 8GB RAM, 100GB SSD
- Softwares
- Debian 10, Apache 2.4, PHP 7.4
Database
- MySQL 5.7
Resources
- Images, PDF’s, Excel, etc
DNS
- Domain, Subdomain, Other Records like CNAME, A, TXT, MX, etc
Additional Dependency’s
- Additional Softwares like: RabbitMQ, Elasticsearch, CRONS, etc
- Check Enabled PORTS like: 80, 443, 21, etc

One of the most important considerations for migration is the data. It is important to take a full backup of all data on the Rackspace server, including databases, files, and configurations. This backup should be tested to ensure that it can be restored successfully.

Next, it is important to choose the appropriate GCP services for your workloads. GCP offers a wide range of services, including compute, storage, networking, and databases, that can be used to run your applications and store your data. Depending on the specific requirements of your workloads, you may want to use services like Google Compute Engine, Google Kubernetes Engine, Google Cloud Storage, or Cloud SQL.

Create Replica Of RackSpace Server to Google Cloud Platform(GCP)

Server – Google Compute Engine
- Hardwares
- 8GB RAM, 100GB SSD
- Softwares
- Debian 10, Apache 2.4, PHP 7.4
Database – Cloud SQL
- MySQL 5.7
Resources – Cloud Storage
- Images, PDF’s, Excel, etc
- Created/Configured CDN with Loadbalancer to access these resources
DNS – Cloud DNS
- Domain, Subdomain, Other Records like CNAME, A, TXT, MX, etc
Additional Dependency’s
- Additional Softwares like: RabbitMQ, Elasticsearch, CRONS, etc
- Enabled PORTS like: 80, 443, 21, etc

Along with server migration we moved all resources to Google Cloud Bucket and created CDN to access them. We have also updated the code to access file from CDN, upload files to Cloud bucket, Download file from Cloud bucket. By following these steps, we have optimise our server resources and improve your website’s overall performance.

To do this you have to make sure you have given right permission to bucket so files can be accessible, also handle the CORS issue by making some configuration changes in cloud bucket. Another issue we faced was resizing images as first we have to download it then resize and finally upload it again.

Once you have chosen the appropriate GCP services, you can begin migrating your data and resources. There are several different methods for migrating data and resources, including manual migration, using migration tools, or using a hybrid approach. The method you choose will depend on the size and complexity of your workloads, as well as the resources and expertise available to you.

Google Cloud Platform offers a range of powerful tools like gsutil that can greatly simplify and automate many tasks related to managing and using cloud services.

Gsutil is a command-line tool that allows you to interact with Cloud Storage from the command line. With gsutil, you can also automate tasks such as backups, synchronizing data between local and cloud storage, and running batch jobs. This can save you time and effort, and help you to more efficiently manage your cloud resources.

We configured it to Rackspace server to transfer all the resources(Images, PDF’s, Excel files, etc), exported mysql databases.

Another helpful tool we used was SCREEN.

The screen tool is a terminal multiplexer that allows you to create multiple “virtual” terminals within a single terminal window. This can be useful for a variety of tasks, including running multiple commands simultaneously, detaching from a terminal session while leaving the commands running in the background, and transferring larger files in the background.

To transfer larger files in the background using screen, you can start a screen session and then initiate the file transfer using a command-line tool such as rsync or scp In our case we used gsutil. Once the transfer has started, you can detach from the screen session using the key combination Ctrl+a d. This will leave the transfer running in the background and allow you to continue using the terminal for other tasks.

To reattach to the screen session and check the progress of the transfer, you can use the command screen -r. This will restore the screen session and allow you to view the output of the running commands.

It’s also important to keep in mind the security and compliance requirements during this migration process. GCP provides various security and compliance features such as encryption, firewalls, and identity and access management to keep your data and resources secure.

Once the migration is complete, it is important to thoroughly test your applications and services to ensure that they are working as expected. This includes monitoring the performance of your workloads, troubleshooting any issues that may arise, and making any necessary adjustments to your GCP configuration.

Some major issues we faces post migrations are:

We experience slowness issue on production server. Root cause was cache was disabled in Apache, innodb buffer size, query cache mode was disabled in MySQL.
Apache configuration updates were missing like: http_module, rewrite_module, headers_module, ssl_module. Execute this apachectl -M command to get all the list of modules.
Missed to update MySQL modes like: NO_ENGINE_SUBSTITUTION, innodb_buffer_pool_size, query_cache_size, etc Directory permissions were missing to create folders, upload files, etc.
Email with attachments were missing the file as file were on bucket not on server anymore.

In conclusion, migrating from a Rackspace server to GCP can be a complex process, but it can bring many benefits such as scalability, security, and cost savings. It’s important to plan and prepare for the move, choose the appropriate GCP services, and keep in mind the security and compliance requirements during the migration process. It’s also important to thoroughly test your applications and services after the migration to ensure that they are working as expected.

Thanks for taking the time to read this. If you have any further questions or need more information, please don't hesitate to ask.

Reach Out

https://learnwebcoding.in/
learnwebcoding.in@gmail.com

Upgrading from PHP 5.6 to PHP 7.4

Durgesh Sahani — Tue, 21 Mar 2023 05:17:16 +0000

Upgrading from PHP 5.6 to 7.4 can be a daunting task, but it is important to do so in order to take advantage of the many new features and performance improvements in the latest version of the language.

Before starting the upgrade process, it is important to thoroughly test your application on a development or staging server to ensure that it is compatible with PHP 7.4. This will allow you to identify and fix any issues before deploying to a production environment.

One of the biggest changes in PHP 7.4 is the deprecation of several functions and features that were previously available in PHP 5.6. For example, the create_function() function has been removed, and the mysql_* functions have been deprecated in favor of the mysqli_* or PDO_* functions.

Additionally, certain syntax changes have been made in PHP 7.4. For example, the list() function now requires parentheses, and the callable type has been replaced with Closure.

It is also important to note that PHP 7.4 has removed support for several older versions of popular extensions, such as mcrypt, and openssl. It’s important that you update these to the latest version of these extensions to be compatible with PHP 7.4.

Once all compatibility issues have been addressed, the actual process of upgrading can begin. This typically involves updating the PHP version on the server and updating any necessary extensions.

It’s also important to note that you should also update any dependencies and libraries that are used by your application. This includes updating any frameworks or libraries that are used by your application.

Once the upgrade is complete, it is important to thoroughly test your application again to ensure that everything is working as expected.

Some major issues we faces post migrations are:

We migrated from mysql_* with PDO

We implemented PDO in such a way that it can also handle read-replica in future Db::getPdoRead, Db::getPdoWrite, but there was a challenge in the beginning, team was making mistake to using it in right object which actually created problem for form data not being stored in database,
Converting bigger SELECT with multiple tables joins and multiple parameters query to PDO
Another issue we faced was after conversion sometime response got swapped index_value to key_value or voice-versa
Other issue related to same we faced was we have to fetchAll() record but we use fetch() or voice-versa we created data mismatch
We decided to replace mysql_real_escape_string() with addslashes() which created another issue on production while saving html contents.

Merging branches, lots of conflicts, if someone forgot to rebase or worked for weeks without taking updates. It took week to resolve conflicts.

In summary, upgrading from PHP 5.6 to 7.4 can be a complex process, but it is important to do so in order to take advantage of the many new features and performance improvements in the latest version of the language. It’s important to thoroughly test your application before and after the upgrade, and to update any necessary dependencies and libraries.

Thanks for taking the time to read this. If you have any further questions or need more information, please don't hesitate to ask.

Reach Out

https://learnwebcoding.in/
learnwebcoding.in@gmail.com

Unlocking the Power of Offshore Development Teams: How to Build a Successful Remote Team in India

Durgesh Sahani — Thu, 23 Feb 2023 05:13:04 +0000

As the world becomes more interconnected, businesses are expanding their reach beyond borders to tap into new markets and take advantage of cost-effective solutions. One such solution is offshore development teams, which have become increasingly popular among companies looking to streamline their operations and reduce costs. Offshore development teams provide access to skilled professionals at a fraction of the cost of hiring in-house staff, and they offer a range of benefits that can help businesses achieve their long-term goals. In this blog, we'll explore the advantages of offshore development teams and why they're a smart choice for US/UK-based companies looking to stay ahead of the competition.

Why offshore team is better options than hiring contractors, freelancers?

Offshore teams offer several advantages over hiring contractors or freelancers for software development.
Firstly, offshore teams are generally more reliable and consistent than hiring individual contractors or freelancers. Offshore teams are often composed of multiple team members, which means that there is more accountability and less reliance on any one individual. This can help ensure that deadlines are met, quality is consistent, and work is completed on time.

Secondly, offshore teams typically offer a broader range of skills and expertise than individual contractors or freelancers. An offshore team is often composed of multiple developers with different areas of expertise, such as front-end development, back-end development, database management, and more. This can help ensure that all aspects of a project are covered and that there are no gaps in knowledge or skill.

Thirdly, offshore teams are often more cost-effective than hiring contractors or freelancers. Offshore teams are typically based in countries with lower labor costs, which means that the cost of hiring a team of developers can be significantly lower than the cost of hiring individual contractors or freelancers.
Finally, offshore teams are often able to provide better project management and support than individual contractors or freelancers. Offshore teams typically have project managers and other support staff who can help ensure that the project runs smoothly and that any issues or challenges are addressed promptly.

Overall, offshore teams can offer a number of advantages over hiring contractors or freelancers for software development, including reliability, expertise, cost-effectiveness, and project management and support.

Now lets talk about Opportunities, Challenges, Solutions and Long-term goals

Opportunities:
Despite the challenges, offshore development teams in India offer several opportunities for US/UK companies. One of the biggest opportunities is cost savings. Offshore development teams in India can offer up to 50-70% cost savings compared to in-house teams. India's highly skilled workforce and large pool of talent offer a wide range of expertise and skills for US/UK companies to tap into. This can help companies to access a wider talent pool, improve productivity and reduce time to market.
Challenges:
However, setting up an offshore development team in India is not without its challenges. One of the biggest challenges is the cultural and language barrier. It is important for US/UK companies to understand the cultural differences and work towards bridging the gap. Language is another barrier that can affect communication and productivity. Finding the right talent and managing them remotely can also be a challenge.
Solutions:
To overcome the challenges and make the most of the opportunities, US/UK companies need to adopt certain strategies. One of the most important strategies is to partner with a reliable and experienced offshore development team provider in India. This can help companies to overcome the cultural and language barriers, as well as ensure that they have access to the right talent. Building a strong and collaborative relationship with the offshore team is also crucial for success.
Long-term goals:
Offshore development teams in India can offer several long-term benefits for US/UK companies. By leveraging India's highly skilled workforce and cost advantages, companies can focus on innovation, growth, and expanding their global reach. Offshore development teams can also offer a flexible and scalable solution that can adapt to the changing needs of the company. This can help companies to stay competitive and agile in the rapidly evolving business landscape.
In conclusion, offshore development teams in India offer several benefits and opportunities for US/UK companies. However, it is important to understand the challenges and adopt the right strategies to make the most of the offshore team. With the right partner, US/UK companies can build a successful and long-lasting offshore development team in India.

How we are helping company’s to scale?

As a seasoned software engineer with over 10 years of experience in the industry, I have seen the immense value that offshore teams can bring to a company. Many businesses in the US and UK are facing the challenge of finding skilled developers who are not only affordable but also capable of delivering high-quality work.
That's where we come in - our company, based in India, specializes in building offshore teams that are tailor-made to meet the unique needs of our clients. We understand that every business is different, and we work closely with our clients to create teams that are perfectly suited to their specific requirements.
One of the biggest advantages of working with an offshore team is the cost savings that come with it. With salaries and expenses in India being significantly lower than those in the US or UK, companies can save up to 50-70% on their development costs without sacrificing quality or reliability.
But cost savings are just the beginning - offshore teams also offer a range of other benefits that can help companies to achieve their long-term goals. For example, by tapping into a global talent pool, businesses can access a wider range of skills and experience than they might find locally. This can lead to more innovative solutions, better products, and a stronger competitive edge.
Of course, there are also challenges that come with building an offshore team, such as language and cultural barriers, time zone differences, and communication issues. But these challenges can be overcome with the right approach and the right partner. Our team is experienced in working with clients from around the world, and we have developed processes and tools to ensure seamless collaboration and communication across borders.

In conclusion, offshore teams offer a compelling solution for businesses that are looking to stay competitive in a rapidly changing marketplace. By working with a company like ours, US and UK companies can access a pool of talented developers at a fraction of the cost, without sacrificing quality or reliability. So why not take advantage of this opportunity and start building your offshore team today?

Thanks for taking the time to read this. If you have any further questions or need more information, please don't hesitate to ask.

Reach Out

https://dwebworks.in/
dwebworks.in@gmail.com

React CRUD operations using PHP API and MySQL

Durgesh Sahani — Tue, 18 Jan 2022 13:38:34 +0000

What we are going to learn?

ReactJs introduction, Create React APP, NodeJs NPM and Homebrew installations
Create Link and Handle Routing in React | react-router-dom package installation
Create database in PHPMyAdmin and design form in React Component
Create PHP API and consume using axios | handle CORS issue on localhost
Connect MySQL database using PDO | Access React form data and Save in Database
Create GET PHP API and consume in React using axios | List in react table component
Load user details for edit form and create PHP PUT API to update user data
Create DELETE PHP API, consume it using axios and delete user from database

What is ReactJs?

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications. Here is the official website of ReactJs https://reactjs.org/.

To create react app you’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.

What is NodeJs and NPM?

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. You can download from official NodeJs website: https://nodejs.org/en/. NPM will get install along with NodeJs. NPM is the default package manager for the JavaScript runtime environment NodeJs.

What is Homebrew?

For mac you can also use Homebrew to install it on your machine. Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple’s operating system, macOS, as well as Linux. The name is intended to suggest the idea of building software on the Mac depending on the user’s taste. here is the official website https://brew.sh/

Install Homebrew
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install NodeJs
brew install nodejs

Create ReactJS APP
npx create-react-app react-crud

npx is not a typo — it’s a package runner tool that comes with npm 5.2+.

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.

Run react app

cd react-crud
npm start

Now visit to following link you should be able to see ReactApp running:
http://localhost:3000/

To create RestFull API, we’ll be needing PHP, MYSQL and Apache. You are free to install each software separately and configure them or use stacked app. In my case I’m going to use MAMP(Mac Apache MySQL PHP) which is design for mac and comes with all required softwares

What is PHP?

PHP is a open-source general-purpose server side scripting language that is especially suited to web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1994. The PHP reference implementation is now produced by The PHP Group.

What is MySQL?

MySQL is an open-source relational database management system. Its name is a combination of “My”, the name of co-founder Michael Widenius’s daughter, and “SQL”, the abbreviation for Structured Query Language.

What is Apache?

The Apache HTTP Server is a free and open-source cross-platform web server software, released under the terms of Apache License 2.0. Apache is developed and maintained by an open community of developers under the auspices of the Apache Software Foundation.

Stacked Application

WAMP for Windows
https://www.wampserver.com/en/
LAMP for Linux
https://bitnami.com/stack/lamp/installer
MAMP for Mac
https://www.mamp.info/en/mac/
XAMPP: Open Source, Cross-platform
https://www.apachefriends.org/index.html

Awesome now we are all set to start. Open you project to your favourite code editor in my case I’m using Visual Studio Code.

Create Link and Handle Routing in React | react-router-dom package installation

Create new directory components under your src/ directory and create 3 new components which we’ll update shortly:
src/components/ListUser.js

export default function ListUser() {
  return (
      <h1>List Users</h1>
  );
}

src/components/CreateUser.js

export default function CreateUser() {
  return (
      <h1>Create User</h1>
  );
}

src/components/UpdateUser.js

export default function UpdateUser() {
  return (
      <h1>Update User</h1>
  );
}

Now let’s Install react router for creating link and configuring routes
npm install react-router-dom

Update App.js for handling routing

import {BrowserRouter, Routes, Route, Link} from 'react-router-dom';
import './App.css';
import CreateUser from './components/CreateUser';
import EditUser from './components/EditUser';
import ListUser from './components/ListUser';
function App() {
  return (
    <div className="App">
      <h5>React CRUD operations using PHP API and MySQL</h5>
      <BrowserRouter>
        <nav>
          <ul>
            <li>
              <Link to="/">List Users</Link>
            </li>
            <li>
              <Link to="user/create">Create User</Link>
            </li>
          </ul>
        </nav>
        <Routes>
          <Route index element={<ListUser />} />
          <Route path="user/create" element={<CreateUser />} />
          <Route path="user/:id/edit" element={<EditUser />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

Create database in PHPMyAdmin and design form in React Component

CREATE DTAABASE react_crud;

CREATE TABLE `react_crud`.`users` 
(
`id` int NOT NULL auto_increment,
`name` varchar(50),
`email` varchar(60),
`mobile` bigint(10),
`created_at` timestamp,
`updated_at` timestamp, PRIMARY KEY (id)
);

Update src/components/CreateUser.js

import { useState } from "react";
export default function ListUser() {
    const [inputs, setInputs] = useState([]);
    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}));
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(inputs);
    }
    return (
        <div>
            <h1>Create user</h1>
            <form onSubmit={handleSubmit}>
                <table cellSpacing="10">
                    <tbody>
                        <tr>
                            <th>
                                <label>Name: </label>
                            </th>
                            <td>
                                <input type="text" name="name" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Email: </label>
                            </th>
                            <td> 
                                <input type="text" name="email" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Mobile: </label>
                            </th>
                            <td>
                                <input type="text" name="mobile" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2" align ="right">
                                <button>Save</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    )
}

Create PHP API and consume using axios | handle CORS issue on localhost

Install axios for making API calls from ReactJs
npm install axios

Now update your src/components/CreateUser.js file again for making POST API call

import axios from "axios";
const handleSubmit = (event) => {
    event.preventDefault();
    axios.post('http://localhost:8888/api/user/save', inputs).then(function(response){
        console.log(response.data);
    });
}

Create PHP file for writing API and name it index.php

<?php
    header('Access-Control-Allow-Origin: *');
    header("Access-Control-Allow-Headers: *");
    echo "Testing";
?>

Notice at the top we have added headers to solved CORS issue.
Also, Let’s create .htaccess file to handle pretty URLs like PHP lumen framework, and add following line inside.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.php [L]

Hoola, Finally our API file is ready.

Connect MySQL database using PDO | Access React form data and Save in Database

Now, Let’s create a database connect file and name it DbConnect.php and add following code snippet inside. Update credentials as per yours and it will connect to your database using PDO(PHP Data Object).

<?php
    /**
    * Database Connection
    */
    class DbConnect {
        private $server = 'localhost';
        private $dbname = 'react_crud';
        private $user = 'root';
        private $pass = '';
        public function connect() {
            try {
                $conn = new PDO('mysql:host=' .$this->server .';dbname=' . $this->dbname, $this->user, $this->pass);
                $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                return $conn;
            } catch (\Exception $e) {
                echo "Database Error: " . $e->getMessage();
            }
        }

    }
?>

Create POST API

include("DbConnect.php");
    $conn = new DbConnect();
    $db = $conn->connect();
    $method = $_SERVER['REQUEST_METHOD'];
    switch($method) {
        case 'POST':
            $user = json_decode(file_get_contents('php://input'));
            $sql = "INSERT INTO users(id, name, email, mobile, created_at) values(null, :name, :email, :mobile, :created_at)";
            $stmt = $db->prepare($sql);
            $date = date('Y-m-d');
            $stmt->bindParam(':name', $user->name);
            $stmt->bindParam(':email', $user->email);
            $stmt->bindParam(':mobile', $user->mobile);
            $stmt->bindParam(':created_at', $date);
            if($stmt->execute()) {
                $data = ['status' => 1, 'message' => "Record successfully created"];
            } else {
                $data = ['status' => 0, 'message' => "Failed to create record."];
            }
            echo json_encode($data);
            break;
}

// Reference database connection class file and connect to MySQL Database
include("DbConnect.php");
$conn = new DbConnect();
$db = $conn->connect();

// Give you Method used to hit API
$method = $_SERVER['REQUEST_METHOD'];

// Read the POST JSON data and convert it into PHP Object
$user = json_decode(file_get_contents('php://input'));

Create GET PHP API and consume in React using axios | List in react table component

Update src/components/ListUser.js

import axios from "axios"
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
export default function ListUser() {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        getUsers();
    }, []);
    function getUsers() {
        axios.get('http://localhost:8888/api/users/').then(function(response) {
            console.log(response.data);
            setUsers(response.data);
        });
    }
    return (
        <div>
            <h1>List Users</h1>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map((user, key) =>
                        <tr key={key}>
                            <td>{user.id}</td>
                            <td>{user.name}</td>
                            <td>{user.email}</td>
                            <td>{user.mobile}</td>
                            <td>
                                <Link to={`user/${user.id}/edit`} style={{marginRight: "10px"}}>Edit</Link>
                                <button>Delete</button>
                            </td>
                        </tr>
                    )}

                </tbody>
            </table>
        </div>
    )
}

Update index.php file for adding new GET API to get all users

case 'GET':
    $sql = "SELECT * FROM users";
    $stmt = $db->prepare($sql);
    $stmt->execute();
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);        
    echo json_encode($users);
    break;

Load user details for edit form and create PHP PUT API to update user data

Update src/components/UpdateUser.js

import { useState, useEffect } from "react";
import axios from "axios";
import { useNavigate, useParams } from "react-router-dom";
export default function ListUser() {
    const navigate = useNavigate();
    const [inputs, setInputs] = useState([]);
    const {id} = useParams();
    useEffect(() => {
        getUser();
    }, []);
    function getUser() {
        axios.get(`http://localhost:8888/api/user/${id}`).then(function(response) {
            console.log(response.data);
            setInputs(response.data);
        });
    }
    const handleChange = (event) => {
        const name = event.target.name;
        const value = event.target.value;
        setInputs(values => ({...values, [name]: value}));
    }
    const handleSubmit = (event) => {
        event.preventDefault();
        axios.put(`http://localhost:8888/api/user/${id}/edit`, inputs).then(function(response){
            console.log(response.data);
            navigate('/');
        });

    }
    return (
        <div>
            <h1>Edit user</h1>
            <form onSubmit={handleSubmit}>
                <table cellSpacing="10">
                    <tbody>
                        <tr>
                            <th>
                                <label>Name: </label>
                            </th>
                            <td>
                                <input value={inputs.name} type="text" name="name" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Email: </label>
                            </th>
                            <td> 
                                <input value={inputs.email} type="text" name="email" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <label>Mobile: </label>
                            </th>
                            <td>
                                <input value={inputs.mobile} type="text" name="mobile" onChange={handleChange} />
                            </td>
                        </tr>
                        <tr>
                            <td colSpan="2" align ="right">
                                <button>Save</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    )
}

Update get method to return specific user details by ID

case "GET": 
        $sql = "SELECT * FROM users";
        $path = explode('/', $_SERVER['REQUEST_URI']);
        if(isset($path[3]) && is_numeric($path[3])) {
            $sql .= " WHERE id = :id";
            $stmt = $conn->prepare($sql);
            $stmt->bindParam(':id', $path[3]);
            $stmt->execute();
            $users = $stmt->fetch(PDO::FETCH_ASSOC);
        } else {
            $stmt = $conn->prepare($sql);
            $stmt->execute();
            $users = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }

        echo json_encode($users);
        break;

Now create update API to Handle PUT request

case "PUT": 
            $user = json_decode( file_get_contents('php://input') );
            $sql = "UPDATE users SET name= :name, email =:email, mobile =:mobile, updated_at =:updated_at WHERE id = :id";
            $stmt = $conn->prepare($sql);
            $updated_at = date('Y-m-d');
            $stmt->bindParam(':id', $user->id);
            $stmt->bindParam(':name', $user->name);
            $stmt->bindParam(':email', $user->email);
            $stmt->bindParam(':mobile', $user->mobile);
            $stmt->bindParam(':updated_at', $updated_at);

            if($stmt->execute()) {
                $response = ['status' => 1, 'message' => 'Record updated successfully.'];
            } else {
                $response = ['status' => 0, 'message' => 'Failed to update record.'];
            }
            echo json_encode($response);
            break;

Create DELETE PHP API, consume it using axios and delete user from database

Update src/components/ListUser.js

const deleteUser = (id) => {
        axios.delete(`http://localhost:8888/api/user/${id}/delete`).then(function(response){
        console.log(response.data);
        getUsers();
    });
}
<button onClick={() => deleteUser(user.id)}>Delete</button>

Update index.php again for writing delete API

case "DELETE": 
        $sql = "DELETE FROM users WHERE id = :id";
        $path = explode('/', $_SERVER['REQUEST_URI']);

        $stmt = $conn->prepare($sql);
        $stmt->bindParam(':id', $path[3]);
        if($stmt->execute()) {
            $response = ['status' => 1, 'message' => 'Record deleted successfully.'];
        } else {
            $response = ['status' => 0, 'message' => 'Failed to delete record.'];
        }
        echo json_encode($response);
        break;

Awesome, you have just completed REACT-CRUD using PHP and MySQL, Now run you application and build something beautiful.

You can download complete source code from GitHub:
https://github.com/durgesh-sahani/react-crud-php-api-mysql

Thank you for reading this blog.