https://github.com/ariigrangetto/shopshop
🛒 A shopping cart application developed with React and Typescript
https://github.com/ariigrangetto/shopshop
react react-router tailwind typescript usecontext usequery usereducer
Last synced: about 2 months ago
JSON representation
🛒 A shopping cart application developed with React and Typescript
- Host: GitHub
- URL: https://github.com/ariigrangetto/shopshop
- Owner: ariigrangetto
- Created: 2025-07-02T22:44:08.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-24T22:58:48.000Z (11 months ago)
- Last Synced: 2026-04-16T05:03:25.650Z (2 months ago)
- Topics: react, react-router, tailwind, typescript, usecontext, usequery, usereducer
- Language: TypeScript
- Homepage: https://shopshopts.netlify.app/
- Size: 314 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛒 ShopShop
A shopping cart built with React and Typescript that allows you to add and/or remove products from the cart and view the total cost of the selected items.
## 📝 Technologies
- `React`
- `Typescript`
- `Tailwind`
- `useReducer`
- `useContext`
- `Mui`
- `useId`
- `useQuery`
- `Custom Hooks`
- `React Router`
## 🧠 The Process
The purpose of this shopping cart app was to deepen my understanding of React hooks, focusing on writing clean, organized, and reusable component-based code to make future updates easier.
The first step was to fetch and display a list of available products from an external API. I then implemented filtering options based on price and category, allowing users to narrow down the products according to their preferences.
I also added the ability to view detailed information about each product, enhancing the user experience.
Additionally, I implemented a shopping cart where users can add selected products. The cart displays the chosen items, their quantities, and the total cost. All data is stored persistently using localStorage.
## 🌆 Preview
