https://github.com/nissanjk/bookhaven-client
BookHaven, an intuitive and responsive platform for library management. It allows users to explore books, borrow or return them, and administrators to manage the library catalog.
https://github.com/nissanjk/bookhaven-client
axios firebase reactjs tailwindcss
Last synced: about 2 months ago
JSON representation
BookHaven, an intuitive and responsive platform for library management. It allows users to explore books, borrow or return them, and administrators to manage the library catalog.
- Host: GitHub
- URL: https://github.com/nissanjk/bookhaven-client
- Owner: NissanJK
- Created: 2025-01-09T18:05:45.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-11T15:13:38.000Z (over 1 year ago)
- Last Synced: 2025-04-01T14:49:36.032Z (over 1 year ago)
- Topics: axios, firebase, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://bookhaven-f4847.web.app/
- Size: 3.07 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📚 BookHaven - Client Side (Library Management System)
## 🚀 Overview
**BookHaven** is an intuitive and responsive **Library Management System** that allows users to explore books, borrow and return them, and enables administrators to efficiently manage the library catalog.
## 🌍 Live Demo
🔗 [Main Live Site](https://bookhaven-f4847.web.app/)
🔗 [Alternate Firebase Hosting](https://bookhaven-f4847.firebaseapp.com/)
---
## 🛠️ Technologies Used
| Technology | Description |
|-----------------------|-------------|
| **React.js** | Frontend framework for dynamic UI |
| **React Router** | Client-side routing |
| **Tailwind CSS** | Utility-first CSS framework for styling |
| **DaisyUI** | Pre-designed UI components |
| **Axios** | HTTP requests handling |
| **Firebase** | Authentication and hosting |
| **React Helmet** | Manage document head dynamically |
| **React Toastify** | Custom notifications and alerts |
| **SweetAlert2** | Modern popups and alerts |
| **React Icons** | Icon library for UI enhancements |
| **React Tooltip** | Adds tooltips to UI elements |
| **React Carousel** | Responsive image carousel |
| **React Rating Stars** | Displays and manages book ratings |
| **React Typewriter** | Adds a typewriter effect for engaging UI |
---
## ✨ Features
✅ **📖 Browse and Search** – Explore books by category and search easily.
✅ **📚 Borrowing System** – Borrow and return books with real-time updates.
✅ **🔐 User Authentication** – Secure login and signup using Firebase Authentication.
✅ **🎨 Responsive Design** – Optimized for all devices.
✅ **💬 Interactive UI** – Smooth user experience with alerts, modals, and tooltips.
✅ **💬 Admin specific route** – Admin specific route such as add books,update books.
---
## 📦 Dependencies
Install project dependencies before running the application:
```bash
npm install
```
Key dependencies in `package.json`:
- `"react"`
- `"react-router-dom"`
- `"axios"`
- `"tailwindcss"`
- `"daisyui"`
- `"firebase"`
- `"react-helmet-async"`
- `"react-toastify"`
- `"sweetalert2"`
- `"react-icons"`
- `"react-tooltip"`
- `"react-responsive-carousel"`
- `"react-rating-stars-component"`
- `"react-simple-typewriter"`
---
## 🏗️ Installation & Setup
Follow these steps to run **BookHaven** locally:
### 🔹 Prerequisites
Ensure you have the following installed:
- **Node.js** (Download: [https://nodejs.org/](https://nodejs.org/))
- **Git** (Optional)
### 🔹 Steps
1️⃣ **Clone the Repository**
```bash
git clone https://github.com/NissanJK/BookHaven-Client.git
cd bookhaven-client
```
2️⃣ **Install Dependencies**
```bash
npm install
```
3️⃣ **Set Up Firebase**
- Go to **Firebase Console** ([https://console.firebase.google.com/](https://console.firebase.google.com/)).
- Create a project and enable **Authentication** and **Firestore**.
- Copy your **Firebase Config** and replace it in `.env` file:
```env
REACT_APP_FIREBASE_API_KEY=your_api_key
REACT_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
REACT_APP_FIREBASE_PROJECT_ID=your_project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
REACT_APP_FIREBASE_APP_ID=your_app_id
```
4️⃣ **Run the Development Server**
```bash
npm start
```
- The app will open at **http://localhost:3000/** 🚀
---
## 📬 Contact
📧 **Email:** [jawadul.karim78@gmail.com](mailto:jawadul.karim78@gmail.com)
🔗 **LinkedIn:** [Jawadul Karim](https://www.linkedin.com/in/jawadul-karim28/)
---
### 🎉 Happy Coding! 🚀