A comprehensive, user-friendly web application for streamlined library operations built with React, TypeScript and modern web technologies.
Shelfy is a production-ready, full-featured web application that serves as the visual interface for the Shelfy ecosystem. It provides an intuitive, responsive experience for browsing books, managing inventory, and tracking borrow activities.
This repository focuses exclusively on the Client-Side UI, consuming the RESTful API from the Shelfy Backend Server.
| Feature | Description |
|---|---|
| Book Catalog | Browse all books with advanced sorting and genre filtering |
| CRUD Operations | Create, read, update and delete book records with real-time feedback |
| Rich Metadata | Title, Author, Genre, ISBN, Description and copy management |
| Availability Tracking | Automatic status updates based on available copies |
| Feature | Description |
|---|---|
| Streamlined Checkout | Simple, intuitive book borrowing process with form validation |
| Due Date Picker | Flexible date selection with future-date enforcement via React Day Picker |
| Inventory Sync | Real-time availability updates reflected immediately across the UI |
| Borrow Summary | Aggregated dashboard showing total borrow quantities per book |
| Feature | Description |
|---|---|
| Dark / Light Mode | Theme switching powered by next-themes with zero flash |
| Toast Notifications | Elegant success and error feedback via Sonner |
| Accessible Components | Built on Radix UI primitives for WCAG-compliant interactions |
| Responsive Design | Optimized layout for desktop, tablet and mobile devices |
| Technology | Version | Purpose |
|---|---|---|
| React | ^19.1.0 | Core UI library with concurrent features |
| TypeScript | ~5.8.3 | Type-safe development experience |
| Vite | ^7.0.4 | Lightning-fast build tool and dev server |
| Redux Toolkit | ^2.8.2 | Global state management |
| RTK Query | ^2.8.2 | Efficient API data fetching and caching |
| React Router | ^7.7.1 | Client-side routing |
| Tailwind CSS | ^4.1.11 | Utility-first CSS framework |
| Radix UI | ^1.4.3 | Accessible, unstyled component primitives |
| React Hook Form | ^7.62.0 | Performant form state management |
| Zod | ^4.0.14 | Runtime schema validation |
| Lucide React | ^0.535.0 | Consistent, beautiful icon library |
| React Day Picker | ^9.8.1 | Flexible date picker component |
| Sonner | ^2.0.7 | Elegant toast notification system |
| next-themes | ^0.4.6 | Dark/light mode theme management |
| date-fns | ^4.1.0 | Modern date utility library |
| clsx / tailwind-merge | ^2.1.1 | Conditional class name utilities |
┌───────────────────────────────────────────────────────┐
│ Browser Client │
│ React 19 + TypeScript + Vite │
└──────────────────────────────┬────────────────────────┘
│
┌──────────────────────────────▼────────────────────────┐
│ React Router v7 │
│ /books /create-book /borrow/:id │
└───────────┬───────────────────────────────┬───────────┘
│ │
┌───────────▼──────────┐ ┌────────────▼───────────┐
│ Page Components │ │ Redux Store │
│ (Layouts/Pages) │ │ RTK Query Slices │
└───────────┬──────────┘ └────────────┬───────────┘
│ │
┌───────────▼───────────────────────────────▼───────────┐
│ Shared Components (Radix UI / │
│ Lucide Icons / Tailwind CSS) │
└────────────────────────────┬──────────────────────────┘
│ HTTP (RTK Query)
┌────────────────────────────▼──────────────────────────┐
│ Shelfy Backend REST API │
│ Node.js · Express · MongoDB │
└───────────────────────────────────────────────────────┘
milestone-16-client/
├── src/
│ ├── components/ # Reusable UI components (buttons, modals, tables)
│ ├── hooks/ # Custom React hooks
│ ├── layouts/ # Page layout wrappers
│ ├── lib/ # Utility helpers (cn, formatters)
│ ├── pages/ # Route-based page components
│ │ ├── home/ # Landing / dashboard page
│ │ ├── allBooks/ # Book catalog with filter & sort
│ │ ├── addBook/ # Add new book form
│ │ ├── borrowSummary/ # Aggregated borrow analytics
│ │ └── documentation/ # API documentation page
│ ├── providers/ # Theme & Redux providers
│ ├── redux/ # Redux store & RTK Query API slices
│ ├── routes/ # Route definitions
│ ├── schema/ # Zod validation schemas
│ ├── styles/ # Global CSS and Tailwind config
│ ├── types/ # TypeScript type definitions
│ ├── main.tsx # App entry point
│ └── vite-env.d.ts
├── index.html
├── package.json
├── vite.config.ts
└── README.md
| Requirement | Details |
|---|---|
| Node.js | v18 or higher |
| Backend Server | Shelfy Backend running on port 3000 |
| Package Manager | npm or yarn |
-
Clone the repository
git clone https://github.com/zahid-official/milestone-16-shelfyClient.git cd milestone-16-client -
Install dependencies
npm install
-
Configure environment variables
Create a
.env.localfile in the root directory:VITE_API_BASE_URL=http://localhost:3000/api
-
Start the development server
npm run dev
The app will open at
http://localhost:5173
| Variable | Description | Required |
|---|---|---|
VITE_API_BASE_URL | Shelfy Backend API base URL | Yes |
| Script | Command | Description |
|---|---|---|
| Development | npm run dev | Start Vite dev server with HMR |
| Build | npm run build | Type-check and build for production |
| Preview | npm run preview | Preview the production build locally |
| Lint | npm run lint | Run ESLint across the codebase |
| Route | Page | Description |
|---|---|---|
/ | Home | Landing page and dashboard overview |
/books | All Books | Browse, filter, sort and manage the catalog |
/books/:id | Book Details | Full book information and quick actions |
/create-book | Add Book | Form to create a new book record |
/edit-book/:id | Edit Book | Pre-filled form to update book details |
/borrow/:bookId | Borrow Book | Quantity selection and due date picker |
/borrow-summary | Borrow Summary | Aggregated borrowing analytics dashboard |
/documentation | Documentation | API and usage documentation |
Data Flow:
User Interaction (e.g. Borrow a Book)
│
▼
React Component dispatches RTK Query mutation
│
▼
RTK Query sends POST /api/borrow to backend
│
┌──────┴───────┐
│ │
▼ ▼
Success? Error?
│ │
▼ ▼
Invalidates cache Sonner toast
Auto-refetches shows error
book list data message
│
▼
UI updates instantly with fresh data
- User triggers action — clicks a button or submits a form
- React Hook Form validates — Zod schema runs against form values client-side
- RTK Query fires request — mutation or query sent to the Shelfy backend API
- Cache invalidated on success — related queries auto-refetch for fresh data
- Sonner notifies user — toast confirms success or surfaces error message
- UI reflects new state — components re-render with updated Redux store data
Web Developer | Tech Enthusiast
Creating impactful digital experiences with passion and purposeful design
# 1. Fork the repository on GitHub
# 2. Clone your fork
git clone https://github.com/your-username/milestone-16-client.git
# 3. Create a feature branch
git checkout -b feature/your-feature-name
# 4. Commit your changes
git commit -m "feat: add your feature description"
# 5. Push to your fork
git push origin feature/your-feature-name
# 6. Open a Pull Request on GitHubShelfy - Redefining library efficiency through seamless digital innovation.