Cerebro Dashboard

Cerebro is the DX solutions automation system for IoT and Smart Cities management - https://cerebro.iveda.ai

Tech Stack

Uses Vite as the builder, index.html as the app page, src/main.tsx as the root module.

• Language: Typescript 4.x
• Framework: React 18.x
• State management: MobX 6.x

The Project uses Prettier for code formatting. File .prettierrc.json contains the configuration.

Install Dependencies

Prepare project for the local development.

yarn install

Available Scripts

Runs the app in the development mode.Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.

yarn dev

Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed.

yarn build

Builds and runs the app in the production mode.
Open http://localhost:4173 to view it in the browser.

yarn preview

Source Code

Folders

. - config files
src - source code

See src/README.md for more details.

Aliases

Please use aliases for imports:

• @app for ./src/app; see src/app/README.md for more details.
• @core for ./src/core; see src/core/README.md for more details.
• @solutions for for ./src/solutions; see src/solutions/README.md for more details.

Development Flow

The Project uses Git version control system. The main branch is main and the development branch is dev.

Each new feature should reside in its own branch, which can be pushed to the central repository for backup/collaboration following the next flow:

1. Create feature branch using dev as its parent branch.
2. When you ready to begin the process of merging new code changes with the project repository, open a pull request (merge request) with dev branch.
3. After team's review and approval, the code is merged into dev branch.

When the dev branch is ready for release, it is merged into main branch to deploy. Features should never interact directly with main.

Dependencies

Libraries

Core libraries used within the project:

• Headless UI
• react-popper
• SimpleBar
• Swiperjs

Data Collections

• Moment
• Moment Timezone

Visual Theme

Read more about Design System.

• TailwindCSS framework as the set of great mixins so it needs "scss.lint.unknownAtRules": "ignore" setting in VSCode IDE to use @apply, @theme etc...
• tailwindcss-box-shadow
• Tokens Studio for Figma
• Style Dictionary
• token-transformer
• tinycolor2

Localization

1. Integrate Translation Utility to the File.

Insert the following import at the beginning of your file:

import { t } from '@core/utils/translate';

2. Add Key, Value, and Description.

Before proceeding, it's recommended to check if a similar key or value already exists in the en.json file.

Navigate to:

@core > utils > translations > en.json

"general": {
   "nextButton": {
       "label": {
           "translation": "Next",
           "notes": "Next button or link."
       }
   }
}

Use in your components as:

aria-label='Next'
aria-label={t('general.nextButton.label', 'Next', 'Next button or link.')}

For general/common values, we prefer using the general prefix.

3. Run the Script.

Execute the following command:

yarn i18n

4. Upload the Generated en.json File to the Translation Service.

Navigate to Lokalise website. Go to:

DX Solutions > Upload

And upload your file.

5. Downloading the Files

From the list, select the format Structured JSON (.json).

After downloading, place the files in the following directory:

@core > utils > translations

zh_CN.json
zh_TW.json
vi.json