https://github.com/unni8230/bookhub
BookHub is a responsive React web app that lets users explore books by category, search titles, and view detailed info—all powered by JWT authentication and dynamic API integration.
https://github.com/unni8230/bookhub
javascript jwt-authentication mern-stack react react-router responsive-design rest-api styled-components
Last synced: 2 months ago
JSON representation
BookHub is a responsive React web app that lets users explore books by category, search titles, and view detailed info—all powered by JWT authentication and dynamic API integration.
- Host: GitHub
- URL: https://github.com/unni8230/bookhub
- Owner: Unni8230
- Created: 2025-07-02T14:23:00.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-02T15:19:16.000Z (12 months ago)
- Last Synced: 2025-07-02T15:39:49.176Z (12 months ago)
- Topics: javascript, jwt-authentication, mern-stack, react, react-router, responsive-design, rest-api, styled-components
- Language: JavaScript
- Homepage: http://unnibookhub.ccbp.tech
- Size: 191 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📚 BookHub
[](http://unnibookhub.ccbp.tech)
**BookHub** is a responsive React-based web application that fetches and displays books from an external API. Users can browse books by category, search for specific titles, and view detailed information—all within a clean, intuitive UI.
---
## 🚀 Features
- 🔐 **Login Authentication** with JWT
- 📚 **Bookshelves View** categorized by genres
- 🔍 **Search Functionality** to find books by title
- 📄 **Book Details Page** with cover, author, rating, and description
- 🔄 **API Integration** to fetch book data dynamically
- 💅 **Responsive Design** for mobile and desktop
---
## 🛠️ Tech Stack
| Tool | Purpose |
|------------------|------------------------------------|
| React | Front-end UI framework |
| React Router DOM | Client-side routing |
| JWT | Authentication token handling |
| REST API | Fetching book data |
| CSS | Styling and layout |
---
## 📂 Folder Structure
```
src/
├── components/ # Reusable UI components
├── App.js # Main app and routing logic
├── index.js # Entry point
├── App.css # Global styles
└── setupTests.js # Test configuration
```
---
## ⚙️ Getting Started
```bash
# Clone the repo
git clone https://github.com/Unni8230/BookHub.git
# Navigate into the project
cd BookHub
# Install dependencies
npm install
# Start the development server
npm start
```
> 🛠 If you're using Node.js v17+, run:
> ```bash
> export NODE_OPTIONS=--openssl-legacy-provider
> ```
---
## 🔐 Demo Credentials
Use the following credentials to explore the app:
- **Username:** rahul
- **Password:** rahul@2021
> These credentials are for demo purposes only and provide access to the full app experience.
---
## 📸 Screenshots
### 🔐 Login Page (Desktop)
### 🔐 Login Page (Mobile)
### 📱 Home Page (Desktop)
### 📱 Home Page (Mobile)
### 📚 Bookshelf Page
### 📖 Book Item Details Page
---
## 🔐 Authentication Flow
- Users must log in to access the main app
- JWT is stored securely and validated on protected routes
- Unauthenticated users are redirected to the login page
---
## 🙌 Credits
Built with ❤️ by [Unni](https://github.com/Unni8230) as part of a React learning journey. Inspired by the love for books and clean UI design.
---