https://github.com/timbar09/cart-typescript-app
A TypeScript-based web application demonstrating core shopping cart functionality, built from a tutorial by Dave Gray. The app allows users to add, remove, and update items in the cart, with a dynamically rendered interface.
https://github.com/timbar09/cart-typescript-app
Last synced: 12 months ago
JSON representation
A TypeScript-based web application demonstrating core shopping cart functionality, built from a tutorial by Dave Gray. The app allows users to add, remove, and update items in the cart, with a dynamically rendered interface.
- Host: GitHub
- URL: https://github.com/timbar09/cart-typescript-app
- Owner: Timbar09
- License: mit
- Created: 2024-09-29T09:55:39.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2024-11-18T17:34:54.000Z (over 1 year ago)
- Last Synced: 2025-02-04T10:48:51.593Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 3.38 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shopping Cart Project
## Overview
This project is a simple shopping cart web application, built as part of a [TypeScript tutorial](https://youtu.be/gieEQFIfgYc) by Dave Gray. The app demonstrates essential functionality for managing products in a shopping cart, including adding, removing, and updating items, while dynamically rendering the cart interface.
## Features
- **View Products**: The main section shows a list of available products when you open the application.
- **Add to Cart**: Each product has a button to add it to the shopping cart.
- **View Cart**: Clicking the "View Cart" button in the header switches the view to display the cart, which shows all items added.
- **Cart Management**:
- Adjust the quantity of each item in the cart.
- See unit prices, total costs for each product, and the overall cart total.
- Remove items from the cart as needed.
- **Place Order**: A "Place Order" button finalizes the current cart, simulating an order placement.
## Future Enhancements
Future additions could include features similar to those implemented in previous projects, such as:
- Improved product display design.
- Product categories and filters.
- Product pages with detailed information.
- Payment gateway integration.
- User authentication and account management.
- Order history and tracking.
## Technologies Used
- **TypeScript**: A statically typed superset of JavaScript that compiles to plain JavaScript.
- **React**: A JavaScript library for building user interfaces.
- **Vite**: A fast build tool that provides a lightning-fast dev server with hot module replacement (HMR).
- **Tailwind CSS**: A utility-first CSS framework for quickly building custom designs.
- **SCSS**: A preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS).
## Running Locally
To run the project locally:
```bash
git clone https://github.com/Timbar09/Cart-TypeScript-App.git
cd Cart-TypeScript-App
npm install
npm run dev
```
Access the app at `http://localhost:5173`.
## Learning Experience
This project was primarily an exercise in TypeScript and React, focusing on state management and component interaction. It provided a good opportunity to practice TypeScript syntax and concepts, such as interfaces, types, and generics, as well as React hooks and props.
## Contributing
This project, while personal, welcomes contributions. If you discover bugs or have suggestions for improvement, feel free to open an issue or submit a pull request.
## Acknowledgements
> **Project tutorial by [Dave Gray](https://www.youtube.com/@DaveGrayTeachesCode).**
## License
This project is open-source and available under the [MIT License](LICENSE).