HI Library is a library platform that also sells books. Users can browse, search and review books dynamically retrieved from the Google Books API. Books can be bought and borrowed, and the platform provides two separate carts for this purpose.
- Book Browsing and Searching: Users can search for books by title, author, or category.
- Filtering: Users can filter books by actions: for buying books or borrowing.
- Dynamic Book Details: View detailed information about each book, including ratings, reviews, and descriptions.
- Cart Functionality: A pop-up cart allows users to add books they are interested in and proceed to checkout.
- Dark Mode: Supports dark mode for a user-friendly experience in different lighting conditions.
- Responsive Design: Ensures a smooth browsing experience across various devices and screen sizes.
- React: For building the user interface.
- React Router: To handle in-app routing.
- Bootstrap & Bootswatch: For styling and responsive design.
- React Rating Stars Component: To display and select book ratings.
- Yup and Formik for working with forms.
Contexts of The Application:
ThemeContext: Manages the theme of the application, such as toggling between light and dark modes.CartPopUpContext: Controls the visibility and behavior of the cart popup. This context is crucial for managing the state of whether the cart popup is open or closed.BookContext: Provide Data from useBookFetching custom hook.BookDetailsContext: Specifically focused on managing the state and operations related to individual book details. This could include fetching detailed information for a single book, such as descriptions, authors, and ratings, when a user selects a book to view more information.CartContext: Manages the shopping cart’s state, including items that have been added to the cart for purchase. This context likely handles operations such as adding or removing items from the cart and calculating the total price.LoanCartContext: Similar to CartContext but specifically for items that users intend to borrow instead of purchase. This context manages the list of books selected for loan.CategoryContext: Manages the state related to book categories or genres, allowing users to filter books based on their interests. This could include storing the current category selection and updating the displayed books list accordingly.FilterContext: Used for managing additional filtering criteria beyond categories, such as sorting by price, popularity, or new arrivals. This context enables dynamic filtering of the books list based on various parameters chosen by the user.
Custom hooks: useBookFeching: Handling API requests to fetch book data
Helpers: we use one function-helper: makeShorterName - to make a string shorter, since some titles and list of authors might be too long.
To set up the project on your local machine, follow these steps:
- Clone the repository:
git clone https://github.com/collaboration-work/team-7-react-project.git
- Navigate into the project directory:
cd team-7-react-project
- Install the required dependencies:
npm install
To run the application in development mode, use the command:
npm run dev
This will start the application on localhost:5173.
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch
git checkout -b feature/AmazingFeature
- Commit your Changes
git commit -m 'Add some AmazingFeature'
- Push to the Branch
git push origin feature/AmazingFeature
- Open a Pull Request
Contributors:
... Rahmat?