https://github.com/brockaltug/state-redux-store
State Redux Store -📦 E-Commerce Platform A modern e-commerce platform refactored with Redux Toolkit for state management, GraphQL with Apollo Client, and Vite for an optimized React frontend. Features product filtering, shopping cart, and Stripe checkout for a seamless user experience.
https://github.com/brockaltug/state-redux-store
apollographql eccomerce graphql react redux-toolki shopping-cart state-management stripe vite
Last synced: about 1 month ago
JSON representation
State Redux Store -📦 E-Commerce Platform A modern e-commerce platform refactored with Redux Toolkit for state management, GraphQL with Apollo Client, and Vite for an optimized React frontend. Features product filtering, shopping cart, and Stripe checkout for a seamless user experience.
- Host: GitHub
- URL: https://github.com/brockaltug/state-redux-store
- Owner: BrockAltug
- Created: 2025-01-20T21:05:46.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-01-31T07:27:25.000Z (3 months ago)
- Last Synced: 2025-01-31T07:31:36.207Z (3 months ago)
- Topics: apollographql, eccomerce, graphql, react, redux-toolki, shopping-cart, state-management, stripe, vite
- Language: JavaScript
- Homepage: https://unique-rabanadas-037355.netlify.app
- Size: 856 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# State Redux Store - E-Commerce Platform Refactor
## Table of Contents
1. [Overview](#overview)
2. [Demo](#demo)
3. [Concepts Covered](#concepts-covered)
4. [Learning Objectives](#learning-objectives)
5. [Technologies Used](#technologies-used)
6. [Features](#features)
7. [Setup and Installation](#setup-and-installation)
- [Prerequisites](#prerequisites)
- [Steps to Run Locally](#steps-to-run-locally)
8. [Summary](#summary)
---
## Overview
The **State Redux Store - E-Commerce Platform** is a refactored application designed to enhance state management by replacing the Context API with **Redux Toolkit**. This refactor improves performance, scalability, and maintainability, making the app more suitable for large-scale production environments.
The application is a **fully functional e-commerce platform** where users can browse products, add them to their cart, and complete purchases through a **Stripe-powered checkout** system. The backend is built with **GraphQL and Apollo Server**, while the frontend is powered by **React, Redux Toolkit, and Vite** for optimal speed and efficiency.
This refactor ensures the app:
- Uses **Redux Toolkit** for global state management instead of Context API.
- Implements **Apollo Client** for GraphQL queries and mutations.
- Integrates **IndexedDB** for persistent offline storage.
- Provides a seamless **shopping cart and checkout experience**.
The application is deployed on **Render**, with the backend connected to **MongoDB Atlas**.
---
## Demo
[Live Demo](https://unique-rabanadas-037355.netlify.app)
---
## Concepts Covered
- **Redux Toolkit Integration**:
- Implemented a **Redux store** for managing global state.
- Used **Redux slices** to handle product, category, and cart state updates.
- **GraphQL with Apollo Client**:
- Integrated **GraphQL queries and mutations** to fetch products, categories, and user data.
- Used **Apollo Client** for efficient data management.
- **IndexedDB for Persistent Storage**:
- Implemented IndexedDB with **idbPromise** to cache products and cart items.
- Ensures **offline access** to previously fetched data.
- **Stripe API Integration**:
- Set up a secure **checkout system** using Stripe.
- Supports test transactions for a realistic e-commerce experience.
- **Optimized State Management**:
- **Eliminated unnecessary re-renders** using Redux's centralized state store.
- **Ensured state consistency** across components.
---
## Learning Objectives
- Understand **Redux Toolkit** and how it improves global state management.
- Learn **how to integrate GraphQL with Redux** in a React application.
- Utilize **IndexedDB** for caching and offline persistence.
- Implement **secure checkout functionality** using Stripe.
- Improve **performance and scalability** in a large-scale React application.
---
## Technologies Used
- **React** – Frontend library for building the user interface.
- **Redux Toolkit** – State management solution for handling global state.
- **GraphQL** – API query language for data fetching and mutations.
- **Apollo Client** – GraphQL client for executing queries and managing cache.
- **MongoDB** – NoSQL database for storing product and user data.
- **Express.js** – Backend framework for handling GraphQL requests.
- **Node.js** – JavaScript runtime for server-side logic.
- **IndexedDB** – Local storage for caching data and offline support.
- **Stripe API** – Secure payment processing for checkout.
- **Vite** – Fast frontend build tool for optimized performance.
- **Render** – Cloud platform for deploying the application.
---
## Features
- **Redux-Powered Global State** – Replaces Context API for improved scalability.
- **GraphQL API Integration** – Fetches products, categories, and user data dynamically.
- **Persisted State with IndexedDB** – Allows users to access their cart offline.
- **Stripe Payment Integration** – Provides a secure and seamless checkout experience.
- **Category-Based Product Filtering** – Browse products by category.
- **Real-Time Cart Management** – Add, update, and remove items dynamically.
- **Fully Responsive UI** – Optimized for mobile and desktop use.
---
## Setup and Installation
### Prerequisites
- **Node.js** (v14 or later)
- **MongoDB Atlas** account
- **npm** (Node package manager)
- **Stripe Developer Account** (for payment processing)
### Steps to Run Locally
#### **1. Install server dependencies**
```sh
cd server
npm install
```
#### **2. Install client dependencies**
```sh
cd ../client
npm install
```
#### **3. Set up environment variables**
Create a `.env` file inside the `server` directory with the following:
```plaintext
MONGODB_URI=your_mongodb_atlas_uri
JWT_SECRET=your_jwt_secret
PORT=3001
STRIPE_SECRET_KEY=your_stripe_secret_key
```
#### **4. Start the development server**
```sh
npm run develop
```
The application will run on **`http://localhost:3000`**.
---
## Summary
The **State Redux Store - E-Commerce Platform** is a modernized e-commerce application that demonstrates best practices in **Redux Toolkit, GraphQL, IndexedDB, and Stripe integration**. By replacing the Context API with Redux, the app now supports **scalable, efficient, and predictable state management**.
🚀 **Now users can browse, shop, and check out with an optimized and seamless experience!**