README.md

Platform beta

The table of contents

• Platform beta
  • Table of contents
  • Prerequisites
  • Getting started here
  • Running the application
    • Cypress tests
    • The linter
    • The server
  • Folder Structure
    • src folder
    • public folder
    • cypress folder
    • Top-level configuration

Prerequisites.

• Git
• NodeJs v16 or later
• Yarn

Getting started here

a) In order to get started here, you start by cloning the repository accordingly

git clone https://github.com/airqo-platform/AirQo-frontend.git

b) Once the repo is cloned, cd into the platform folder within the AirQo-frontend directory.

cd platform

c) Create the .env file and fill it with the needed information. You can find the needed information in the .env.example file.

d) Install the dependencies

yarn install

Running the application

Run the following commands to start corresponding services

Cypress tests

yarn cypress:open

A new browser screen opens you from which you can manaully run the tests

The linter

yarn lint

To lint all the JavaScript source code, and

yarn lint-staged

To lint only the staged files

The server

yarn dev

To start the development server. The application can be accessed from http://localhost:3000

yarn start

To start the production server.

yarn build

To build the application for production environments

Folder Structure

src folder

The src folder is meant to separate application level code from the top-level configuration. The src folder is split into four main folders ie core, lib, common and pages.

├── common
│   ├── components
│   │   ├── Footer
│   │   │   └── index.js
│   │   │   └── Footer.module.scss
│   │   ├── SideBar
│   │   │   └── index.js
│   │   │   └── SideBar.module.scss
│   │   │   └── components
│   │   │   │   └── Profile
│   │   │   │   │   └── index.js
│   │   │   │   │   └── Profile.module.scss
│   ├── styles
│   │   ├── global.scss
├── pages
│   ├── app.js
│   ├── Dashboard.js
├── lib
├── core

Core: This is where we place everything unrelated to the domain like API functions, DB functions including firebase/firestore connections, Authentication utilities, provider to send emails.

The nature of this folder is that you cannot import stuff from the lib, pages and components folders.

Lib: This is where we place utilities that will be mostly used by our components and partly in the pages. Utilities like;

• Custom hooks
• Prop functions eg getInitialProps, getServerSideProps
• Redux

This folder is also not supposed to import stuff from the pages and components folders.

Common: This is where we place the reusable UI components and the global css styles ie components and styles. Under components, we can for example a SideBar component. What if our SideBar component had components within it that aren’t used elsewhere in the application eg Profile? We create a components folder within the SideBar component folder and add those components with their styles. The styles folder is where we place the global css styles.

public folder

The public folder is meant for adding application public assets like images, gifs, and video clips

cypress folder

This is an auto-generated folder structure for writing in Cypress tests according to this documentation.

Top-level configuration

Below are the configuration files at the project top level

• next.config.js
• cypress.config.js
• .eslintrc.json
• prettier.config.js
• .babelrc.js