Documentation

– Built with React 19 and TypeScript on Vite 6
– 400+ ready-made pages grouped by module
– Role based dashboards — Admin, Teacher, Student and Parent
– Academic, HRM, Finance, Attendance, Library, Transport, Hostel, Communication and Settings modules
– Hooks based architecture with reusable custom hooks
– Route level code splitting with React.lazy and Suspense
– Central route registry — one named key per path
– Redux Toolkit store with theme settings persisted to localStorage
– Service layer that switches between mock data and a real REST API
– Light / Dark theme and four layout modes — default, mini, boxed and RTL
– Path aliases for clean imports
– Organised SCSS architecture
– Fully responsive design
– Cross browser compatible
– Clean and well commented code
– Easy to customize
– Developer friendly
– And many more...

preskool/
│
└── react/
    │
    ├── public/
    │   ├── assets/                 # images, fonts and static files
    │   └── favicon.png
    │
    ├── src/
    │   ├── app/
    │   │   └── providers/          # AppProviders, AuthProvider, auth-context
    │   │
    │   ├── components/
    │   │   ├── routing/            # ProtectedRoute, RoleGuard
    │   │   ├── ui/                 # shared presentational components
    │   │   └── workspace/
    │   │
    │   ├── config/                 # env.ts — the only reader of import.meta.env
    │   ├── constants/
    │   │
    │   ├── core/
    │   │   ├── common/             # header, sidebar, modals, theme-settings
    │   │   ├── data/               # redux store, slices and menu JSON
    │   │   └── modals/
    │   │
    │   ├── features/               # feature hooks — auth, dashboard, students
    │   ├── hooks/                  # useForm, useQuery, useToasts, …
    │   ├── layouts/                # MainLayout.tsx, AuthLayout.tsx
    │   ├── mocks/                  # static fixtures returned by mock services
    │   │
    │   ├── routes/
    │   │   ├── all_routes.tsx      # every path as a named key
    │   │   ├── route_config.tsx    # lazy imports + route arrays
    │   │   └── index.tsx           # the <Routes> tree
    │   │
    │   ├── services/               # api/, auth/, dashboard/, students/
    │   ├── style/
    │   │   ├── css/
    │   │   ├── fonts/
    │   │   ├── icon/
    │   │   └── scss/
    │   ├── types/
    │   ├── utils/
    │   ├── views/                  # every page's UI, grouped by module
    │   │
    │   ├── environment.tsx         # base_path and img_path
    │   ├── index.scss
    │   └── main.tsx                # application entry point
    │
    ├── eslint.config.js
    ├── index.html
    ├── package.json
    ├── package-lock.json
    ├── tsconfig.json
    ├── tsconfig.app.json
    ├── tsconfig.node.json
    └── vite.config.ts
									

The structure follows a clear top-down flow:

• Entry point — src/main.tsx imports global CSS and mounts the app inside BrowserRouter
• Providers — src/app/providers/AppProviders.tsx composes the Redux store and the auth context
• Layouts — MainLayout wraps the app pages (header, sidebar, theme settings), AuthLayout wraps the bare login and error screens
• Views — src/views/ holds every page's UI, grouped by module (academic, hrm, finance-accounts, peoples …)
• Services — src/services/ is the only place that talks to data, so views stay presentational

Entry Point — src/main.tsx:

import React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router";

import { base_path } from "./environment";
import AppProviders from "./app/providers/AppProviders";
import ALLRoutes from "./routes";

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "../src/style/css/feather.css";
import "../src/index.scss";
import "bootstrap";

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    {/* AppProviders composes the Redux store and the auth session provider. */}
    <AppProviders>
      <BrowserRouter basename={base_path}>
        <ALLRoutes />
      </BrowserRouter>
    </AppProviders>
  </React.StrictMode>
);

Route Tree — src/routes/index.tsx:

import React, { Suspense } from "react";
import { Route, Routes } from "react-router";

import { authRoutes, publicRoutes } from "./route_config";
import MainLayout from "../layouts/MainLayout";
import AuthLayout from "../layouts/AuthLayout";
import ProtectedRoute from "@components/routing/ProtectedRoute";

const Login = React.lazy(() => import("../views/auth/login/login"));

const ALLRoutes: React.FC = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route path="/" element={<Login />} />

      {/* ProtectedRoute is a pass-through while VITE_AUTH_ENABLED is false. */}
      <Route element={<ProtectedRoute />}>
        <Route element={<MainLayout />}>
          {publicRoutes.map((route, idx) => (
            <Route path={route.path} element={route.element} key={idx} />
          ))}
        </Route>
      </Route>

      <Route element={<AuthLayout />}>
        {authRoutes.map((route, idx) => (
          <Route path={route.path} element={route.element} key={idx} />
        ))}
      </Route>
    </Routes>
  </Suspense>
);

export default ALLRoutes;

Sample View — src/views/…/index.tsx:

import { Link } from "react-router-dom";
import { all_routes } from "@/routes/all_routes";
import { useQuery } from "@hooks";
import { studentsService } from "@services/students";

const StudentList = () => {
  const routes = all_routes;
  const { data: students, loading, error } = useQuery(() => studentsService.list());

  if (loading) return <div className="p-4">Loading...</div>;
  if (error) return <div className="p-4 text-danger">{error.message}</div>;

  return (
    <div className="page-wrapper">
      <div className="content">
        <h4 className="mb-3">Students</h4>
        <div className="row">
          {students?.map((student) => (
            <div className="col-xxl-3 col-xl-4 col-md-6" key={student.id}>
              <div className="card">
                <div className="card-body">
                  <h6>
                    <Link to={routes.studentDetails}>{student.name}</Link>
                  </h6>
                  <p className="mb-0">{student.email}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default StudentList;

Usage:

import { all_routes } from "@/routes/all_routes";
import ProtectedRoute from "@components/routing/ProtectedRoute";
import { useBootstrapTooltips } from "@hooks/useBootstrapTooltips";
import { studentsService } from "@services/students";

Routing uses React Router and is driven by two files inside src/routes/:

• all_routes.tsx — every path as a named key. This is the single source of truth; always link with routes.studentList, never a raw string.
• route_config.tsx — the lazy imports plus two arrays: publicRoutes (rendered inside MainLayout) and authRoutes (rendered inside AuthLayout).

Adding a New Page

1. Register the path — all_routes.tsx:

export const all_routes = {
  // …existing paths
  myPage: "/my-page",
};

2. Register the route — route_config.tsx:

const MyPage = React.lazy(() => import("@views/module/my-page"));

export const publicRoutes = [
  // …existing routes
  {
    path: routes.myPage,
    element: <MyPage />,
    route: Route,
  },
];

3. Link to it:

import { Link } from "react-router-dom";
import { all_routes } from "@/routes/all_routes";

<Link to={all_routes.myPage}>My Page</Link>

Each domain folder in src/services/ follows the same four-file shape:

createService (src/services/api/create-service.ts) chooses the implementation from env.useMockApi, so call sites never change. All HTTP traffic goes through the single client in src/services/api/client.ts.

Connecting a Real Backend

Create a .env file in the react folder:

VITE_API_BASE_URL=https://api.example.com/v1
VITE_USE_MOCK_API=false
VITE_AUTH_ENABLED=true

src/config/env.ts is the only module that reads import.meta.env. While VITE_AUTH_ENABLED is false, ProtectedRoute and RoleGuard render their children unconditionally, so every route stays reachable. Flip it to true once a real auth API is connected and the same components start enforcing the session.

Theme state lives in Redux (src/core/data/redux/themeSettingSlice.tsx) and is persisted to localStorage. MainLayout mirrors that state onto the <html> element as data attributes, and the SCSS keys off them.

All of these are switched at runtime from the gear panel in the header, which is implemented in src/core/common/theme-settings. Because the values are written to localStorage, the choice survives a page reload.

The logo files live in public/assets/img/. The simplest route is to replace those files with your own, keeping the same names and roughly the same dimensions.

To point at differently named files instead, edit src/core/common/header/index.tsx:

<Link to={routes.adminDashboard} className="logo logo-normal">
  <ImageWithBasePath src="assets/img/logo.svg" alt="Logo" />
</Link>
<Link to={routes.adminDashboard} className="logo-small">
  <ImageWithBasePath src="assets/img/logo-small.svg" alt="Logo" />
</Link>
<Link to={routes.adminDashboard} className="dark-logo">
  <ImageWithBasePath src="assets/img/logo-dark.svg" alt="Logo" />
</Link>

The browser tab icon is public/favicon.png, referenced from index.html in the project root.

The template uses Inter. Changing it takes two edits.

1. Swap the import in src/style/scss/components/_font.scss:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

2. Update the family stack in src/style/scss/utils/_variables.scss:

// Font Family
$font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

The base size and weight scale are declared in the same file ($font-size-base, $font-weight-medium and friends), so you can adjust typography globally from one place.

Six preset accent colors ship with the template and can be switched at runtime from the Theme Settings panel — primary, violet, pink, orange, green and red.

To change the brand color itself, edit the theme variables in src/style/scss/utils/_variables.scss:

// Theme Colors Variables
$primary: #3D5EE1;
$secondary: #6FCCD8;
$success: #1ABE17;
$info: #0F65CD;
$warning: #EAB300;
$danger: #E82646;
$dark: #202C4B;
$light: #E9EDF4;

Hover shades are derived from these with color.adjust, so changing $primary updates $primary-hover automatically. Vite recompiles the SCSS as soon as you save.