trac.io

A tech industry company created for study and practice purposes.

Summary

• Access website
• Technologies
• Settings
  • How to install and run project
  • How to run storybook
  • How to run tests
  • VsCode
  • Commands
  • Internationalization
• Development flow
• Production flow

Access website

• trac.io

Technologies

• TypeScript
• ReactJS
• Vite
• Redux Toolkit
• AntDesign
• Styled-Components
• Highcharts
• Lottie for React
• Storybook
• Vitest
• Testing Library
• I18next
• I18next-react
• Fontawesome
• DateFNS
• Faker
• Eslint
• Lint-Staged
• Prettier
• Husky

Settings

How to install and run project

yarn && yarn dev

How to run storybook

yarn storybook

How to run tests

yarn test

VsCode

The settings below are not mandatory but make it easier in development at Ide VsCode

1. Create the settings.json file inside .vscode, with the following settings:

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  }
}

Internationalization

Internationalization done using i18next, if in doubt, please read the documentation I18next

Commands

• dev: runs the application and starts a local server at http://localhost:{port}/.
• build: generate for production.
• storybook: runs the stories from storybook.
• test: runs vitest and testing library tests.
• preview: generates for production and starts a local server on http://localhost:{port}/.
• lint: runs the linter on all components and pages.
• format: runs prettier to format all components and pages.

Development flow

1. Print on terminal yarn dev to getting started

Production flow

1. Type in terminal yarn preview
2. Publish the files