Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahdinsalman23/bookstore-reactjs
https://github.com/shahdinsalman23/bookstore-reactjs
Last synced: 19 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/shahdinsalman23/bookstore-reactjs
- Owner: shahdinsalman23
- Created: 2024-12-07T06:46:58.000Z (27 days ago)
- Default Branch: main
- Last Pushed: 2024-12-07T07:53:09.000Z (27 days ago)
- Last Synced: 2024-12-07T08:25:19.621Z (27 days ago)
- Language: JavaScript
- Homepage: https://shahdin-bookstore.vercel.app
- Size: 3.91 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📚 E-Commerce Bookstore
A fully responsive and dynamic e-commerce bookstore built with **React + Vite**. This project utilizes the **Google Books API** for fetching and displaying books, featuring a seamless search bar, dynamic product detail pages, add-to-cart functionality, and a responsive design for an optimal user experience across all devices.
---
## 🌟 Features
- **Google Books API Integration**
Fetches real-time data to display a wide variety of books.
- **Search Functionality**
Users can search for books directly through the header search bar, and relevant results are dynamically displayed.
- **Dynamic Product Details Page**
Each book has its own detailed page showcasing information like title, author, description, and more.
- **Add to Cart & Checkout**
Users can add books to their cart and proceed to checkout with ease.
- **Responsive Design**
Fully optimized for desktop, tablet, and mobile devices.
---
## 🚀 Tech Stack
- **Frontend:** React (with Vite)
- **Styling:** CSS (or any specific library/framework used)
- **API:** Google Books API
---
## ⚙️ Installation & Setup
Follow these steps to get the project up and running on your local machine:
## 🛠️ Usage
### **Search for Books**
- Use the search bar in the header to search for any book by title, author, or keyword.
- The page will dynamically update to display matching results fetched from the Google Books API.
### **View Product Details**
- Click on any book to navigate to its detailed product page.
- Explore details like book title, author, description, and price (if applicable).
### **Add to Cart & Checkout**
- Add your favorite books to the cart using the "Add to Cart" button.
- Access the cart through the cart icon in the header.
- Proceed to the checkout process to complete your purchase.
---
## 📋 Folder Structure
```plaintext
├── public
│ ├── index.html # Entry point
├── src
│ ├── components # Reusable components (e.g., Header, Footer, Sidebar)
│ ├── context # Context for state management (e.g., CartContext)
│ ├── pages # Individual pages (e.g., Home, ProductDetails, Checkout)
│ ├── styles # CSS styles
│ ├── App.jsx # Main App component
│ ├── main.jsx # ReactDOM.render entry
├── package.json # Project dependencies
├── vite.config.js # Vite configuration
└── README.md # Project documentation
```
### **1. Clone the Repository**
```bash
git clone https://github.com/your-username/your-repo-name.git