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.

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 application API (/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 galleryApi or a dedicated banner endpoint.

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 status is set to true in 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-toastify to 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!');
  }
};