USPolis Frontend

Table of Contents

1. Stack
2. Docs
3. Setup
4. Run and Build
5. Develop
6. Test

Stack

Here we have the main tecnologies used on frontend:

• Typescript - TypeScript is a strongly typed programming language that builds on JavaScript.
• React - Javascript front-end library.
• Chakra-UI - A React component library (version 2).
• Yarn - A package manager for javascript projects
• Vite - A fast frontend build tool

We also uses other tools for development, check the develop section.

Docs

You can see a complete documentation at USPolis-Admin Wiki, there you will find the architecture, models, design patterns, bussiness rules, descriptions and more.

Setup

This codebase was written for Node.js 20 and above.

First make sure that you have Yarn installed.

After installing yarn now we will install the dependencies

yarn install

There are enviroment variables that must be setted, you can see a example of .env file at env.example on the root folder.

Assuming you've created and setted the '.env' file, everything should run as if there is a API or backend running (see the docs for a complete step by step to how set the enviroment).

Run and Build

This project uses Vite as building tool, for running the website do:

yarn vite

Your website will be available at http://localhost:3000

If you want to build the static files to serve it, run:

yarn build

The static files will be avaliable at folder build on the root of the project. To serve the static files run this command:

npx serve -s build

The flag -s is important since our project is a SPA.

Develop

Since Vite is just a speed building tool, it not check syntax errors, so if you made a mistake your website will be a blank white page and you will be in trouble to find were is the problem.

So, for making Vite viable we uses Eslint for analyzing our code, actually we uses the Typescript-Eslint library to enable eslint and prettier to support Typescript.

You can change the typescript-eslint rules (make more strict or less strict) at eslint.config.mjs file, you can read all rules here.

To run eslint do:

yarn lint

*The project actually have vite-eslint plugin that automatically shows on terminal were is the erros or warnings, so you not need to run this command

For code formatting we uses Prettier, the config file is .prettierrc.js.

To run prettier do:

yarn format

Tip

If you use VSCode we strongly recommends install Prittier-VSCode extension and ESLint extension. This will save your time, showing errors on editor and running prettier on after save the file.

Test

We are working on a test enviroment for frontend, but the project already has Testing Library as a dependency.