https://github.com/yogadeepan29/react--day-28--context-api_task
Day-28 Task ( React ) - DummyCart ( Context-API Task )
https://github.com/yogadeepan29/react--day-28--context-api_task
bootstrap context-api html-css-javascript reactjs shopping-cart state-management
Last synced: 3 months ago
JSON representation
Day-28 Task ( React ) - DummyCart ( Context-API Task )
- Host: GitHub
- URL: https://github.com/yogadeepan29/react--day-28--context-api_task
- Owner: Yogadeepan29
- Created: 2024-08-24T19:12:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-24T19:21:03.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T09:42:50.189Z (over 1 year ago)
- Topics: bootstrap, context-api, html-css-javascript, reactjs, shopping-cart, state-management
- Language: JavaScript
- Homepage: https://ryd-react-dummycart.netlify.app/
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#
DummyCart
This is a React-based shopping cart application
## Overview
-----------
This project is a hands-on exercise to learn and demonstrate the use of React's Context API. The application is a simple shopping cart that allows users to add and remove products from their cart, update quantities, and view their subtotal.
## Focus on Context API
-----------------------
The primary goal of this project is to learn and understand how to use React's Context API to manage state and props across components. The Context API provides a way to share data between components without having to pass props down manually.
## Features
------------
* Display a list of products in the cart
* Allow users to add and remove products from the cart
* Update product quantities in real-time
* Calculate and display the subtotal of the cart
* Provide a summary total of the cart contents
## Technologies Used
--------------------
* React
* JavaScript
* HTML/CSS
* Bootstrap (for styling)
* Context API (for state management)
## What I Learned
-----------------
Through this project, I learned how to:
* Create a context and provider to manage state
* Use the `useContext` hook to access context data in components
* Update context data using the `useContext` hook
* Use the Context API to share data between components
## Challenges and Takeaways
---------------------------
* One of the biggest challenges was understanding how to properly use the Context API to manage state and props.
* I learned that the Context API is a powerful tool for managing state, but it requires careful planning and implementation to avoid complexity and performance issues.
* I also learned the importance of properly documenting and testing code to ensure that it is maintainable and scalable.
## Getting Started
---------------
To run the application, follow these steps:
1. Clone the repository: `git clone https://github.com/Yogadeepan29/React--Day-28--Context-API_Task.git `
2. Install the dependencies: `npm install`
3. Start the application: `npm run dev`
4. Open the application in your web browser: `http://localhost:3000`
## Author
------
YOGADEEPAN.R
## Live Demo
Check out the live demo: [DummyCart](https://ryd-react-dummycart.netlify.app)