Library Management System

Purpose

The Library Management System is a web application designed to help users manage books in a library. It allows users to browse books, borrow books, and return borrowed books. The system is built using React for the frontend and Node.js with MongoDB for the backend.

Live URL

[Firebase] (https://book-library-client-server.web.app/)

Key Features

• Browse Books by Category: Users can explore books by their categories.
• Book Details: Users can view detailed information about each book.
• Borrow Books: Users can borrow books and track the borrow and return dates.
• Return Books: Users can return borrowed books and update the system accordingly.
• User Authentication: Users need to log in to borrow and return books.
• Toast Notifications: Provides success and error messages during actions (borrow, return).

Setup

Backend Setup

1. Repository: https://github.com/mdekramulridoy/Book-Library-Server

Client Setup

1. Repository: https://github.com/mdekramulridoy/Book-Library-Client

Main Technologies

This project utilizes the following technologies:

• React: For building a dynamic and responsive user interface.
• React Router DOM: For managing client-side routing.
• Firebase: For backend services and authentication.
• TailwindCSS: For styling the application.
• DaisyUI: For prebuilt UI components with TailwindCSS.
• Swiper: For implementing beautiful sliders and carousels.
• React Toastify: For providing toast notifications.
• Lottie React: For adding interactive and animated components.
• React Reveal: For reveal animations.
• React Icons: For integrating scalable vector icons.
• React Rating Stars Component: For star-based rating displays.
• React Loader Spinner: For custom loading spinners.
• React Simple Typewriter: For typewriter-style animations.

Main Features

This project includes the following key features:

1. Responsive Design: Works seamlessly across devices like mobile, tablet, and desktop.
2. Firebase Integration: Provides authentication and real-time database services.
3. Client-Side Routing: Uses React Router for dynamic navigation without page reloads.
4. Custom Animations: Adds visual effects using libraries like Lottie React and React Reveal.
5. Interactive Components: Implements rating stars, typewriter effects, and sliders.
6. Toast Notifications: Uses React Toastify for user-friendly notifications.
7. Prebuilt UI Components: DaisyUI enhances styling and speeds up development.
8. Efficient Sorting: Utilizes Match Sorter for easy and intuitive data sorting.

Dependencies

Here are the primary dependencies used in this project:

• firebase: ^11.1.0
• localforage: ^1.10.0
• lottie-react: ^2.4.0
• match-sorter: ^8.0.0
• react: ^18.3.1
• react-dom: ^18.3.1
• react-hot-toast: ^2.4.1
• react-icons: ^5.4.0
• react-loader-spinner: ^6.1.6
• react-rating-stars-component: ^2.2.0
• react-reveal: ^1.2.2
• react-router-dom: ^7.1.0
• react-simple-typewriter: ^5.0.1
• react-toastify: ^11.0.2
• sort-by: ^0.0.2
• swiper: ^11.1.15

Development Dependencies

• @eslint/js: ^9.17.0
• @types/react: ^18.3.17
• @types/react-dom: ^18.3.5
• @vitejs/plugin-react: ^4.3.4
• autoprefixer: ^10.4.20
• daisyui: ^4.12.22
• eslint: ^9.17.0
• eslint-plugin-react: ^7.37.2
• eslint-plugin-react-hooks: ^5.0.0
• eslint-plugin-react-refresh: ^0.4.16
• globals: ^15.13.0
• postcss: ^8.4.49
• tailwindcss: ^3.4.17
• vite: ^6.0.3

Running the Project Locally

To run this project on your local machine, follow these steps:

1. Prerequisites

• Install Node.js on your system.
• Set up Firebase (if required).

2. Clone the Project

git clone [Your Project Repository URL]
cd [Project Folder Name]

3. Install Dependencies

npm install

4. Set Environment Variables

Create a .env file in the root directory and add the following configuration:

REACT_APP_FIREBASE_API_KEY=[Your Firebase API Key]
REACT_APP_FIREBASE_AUTH_DOMAIN=[Your Firebase Auth Domain]
REACT_APP_FIREBASE_PROJECT_ID=[Your Firebase Project ID]
REACT_APP_FIREBASE_STORAGE_BUCKET=[Your Firebase Storage Bucket]
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=[Your Firebase Messaging Sender ID]
REACT_APP_FIREBASE_APP_ID=[Your Firebase App ID]

5. Run the Project

npm run dev

6. Open in Browser

Once the development server is running, open your browser and go to:

http://localhost:3000

Contribution

To contribute to this project:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with a meaningful message.
4. Push your branch and submit a Pull Request.