A modern, responsive, and high-performance Book Rental Information System built with React, Vite, and Supabase. This project modernizes a legacy Java Swing application into a sleek web experience using a Glassmorphism design system and Dark Mode.
- 📊 Dashboard Overview: Real-time visualization of library statistics including Total Books, Active Rentals, and Total Revenue.
- 📖 Inventory Management: Full CRUD operations for book records with dynamic search and stock tracking.
- 🔄 Transaction Workflow: Simplified rental and return processes with automatic fine calculation based on overdue days.
- ✨ Premium UI: High-end Glassmorphism aesthetics with backdrop blurs, smooth Framer Motion transitions, and a curated Slate/Electric Blue/Neon Purple color palette.
- 🔒 Secure Backend: Powered by Supabase for Authentication and PostgreSQL with Row Level Security (RLS).
- Frontend: React 19 + Vite
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Animations: Framer Motion
- Database & Auth: Supabase
- Date Management: date-fns
-
Clone the repository:
git clone https://github.com/yourusername/book-rental.git cd book-rental -
Install dependencies:
npm install
-
Set up Environment Variables: Create a
.envfile in the root directory based on.env.example:VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
-
Initialize Database: Execute the provided
schema.sqlin your Supabase SQL Editor to create the necessary tables and RPC functions for stock management. -
Run the application:
npm run dev
Following the Separation of Concerns principle:
src/components: Modular UI components (Glass cards, specialized buttons, inputs).src/pages: Main view components (Dashboard, Books, Transactions).src/hooks: Custom React Hooks for encapsulated business logic.src/data: Data constants and initialization (Supabase client).src/utils: Helper functions for calculations and formatting.
This project is licensed under the MIT License - see the LICENSE file for details.