Designing a React E-Commerce App for Digital Products—Part 1
Tags: react, webdev, ecommerce, digital
Published: 2023-11-15 03:55:36

---
title: Designing a React E-Commerce App for Digital Products—Part 1
published: true
date: 2023-11-09 13:48:45 UTC
tags: react, webdev, ecommerce, digital
canonical_url: https://www.syncfusion.com/blogs/post/react-digital-ecommerce-app.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nl56pym40h8qesl4qtjy.png
---
Welcome to the first part of our blog series, **“Designing a React E-Commerce App for Digital Products.”** This series is designed to guide you through building a fully functional, client-side, single-page e-commerce platform specializing in digital products such as e-books, themes, templates, thumbnails, and NFTs using React.

As this project is primarily for learning purposes, we will focus on creating a single-page app rendered on the client side rather than optimization for SEO. Throughout this process, we will adhere to the best practices of software engineering and front-end development. 

So, let’s embark on this exciting journey of creating a digital marketplace with React.

## Requirements

In any typical product development process, we need to understand the product’s purpose, its target audience, and the specific features it needs to serve its users effectively.

Once the product specifications are established, the next step is to translate these requirements into a functional design. This design serves as a blueprint that guides the development team in building the app.

We will follow a similar approach. We’ll identify the necessary pages for our e-commerce app and create a visual flow diagram to represent the user journey through these pages. This diagram will act as our roadmap throughout development, ensuring we build a cohesive and user-friendly app.

Here are some key components we need to outline for our e-commerce app:

- **Landing page:** A page where users can browse the listed products.
- **Product page:** Each product should have a dedicated page for detailed descriptions.
- **Checkout page:** A necessary page for users to finalize their purchases.
- **Login page:** A page where users can log into the app.
- **Dashboard page:** A page where users can create their products.
- **Product add page:** A page where the products can be listed.
- **Thank you page:** A page to acknowledge users after they have made a purchase.

Refer to the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Architectural-flow-diagram-of-the-digital-products-e-commerce-app.png" alt="Architectural flow diagram of the digital products e-commerce app" style="width:100%">

  <figcaption>Architectural flow diagram of the digital products e-commerce app</figcaption>

</figure>

The flow diagram actively assists in determining the data flow from one page to another. Given that we employ component-driven development in React, we can actively analyze the state of each component and identify the data that needs centralization for sharing.

### Wireframes

Without a pre-existing architecture or flow, we typically construct these elements using Figma or from the designs we receive. To gain a clear perspective on the appearance of my pages, I have actively created a [wireframe](https://en.wikipedia.org/wiki/Website_wireframe "Wikipidia Link: Website wireframe") for each page.

### Landing Page

This is the first point of contact between the user and our e-commerce site. The landing page plays a vital role in shaping the user’s experience. It showcases the catalog of digital products available on the site, each accompanied by a brief description and a thumbnail image. Products are organized into categories for easy navigation, and a search function is available for quick access to specific items.

Moreover, the landing page facilitates user authentication with a prominent **Login** button. This will lead to the login page.

In summary, the landing page provides a comprehensive snapshot of the e-commerce site’s offerings and equips users with the necessary tools to interact with its content.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Landing-page-in-React-e-commerce-app.png" alt="Landing page in React e-commerce app" style="width:100%">

  <figcaption>Landing page in React e-commerce app</figcaption>

</figure>

### Login Page

The login page is another key element of our e-commerce site, acting as a secure gateway for user authentication. Users enter their username or email and password, which are verified to grant access to the system.

Upon successful login, users can explore and purchase digital products. They can browse categories, view product details, add items to their cart, and proceed to checkout.

Moreover, authenticated users can create new products for sale. They can fill out a product creation form with details like product name, description, price, and the digital file for download.

In summary, the login page not only ensures secure access to the system but also facilitates user engagement in buying and selling activities. This page is a vital component in delivering a comprehensive and user-friendly e-commerce experience.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Login-page-in-React-e-commerce-app.png" alt="Login page in React e-commerce app" style="width:100%">

  <figcaption>Login page in React e-commerce app</figcaption>

</figure>

### Dashboard Page

We can access the dashboard page post-login. This page serves as a personalized hub for users to manage their activities and view pertinent site information.

It prominently features a display of all user-created products presented in a list or grid format. Each item, complete with its name, image, and price, can be managed by the user. They can edit details, delete a product, or add new ones.

Additionally, the dashboard page offers an order summary, providing users with a comprehensive overview of their purchase history. This includes details like the product name, purchase date, payment amount, and order status (delivered, pending, cancelled).

In summary, the dashboard page is a user-centric space that facilitates efficient management of products and order tracking. Thus, it enhances the overall user experience on our e-commerce site.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Dashboard-page-in-React-e-commerce-app.png" alt="Dashboard page in React e-commerce app" style="width:100%">

  <figcaption>Dashboard page in React e-commerce app</figcaption>

</figure>

### Product Add Page

This page enables users to add a new product for sale and specify its details using a WYSIWYG editor.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Product-add-page-in-React-e-commerce-app.png" alt="Product add page in React e-commerce app" style="width:100%">

  <figcaption>Product add page in React e-commerce app</figcaption>

</figure>

### Product List Page

A dedicated page will exist for each product that will show its details.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Product-list-page-in-React-e-commerce-app.png" alt="Product list page in React e-commerce app" style="width:100%">

  <figcaption>Product list page in React e-commerce app</figcaption>

</figure>

### Checkout Page

Once the user has decided to purchase a product, they can check out and make the payment on this page.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Checkout-page-in-React-e-commerce-app.png" alt="Checkout page in React e-commerce app" style="width:100%">

  <figcaption>Checkout page in React e-commerce app</figcaption>

</figure>

### Thank You Page

After a successful payment, the user can download the product and will see the thank you page.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Thank-you-page-in-the-React-e-commerce-app.png" alt="Thank you page in the React e-commerce app" style="width:100%">

  <figcaption>Thank you page in the React e-commerce app</figcaption>

</figure>

## Tech Stack

With the previously shown flow diagram and wireframes, it’s time to finalize our technology stack and set up the app’s boilerplate.

We’ll use React as this project’s front-end JavaScript framework. [Zustand will be our state management tool, while React-Router-V6](https://learnersbucket.com/tutorials/react/micro-state-management-with-zustand-in-react/ "Article: Micro-State management with Zustand in React.") will handle client-side routing. Lastly, the Synfusion [React](https://www.syncfusion.com/react-components "React UI Library") component library will aid in our development process.

## Boilerplate

1.First, set up a new React client-side rendered app using the following command.
```
npx create-react-app digital-shop
```

2.Once the app is ready, please install the following packages in it.
```
npm i zustand react-router-dom
```

3.After that, create the following three folders in the root of the app:
  - **Store** : This will contain all the centralized stores of Zustand to share the data across the components.
  - **Pages:** To contain all the pages of the app.
  - **Routes:** This will contain public and private route wrappers that restrict users from accessing pages depending on their authentication state.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Creating-folders-in-React-app.png" alt="Creating folders in React app" style="width:100%">

  <figcaption>Creating folders in React app</figcaption>

</figure>

**Note:** This structure will change as we proceed more with the development, but this is enough to get us started.

## Starting with Coding

Let’s start designing the React e-commerce app for digital products.

### User Login State

First, create the user store to hold the session details of whether the user is logged in or not. These details will help us to restrict the users’ access to pages.

Under the **_store_** folder, create a file named **_user.js_** and add the following code to it.

```js
import { create } from "zustand";
import { persist } from "zustand/middleware";
let store = (set) => ({
  isLoggedIn: false,
  setUserState: (isLoggedIn) => set(() => ({ isLoggedIn })),
});
//persist the state with key "randomKey"
store = persist(store, { name: "user-store" });
//create the store
let useStore = create(store);
export default useStore;
```

We have created a hook that has the initial state of **_is logged in_** as **_false_** and the method **_setUserState_** to update the state.

The state is persisted in the local storage. We can access this state using the hook, and we will update its data once the user logs in. Using the default state, we will create the route wrappers for now.

### Defining the Public and Private Routes

Our client-side routing approach needs to manage routes based on state data.

For instance, if an unauthenticated user attempts to access a page that requires authentication, we’ll redirect them to the login page. Conversely, if an authenticated user tries to access a page that doesn’t require login, such as the login page itself, we’ll redirect them to the dashboard page.

To accomplish this, we’ll utilize the **_Outlet_** , which only renders route elements when the route is visited. If the user isn’t authenticated, we’ll create a wrapper to facilitate redirection to the appropriate page.

First, we create two files, **_private.js_** and **_public.js_** , within the **_routes_** folder.

The **_private.js_** file will restrict access to pages that necessitate authentication.

Refer to the following code example.

```js
import React from 'react';
import { Outlet, Navigate } from 'react-router-dom';
import useStore from '../store/user';
const Private = () => {
  const isLoggedIn = useStore((state) => state.isLoggedIn);
  return isLoggedIn ? <Outlet /> : <Navigate to="/" />;
};
export default Private;
```

The **_public.js_** page is used to restrict access to public pages after authentication.

```js
import React from 'react';
import { Outlet, Navigate } from 'react-router-dom';
import useStore from '../store/user';
const Public = () => {
  const isLoggedIn = useStore((state) => state.isLoggedIn);
  return !isLoggedIn ? <Outlet /> : <Navigate to="/dashboard" />;
};
export default Public;
```

Once the wrappers are ready, we add them to the routes in our **_app.js_**  file.

```js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Login from "./pages/login";
import PrivateRoutes from "./routes/private";
import PublicRoutes from "./routes/public";
const App = () => {
  return (
	<BrowserRouter >
  	<Routes>
    	<Route path="/" element={<PublicRoutes />}>
        	<Route index element={<h1>Browse</h1>} />
        	<Route path="product-list" element={<h1>Product List</h1>}></Route>
        	<Route path="login" element={<Login />}></Route>
    	</Route>
    	<Route path="/" element={<PrivateRoutes />}>
        	<Route path="dashboard" element={<h1>Dashboard</h1>}></Route>
        	<Route path="product-add" element={<h1>Product Add</h1>}></Route>
        	<Route path="checkout" element={<h1>checkout</h1>}></Route>
        	<Route path="thank-you" element={<h1>Thank You</h1>}></Route>
    	</Route>
  	</Routes>
	</BrowserRouter>
  );
}
export default App;
```

Now, we run the app using the **_npm run start_** command and then try to access a private route like **_/dashboard_**. It will redirect us to the login page.  
Similarly, we update the user state in **_store/user.js_** and set the default state to **LoggedIn**.

```js
let store = (set) => ({
  isLoggedIn: true,
  setUserState: (isLoggedIn) => set(() => ({ isLoggedIn })),
});
```

When we restart the app, clear the local storage, or run the app in incognito mode and try to access the public pages, we will be redirected to the **dashboard** page.  
Now that our setup is ready, in the next part, we will create the login page, authenticate the user, and then design the dashboard and product add pages.

## Conclusion

We appreciate your time and effort in reading this blog! We are providing a comprehensive guide on constructing a fully functional e-commerce app for digital products with React. We encourage you to put this knowledge into practice and share your experiences in the comments section below!

[Syncfusion’s Essential Studio for React](https://www.syncfusion.com/react-ui-components "Essential Studio for React") is a one-stop solution offering over 80 high-performance, lightweight, modular, and responsive UI components. It’s the perfect suite to build any web app.

For our existing Syncfusion users, the latest version of Essential Studio is readily available for download on the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio License and Downloads page") page. If you’re new to Syncfusion, we invite you to explore our products’ features and capabilities with our [30-day free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products").

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always here to assist you!

## Related blogs

- [Top 7 Ways to Write CSS in Your React or Next.js App](https://www.syncfusion.com/blogs/post/write-css-react-next-js.aspx "Blog: Top 7 Ways to Write CSS in Your React or Next.js App")
- [Create Interactive Digital Logic Circuits in React](https://www.syncfusion.com/blogs/post/digital-logic-circuits-react.aspx "Blog: Create Interactive Digital Logic Circuits in React")
- [Intro to React Hooks and Context API [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/react-hooks-and-context-api.aspx "Webinar Show Notes: Intro to React Hooks and Context API")
- [Seamlessly Create an Interactive BPMN Viewer and Editor Using the React Diagram Control](https://www.syncfusion.com/blogs/post/create-a-bpmn-viewer-using-react.aspx "Blog: Seamlessly Create an Interactive BPMN Viewer and Editor Using the React Diagram Control")