A Mini-app E-Commerce build with React.js

by React

ZaUI Coffee

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

Setup

Using Zalo Mini App Studio

  1. Install Zalo Mini App Studio
  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

  2. Install Mini App DevTools CLI

  3. Download or clone this repository

  4. Install dependencies

    npm install

  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

  2. Setup payment methods if you want to accept online payments

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

    If you’re using zmp-cli:

    zmp login
zmp deploy

  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:

    • components: Reusable components written in React.JS.
    • css: Stylesheets; pre-processors are also supported.
    • pages: A Page is also a component but will act as an entire view and must be registered inside app.tsx as a Route (https://mini.zalo.me/docs/zaui/components/router/ZMPRouter/).
    • statics: SVG and images that should be imported directly into bundle source code.
    • types: Contains TypeScript type and interface declarations.
    • utils: Reusable utility functions, such as distance calculation, date and time format, etc.
    • app.ts: Entry point of your Mini App.
    • global.d.ts: Contains TypeScript declarations for third-party modules and global objects.
    • state.ts: State management, containing Recoil’s atoms and selectors (https://recoiljs.org/docs/introduction/getting-started).

  • app-config.json: Global configuration for your Mini App (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 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:

Load product list from server

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