Azukibao

This site is developed by React.js, integrated third-party API from Airtable and Instagram.

Description:

This is a Chinese bun branded website using Airtable as CMS. Client can easily manage products on online excel without any programming skills. In addition, by fetching Instagram API, instagram posts from official account will also update synchronously.

Demo link:

https://azukibao.netlify.app/

Screenshots

Resource

• Mockup

Technologies

• Base:
  • HTML / CSS / SCSS / JavaScript
• Framework:
  • React.js

Dependencies

• styled-components
• axios
• aos
• swiper
• node-sass
• ... ( see package.json for details )

Folder structure

    .
    ├── docs                         # documentation files
    ├── public                       # static files, like images, etc..
    ├── src
    │    ├── assets                  # media assets, like icons, etc..
    │    ├── components              # global components
    │    ├── hooks                   # utility hooks for encapsulating logic
    │    ├── pages
    │    │   ├── BrandPage
    │    │   │   ├── BrandHeroHeader.jsx
    │    │   │   ├── BrandStorySection.jsx
    │    │   │   └── index.jsx
    │    │   ├── HomePage
    │    │   │   └── ...
    │    │   ├── PopularPage
    │    │   │   └── ...
    │    │   ├── ShopPage
    │    │   │   └── ...
    │    │   ├── EmptyPage.jsx
    │    │   ├── MaterialPage.jsx
    │    │   └── ProductPage.jsx
    │    ├── styles                   # global styles (using BEM naming)
    │    ├── App.jsx                  # main components as App container
    │    ├── index.js                 # root entry point
    │    └── utils.js                 # tools and utilities
    ├── .gititnore
    ├── .jsconfig.json
    ├── package-lock.json
    ├── package.json
    └── README.md

Style Folder structure

    styles
      ├── base
      │   ├── _base.scss
      │   ├── _reset.scss
      ├── components
      │   ├── _banner.scss
      │   └── ...
      ├── helpers
      │   ├── _variables.scss
      │   └── ...
      ├── layout
      │   ├── _footer.scss
      │   └── ...
      ├── plugin
      │   ├── aos.css
      │   └── swiper-bundle.scss
      ├── utilities
      │   ├── _spacing.scss
      │   └── ...
      └── all.scss                    # root style file

Setup

• Download or clone the repository

• Install dependencies

  npm install

• Run the development server:

  npm run start

• Open http://localhost:3000 with your browser to see the homePage.

Author

• UX / UI Design: Wei Lin
• Web development: Wei Lin
• Product Photography: Wei Lin