A modern React frontend for the Middle-earth Library Management System with role-based access control and Lord of the Rings theming! 🧙♂️
Backend Repository: library-management-api
React application providing distinct interfaces for two user roles:
- Librarians (🧙♂️): Full control over books (CRUD), analytics dashboard, overdue tracking
- Members (🏹): Browse books, borrow/return functionality, personal dashboard
Key Features:
- JWT authentication with role-based access
- Real-time book availability tracking
- Advanced search (title, author, genre)
- Responsive design (mobile, tablet, desktop)
- Beautiful UI with animations and gradients
- Comprehensive error handling
React 18 • React Router v6 • Axios • Context API • CSS3
# Install dependencies
npm install
# Create environment file (optional)
cp env.example .env.local
# Edit if backend runs on different port
# Start development server
npm start # Opens at http://localhost:3001Prerequisites:
- Node.js v14+
- Backend API running on
http://localhost:3000
# Clone and start the backend
git clone https://github.com/BregornOriginal/library-management-api.git
cd library-management-api
bundle install
rails db:create db:migrate db:seed
rails server- JWT-based login/signup/logout
- Role-based access (Librarian vs Member)
- Protected routes
- Persistent sessions with localStorage
- Demo login buttons for testing
- Browse with responsive grid layout
- Search by title, author, or genre
- Real-time availability badges
- Members: Borrow books (can't borrow twice)
- Librarians: Full CRUD operations
Librarian Dashboard:
- Stats cards (total books, borrowed, due today, overdue)
- Overdue books table with member contact info
- Quick actions and refresh
Member Dashboard:
- Personal stats (borrowed, overdue counts)
- Borrowed books cards with due dates
- Color-coded status (good/warning/overdue)
- One-click return functionality
- Helpful tips section
- Fully responsive design
- Smooth animations and hover effects
- Loading states and error messages
- Empty states with helpful guidance
- Color-coded indicators (🟢 🟡 🔴)
POST /signup - Register user
POST /login - Get JWT token
DELETE /logout - Invalidate token
Email: gandalf@middleearth.com
Password: youshallnotpass
- Login → See librarian dashboard
- Check stats and overdue books table
- Go to Books → Add/Edit/Delete books
- Search for books by title/author/genre
Email: frodo@shire.com
Password: thering123
- Login → See member dashboard
- Go to Books → Borrow a book
- Return to Dashboard → View borrowed book
- Click "Return Book" button
- Try searching for books
Email: aragorn@ranger.com
Password: gondor123
- Login → Dashboard shows overdue warning
- See overdue book highlighted in red
- Check "X days overdue" status
| Name | Password | |
|---|---|---|
| Gandalf | gandalf@middleearth.com | youshallnotpass |
| Elrond | elrond@rivendell.com | rivendell123 |
| Galadriel | galadriel@lothlorien.com | lothlorien123 |
| Name | Password | Status | |
|---|---|---|---|
| Frodo | frodo@shire.com | thering123 | Good standing |
| Samwise | samwise@shire.com | po-tay-toes | Good standing |
| Aragorn | aragorn@ranger.com | gondor123 | Has overdue book |
| Legolas | legolas@mirkwood.com | arrows123 | Good standing |
Dashboard link not showing?
- Make sure you're logged in
- Check browser console for errors
401/403 errors?
- Logout and login again for fresh token
- Verify backend is running on port 3000
Can't connect to backend?
# Check backend is running
cd ../library-management-api
rails server
# Update frontend .env.local if needed
echo "REACT_APP_API_URL=http://localhost:3000" > .env.local
npm startMIT License
- Lord of the Rings theme by J.R.R. Tolkien
- Built with React and modern web technologies
Built with ❤️ and a love for Middle-earth 🧙♂️📚🏹
"All we have to decide is what to do with the time that is given us." - Gandalf