An open API service indexing awesome lists of open source software.

https://github.com/hamadismail/library-management-client

A full-stack library management system that allows users to browse, borrow, and manage books online. The client side is built using React and provides a responsive, user-friendly interface for exploring books, managing borrow history, and accessing book details.
https://github.com/hamadismail/library-management-client

axios daisyui firebase-auth framer-motion react-router reactjs tailwindcss

Last synced: 2 months ago
JSON representation

A full-stack library management system that allows users to browse, borrow, and manage books online. The client side is built using React and provides a responsive, user-friendly interface for exploring books, managing borrow history, and accessing book details.

Awesome Lists containing this project

README

          

# Readora - Client Side

πŸ“š **Live Site:** [https://readora1.web.app/](https://readora1.web.app/)

## πŸ“Œ Project Purpose

**Readora** is a full-stack library management system that allows users to browse, borrow, and manage books online. The client side is built using React and provides a responsive, user-friendly interface for exploring books, managing borrow history, and accessing book details.

## πŸš€ Key Features

- πŸ“š Browse books by category or full list
- πŸ“– View book details and availability
- πŸ›’ Borrow books with return date selection
- πŸ—‚οΈ Manage user’s borrowed books
- 🌐 Protected routes and role-based access
- πŸ“± Responsive design using Tailwind CSS

## πŸ› οΈ Tech Stack

- **Frontend**: React.js, TailwindCSS, DaisyUI
- **Routing**: React Router DOM
- **Authentication**: Firebase
- **State Management**: React Context API
- **Form Handling**: React Hook Forms
- **Animation**: Swiper.js Slider, Framer Motion

## πŸ“¦ NPM Packages Used

- `react-hot-toast`
- `sweetalert2`
- `react-tooltip`
- `@headlessui/react`
- `react-simple-star-rating`
- `react-icons`
- `react-spinners`
- `date-fns`

## πŸ“‚ Folder Structure Highlights

- `/pages`: Main page components (Home, Book Details, Borrowed Books)
- `/components`: Reusable UI components (Spinner, StarRating, etc.)
- `/api`: Custom React hooks for fetching backend data
- `/hooks`: Custom utility and authentication hooks

## πŸ“¦ Installation Guide

### βœ… Prerequisites

- Node.js and npm installed
- Firebase project (for authentication)

### Clone the repository:

```bash
git clone https://github.com/hamadismail/library-management-client.git
cd library-management-client
```

### Install dependencies:

```bash
npm install
```

### Create a .env.local file in the root and add:

```bash
VITE_apiKey=your_firebase_api_key
VITE_authDomain=your_project.firebaseapp.com
VITE_projectId=your_project_id
VITE_storageBucket=your_bucket
VITE_messagingSenderId=your_sender_id
VITE_appId=your_app_id
```

### Start the development server:

```bash
npm run dev
```

## πŸ“« Contact

Feel free to reach out with any questions or feedback!

- πŸ’» GitHub: hamadismail

- πŸ“§ Email: hamad.ismail.gub@gmail.com