Project Structure

Directory Organization

The campus-template is organized into a modular structure that separates the public-facing interface from the administrative content management system (CMS). This separation ensures that logic for data fetching, state management, and UI rendering is easy to locate and extend.

Key Directories

The primary source code resides in the src/ directory, organized as follows:

Public Interface (`src/Screens/userScreen`)

These screens are accessible to all visitors. They consume the modular API services to display dynamic content.

Gallery: Located in userScreen/Gallery/GalleryPage.jsx, it handles both image and video categorization.
Contact Us: Located in userScreen/ContactUsPage.jsx, it provides a feedback form and integrated Google Maps support via environment variables.

Example: Consuming Public Data

To display FAQs on a custom page, you can import the pre-configured API hook:

import { getAllFaq } from '../Screens/cmsScreen/cms-components/cms-faq/faqApi';

// Inside your component:
const data = await getAllFaq();
const activeFaqs = data.filter(item => item.status === true);

CMS Modules (`src/Screens/cmsScreen/cms-components`)

The CMS is built with a feature-first architecture. Each module (Academics, Team, Gallery, etc.) contains its own logic and API service file.

Module Structure

Each feature folder typically contains:

API Service (*Api.js): Encapsulates Axios calls to the backend.
View Components: The UI for managing that specific content type.

Example: API Service Implementation

The services use import.meta.env.VITE_API_URL for the base path and automatically handle Authorization headers by retrieving the authToken from local storage.

// src/Screens/cmsScreen/cms-components/cms-faq/faqApi.js
export const updateFaqById = async (id, data) => {
  const token = localStorage.getItem("authToken");
  const headers = { Authorization: `Bearer ${token}` };
  const response = await axios.patch(`${BASE_URL}/faq/${id}`, data, { headers });
  return response.data;
};

Shared Components (`src/Components`)

This directory contains standalone components that represent major sections of the site.

FaqPage.jsx: A template for the accordion-style FAQ interface.
Programs/: Dynamic program detail viewers (e.g., ProgramPage.jsx) that render academic information based on URL parameters.

Routing and Access Control

The template uses a centralized routing strategy with protected access for the CMS.

Public Routes: Defined in the main application router.
Private Routes (src/Screens/PrivateRoutes.jsx): A wrapper component that checks for a valid user session. If a user is not authenticated, they are redirected to the /signIn page.

// Usage in App.jsx
<Route element={<PrivateRoutes />}>
    <Route path="/admin/dashboard" element={<AdminHomePage />} />
    {/* Other protected CMS routes */}
</Route>

Environment Configuration

The project utilizes Vite environment variables to manage external resources and API endpoints. Ensure these are defined in your .env file:

VITE_API_URL: The base URL for backend services.
VITE_IMAGE_URL: Base path for hosted images.
VITE_MAP_IFRAME: The source URL for the Google Maps integration.
VITE_COLLEGE_NAME: Global variable for branding across the CMS and Public screens.