Skip to content

nzyoni/cyber-book-store

Repository files navigation

Cyber Book Store

This project is a web application that offers book search functionality using the Google Books API.

---> Explore the live demo here! <---

Table of Contents

Introduction

The Cyber Book Store is a React-based web application designed to help users find books using the Google Books API. It provides a user-friendly interface for searching books, displaying book details, managing pagination, and even includes a shopping cart feature for a seamless book-buying experience.

Setup

To run this project locally:

  1. Clone this repository.
  2. Install dependencies using npm install.
  3. Start the development server with npm run dev.
  4. Access the application in your browser at http://localhost:3000.

Features

  • Book Search: Utilizes the Google Books API to search for books based on user input.
  • Pagination: Allows users to navigate through search results using paginated views.
  • Book Details: Displays book information including title, and cover image.
  • Skeleton Loader: Shows animated placeholders while content is loading.
  • Purchase Form: Include a form to facilitate book selection and purchase.
  • Shopping Cart: Provides a shopping cart functionality for users that wants to buy more than one book.

Testing

The project includes unit tests to verify the functionality of key components and hooks. To run tests, use the command npm test.

Libraries Used

  • React: A JavaScript library for building user interfaces.
  • Next.js: A React framework that enables server-side rendering and other powerful features for web applications.
  • Jest: A JavaScript testing framework for React applications.
  • @testing-library/react: A testing utility for React components.
  • react-hook-form: A library for managing forms in React applications, providing hooks for form validation and handling.
  • yup: A JavaScript schema builder for value parsing and validation.
  • @floating-ui/react (v0.26.4): A library specialized in handling popovers and dialogs within the application interface.
  • ts-jest: TypeScript preprocessor for Jest.
  • ts-node: TypeScript execution and REPL for Node.js.