Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/dhaya3132/library_management

A online front-end book library management add the books and view the detailed information about books, categories the books based on the topics
https://github.com/dhaya3132/library_management

css form-validation html javscript react-router reactjs redux redux-toolkit tailwind

Last synced: 28 days ago
JSON representation

A online front-end book library management add the books and view the detailed information about books, categories the books based on the topics

Awesome Lists containing this project

README

        

## Online Library Management System

This project is an Online Library Management System built using React.js, Redux, and Tailwind CSS. It allows users to browse, add, and manage books in an online library. The application includes a responsive UI and uses React Router for navigation.

## Table of Contents
- Features
- Pages
- Components
- Technologies Used
- Installation
- Usage
- Folder Structure
- Contributing
- License

## Features
- Browse and search for books
- View detailed information about a book
- Add new books to the library
- Responsive design
- Error handling for invalid routes

## Pages
- Home Page: Introduction and overview of the library system.
- Book Detail Page: Displays detailed information about a selected book.
- Add Book Page: Form to add a new book to the library.
- Browse Book Page: Lists all available books with options to categories and search.
- Error Page: Displays a 404 error for invalid routes.

## Components
- Navbar: Navigation bar for navigating through the application.
- BookCard: Component to display individual book details in a card format.
- BooksData: Component that lists all the books in the library.
- Categories: Component for filtering books based on categories.
- Footer: Footer section of the website.
- SearchField: Input field for searching books.
- TabButton: Buttons for navigate between different book categories.
- Store Folder: Contains Redux store and slice logic.
- Utils Folder: Contains utility functions, including bookSlice and mockData.
- BookPage: Contains the selectes category books.

## Technologies Used
- React.js: JavaScript library for building user interfaces.
- Redux: State management library for React applications.
- Tailwind CSS: Utility-first CSS framework for styling.
- React Router: Library for handling routing in React applications.
- nanoid: Library for generating unique IDs.
- Vite: Development tool that provides a fast build and development environment for modern web projects.

## Folder Structure
online-library-management/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── BookCard.js
│ │ ├── Booksdata.js
│ │ ├── Categories.js
│ │ ├── Footer.js
│ │ ├── Navbar.js
│ │ ├── Searchfield.js
│ │ └── Tabbutton.js
│ ├── pages/
│ │ ├── AddBookPage.js
│ │ ├── BookDetailPage.js
│ │ ├── BrowseBookPage.js
│ │ ├── ErrorPage.js
│ │ └── HomePage.js
│ ├── store/
│ │ ├── index.js
│ ├── utils/
| | |__bookSlice.js
| | |
│ │ ├── mockData.js
│ ├── App.js
│ ├── index.js
│ └── ...
└── package.json

## Running application

- 1.Clone repository
- 2.navigate to the folder
- 3.npm install
- 4.npm run dev