Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mrzamin/bookstore
A frontend-based e-commerce bookstore built with React
https://github.com/mrzamin/bookstore
context-api css-modules react-router single-page-app
Last synced: about 1 month ago
JSON representation
A frontend-based e-commerce bookstore built with React
- Host: GitHub
- URL: https://github.com/mrzamin/bookstore
- Owner: mrzamin
- Created: 2024-04-23T21:17:39.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-06T02:50:06.000Z (7 months ago)
- Last Synced: 2024-10-02T07:01:40.277Z (about 2 months ago)
- Topics: context-api, css-modules, react-router, single-page-app
- Language: JavaScript
- Homepage: https://thinkfolio.vercel.app
- Size: 25.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Thinkfolio
A frontend-based e-commerce bookstore built with React
[Demo](https://thinkfolio.vercel.app/)
## About This Project
The app implements e-commerce store features with books from my personal reading wishlist as example products. Users can browse products by category, click to view detailed product info, add products to the cart, edit cart contents, and visit the cart to simulate a mock checkout process.
## Features
- Browse Home, Shop, Cart, and Product Detail pages
- Add, edit, and remove cart contents
- Hover on cart badge to preview its contents
- View Order Summary in cart including subtotal, taxes, and total
- Responsive design
- Minimalist UI styles
- Nested website menu to efficiently navigate between categories; includes mobile support
- Main page carousel with featured books
- JavaScript object-based book data
## Tech Stack
- **Languages**: JavaScript, HTML, and CSS
- **UI Library**: React
- **Styling**: CSS Modules
- **Build Tool**: Vite
- **Deployment**: Vercel
- **Dependencies**:
- react-router-dom: Routing
- react-slick: Main page carousel
- react-tooltip: Cart badge tooltip
- uuid: Unique IDs
## Architecture
Located in `src`:
- `components`: React non-page components (book list, increment/decrement button, etc.) and their CSS modules
- `pages`: React page components and their CSS modules
- `data`: Book and megamenu labels/href data
- `utils`: Utility functions used multiple times in the app
- **index.css**: Global styles
- **Context.jsx**: Context API Provider component for the store
- **main.jsx**: Entry point for the React app; contains the Router Provider component
Located in root:
- `public`: Book cover images, icons, and app screenshots
- **index.html**: Main HTML file containing "root" DOM node for React
## Book Data
The following state data is used to manage the simulated shopping experience. A Books Array is initiated in `bookData.js` that serves as the initial value of `products`. `products` is a state variable shared throughout the whole app using React's Context API.
**Books Array** (initialized in `bookData.js`):
Represents all products in the store, made up of book objects.
A factory function creates the objects with the following template:
```bash
const Book = (title, author, price, category, description) => {
return {
id: uuidv4(),
title,
author,
src: getImgPath(author),
slug: `${author}-${title}`,
price,
quantity: 0,
inCart: false,
category: category,
description: description,
};
};
```
Because `products` is a state variable, a re-render is triggered every time there is a change to the user's cart (either product change or quantity change).
## Run Locally
1. Clone the project in a folder of your choice on your computer.
```bash
git clone [email protected]:mrzamin/bookstore.git
```
2. Navigate to the project directory.
```bash
cd bookstore
```
3. Start the server.
```bash
npm run dev
```
New additions to the list of book titles for this app are welcome! Please use the [fork and pull request workflow](https://docs.github.com/en/pull-requests).
## What I'd Like to Work On in the Future
- Add local storage to save user's shopping items
- Allow user search
- Add book filters
- Add book star ratings
- Implement fake REST API endpoints to simulate fetching data from a database or server
- Test the app with React Testing Library
- Fix semantic HTML issues for improved accessibility
## Credits
- App icons from [The Noun Project](https://thenounproject.com/)
- Hero image from [Adobe Express](https://www.adobe.com/express/)
- Font from [Google Fonts](https://fonts.google.com/)
- Design inspiration from:
- [Cengiz Inceoglu](https://dribbble.com/shots/23265949--058-DailyUI-Shopping-Cart)
- [Paulina Preciado](https://dribbble.com/shots/22404197-URREA-Product-Detail-Page)
- [bn.com](https://www.barnesandnoble.com/)