Home & Navigation
Navigation Structure
The template features a multi-tiered navigation system designed for both public users and administrative staff. Navigation is handled via react-router-dom, ensuring a smooth Single Page Application (SPA) experience with specific layouts for the public-facing campus site and the backend Content Management System (CMS).
Public Navbar
The public interface includes a responsive navigation bar that provides access to the primary sections of the campus website.
| Route | Page | Description |
| :--- | :--- | :--- |
| / | Home | The main landing page featuring the hero section, marquees, and dynamic banners. |
| /program-list | Academics | Displays all available faculties and academic programs. |
| /gallery/image | Gallery | A tabbed interface for viewing image albums and YouTube video embeds. |
| /faq | FAQ | An accordion-style list of frequently asked questions fetched from the CMS. |
| /contact | Contact Us | Includes a feedback form, contact details, and an interactive Google Map. |
Private & Administrative Routing
Certain routes are protected by an authentication layer. The PrivateRoutes component checks for a valid token and role before granting access to the CMS.
- Authentication Check: If a user attempts to access a protected route without being logged in, they are automatically redirected to
/signIn. - Loading State: While the application verifies auth status, a "Loading..." placeholder is displayed to prevent layout flickering.
// Example of accessing the CMS Home after login
<Route path="/admin" element={<PrivateRoutes />}>
<Route index element={<AdminHomePage />} />
<Route path="publications" element={<PublicationCMS />} />
</Route>
Home Page Components
The landing page serves as the dynamic hub of the application, utilizing environment variables and API data to personalize the content.
Notice Marquee
The Notice Marquee is located at the top of the Home page (or within the Navbar). It provides a scrolling text area for urgent announcements and updates.
- Data Source: Fetches active links or short notices from the
applicationAPI (/application). - Usage: Managed through the CMS "Links" section. Setting an item to "Active" will include it in the scrolling marquee.
Dynamic Popup Banners
The template supports a dynamic popup system to highlight events or important notices immediately upon page load.
- Behavior: The popup appears once per session or on every refresh, depending on configuration.
- Customization: The banner image and redirect link are managed via the
galleryApior a dedicatedbannerendpoint.
Hero & Branding
The template uses global configuration variables to set branding across the Home page. Ensure your .env file is configured correctly to reflect your institution's identity:
VITE_COLLEGE_NAME="Your University Name"
VITE_ADDRESS="123 Education Lane, City"
VITE_PHONE="+977-XXXXXXXXXX"
VITE_EMAIL="info@yourcampus.edu.np"
Interactive Elements
FAQ Accordion
The FAQ page (/faq) dynamically fetches questions from the database. Users can click on a question to toggle the answer visibility.
- Filter Logic: The interface only displays FAQs where the
statusis set totruein the CMS. - Navigation: If users cannot find an answer, a "Contact Us" link at the bottom redirects them to the feedback form.
Program & Faculty Navigation
Academic content is nested. From the Home page or Navbar, users can navigate to:
- Program List: A grid of all available courses.
- Program Detail: Accessed via
/program/:id. This page displays the program's full details (rendered via HTML), faculty association, and level (e.g., Undergraduate).
Feedback Integration
The "Contact Us" section provides an interface for public users to send messages directly to the administration.
- Input Fields: Name, Email, Contact Number, and Message.
- API Output: Sends a POST request to
${BASE_URL}/feedback. - Validation: Uses
react-toastifyto provide immediate feedback on success or failure of the message delivery.
// Post-submission feedback logic
const handleSubmit = async (formData) => {
const response = await addNewFeedback(formData);
if (response) {
toast.success('Your feedback has been successfully sent!');
}
};