A Mini-app E-Commerce build with React.js
Tags: ecommerce
Published: 2023-11-07 07:47:09

---
title: A Mini-app E-Commerce build with React.js
published: true
date: 2023-11-05 00:42:00 UTC
tags: Ecommerce
canonical_url: https://reactjsexample.com/a-mini-app-e-commerce-build-with-react-js/
---

# ZaUI Coffee
 ![A Mini-app E-Commerce build with React.js](https://reactjsexample.com/content/images/2023/11/Code_2023-11_22-37-19.jpg)

Public template for building a coffee shop on Zalo Mini App. Main features:

- View coffee shop details and menus.
- Order coffee and snacks with customizable size options.
- Notifications management.
- Manage your cart and delivery options.
- View customer profile and membership.

| Demo | Entrypoint |
| --- | --- |
| ![A Mini-app E-Commerce build with React.js](https://github.com/linhnguyen-gt/mini-zalo-demo/raw/main/docs/preview.webp) | ![A Mini-app E-Commerce build with React.js](https://github.com/linhnguyen-gt/mini-zalo-demo/raw/main/docs/qr.webp) |

## Setup

### Using Zalo Mini App Studio

1. [Install Zalo Mini App Studio](https://mini.zalo.me/docs/dev-tools)
2. Click on New project > Enter your Mini App ID > Choose ZaUI Coffee template
3. Wait until the generated project is ready and click the Start button to run the mini app 🚀

### Using Visual Studio Code

1. [Install Node JS](https://nodejs.org/en/download/)

2. [Install Mini App DevTools CLI](https://mini.zalo.me/docs/dev-tools/cli/intro/)

3. Download or clone this repository

4. Install dependencies

5. Start dev server using `zmp-cli`If you’re using `developer`:

```
 npm run dev
```

If you’re using `developer`:

```
npm start
```

1. Open `localhost:3000` on your browser and start coding 🔥

## Deployment

1. Create a mini program. For instruction on how to create a mini program, please refer to [Coffee Shop Tutorial](https://mini.zalo.me/docs/tutorial/step-1/)

2. Setup payment methods if you want to accept online payments ![A Mini-app E-Commerce build with React.js](https://github.com/linhnguyen-gt/mini-zalo-demo/raw/main/docs/payment.png "Payment method")

3. Deploy your mini program to Zalo using the mini app ID created in step 1.

4. Scan the QR code using Zalo to preview your mini program.

## Usage:

The repository contains sample UI components for building your application. You may wish to integrate internal APIs to fetch restaurants, menus, and booking history or modify the code to suit your business needs.

Folder structure:

- **`src`** : Contains all the logic source code of your Mini App. Inside the `src` folder:

- **`app-config.json`** : Global configuration for your Mini App ([https://mini.zalo.me/docs/framework/getting-started/app-config](https://mini.zalo.me/docs/framework/getting-started/app-config)).

The other files (such as `tailwind.config.js`, `vite.config.ts`, `tsconfig.json`, `postcss.config.js`) are configurations for libraries used in your application. Visit the library’s documentation to learn how to use them.

## Recipes

### Changing restaurant’s name

Just change the `app.title` property in `app-config.json`:

```
{
  "app": {
    "title": "ZaUI Coffee"
  }
}
```

### Changing coffee shop’s logo

Visit [Zalo Mini Program](https://mini.zalo.me/) and go to your mini program’s settings to change the logo.

### Customizations

You can customizations primary colors and currency displays using [Zalo Mini App Studio](https://mini.zalo.me/docs/dev-tools):

![A Mini-app E-Commerce build with React.js](https://github.com/linhnguyen-gt/mini-zalo-demo/raw/main/docs/customizations.webp)

### Load product list from server

![A Mini-app E-Commerce build with React.js](https://github.com/linhnguyen-gt/mini-zalo-demo/raw/main/docs/products-fetching.webp)

To make an HTTP GET request to your server and fetch the product list, update the `productsState` selector in src/state.ts to use `fetch`.

If the returned JSON structure is different from the template, you would need to map your product object to the corresponding `Product` interface. For example:

```
export const productsState = selector<Product[]>({
  key: "products",
  get: async () => {
    const response = await fetch("https://dummyjson.com/products");
    const data = await response.json();
    return data.products.map(
      ({ id, title, price, images, description, category }) =>
        <Product>{
          id,
          name: title,
          price: price,
          image: images[0],
          description,
          categoryId: category,
        }
    );
  },
});
```

Feel free to create another `service` layer and put the network fetching logics inside. This template provides only the UI layer, so you can customize the logic in any way you want.

## License

Copyright (c) Zalo Group. and its affiliates. All rights reserved.

The examples provided by Zalo Group are for non-commercial testing and evaluation purposes only. Zalo Group reserves all rights not expressly granted.

## GitHub

[View Github](https://github.com/linhnguyen-gt/mini-zalo-demo?ref=reactjsexample.com)