A React-based online library application built with Vite, React Router, and Redux Toolkit. Users can browse books by category, search by title or author, view book details, and add new books to the library.
Make sure you have the following installed on your machine:
- Node.js (v18 or higher recommended)
- npm (comes with Node.js)
You can verify your installations by running:
node -v
npm -v- Clone the repository
git clone https://github.com/code-kasha/online-library- Navigate into the project directory
cd online-library- Install dependencies
npm installStart the development server:
npm run devThen open your browser and go to:
http://localhost:5173
To create an optimised production build:
npm run buildTo preview the production build locally:
npm run previewsrc/
├── components/ # Reusable components (Navbar, BookCard, etc.)
├── pages/ # Page-level components
│ ├── Home.jsx
│ ├── BrowseBooks.jsx
│ ├── BookDetails.jsx
│ ├── AddBook.jsx
│ └── NotFound.jsx
├── store/ # Redux store and slices
│ ├── store.js
│ └── booksSlice.js
├── App.jsx # Main app with route definitions
└── main.jsx # Entry point
| Route | Page | Description |
|---|---|---|
/ |
Home | Landing page with categories and popular books |
/books/:category |
Browse Books | Books filtered by category, with search |
/book/:id |
Book Details | Detailed view of a selected book |
/add |
Add Book | Form to add a new book via Redux |
* |
404 Not Found | Handles all undefined routes |
| Tool | Purpose |
|---|---|
| Vite | Project scaffolding & dev server |
| React | UI library |
| React Router DOM | Client-side routing |
| Redux Toolkit | Global state management |
| CSS / Bootstrap / Tailwind | Styling |
- 🏠 Home Page — Welcome message, book category list, and popular book cards
- 📚 Browse Books — Filter books by category via dynamic routes; search by title or author
- 📖 Book Details — View full details (title, author, description, rating) for any book
- ➕ Add Book — Add a new book using a validated form; state managed with Redux
- 🚫 404 Page — Custom not-found page showing the invalid URL, with a link back to Home
Akash Damle
GitHub: @code-kasha