A modern, full-stack powered platform for browsing, tracking, and managing books. Built with React + Vite + TailwindCSS, featuring authentication, reading lists, profile management, dark mode, and a real backend API integration.
| Name | Responsibilities |
|---|---|
| Ali Khalifeh | Homepage, Add Book, Edit Book, Dark Mode |
| Jawad Taki | Login, Register |
| Hussein Sabra | Book Listing, Book Details |
| Ali Daouk | Profile Page, Reading List |
Reactors is a responsive book management web application where users can:
Browse all books from the backend
View detailed information about each book
Add, edit, or delete books
Maintain a personalized reading list
Track reading progress
Update profile information
Register, login, verify OTP, reset password
Enjoy a sleek and animated UI with dark mode support
This frontend is fully connected to a real backend API, replacing the mock-data setup of Phase 1.
Register / Login
OTP verification
Forgot Password + Reset via OTP
Session-based authentication (cookies)
Auto-redirect using ProtectedRoute
Cookie handling UI with CookieFixPopup
View all books
Add new books
Edit existing books
Delete books
View detailed description of each book
Add books to personal reading list
Update reading status (Reading / Finished)
Remove items from reading list
View progress summary
View user data
Track reading statistics
View your own books (“My Books”)
Fully responsive
TailwindCSS styling
Framer Motion animations
Dark / Light mode
Clean navigation bar
Dynamic cover loading with caching
Tech Stack
React 18
Vite
TailwindCSS
React Router DOM
Framer Motion
Axios
Context API
Lucide Icons
src/ ├── assets/ # Images, covers, screenshots ├── components/ # Reusable UI components │ ├── Navbar.jsx │ ├── Footer.jsx │ ├── OtpModal.jsx │ ├── CookieFixPopup.jsx │ └── ProtectedRoute.jsx ├── context/ # Global state (auth, books, theme) │ ├── AuthContext.jsx │ ├── BookContext.jsx │ └── ThemeContext.jsx ├── pages/ # All app pages │ ├── HomePage.jsx │ ├── BooksList.jsx │ ├── BookDetail.jsx │ ├── AddEditBook.jsx │ ├── ReadingList.jsx │ ├── Login.jsx │ ├── Register.jsx │ └── UserProfile.jsx ├── services/ │ └── api.js # Axios instance + endpoint wrappers ├── utils/ # Helper functions ├── App.jsx # Root router + layout └── main.jsx # Entry point
All network requests use a shared axios instance:
const API_URL = import.meta.env.VITE_API_URL || "http://localhost:5000/api";
POST /auth/register
POST /auth/login
POST /auth/verify-otp
POST /auth/forgot-password
POST /auth/verify-reset-otp
POST /auth/reset-password
GET /auth/me
POST /auth/logout
GET /books
GET /books/:id
POST /books
PUT /books/:id
DELETE /books/:id
GET /books/mine
GET /userbooks
GET /userbooks/summary
POST /userbooks
PUT /userbooks/:id
DELETE /userbooks/:id
##Navbar
Dynamic navigation links
Shows login/register or profile/logout
Dark mode toggle
Mobile-friendly responsive menu
Minimal footer
Dark mode adaptive
Used for OTP verification in Login and Reset Password
Automatically triggered when backend requires OTP
Animated, clean UI
Wraps pages that require authentication
Redirects to login if user is not logged in
Detects browser (Chrome, Firefox, Safari, Edge, Android)
Shows instructions to enable cookies
Helps users whose browser blocks auth cookies
Theme-sensitive UI (dark/light)
Hero section
Animations
Featured books
Displays all books from backend
Filters & responsive grid
View cover, title, author, description
Add to reading list
Edit or delete book (if owner)
Add new book
Update existing book
Fully validated form
Displays user’s reading items
Update status or remove
User information
Stats (books added, reading list summary)
My books section
Validation
OTP flows
Cookie protection
-
Clone the Repository git clone https://github.com/jawadtaki0/reactors.git
-
Navigate to the Project cd reactors
-
Install Dependencies npm install
-
Add Environment Variables
Create a .env file:
VITE_API_URL=https://reactors-backendd-onrender.com/api GOOGLE_CLIENT_ID=563014879392-hdubdjvbpdbovliebolb52qoj45sd34j.apps.googleusercontent.com
- Run the Development Server npm run dev
App runs at:
Secure cookies
Real user sessions
MongoDB-powered storage
OTP authentication
CRUD operations on books and reading list
Reactors demonstrates:
Strong React architecture
Clean component structure
Real backend integration
Secure authentication & OTP
Dynamic reading list system
Responsive design
Smooth team collaboration
Production-level UI/UX
This frontend is now fully capable of supporting real user data and scalable book management features.