Languages: English, Polish

Building a Bookshelf Experience with HTML, CSS, JavaScript, Axios, Firebase, and More!

Discover, search, and display books effortlessly on Bookshelf's intuitive platform.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Built With
3. API Reference
4. Getting Started
   • Prerequisites
   • Installation
5. Usage
6. Contributing
7. Contributors

About The Project

Bookshelf is a web application for browsing books, with additional features such as the ability to add books to a shopping list, explore categories, view popular books, and support charitable foundations.

Note

The project is set up for automatic deployment to GitHub Pages using GitHub Actions by JamesIves (GitHub Pages Deployment Action). The deployment action is configured to push production-ready code into the gh-pages branch.

Back to top

Built With

The "Bookshelf" project employs a diverse set of technologies and tools to create a seamless and engaging user experience.

Frontend

• HTML: Markup language for structuring content.
• CSS: Styling language for presenting the project's visual aspects.
• JavaScript: Programming language for dynamic and interactive elements.
• Swiper: Utilized for creating a slider component for charity foundations.

Backend / Firebase

• Firebase: Integrated for user authentication, providing a secure login system.

Server/API Communication

• Axios: HTTP client used to manage asynchronous operations and handle HTTP requests effectively.

Notifications

• Notiflix: Notification library implemented to enhance user feedback.

Additional Tools

• Node.js and npm: Used for managing project dependencies.
• Responsiveness: Designed to ensure optimal performance across various devices.

This diverse technological stack enables the "Bookshelf" project to deliver a feature-rich platform for book enthusiasts, offering functionalities such as browsing books, supporting charity foundations, managing shopping lists, and more.

Back to top

API Reference

Get all categories

  GET /books/category-list

Returns a list of categories.

Get top books in each category

  GET /books/top-books

Receives the first 5 books from the collection in each category.

Get books by category

  GET /books/category

Parameter	Type	Description
category	string	Category name to get a list of books in this category

Receives a collection of 20 books of a certain category.

Get information about a book

  GET /books/{id}

Parameter	Type	Description
id	string	Required. Id of book to fetch

Receives complete information about the book identified by {id}.

Getting Started

This section provides information on prerequisites and installation steps to set up the Bookshelf project locally.

Prerequisites

Make sure you have the following installed:

• Node.js
• npm

Installation

1. Clone the repository

   git clone https://github.com/Valik3201/bookshelf.git

2. Navigate to the project directory

    cd bookshelf

3. Install dependencies

    npm ci

4. Run the project in development mode:

   npm run dev

Now you're ready to explore and contribute to Bookshelf locally!

Back to top

Usage

Users can navigate through the platform using the following features:

Authentication

• Ability to create an account and log in using Firebase.

Browse Books

• The homepage displays a list of book categories and best sellers within each category .
• Enables users to browse books based on categories.

Shopping List

• Users can add books to the shopping list.
• The shopping list is accessible for logged-in users.

Detailed Information

• Clicking on a book provides users with detailed information in a modal window.

Charity Foundations

• Users can click on each foundation, opening a new page with the respective foundation's website for more information.

Themes and Responsiveness

• Two themes available: light and dark.
• Responsiveness optimized for various devices.

Pagination, Loader, Scroll Up

• Pagination on the Shopping list page.
• Loader indicates ongoing asynchronous operations.
• Scroll Up button for quick navigation to the top of the page.

Back to top

Contributing

Contributions are welcome! If you have suggestions or improvements, feel free to fork the project, create a new branch, make your changes, and submit a pull request.

1. Fork the Project

2. Create your Feature Branch

   git checkout -b feature/NewFeature
   

3. Commit your Changes

   git commit -m 'Add some NewFeature'

4. Push to the Branch

   git push origin feature/NewFeature

5. Open a Pull Request

Back to top

Contributors

1. Valentyn Chernetskyi - Team Lead

   • Home Page
   • Loader
   • Authorization

2. Mateusz Firla - Scrum Master

   • Header
   • Dark Mode

3. Tomek Stańczak

   • Header
   • Mobile Menu
   • Authorization

4. Anna Sanetra

   • Shopping List Page
   • Books in localStorage
   • Pagination

5. Aleksandra Jarzębska

   • Images & Icons
   • Modal Window
   • Book by ID

6. Ewa Górniak

   • Modal Window
   • Book by ID

7. Patryk Kuca

   • Charity Foundations
   • Scroll Up Button

Back to top