Resource Hub

A mobile-first academic portal and exam countdown tracker built with React and Vite. Designed as a lightweight, zero-database template for Class Representatives (CRs) and student organizations to distribute course materials, previous year question papers (PYQs), syllabus copies, and real-time exam schedules.

Live Deployment: https://resource-hub-drab.vercel.app/

---

Features

• Live Exam Countdown: Real-time countdown timer tracking upcoming examinations with branch-specific filtering.
• Resource Vault: Organized subject directories linking directly to external cloud storage (Google Drive) for syllabus documents, handwritten notes, PYQs, practice question banks, and lab manuals.
• Autonomous PYQ Directory: Dedicated section for consolidated end-term question papers categorized by semester and year.
• Single-File Configuration: Branding, branch options, contact links, tab visibility, and theme colors are managed through a central configuration file.
• Zero-Database Architecture: Fully static data structure powered by JavaScript object definitions. Requires no backend infrastructure or database setup.
• Mobile-Optimized UI: Designed with a mobile-first layout, native Web Share API integration, and direct WhatsApp contact channels.
• Telemetry: Built-in Vercel Analytics integration for tracking traffic and resource usage.

---

Tech Stack

• Framework: React 18
• Build Tool: Vite 6
• Styling: Vanilla CSS utilizing CSS Custom Properties for runtime theme injection
• Typography: Google Fonts (Bebas Neue, IBM Plex Mono)
• Analytics: @vercel/analytics
• Deployment: Vercel (Static Web App)

---

Project Structure

Resource_Hub/
├── index.html              # HTML entry point and PWA/mobile meta tags
├── package.json            # Dependencies and scripts
├── vite.config.js          # Vite configuration
├── public/                 # Static assets and icons
└── src/
    ├── main.jsx            # React root mount
    ├── App.jsx             # Root component and navigation state
    ├── config.js           # Central configuration (branding, tabs, theme)
    ├── components/
    │   ├── HeroCountdown.jsx   # Top countdown hero banner
    │   ├── ScheduleTab.jsx     # Examination timeline view
    │   ├── VaultTab.jsx        # Subject resource cards and Drive links
    │   ├── PYQSection.jsx      # End-term question paper repository
    │   ├── NoticesTab.jsx      # Class announcements (optional tab)
    │   ├── TemplatesTab.jsx    # Document and format templates (optional tab)
    │   └── UI.jsx              # Shared visual primitives
    ├── data/
    │   ├── exams.js        # Examination schedule dataset
    │   ├── vault.js        # Subject folders and cloud links
    │   └── templates.js    # Downloadable template metadata
    └── styles/
        └── global.css      # Base CSS reset, typography, and utility classes

---

Getting Started

Prerequisites

• Node.js 18.0.0 or higher
• npm 9.0.0 or higher

Installation

1. Clone the repository:

   git clone https://github.com/Hanu2908/Resource_Hub.git
   cd Resource_Hub

2. Install dependencies:

   npm install

3. Start the local development server:

   npm run dev

4. Build for production:

   npm run build

5. Preview the production build locally:

   npm run preview

---

Customization Guide

This project is organized so that any institution, department, or class representative can adapt it by modifying static configuration files without changing application logic.

1. General Branding and Theme (src/config.js)

Edit src/config.js to adjust general metadata, available tabs, branch filters, contact details, and color schemes:

// Header text
export const APP_TITLE = "Resource Hub";
export const APP_SUBTITLE = "SKIT Jaipur · @2026 · ";

// Active tabs (set enabled: false to hide any tab)
export const TABS = [
  { id: "schedule", label: "SCHEDULE", enabled: true },
  { id: "vault", label: "VAULT", enabled: true },
  { id: "notices", label: "NOTICES", enabled: false },
  { id: "templates", label: "TEMPLATES", enabled: false },
];

// Branch filters
export const BRANCHES = [
  { label: "AI/IT", code: "IT" },
  { label: "CSE", code: "CSE" },
  { label: "ME", code: "ME" },
  { label: "EC/EE", code: "EC" },
  { label: "ALL", code: "ALL" },
];

export const DEFAULT_BRANCH = "IT";

// Contact info displayed on missing resource alerts
export const CONTACT = {
  CR_NAME: "Himanshu Saini(CR)",
  WHATSAPP_LINK: "https://wa.me/919610293931",
  GROUP_LINK: "",
};

Theme colors can also be customized directly within THEME in src/config.js to match institutional color schemes.

2. Managing Exam Schedules (src/data/exams.js)

Define upcoming exams inside the EXAMS array. Timestamps must follow ISO 8601 string format (YYYY-MM-DDTHH:MM:SS):

export const EXAMS = [
  {
    id: 1,
    code: "MAUL201",
    shortName: "Maths-II",
    name: "Engineering Mathematics-II",
    date: "2026-04-27T14:30:00",
    day: "MON",
    ddmm: "27 APR",
    branch: "ALL",
    hall: "Block B - Room 204",
    audit: false,
  },
  // Add additional exam entries here
];

• branch: Set to "ALL" to show for every student, or specify branch codes (e.g., "AI/IT/IOT/EC/EE").
• audit: Set to true to display an audit course badge.

3. Managing Course Resources (src/data/vault.js)

A. Configure Button Types

The FOLDER_TYPES array dictates which resource categories appear on subject cards:

export const FOLDER_TYPES = [
  { key: "syllabus", label: "Syllabus" },
  { key: "notes", label: "Notes" },
  { key: "pyqs", label: "PYQs" },
  { key: "practice", label: "Practice Qs" },
  { key: "lab", label: "Lab Manual" },
];

B. Populate Subjects and Google Drive Links

Add subjects to the VAULT array with public view-access Google Drive folder links:

export const VAULT = [
  {
    id: "01",
    code: "MAUL201",
    name: "Maths-II",
    branch: "ALL",
    accent: "#f5c518",
    updatedOn: "2026-04-15",
    folders: {
      syllabus: "https://drive.google.com/file/d/YOUR_FILE_ID/view",
      notes: "https://drive.google.com/drive/folders/YOUR_FOLDER_ID",
      pyqs: "https://drive.google.com/drive/folders/YOUR_FOLDER_ID",
      practice: "https://drive.google.com/drive/folders/YOUR_FOLDER_ID",
      lab: "", // Leave empty if not applicable
    },
  },
];

4. Updating Autonomous PYQ Papers (src/components/PYQSection.jsx)

To update semester-level combined question paper packages, update the papers array inside src/components/PYQSection.jsx:

const papers = [
  {
    sem: "Semester II",
    years: [
      {
        year: "2025",
        url: "https://drive.google.com/file/d/YOUR_PDF_LINK/view",
        latest: true,
      },
    ],
  },
];

---

Deployment

Deploy to Vercel

1. Push your code to a GitHub repository.
2. Log in to Vercel and import the repository.
3. Keep the default settings:
   • Framework Preset: Vite
   • Build Command: npm run build
   • Output Directory: dist
4. Click Deploy.

---

License

This project is licensed under the MIT License. See the LICENSE file for details.