React.js Project Structure

pages/auth/Login.jsx

function Login() {
  return (
    <div>
      <h2>Admin Login</h2>
      <input placeholder="Email" />
      <input placeholder="Password" type="password" />
      <button>Login</button>
    </div>
  );
}

export default Login;

components/layout/AdminLayout.jsx

import Sidebar from "./Sidebar";
import Header from "./Header";
import { Outlet } from "react-router-dom";

function AdminLayout() {
  return (
    <div style={{ display: "flex" }}>
      
      {/* Sidebar */}
      <Sidebar />

      <div style={{ flex: 1 }}>
        
        {/* Header */}
        <Header />

        {/* Page Content */}
        <div style={{ padding: "20px" }}>
          <Outlet />
        </div>

      </div>
    </div>
  );
}

export default AdminLayout;

pages/dashboard/Dashboard.jsx

function Dashboard() {
  return <h2>Admin Dashboard</h2>;
}

export default Dashboard;

pages/users/Users.jsx

routes/AppRoutes.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "../pages/auth/Login";
import Dashboard from "../pages/dashboard/Dashboard";
import Users from "../pages/users/Users";
import AdminLayout from "../components/layout/AdminLayout";
import ProtectedRoute from "../components/common/ProtectedRoute";

function AppRoutes() {
  return (
    <BrowserRouter>
      <Routes>

        {/* Public Route */}
        <Route path="/login" element={<Login />} />

        {/* Protected Admin Routes */}
        <Route element={<ProtectedRoute />}>
          <Route element={<AdminLayout />}>
            <Route path="/" element={<Dashboard />} />
            <Route path="/users" element={<Users />} />
          </Route>
        </Route>

      </Routes>
    </BrowserRouter>
  );
}

export default AppRoutes;

Security Layer components/common/ProtectedRoute.jsx

import { Navigate, Outlet } from "react-router-dom";

function ProtectedRoute() {
  const isLoggedIn = localStorage.getItem("token");

  return isLoggedIn ? <Outlet /> : <Navigate to="/login" />;
}

export default ProtectedRoute;

App.js

import AppRoutes from "./routes/AppRoutes";

function App() {
  return <AppRoutes />;
}

export default App;

Login Form Submit:

pages/auth/Login.jsx

import { useState } from "react";
import axios from "axios";
import { useNavigate } from "react-router-dom";

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const navigate = useNavigate();

  // 👉 FORM SUBMIT
  const handleLogin = async (e) => {
    e.preventDefault(); // stop page reload

    try {
      // 🔥 API CALL HAPPENS HERE
      const response = await axios.post(
        "http://localhost:5000/api/login",
        {
          email,
          password,
        }
      );

      // ✔ SUCCESS RESPONSE
      const token = response.data.token;

      // store token
      localStorage.setItem("token", token);

      // redirect to dashboard
      navigate("/");

    } catch (error) {
      console.log("Login failed:", error.response.data.message);
    }
  };

  return (
    <div>
      <h2>Admin Login</h2>

      <form onSubmit={handleLogin}>
        <input
          type="email"
          placeholder="Email"
          onChange={(e) => setEmail(e.target.value)}
        />

        <input
          type="password"
          placeholder="Password"
          onChange={(e) => setPassword(e.target.value)}
        />

        <button type="submit">Login</button>
      </form>
    </div>
  );
}

export default Login;

API SERVICE (Reusable)

services/userService.js

import axios from "axios";

const API_URL = "http://localhost:5000/api/users";

// Get all users
export const getUsers = () => {
  return axios.get(API_URL);
};

pages/users/Users.jsx

import { useEffect, useState } from "react";
import { getUsers } from "../../services/userService";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    const res = await getUsers();
    setUsers(res.data);
  };

  return (
    <div>
      <h2>All Users</h2>

      <table border="1" cellPadding="10">
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile</th>
          </tr>
        </thead>

        <tbody>
          {users.map((u) => (
            <tr key={u.id}>
              <td>{u.name}</td>
              <td>{u.email}</td>
              <td>{u.mobile}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Users;

pages/dashboard/Dashboard.jsx

import { useEffect, useState } from "react";
import { getUsers } from "../../services/userService";

function Dashboard() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    loadUsers();
  }, []);

  const loadUsers = async () => {
    const res = await getUsers();
    setUsers(res.data);
  };

  return (
    <div>
      <h2>Admin Dashboard</h2>

      {/* 🔥 Summary */}
      <div style={{ marginBottom: "20px" }}>
        <h3>Total Users: {users.length}</h3>
      </div>

      {/* 🔥 Recent 5 Users */}
      <h3>Recent Users</h3>

      <ul>
        {users.slice(0, 5).map((u) => (
          <li key={u.id}>
            {u.name} - {u.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Dashboard;