A modern, full-stack university library portal built with React + TypeScript + Supabase. Supports admin management, student self-service, online book reading via Project Gutenberg, and real book covers via Open Library.
🔗 Live Demo: https://hitec-library.vercel.app/ 📁 Repository: https://github.com/touseef7878/HITEC-Library
| Layer | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite |
| Styling | Tailwind CSS v4 |
| State / Data | TanStack Query v5 |
| Forms | React Hook Form + Zod |
| Backend / DB | Supabase (PostgreSQL) |
| Auth | Supabase Auth |
| Storage | Supabase Storage |
| Book Covers | Open Library Covers API |
| Online Reading | Project Gutenberg (Gutendex API) |
| Icons | Lucide React |
- Browse and search the full book catalog with live search and genre filters
- View book details, descriptions, ratings and reviews
- Fully responsive — mobile-first design
- Request book rentals (admin approval flow)
- Track active loans, due dates, and accrued fines
- Reserve unavailable books (queue system)
- Read books online — fetches content from Project Gutenberg automatically
- Paginated reader with font size control and dark mode
- Rate and review books after borrowing
- Manage profile and change password
- Dashboard with live statistics (loans, overdue, fines, pending requests)
- Add, edit, and delete books with full metadata
- Create student accounts (email + password set by admin)
- Approve or reject rental requests with one click
- Record fine payments (cash / card / online)
- Extend or process loan returns
- Reports and analytics (popular books, genres, departments)
- Full audit log of all user actions
library-management-react/
├── src/
│ ├── assets/ # HITEC logo, library hero image
│ ├── components/
│ │ ├── auth/ # Route guards (RequireAdmin, RequireStudent)
│ │ ├── books/ # BookCard
│ │ ├── layout/ # PublicNavbar, AdminLayout, StudentLayout
│ │ └── ui/ # Button, Input, Card, Badge, Modal, Pagination...
│ ├── contexts/ # AuthContext (session + profile + role)
│ ├── hooks/ # useBooks, useLoans, useStudents, useRentalRequests...
│ ├── lib/
│ │ ├── supabase.ts # Supabase client
│ │ ├── bookApis.ts # Open Library + Project Gutenberg helpers
│ │ ├── constants.ts # Business rules (loan duration, fees, limits)
│ │ └── utils.ts # Formatting, date, currency helpers
│ ├── pages/
│ │ ├── admin/ # Dashboard, Books, Students, Loans, Requests, Reports, Audit
│ │ ├── auth/ # LoginPage
│ │ ├── public/ # HomePage, BooksPage, BookDetailPage, About, Contact
│ │ └── student/ # Dashboard, Loans, Requests, Reservations, Profile, Reader
│ └── types/
│ └── database.ts # Full Supabase table type definitions
├── supabase/
│ └── functions/
│ └── create-student/ # Edge function — admin creates student auth accounts
├── supabase_migration.sql # Complete DB migration (run once in SQL Editor)
└── .env.local # Supabase URL + anon key
- Node.js 18+
- A Supabase project
npm installEdit .env.local:
VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
Open your Supabase project → SQL Editor → paste the contents of supabase_migration.sql → Run
This creates all tables, RLS policies, functions, triggers, storage buckets, and seeds 15 sample books.
npx supabase login
npx supabase link --project-ref YOUR_PROJECT_REF
npx supabase functions deploy create-student --project-ref YOUR_PROJECT_REFIn Supabase Dashboard → Authentication → Users → Add User
- Enter your admin email and a strong password
- Check Auto Confirm User
Then in SQL Editor:
UPDATE public.profiles
SET role = 'admin', name = 'Library Administrator'
WHERE email = 'your-admin@email.com';npm run devOpen http://localhost:5173
Students cannot self-register. Accounts are created by the admin:
- Admin logs in → Students → Add Student
- Fills in name, university email, roll number, department, semester, and sets an initial password
- Student logs in at
/loginwith their university email and the password the admin set - Student can change their password from Profile
| Rule | Value |
|---|---|
| Loan duration | 15 days |
| Late fee | PKR 50 per day overdue |
| Max active loans | 5 books per student |
| Account suspension threshold | PKR 5,000 in fines |
| Reservation expiry | 7 days |
| API | Purpose | Key required |
|---|---|---|
| Open Library Covers | Book cover images by ISBN | No |
| Gutendex (Project Gutenberg) | Full-text online reading | No |
Books are searched on Gutenberg by title + author. If found, the text is fetched and displayed in the built-in paginated reader. Modern textbooks may not be available (copyright).
npm run buildOutput goes to dist/ — deploy to any static host (Netlify, Vercel, etc).
Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in your hosting platform's environment settings.
Proprietary — HITEC University Taxila. All rights reserved.