Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/furkan-dogu/shopping-app
Welcome to the Shopping App! This web application I built with React allows users to discover products, add them to the shopping basket, and view details about each product.
https://github.com/furkan-dogu/shopping-app
bootstrap javascript react react-bootstrap react-icons
Last synced: about 5 hours ago
JSON representation
Welcome to the Shopping App! This web application I built with React allows users to discover products, add them to the shopping basket, and view details about each product.
- Host: GitHub
- URL: https://github.com/furkan-dogu/shopping-app
- Owner: furkan-dogu
- Created: 2024-02-27T15:39:27.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-02-28T14:49:33.000Z (9 months ago)
- Last Synced: 2024-02-28T15:59:56.553Z (9 months ago)
- Topics: bootstrap, javascript, react, react-bootstrap, react-icons
- Language: JavaScript
- Homepage: https://e-trade-app.vercel.app
- Size: 11.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Shopping App
## About the Project
Welcome to the Shopping App! This web application I built with React allows users to discover products, add them to the shopping basket, and view details about each product.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Project Skeleton](#project-skeleton)
- [Screenshots](#screenshots)
## Live Demo
[Shopping App](https://e-trade-app.vercel.app/)
## Features
- View a list of products with images, titles, descriptions, and prices.
- Filter products by category and search for specific items.
- Add products to the shopping cart.
- View details about each product in a modal.
- Remove items and adjust quantities in the shopping cart.
- See the total amount in the shopping cart.
## Technologies Used
- React
- Styling with [Bootstrap](https://getbootstrap.com/) and [React-Bootstrap](https://react-bootstrap.netlify.app/)
- [DummyJSON API](https://dummyjson.com/) for products data
- [React-Icons](https://react-icons.github.io/react-icons/) for icons
## Project Skeleton
```
Shopping App (folder)
│
│----readme.md
SOLUTION
├── public
│ └── index.html
├── src
│ ├── assets
│ │ └── images
│ ├── components
│ │ ├── Canvas.jsx
│ │ ├── CanvasCard.jsx
│ │ ├── Modal.jsx
│ │ ├── ModalImages.jsx
│ │ ├── Navbar.jsx
│ │ ├── ProductCard.jsx
│ │ └── Products.jsx
│ ├── pages
│ │ └── Home.jsx
│ ├── App.js
│ ├── index.css
│ └── index.js
├── package.json
└── yarn.lock
```
## Screenshots
## Compatibility
The project is compatible with both wide-screen computers and mobile devices.
## Acknowledgments
Products data provided by [DummyJSON](https://dummyjson.com/)