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:
| Directory | Description |
| :--- | :--- |
| src/Components/ | Reusable UI components used across both Public and Admin screens. |
| src/Screens/userScreen/ | Public-facing pages (e.g., Contact Us, Gallery, FAQ). |
| src/Screens/cmsScreen/ | The administrative dashboard and content management modules. |
| src/context/ | Global state providers, specifically for authentication and authorization. |
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/signInpage.
// 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.