DEV Community: Clarence Gatama Chege

Building an Interactive Excel Dashboard for E-commerce Product Analysis: A Case Study of Jumia Products

Clarence Gatama Chege — Sat, 05 Sep 2026 22:06:19 +0000

Introduction

In this project, I used a Jumia product dataset to demonstrate how Excel can be used to explore, prepare, and clean data then use the data for analysis to get insights.

A final workbook, available in this GitHub repo, is organized into separate sheets for the raw data, cleaned data, analysis, PivotTables, dashboard, and data dictionary. The original data is preserved in the Raw_Data sheet, while all cleaning activities are performed in the Cleaned_Data sheet.

Our initial raw dataset has 5 columns and 116 rows. The table below represents each column:

Source Field	Meaning	Expected Cleaned Type
Product	Product name	Text
Current Price	Current selling price in Kenyan shillings (KSh)	Number / Currency
Old Price	Price before discount in KSh	Number / Currency
Discount	Advertised percentage discount	Percentage
Review	Number of customer reviews	Whole Number
Ratingd	Average rating out of 5	Decimal Number

Initial Data-Quality Audit

Before cleaning, I reviewed the raw dataset to identify issues that would affect analysis. This is what I uncovered:

Column headers: one misspelled header (Ratingd).
Data types: Current Price and Old Price stored as text. Discount stored as plain text rather than a percentage.
Duplicates: 3 duplicate entries.
Missing values: columns Review and Ratingd. Here is a summary of missing values for each column using COUNTBLANK formula

Inconsistent formatting: Headers Current price and old price are written in different cases.

Data Cleaning

Before I dived into cleaning the dataset, I created a new sheet named cleaned-data and copied the dataset. This new sheet is where all the cleaning happened.
I also formatted my dataset header by adding a background and bolding the text and used Freeze Panes to ensure the header is always at the top even while scrolling for easier column identification.

1. Removing Duplicates
A record is considered a duplicate only when all of its column values are identical.

To remove duplicates, I selected a cell within the dataset and went to the Data tab. Under the Data Tools group, I selected Remove Duplicates. Excel displayed a dialog box listing all the columns in the dataset. I left all columns selected and clicked OK.

Excel found 3 duplicate rows and removed them.

2. Cleaning the Rating Column

Next I moved on to cleaning individual columns, starting with the Ratingd column. The first issue I noticed was that the column name was misspelled as Ratingd and I changed it to Rating.

The values in this column were also stored in a format such as 4.5 out of 5, it would be better if we had a numeric value for analysis for example 4.5. I used Find & Replace to remove the text out of 5 from the values, leaving only the numeric rating.

After removing the text out of 5, I changed the column type to Number and set the values to one decimal place.

Applying filtering on Rating column helped me identify missing values (blanks). Before deciding how to handle the missing values, I checked other columns to look for a pattern behind the blanks. I noted Review column also had blanks and all rows with a blank in Review column also had a blank in Rating column. This led me to the conclusion that the reason for the blanks in Rating column is because the products were not reviewed. I decided to replace the blanks with text Not Rated.

3. Cleaning the Review Column
While cleaning Rating column I identified that there are products that did not get reviewed and hence had blanks in rating. I replaced the blanks, in Review column with number 0. This shows that products with 0 reviews were Not Rated supporting Rating column cleaning decision.

I also noted that the rest of the values in Review column had negative values yet the column represents the number of customer reviews. I converted the values to positive numbers using the Absolute function Abs(value) using the following step:

Creating a new column with same name Review
On first row, set formula Abs(E2) E2 referencing the first value on original Review column.
Double-clicking the fill handle to apply the formula to all rows.
Copy the new Review column.
On the same column, I pasted the values
Delete the original Review column

3. Cleaning the Current Price & Old Price Column
Both columns Current Price and Old Price values are aligned to the left, meaning they are stored as text. To record them as numeric values I selected both columns and used Find & Replace to replace Ksh with blank. Most values immediately shifted and were aligned to the right.

A hack to identify any non-numeric values in a numeric column is sorting the columns from largest to smallest. Any present text values appear at the top. This helped me discover a product whose Old Price and Current Price were recorded as a range.

For the Old Price of the product, I used the middle value of the range which is 2,700. I then used the discount percentage provided in the dataset to calculate the corresponding Current Price which was 1,674.

After cleaning the data, I converted the cleaned range into an Excel Table using Ctrl + T. I confirmed that the table had headers and gave it the name tblProducts.

Excel Formulas and Enrichment Fields

After cleaning the individual columns, I used Excel formulas to create additional fields that provide more useful information for analysis. These derived fields are calculated from the existing columns rather than being directly provided in the original dataset.

New Field	Based On	Type	Categories
Price Category	Current Price	Text	Low Price, Middle Price & High Price
Discounted Amount	Current Price & Old Price	Number	Difference between Old Price and Current Price
Discount Category	Discount	Text	Low Discount, Middle Discount & High Discount
Rating Category	Rating	Text	Missing, Poor, Average & Excellent
Engagement	Review	Text	Missing, Strong Engagement & Normal Engagement

Derived Fields, Formulas and Thresholds

1. Price Category

Formula:

=IF([@[Current Price]]="","Missing",IF([@[Current Price]]<=Price_Q1,"Low Price",IF([@[Current Price]]<=Price_Q3,"Medium Price","High Price")))

Note that Price_Q1 and Price_Q3 are named cells representing Current Price Column First Quartile and Third Quartile respectively.

=QUARTILE.INC(tblProducts[Current Price],1)
=QUARTILE.INC(tblProducts[Current Price],3)

2. Discounted Amount

Formula:

=[@[Old Price]]-[@[Current Price]]

This calculates the difference between the original price and the current selling price.

3. Discount Category

Formula:

=IF([@Discount]="","Missing",IF([@Discount]<20%,"Low Discount",IF([@Discount]<=40%,"Medium Discount","High Discount")))

Thresholds:

Blank - Missing
Below 20% - Low Discount
20%–40% - Middle Discount
Above 40% - High Discount
4. Rating Category

Formula:

=IF([@Rating]="","Missing",IF([@Rating]<3,"Poor",IF([@Rating]<=4.5,"Average","Excellent")))

Thresholds:

Blank - Missing
Below 3 - Poor
3.1–4.4 - Average
4–5-5 - Excellent
5. Engagement

Formula:

=IF([@Review]="","Missing",IF([@Review]>=Review_Q3,"Strong Engagement","Normal Engagement"))

Note that Review_Q3 is a named cell representing the third quartile of the Review column. It is used as the threshold for identifying products with strong customer engagement.

The third quartile can be calculated using:

=QUARTILE.INC(tblProducts[Review],3)

Thresholds:

Blank - Missing
Review count below Review_Q3 - Normal Engagement
Review count greater than or equal to Review_Q3 - Strong Engagement

These thresholds provide a consistent way of grouping products and make it easier to compare them during the analysis stage.

Analysis and Pivot Tables

I used calculations, charts and Pivot Tables to summarize the cleaned data.
Below were my findings for descriptive analysis:

Here were my relationship analysis findings:

The Pivot Tables below represent product ranking analysis:

Top 5 Products by Rating
Bottom 5 Products by Rating
Top 10 Products by Discount
Top 10 Products by Reviews
Products with High Discounts but Low Rating
Products with many reviews but average ratings.

Dashboard Design and Slicer Connections

The final dashboard is a combination of key Pivot Tables and charts in a single view, with slicers connected to allow filtering by rating category, discount category, price category and engagement.

Key Finding

Higher discounts do not mean more customer engagement. Discount percentage and review count show essentially no correlation (r = -0.11).

Business Recommendations

Sellers should not rely on discount depth alone to drive customer interest — engagement appears to depend on other factors not captured by discount size.
High-review, low-rating products (e.g., the cordless vacuum cleaner) should be flagged for quality review, since visibility without satisfaction is a churn risk.
Encourage more customers to leave ratings and reviews since half of the products lacks both rating and reviews.

Limitations

Dataset size (116 rows) limits how confidently patterns can be generalized.
No units-sold or revenue field thus analysis lacks a sales indicator.
Nearly half of products are unrated, limiting the reliability of rating-based conclusions.

Conclusion

This project demonstrates how Excel can transform a messy real-world dataset through data cleaning, formulas, PivotTables, and an interactive dashboard. The analysis revealed that discounts, reviews, and ratings do not necessarily correlate, highlighting the importance of testing assumptions with data.

The full workbook, formulas, and dashboard are available in this GitHub repository

Excel for Data Analytics: Fundamentals & Data Cleaning

Clarence Gatama Chege — Sat, 29 Aug 2026 20:11:16 +0000

Microsoft Excel is one of the most important computer applications because of the key role it plays in many sectors. It is used in data entry, record keeping, project management, business intelligence and data analysis.

The data stored in Excel can sometimes be messy due to duplicate values, missing values, inconsistent text, incorrect data types for example having a text value in a column with numeric values etc, which can affect the accuracy of analysis. In data analytics, before the data can be analyzed, it needs to be cleaned and well structured.

In this article we will explore the basics of Excel and also practical data-cleaning techniques. We will use the Cafe Sales Dataset to demonstrate how to work with data in Excel and cleaning the data to prepare it for analysis.
Download the dataset from the link above.

Understanding The Dataset

Let us explore the dataset first before diving into cleaning. Exploring helps us understand what exactly we are working with.
The dataset has 8 columns in total and 10,000 rows of synthetic data representing sales transactions in a cafe.

Column Name	Data Type
Transaction ID	Text
Item	Text
Quantity	Numeric
Price Per Unit	Numeric
Total Spent	Numeric
Payment Method	Text
Location	Text
Transaction Date	Date

Below is a screenshot of the dataset when opened in Excel:

Working With Excel

Before we dive into cleaning let's look into some Excel fundamentals that will help us work with this dataset.

Adjusting the column width

You will note that when you open the dataset not all cell values are fully visible. Some values, for example values in column Transaction Date, are represented by # because the values are longer than the available column width. Adjusting the column width makes all values visible. Start by selecting all values in our dataset with CTRL + A. Then in the Home Tab, cell group, select Format and choose AutoFit Column Width.Excel automatically adjusts the width of each column based on the contents of the cells, making the values fully visible.

Formatting the Header

We can make our header row different from the other rows by making it bold, centering the text, and adding a background color. The header row is the row containing the column names. Select the first row with column names, in the Home tab under Font group click B. Alternatively you can use CTRL + B to apply the bold.
While still selecting the header row, in the Home tab under Alignment select Center.
We can also add a background color using the Fill Color option in the Font group. This is how the header row looks after formatting:

Adding Freeze Panes

As you scroll down the dataset you will note that you lose sight of the header row. This makes it hard to remember which column is which. That is where freeze pane comes in. What Freeze Panes does is that it ensures the header row is always at the top of the dataset.
To freeze our header row first select the whole dataset, then under Window group in View tab select Freeze Panes and choose Freeze Top Row. Now as you scroll down the dataset, the header row always remains at the top.

Also note that Freeze Panes can also be applied on the first column.

Sorting Data

Sorting means arranging data in a specific order. In Excel, text data can be sorted alphabetically, from A to Z or from Z to A and numeric data can be sorted from largest to smallest or from smallest to largest. Date data can also be sorted chronologically, from the earliest date to the latest date or vice versa.
For example in our dataset we can sort Price Per Unit column. To do this, select any cell in the Price Per Unit column, go to the Data tab, and select Sort Smallest to Largest icon in the Sort & Filter group. This will arrange the values from the lowest price to the highest price while keeping the other values in each row together.

Sorting makes it easier to examine the data and identify values that may require further investigation during the cleaning process.

Filtering

Filtering allows us to display only the records that meet specific conditions while temporarily hiding the other records.

For example, in our dataset, we can filter the Payment Method column to display only transactions where customers paid using Cash. To do this, select any cell in the dataset, go to the Data tab, and select Filter from the Sort & Filter group. A dropdown arrow will appear in each column header. Click the dropdown arrow in the Payment Method column, deselect Select All, select Cash, and click OK.

Excel will now display only the transactions where the payment method is Cash and the other records will be hidden.

Basic Formulas and Functions

Excel formulas and functions allow us to perform calculations and extract useful information from a dataset.

For example, we can calculate the total quantity of items sold in our dataset using the SUM function. Since the Quantity column contains the number of items purchased in each transaction, we can use the following formula:

=SUM(C2:C10001)

The AVERAGE function can be used to calculate the average quantity of items purchased per transaction:

=AVERAGE(C2:C10001)

Other useful functions when exploring a dataset include COUNT, MIN, and MAX. For example, COUNT can be used to determine the number of numeric values in a column, while MIN and MAX can help identify the smallest and largest values.

Data Cleaning

Having gone through some of Excel fundamentals, we can now move on to cleaning the dataset. Data cleaning is the process of identifying and correcting inaccurate, incomplete, inconsistent, or irrelevant data to improve the quality of a dataset.

Removing Duplicate Records

The first step in cleaning our dataset is to remove any duplicate records. In our dataset, a duplicate record would be a cafe sale that has the same value in all fields.

We can do this by selecting a cell in the dataset, then in the Data tab under the Data Tools group click Remove Duplicates. A dialog box appears showing all the columns in the dataset. Since we are looking for records that are identical across all fields, ensure all the columns are selected and click OK.

Our dataset does not have any duplicate rows.

Missing Values

To identify missing values, we will make use of Filter. Select any cell in the dataset, in the Home tab, under the Editing group, select the Sort&Filter dropdown and click Filter. You will see a filter dropdown appear in each column header. When clicked, this filter dropdown shows the unique values contained in that column. To identify missing values, we can look for the (Blanks) option in the list.

For example, we can check the Item column for missing values. Click the filter dropdown in the Item column. We can now see all the unique values in the column, (Blanks) included. This shows that there are missing values in the Item column.

To handle such missing values, we first check if we can determine the missing value from the other values in the row. Since we cannot do that, we will use Find & Replace to change them to Unknown. Select the Item column then press CTRL + H. A dialog appears. Leave the Find field empty and write Unknown in the Replace field then click Replace All.

A total of 333 missing values in the Item column were changed to Unknown

Correcting Data Types

Another important part of data cleaning is ensuring that each column contains the appropriate type of data. The data type determines how Excel interprets and works with the values.

For example in our dataset, Quantity, Price Per Unit, and Total Spent should contain numeric values because they represent quantities and monetary amounts. Transaction Date should contain date values, while columns such as Item, Payment Method, and Location contain text.

A good example of a column with data-type problems is in the Price Per Unit column. It should contain numeric values but we have identified it has values UNKNOWN and ERROR.

Perfect way of cleaning this is by using the Find & Replace we used earlier on. Find cells with UNKNOWN then replace with blanks. Do the same for ERROR.

The Quantity column also contains the text values UNKNOWN and ERROR, which can be replaced with blanks using the same approach.

Conclusion

In this article, we explored some of the Excel fundamentals that are useful when working with datasets, including adjusting column widths, formatting headers, freezing panes, sorting, filtering, and using basic formulas and functions.

We then applied these concepts to clean a cafe sales dataset containing 10,000 records. We removed duplicate records, identified missing values using filters, and handled missing and inconsistent values such as UNKNOWN and ERROR.

Data cleaning is an important step before performing analysis because the quality of the data directly affects the quality of the insights gotten.

Understanding the Git Workflow: From Local Folder to Remote Repository

Clarence Gatama Chege — Sat, 22 Aug 2026 19:50:08 +0000

For quite a while I have used Git without knowing what happens behind the scenes. I mastered using all commands from initializing, adding, committing to pushing code to Github but I couldn't explain what was happening to the files after each command. In this article we are going to cover what Git is, the git commands used when working in a Git repository and the four areas Git uses to track and manage your files.

Git and Github

Git and Github are not the same thing.
Git is a free, open source tool that helps you save and manage different versions of your files and code. Git sits silently in your project folder, keeping track of every change that happens.
Github on the other hand is a platform that hosts your project folders and repositories online. This way other people can access your code, collaborate with you or review your work.

Git Repository

A Git repository is a folder that Git lives in and tracks for changes, this includes, every addition, deletion, and edit made in that folder. To initialize a repository (to make Git track your folder), you use the command git init.

This is how it works. You have a folder article that has a file README.md and a folder first-article that you will be working on.Right now, this is just a standard folder on your computer. Git has no idea it exists.

Once you run git init, Git creates a hidden .git folder inside it. From this point on, your article folder serves as your Working Directory.

The Git Workflow

In Git, files move through four distinct workflow areas or stages. Lets look into each stage:

1. The Working Directory
This is the folder where Git has been initialized and where you make changes to your files, in our case the article folder. New or updated files cannot be tracked by Git until you stage and commit them. Using git status we can check the current state of your working directory. For example in our current working directory, git status shows we have a file README.md that is untracked meaning Git is aware of the file but it is not currently keeping a record of its changes.

2. Staging Area
To make Git track the different versions of our files we use the command git add. Git add takes a copy of your current files from your working directory to the staging area.
In our example, lets make changes to README.md file and also add a new text file in folder first-article. These changes will still be untracked until we use the git add command as in the image below.

To make git track this changes we use the git add command. In this case we can run either:
git add README.md first-article/ to add the two or we run git add . to add all the untracked files.

Now when we run git status we'll see that git can now track our files and can confirm that README.md & first-article/ have changes to be committed.

3. Local Repository
The git commit command takes the snapshot from your Staging Area and moves it into the hidden .git folder. The git commit command includes a message that describes what the commit is about
git commit -m "Commit message"
Running git commit packages your changes and outputs exactly what was saved. Running git status and seeing “nothing to commit, working tree clean” means the staging area is empty, and all your current changes have been committed and safely backed up.

4. Remote Repository
After committing, your changes are saved only in your local Git repository. Use the git push command to upload those commits to a remote repository, such as GitHub or Bitbucket, making them accessible to others.

Conclusion
In conclusion, understanding Git’s four tracking areas gives you a clearer picture of how your project files are managed. Instead of running commands without knowing what happens behind the scenes, you can now understand how your work moves from the Working Directory to the Staging Area, then to the Local Repository, and finally to the Remote Repository, giving you control over your project history and ensuring your work is safely backed up. One important advantage of Git is that you can access previous versions of your work. Overall, Git provides a reliable and organized way to manage, track, and protect your projects.

Building a shopping cart using React, Redux toolkit

Clarence Gatama Chege — Sun, 26 May 2024 12:59:55 +0000

In this article, we'll walk through the process of creating an simple e-commerce application with the Fake store API using React redux and react toolkit, with a focus on implementing a shopping cart. By the end of this tutorial, you will have a functional application with the following features:

A product listing page displaying products available for purchase.
The ability to add items to the shopping cart.
A shopping cart page where users can view, update quantity, and remove items from their cart.

Let's get started !!

Create React project using vite:

npm create vite@latest shopping-cart -- --template react
cd shopping-cart

We will create three components: Cart, Navbar, and Shop components.

3.We will use fakestore api to get products for our project. Below is our initial Shop.jsx:

import React, { useEffect, useState } from "react";
import axios from "axios";

const Shop = () => {
  const [products, setProducts] = useState([]);
  const getProducts = async () => {
    await axios
      .get("https://fakestoreapi.com/products")
      .then((res) => setProducts(res.data))
      .catch((err) => console.log(err));
  };
  useEffect(() => {
    getProducts();
  }, []);
  return (
    <section className="shop">
      {products.map((product) => (
        <article className="card" key={product.id}>
          <img src={product.image} alt="" />
          <div className="details-div">
            <div className="title-price">
              <p>{product.title}</p>
              <p>{product.price}</p>
            </div>
            <button>Add to cart</button>
          </div>
        </article>
      ))}
    </section>
  );
};

export default Shop;

We now have the products set up so we'll dive into redux toolkit.

Redux Toolkit
Redux toolkit is a library that helps us write redux logic. It offers tools that simplify Redux setup and use, reducing boilerplate and enhancing code maintainability.

Redux Store
A redux store is a central repository that stores all the states of an application. Store is made up of slices.
To create our own store we need to install redux toolkit and react redux:

npm install @reduxjs/toolkit react-redux

Create a store.js file inside redux folder inside src folder.

In store.js we will create a redux store (store) using configureStore provided by reduxjs and export it.

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {},
});

To make the store accessible to our application, we need to wrap our App component inside Provider that allows a prop called store which we will set to our store. This is done inside our main.jsx (could be index.js if you created app using CRA)
Provider is a component that allows Redux store to be made available to all components.

Here is how our main.jsx looks like:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { store } from "./redux/store.js";
import { Provider } from "react-redux";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Redux Slice
A slice is a part of the app's state that is managed by a specific reducer and contains actions related to the state.
For our project we'll create productsSlice.js file where we'll use createSlice function to create productsSlice.
createSlice accepts an object with the following parameters:

name -defines the slice's name.
initialState -sets up the starting state for the slice when the Redux store is first created.
reducers - these are functions that handle the logic for updating the state. We will create our first reducer addProductToCart. We will also export actions and reducer created by our createSlice.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  products: [],
  cart: [],
};

const productsSlice = createSlice({
  name: "product",
  initialState,
  reducers: {
    addProductToCart: (state, action) => {
      state.cart.push(action.payload);
    },
  },
});

export const { addProductToCart } = productsSlice.actions;

export default productsSlice.reducer;

For our productsSlice to be available to the app, we will import reducer created by createSlice inside Store.js and add it to the reducer object of our store.

Here's how our store.js will be:

import { configureStore } from "@reduxjs/toolkit";
import productReducer from "./productsSlice";

export const store = configureStore({
  reducer: {
    products: productReducer,
  },
});

To be able to add a product to cart we will use two react-redux hooks:useSelector and*useDispatch*
useSelector allows components to get(select) part of the state that is required. useDispatch allows components to dispatch actions to the redux store.
Inside Shop.jsx we will import useDispatch from react-redux, invoke it and store in a variable dispatch. Variable dispatch will then be used to dispatch action addProductToCart when button 'Add to cart' is clicked.

Here's our Shop.jsx:

import React, { useEffect, useState } from "react";
import axios from "axios";
import { useDispatch } from "react-redux";
import { addProductToCart } from "../redux/productsSlice";

const Shop = () => {
  const [products, setProducts] = useState([]);
  const dispatch = useDispatch();
  const getProducts = async () => {
    await axios
      .get("https://fakestoreapi.com/products")
      .then((res) => setProducts(res.data))
      .catch((err) => console.log(err));
  };
  useEffect(() => {
    getProducts();
  }, []);
  return (
    <section className="shop">
      {products.map((product) => (
        <article className="card" key={product.id}>
          <img src={product.image} alt="" />
          <div className="details-div">
            <div className="title-price">
              <p>{product.title}</p>
              <p>{product.price}</p>
            </div>
            <button
              onClick={() =>
                dispatch(
                  addProductToCart({
                    id: product.id,
                    title: product.title,
                    price: product.price,
                    image: product.image,
                  })
                )
              }
            >
              Add to cart
            </button>
          </div>
        </article>
      ))}
    </section>
  );
};

export default Shop;

Now that the action is dispatched, the products are successfully added to cart which is part of the state. To display the added products, we will use useSelector inside Cart.jsx to get/extract/select cart which is part of our productsSlice.

Here's our Cart.jsx:

import React from "react";
import { useSelector } from "react-redux";

const Cart = () => {
  const cart = useSelector((state) => state.products.cart);
  console.log(cart);
  return (
    <section className="cart-component">
      {cart.map((product) => (
        <article className="cart-card" key={product.id}>
          <div>
            <img src={product.image} alt="" />
            <button>REMOVE</button>
          </div>
          <div>
            <p>{product.title}</p>
            <div className="button-in-cart">
              <button>-</button>
              <span>{product.quantity}</span>
              <button>+</button>
            </div>
            <p>$:{product.price}</p>
          </div>
        </article>
      ))}
      ;
    </section>
  );
};

export default Cart;

To display the count of products in our navbar, we will also get cart using useSelector inside Navbar.jsx. Cart being an array, we will use its length to get the count of products added to cart.

Here's our Navbar.jsx:

import React from "react";
import { useSelector } from "react-redux";

const Cart = () => {
  const cart = useSelector((state) => state.products.cart);
  console.log(cart);
  return (
    <section className="cart-component">
      {cart.map((product) => (
        <article className="cart-card" key={product.id}>
          <div>
            <img src={product.image} alt="" />
            <button>REMOVE</button>
          </div>
          <div>
            <p>{product.title}</p>
            <div className="button-in-cart">
              <button>-</button>
              <span>{product.quantity}</span>
              <button>+</button>
            </div>
            <p>$:{product.price}</p>
          </div>
        </article>
      ))}
      ;
    </section>
  );
};

export default Cart;

Using redux we have been able to create a store (source of truth 😅) allowing different components to access the state. In the next part we will ensure that when a similar product is clicked a number of times , it's not added to cart as multiple cart products by adding a quantity property. We will also add other actions such as increase quantity of product, decrease quantity of product, remove product and clear cart.

Source code:

ClarenceG01 / shopping-cart-redux

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

View on GitHub