Introduction

The Campus Template is a comprehensive, production-ready React starter kit designed for educational institutions to establish and manage their digital presence. Built on Vite for high-performance development, this project provides a robust architecture for colleges to showcase academic programs, manage publications, and interact with students through a centralized platform.

The system utilizes a dual-interface approach: a high-performance Public Portal for visitors and a secured Content Management System (CMS) for administrative tasks.

Dual-Interface Architecture

The template is divided into two primary environments to ensure separation of concerns and data security:

1. Public User Interface

The public interface is optimized for students, parents, and stakeholders. It features responsive layouts for:

• Academic Discovery: Browsing faculties and specific program details.
• Media Galleries: Integrated image and video galleries with YouTube support.
• Information Hub: Frequently Asked Questions (FAQ) and institutional publications.
• Communication: A feedback and contact system with integrated Google Maps.

2. Management Portal (CMS)

The administrative backend allows authorized staff to manage every aspect of the site without modifying code. Access is protected by a token-based authentication system using PrivateRoutes.

// Example of how internal routes are protected
<Route element={<PrivateRoutes />}>
    <Route path="/admin/dashboard" element={<AdminHomePage />} />
    <Route path="/admin/publications" element={<PublicationManager />} />
</Route>

Core Functional Modules

Academic Management

The template provides a structured way to display institutional offerings. The ProgramPage dynamically fetches details based on the program ID, displaying faculty information, level, and descriptive content.

• API Service: getProgramById(id)
• Component: ProgramPage.jsx

Content Management Services

The project includes a suite of API services designed to interact with a RESTful backend. Most services follow a standard CRUD pattern, requiring a Bearer token for write operations.

Example: Publication API Usage

To integrate publication data into a custom component, you can utilize the following service pattern:

import { getAllpublication } from './path/to/publicationApi';

const loadContent = async () => {
    try {
        const data = await getAllpublication();
        console.log("Publications retrieved:", data);
    } catch (error) {
        console.error("Fetch failed", error);
    }
};

Feedback & Engagement

Users can submit inquiries through the ContactUsPage. This module captures user data and transmits it to the backend via the addNewFeedback service, featuring built-in toast notifications for user success/error feedback.

Configuration & Environment

To customize the template for a specific institution, several environment variables must be configured. These control the API endpoints and global institutional branding.

| Variable | Description | | :--- | :--- | | VITE_API_URL | The base URL for the backend REST API. | | VITE_COLLEGE_NAME | The name displayed across the CMS and public headers. | | VITE_MAP_IFRAME | The Google Maps embed URL for the Contact page. | | VITE_FILE_URL | Base path for downloading institutional documents. |

Authentication Workflow

The template manages state through an AuthContextProvider. For administrative tasks, the system retrieves a token from localStorage (stored as authToken).

Internal Logic:

1. Request: API services call getAuthToken().
2. Validation: If a token exists, it is appended to the Authorization header as a Bearer token.
3. Protection: If the token is missing or expired, PrivateRoutes automatically redirects the user to the /signIn page.