Book-Store Front-end

This React.js-based application functions as the user-facing interface for the Bookstore project.
Seamlessly designed for intuitive interaction, it provides a diverse range of functionalities catering to book browsing, selection, and ordering, addressing the needs of both customers and administrators. The back-end side can be found here

The deployed app https://bookstore-axos.netlify.app

Table of Contents

• Usage Guide
• Features
• Technologies Used
• Dependencies
• Screenshots

Usage Guide

1. Clone the project
   git clone https://github.com/alexonthespot7/Tournament_front-end.git
   
2. Run the following command in a terminal window (in the complete) directory:
   npm install
   
3. Set the environmental variable for the back-end url:
   
   1. Option 1: Run the following command in a terminal window (in the complete) directory:
      $Env:REACT_APP_API_URL="back_end_url"
      
   2. Option 2: Add the .env file to the root of the project with the following content:
      REACT_APP_API_URL=<your_backend_url>
      
4. Run the following command in a terminal window (in the complete) directory:
   npm start
   
5. Navigate to localhost:3000

Default ADMIN credentials:

• password: test
  
• username: admin

Features

For All Users

• Intuitive UI Design: A sleek, black-and-white themed interface with smooth animations throughout the website.

• Book Browsing: Browse and search for books by author, title, or category, presented as interactive cards with cover images and prices.

• Book Details: Access comprehensive book information in a dialog when clicked, and add books to the cart or view cart contents seamlessly.

• Category Display: Carousel-style presentation of books within categories, facilitating easy filtering and exploration.

• Cart Functionality: An accessible cart menu with options to manage book quantities, view total costs, and proceed to checkout.

• Order Management: Ability to fill delivery details, place orders, and obtain order IDs/passwords for tracking order status.

For Authenticated Users

• Personal Page: Access and manage personal information, previous orders, and delivery details, providing a personalized experience.

For Administrators

• Order Management: View and modify orders, change order information, and update order statuses; includes exporting orders' data.

• User Management: Manage user verification, roles, and details, with the ability to export user data.

• Category Management: Add, edit, or remove categories to maintain an organized book catalog.

• Book Management: Edit, delete, or add new books to the catalog, including management of book cover images stored in Firebase.

Technologies Used

• React.js
• css
• firebase

Dependencies

• @mui/icons-material (^5.11.0): Material-UI Icons library for customizable icons following Material Design guidelines.
• @mui/material (^5.11.4): Material-UI framework providing pre-designed React components.
• ag-grid-react (^28.2.1): React wrapper for AG-Grid to seamlessly integrate its functionalities.
• date-fns (^3.0.6): Modern JavaScript date utility library.
• firebase (^9.16.0): Firebase SDK for integrating Firebase services into the application.
• framer-motion (^8.5.4): Library facilitating smooth animations and motion design for React components.
• nuka-carousel (^5.4.1): React-based carousel component offering carousel functionalities.
• rc-footer (^0.6.8): React footer component for creating footers within applications.
• react-router-dom (^6.6.2): Declarative routing for navigation and view handling in React.
• react-select (^5.7.0): React component providing customizable select inputs.
• react-select-country-list (^2.2.3): React component offering a country list for select inputs.
• uuid (^9.0.0): Library for generating and working with universally unique identifiers (UUIDs).

Screenshots