A modern, responsive book discovery web app — explore world-famous books, view detailed info, and track your personal reading journey.
- 📖 Book Collection — Browse a curated list of world-famous books across multiple genres
- 🔍 Book Details Page — View full info: author, category, tags, rating, number of pages, publisher, and year
- 📌 Read List — Save books you want to read using the browser's LocalStorage
- ✅ Finished List — Keep track of books you've already completed
- 🚫 Duplicate Prevention — Toast notifications alert you when a book is already in your list
- 📊 Reading Stats — Visual bar chart showing your reading progress by page count
- 🔀 Multi-Page Routing — Smooth client-side navigation with React Router DOM
- ❌ Custom 404 Page — Friendly "Not Found" page for invalid routes
- 📱 Fully Responsive — Works seamlessly on desktop, tablet, and mobile
| Category | Technology |
|---|---|
| ⚛️ UI Library | React.js v18 |
| ⚡ Build Tool | Vite |
| 🎨 Styling | Tailwind CSS |
| 🧩 UI Components | DaisyUI |
| 🔁 Routing | React Router DOM v6 |
| 📊 Charts | Recharts |
| 🔔 Notifications | React Toastify |
| 💾 Data Persistence | LocalStorage API |
| 🚀 Deployment | Vercel |
{
"dependencies": {
"react": "^18.x",
"react-dom": "^18.x",
"react-router-dom": "^6.x",
"recharts": "^2.x",
"react-toastify": "^10.x"
},
"devDependencies": {
"vite": "^5.x",
"@vitejs/plugin-react": "^4.x",
"tailwindcss": "^3.x",
"daisyui": "^4.x",
"postcss": "^8.x",
"autoprefixer": "^10.x",
"eslint": "^8.x"
}
}world-famous-book/
├── public/
│ └── json data/
├── src/
│ ├── assets/ # Static images
│ ├── components/
│ │ ├── Navbar/ # Navigation bar
│ │ ├── Banner/ # Hero/banner section
│ │ ├── BookCard/ # Individual book card
│ │ ├── BookDetails/ # Book detail modal/page
│ │ └── Footer/ # Footer component
│ ├── pages/
│ │ ├── Home/ # Home page — book listing
│ │ ├── ListedBooks/ # Read list & finished list tabs
│ │ ├── PagesToRead/ # Reading stats with bar chart
│ │ └── NotFound/ # Custom 404 page
│ ├── utils/
│ │ └── localStorage.js # LocalStorage helper functions
│ ├── App.jsx # Root component & route config
│ └── main.jsx # Entry point
├── index.html
├── tailwind.config.js
├── vite.config.js
└── package.json
# 1. Clone the repository
git clone https://github.com/RS-Arafath/world-famous-book.git
# 2. Move into the project folder
cd world-famous-book
# 3. Install all dependencies
npm install
# 4. Start the dev server
npm run devOpen your browser at http://localhost:5173
npm run build👉 https://book-vibe-bd.vercel.app/
| Page | Route | Description |
|---|---|---|
| Home | / |
Browse the full book collection |
| Book Details | /book/:id |
View detailed info for a specific book |
| Listed Books | /listed-books |
Your read & finished book lists |
| Pages to Read | /pages-to-read |
Bar chart of your reading stats |
| 404 Not Found | * |
Custom error page for invalid routes |
Contributions are welcome!
- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature - Commit your changes:
git commit -m "Add: your feature description" - Push to the branch:
git push origin feature/your-feature - Open a Pull Request
Made with ❤️ by RS Arafath