{"id":29245774,"url":"https://github.com/arnobt78/shopmate--react-context-reducer-fundamental-project-20","last_synced_at":"2025-07-03T22:38:14.702Z","repository":{"id":255388098,"uuid":"849449388","full_name":"arnobt78/Shopmate--React-Context-Reducer-Fundamental-Project-20","owner":"arnobt78","description":"Shopmate is a demo React E-Commerce Web Application (Global Level State Application), using React \"useContext\" and \"useReducer\" features. React Core, Hooks, Routing, HTML, CSS, Responsive Screen, Context, and Reducers functionalities have been used in this project and deployed on Netlify.","archived":false,"fork":false,"pushed_at":"2025-07-01T00:34:01.000Z","size":465,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-01T01:33:46.043Z","etag":null,"topics":["css","e-commerce","hmtl","javascript","react","react-components","react-context","react-hooks","react-reducers","react-router","react-router-dom","reactjs"],"latest_commit_sha":null,"homepage":"https://shopmate-cr-arnob.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-29T16:03:00.000Z","updated_at":"2025-07-01T00:45:15.000Z","dependencies_parsed_at":"2025-07-01T01:34:50.911Z","dependency_job_id":"8c828061-bb6d-4589-a9f1-e117b770884e","html_url":"https://github.com/arnobt78/Shopmate--React-Context-Reducer-Fundamental-Project-20","commit_stats":null,"previous_names":["arnobt78/shopmate-react-context-reducer-webpage","arnobt78/shopmate--react-context-reducer"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Shopmate--React-Context-Reducer-Fundamental-Project-20","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FShopmate--React-Context-Reducer-Fundamental-Project-20","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FShopmate--React-Context-Reducer-Fundamental-Project-20/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FShopmate--React-Context-Reducer-Fundamental-Project-20/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FShopmate--React-Context-Reducer-Fundamental-Project-20/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Shopmate--React-Context-Reducer-Fundamental-Project-20/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FShopmate--React-Context-Reducer-Fundamental-Project-20/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","e-commerce","hmtl","javascript","react","react-components","react-context","react-hooks","react-reducers","react-router","react-router-dom","reactjs"],"created_at":"2025-07-03T22:38:13.805Z","updated_at":"2025-07-03T22:38:14.665Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shopmate - React Context \u0026 Reducer E-Commerce Demo\n\n\u003cimg width=\"1200\" alt=\"Screenshot 2024-08-29 at 18 48 19\" src=\"https://github.com/user-attachments/assets/c0f1abe9-ade8-4998-aa5a-08db61a9e2ca\"\u003e \u003cimg width=\"1200\" alt=\"Screenshot 2024-08-29 at 18 48 40\" src=\"https://github.com/user-attachments/assets/7ae1bb28-10c3-4e5e-88cd-e8cd24f334a6\"\u003e\n\n---\n\n## Project Summary\n\n**Shopmate** is a learning-focused, demo E-Commerce web application built with React. It demonstrates how to manage global state using **React Context** and **useReducer**—entirely without using Redux or Redux-Toolkit. The project is ideal for anyone wanting to understand practical state management in React applications, especially for scalable, real-world scenarios like shopping carts or product listings.\n\n- **Live-Demo:** [https://shopmate-cr-arnob.netlify.app](https://shopmate-cr-arnob.netlify.app)\n\n---\n\n## Table of Contents\n\n1. [Project Features](#project-features)\n2. [Technology Stack](#technology-stack)\n3. [Project Structure](#project-structure)\n4. [Installation \u0026 Setup](#installation--setup)\n5. [Key Concepts \u0026 Keywords](#key-concepts--keywords)\n6. [Walkthrough: How It Works](#walkthrough-how-it-works)\n7. [Available Scripts](#available-scripts)\n8. [Learning Resources](#learning-resources)\n9. [Examples \u0026 Code Snippets](#examples--code-scripts)\n10. [Conclusion](#conclusion)\n\n---\n\n## Project Features\n\n- Global state management using React Context API and useReducer\n- Add-to-cart, remove-from-cart, and cart-totals functionality\n- Modern React Hooks usage (useContext, useReducer)\n- Modular and scalable file/component structure\n- Responsive UI with HTML \u0026 CSS\n- Routing via React Router DOM\n- No Redux or Redux Toolkit dependencies\n\n---\n\n## Technology Stack\n\n- **React** (Core, Hooks)\n- **React Context API**\n- **useReducer**\n- **React Router DOM**\n- **HTML5, CSS3, JavaScript (ES6+)**\n- **Node.js** (for local development)\n- **Create React App** (CRA)\n\n---\n\n## Project Structure\n\n```\nShopmate--React-Context-Reducer/\n├── public/\n│   └── index.html\n├── src/\n│   ├── components/\n│   │   ├── Cart.js\n│   │   ├── CartCard.js\n│   │   └── ProductCard.js\n│   ├── context/\n│   │   ├── CartContext.js\n│   │   └── cartReducer.js\n│   ├── App.js\n│   ├── index.js\n│   └── ...other files\n├── package.json\n└── README.md\n```\n\n- **components/**: UI components (Cart, CartCard, ProductCard)\n- **context/**: State management (CartContext, cartReducer)\n- **App.js**: Main entry point, wraps app in CartProvider\n- **index.js**: App bootstrapper\n\n---\n\n## Installation \u0026 Setup\n\n### 1. Clone the Repository\n\n```bash\ngit clone https://github.com/arnobt78/Shopmate--React-Context-Reducer.git\ncd Shopmate--React-Context-Reducer\n```\n\n---\n\n### 2. Install Dependencies\n\nEnsure you have **Node.js** installed ([Download Node.js](https://nodejs.org/en/)).\n\n```bash\nnpm install\n```\n\n---\n\n### 3. Install React Router DOM\n\n```bash\nnpm install react-router-dom\n```\n[React Router Docs](https://reactrouter.com/en/main)\n\n---\n\n### 4. Run the Application\n\n```bash\nnpm start\n```\nVisit [http://localhost:3000](http://localhost:3000) in your browser.\n\n---\n\n## Key Concepts \u0026 Keywords\n\n- **context**: React API for passing data through the component tree without props.\n- **reducer**: Pure function taking state \u0026 action, returning new state.\n- **action**: Object literal describing state changes.\n- **useContext**: React hook for accessing context.\n- **useReducer**: React hook for complex state logic, alternative to useState.\n- **dispatch**: Function for sending actions to reducer.\n\n---\n\n## Walkthrough: How It Works\n\n### State Management Flow\n\n1. **CartContext.js** defines the initial state and provides context to all components.\n2. **cartReducer.js** manages state transitions based on dispatched actions (add, remove, etc.).\n3. **CartProvider** (in CartContext.js) wraps the app, exposing state and actions via context.\n4. **useCart** custom hook simplifies context consumption in components.\n5. **Components** (Cart, CartCard, ProductCard) use `useCart()` to access and mutate cart state globally.\n\n---\n\n### File-by-File Instruction\n\n#### `context/CartContext.js`\n- Creates and exports CartContext.\n- Provides CartProvider, wrapping children.\n- Uses useReducer to manage cart state.\n- Exposes cart actions via context value.\n\n#### `context/cartReducer.js`\n- Exports `cartReducer` function.\n- Handles cart state transitions via switch-cases (add, remove, etc.).\n\n#### `components/Cart.js`\n- Displays items in cart, total price, and allows removing items.\n\n#### `components/CartCard.js`\n- Represents individual product card.\n- Restricts \"Add To Cart\" to once per product.\n\n#### `App.js`\n- Wraps the app in the CartProvider.\n\n---\n\n## Available Scripts\n\n| Script         | Description                                                                          |\n| -------------- | ------------------------------------------------------------------------------------ |\n| `npm start`    | Runs the app in development mode on [http://localhost:3000](http://localhost:3000)   |\n| `npm test`     | Launches the test runner                                                             |\n| `npm run build`| Builds the app for production to the `build` folder                                  |\n| `npm run eject`| Copies configuration files and dependencies for advanced customization               |\n\n---\n\n## Learning Resources\n\n- [React Context Docs](https://reactjs.org/docs/context.html)\n- [useReducer Docs](https://react.dev/reference/react/useReducer)\n- [React Router Docs](https://reactrouter.com/en/main)\n- [Create React App Docs](https://facebook.github.io/create-react-app/docs/getting-started)\n\n---\n\n## Examples \u0026 Code Scripts\n\n### Example: Cart Reducer\n\n```js\n// src/context/cartReducer.js\nexport const cartReducer = (state, action) =\u003e {\n  switch (action.type) {\n    case \"ADD_TO_CART\":\n      // add item logic\n      break;\n    case \"REMOVE_FROM_CART\":\n      // remove item logic\n      break;\n    default:\n      return state;\n  }\n};\n```\n\n---\n\n### Example: Using Cart Context\n\n```js\n// src/components/ProductCard.js\nimport { useCart } from \"../context/CartContext\";\n\nfunction ProductCard({ product }) {\n  const { addToCart } = useCart();\n  return (\n    \u003cbutton onClick={() =\u003e addToCart(product)}\u003e\n      Add to Cart\n    \u003c/button\u003e\n  );\n}\n```\n\n---\n\n### Example: CartProvider Usage\n\n```js\n// src/App.js\nimport { CartProvider } from \"./context/CartContext\";\nimport Cart from \"./components/Cart\";\nimport Products from \"./components/Products\";\n\nfunction App() {\n  return (\n    \u003cCartProvider\u003e\n      \u003cProducts /\u003e\n      \u003cCart /\u003e\n    \u003c/CartProvider\u003e\n  );\n}\n```\n\n---\n\n## Conclusion\n\n**Shopmate** is a practical, modern, and learning-friendly E-Commerce app that shows how to build scalable global state management in React using only the Context API and useReducer. It's a perfect project for learners, educators, and developers seeking to master React state management without Redux.\n\n---\n\n## Happy Coding! 🎉\n\nThank you for exploring and learning with Shopmate!\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fshopmate--react-context-reducer-fundamental-project-20","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fshopmate--react-context-reducer-fundamental-project-20","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fshopmate--react-context-reducer-fundamental-project-20/lists"}