StudyHub - Educational Resource Platform

A React-based web application for RGPV university students providing access to course notes, reference books, competitive exam resources, and premium courses.

Features

• Multi-course support: B.Tech CSE, ME, EE (RGPV Notes + Shivani Books)
• 8 semesters per course with variable subjects (5 for sem 1-4, 4 for sem 5-6, 3 for sem 7-8)
• Google Drive integration: Host PDFs on Google Drive with automatic embed/download URL handling
• Modal PDF viewer: View PDFs inline without leaving the app
• Responsive design: Works on desktop, tablet, and mobile
• Premium resources: UPI payment modal for paid courses

Quick Start

npm install
npm run dev

Access at http://localhost:5173

Adding PDFs via Google Drive

1. Upload to Google Drive

• Go to Google Drive
• Upload your PDF
• Right-click → "Share" → Set to "Anyone with the link" → Copy link

2. Extract File ID

From a link like https://drive.google.com/file/d/1kXlX5dYy43_qP1iDu3gp6jfUo8g5iX93/view, the ID is: 1kXlX5dYy43_qP1iDu3gp6jfUo8g5iX93

3. Update constants.js

Find the subject and update:

semesters[0].subjects[0] = { 
  id: 'CSE-s1-subj1', 
  name: 'Mathematics-I', 
  description: 'Engineering Mathematics-I', 
  pdfLink: 'https://drive.google.com/file/d/YOUR_FILE_ID/view',
  pdfSource: 'google-drive',
  driveId: 'YOUR_FILE_ID',
  isAvailable: true
};

Subject Index Reference

• Semesters: semesters[0] = Sem 1, semesters[1] = Sem 2, ..., semesters[7] = Sem 8
• Subjects: subjects[0] = Subject 1, subjects[1] = Subject 2, etc.

Naming Convention

{Prefix}-s{Sem}-subj{Num}
Examples: CSE-s1-subj1, ME-s3-subj2, EE-s8-subj3

Project Structure

├── App.jsx                          # Root component with routes
├── index.jsx                        # React entry point
├── index.html                       # HTML shell with Tailwind CDN
├── vite.config.js                   # Vite configuration
├── constants.js                     # All course, semester, subject data
├── types.js                         # Type definitions and enums
├── components/
│   ├── Navbar.jsx                   # Navigation bar
│   ├── Footer.jsx                   # Footer
│   ├── Logo.jsx                     # SVG logo
│   ├── HeroSection.jsx              # Homepage hero
│   ├── CourseCard.jsx               # Course card
│   ├── Breadcrumbs.jsx              # Breadcrumb navigation
│   ├── DocumentViewer.jsx           # PDF viewer modal
│   ├── PremiumCard.jsx              # Premium resource card
│   └── UpiPaymentModal.jsx          # UPI payment modal
├── pages/
│   ├── HomePage.jsx                 # Landing page
│   ├── CourseSelectionPage.jsx      # Course selection
│   ├── SemesterSelectionPage.jsx    # Semester selection
│   ├── SubjectListPage.jsx          # Subject list with PDF actions
│   ├── CompetitiveExamsPage.jsx     # Competitive exams
│   ├── PremiumPage.jsx              # Premium resources
│   └── NotFoundPage.jsx             # 404 page
├── utils/
│   └── driveUtils.js                # Google Drive URL utilities
└── public/
    ├── qr.jpg                       # UPI QR code
    └── documents/                   # PDF storage (local files)

Routes

Route	Page
/	HomePage
/rgpv-notes	CourseSelectionPage (RGPV)
/rgpv-notes/:courseId	SemesterSelectionPage (RGPV)
/rgpv-notes/:courseId/:semesterId	SubjectListPage (RGPV)
/shivani-books	CourseSelectionPage (Shivani)
/shivani-books/:courseId	SemesterSelectionPage (Shivani)
/shivani-books/:courseId/:semesterId	SubjectListPage (Shivani)
/competitive-exams	CompetitiveExamsPage
/premium-resources	PremiumPage
/404	NotFoundPage

Google Drive Utilities (utils/driveUtils.js)

Function	Purpose
extractDriveFileId(url)	Extracts file ID from various Drive URL formats
getDriveEmbedUrl(fileId)	Creates iframe-embeddable URL
getDriveDownloadUrl(fileId)	Creates direct download URL
isGoogleDriveUrl(url)	Checks if URL is a Google Drive link
getPdfUrl(subject, type)	Smart URL routing (local vs Drive, view vs download)

Important Notes

• Sharing must be "Anyone with the link" or users will see permission errors
• Always set isAvailable: true when adding a PDF
• Subject IDs must be unique across all semesters
• Clear browser cache if PDFs don't appear after updates

Build & Deploy

npm run build      # Production build
npm run preview    # Preview production build
npm run deploy     # Deploy to GitHub Pages

Tech Stack

• React 19 - UI framework
• React Router DOM 7 - Client-side routing (HashRouter)
• Vite 6 - Build tool
• Tailwind CSS (CDN) - Styling
• Heroicons - Icon library
• Google Drive - PDF hosting