Web application for DataMap a SaaS Data Platform for atmospheric big data and data science research group in Brazil.
Use https://asdf-vm.com/ to install nodejs version available in .tool-versions. After install nodejs version, run the npm commands:
npm installRun the app locally, in development mode, using:`
npm run devThe webapp will be available at http://localhost:3000/.
With docker, just run:
docker build -t datamap-webapp .
docker run -p 3000:3000 datamap-webappThe output should be Listening on port 3000, then the webapp is available locally at http://localhost:3000/.
Use extensions to be productive: https://www.geeksforgeeks.org/top-10-extensions-for-reactjs-in-vscode/
Also install:
- https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
- https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
- https://marketplace.visualstudio.com/items?itemName=vitaliymaz.vscode-svg-previewer
- https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Some defaults and components could be visualized in http://localhost:3000/design-system/. See some components ideas in: https://flowbite.com/
We are using https://fonts.google.com/icons for icons through https://www.npmjs.com/package/react-material-symbols.
See examples at https://github.com/ed-software/react-material-symbols?tab=readme-ov-file#readme and try your icons on this Storybook.
The customization applied into the icons are:
- style: outlined
- Fill: false
- Weight: 200
- Grade: -25
- Optical: depends on the place, but usually 32px
Use JEST for unit tests.
Scripts:
# Testing once
npm run test
# Testing with watch option on
npm run testing
To run tests and open the code coverage report on Google Chrome browser, execute:
npm run test:coverage
But for open last coverage report only, withot run the test, perform:
npm run test:coverage:report
The jest plugin for vscode could help you to run locally and see the coverage, see more https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest
We have a project for this, check: https://github.com/ardc-brazil/datamap-e2e
You have to create a .env.local file in the project root.
Copy the file .env.local.template and replace with valid values.
Some valid values are at the production environment from Vercel.
We are using Formik to handle all forms in the aplication. See more https://formik.org/
We are organizing the constants of the project in a {Category}Contants.ts file and well documented, following this idea:
https://dev.to/amirfakour/tips-to-use-constants-file-in-typescript-27je
WARNING: The current deployment process causes downtime for services.
# Connect to USP infra
ssh [email protected] -p 5010
# Navigate to the project folder
cd datamap-webapp
# Get the last (main) branch version
git pull
# Rebuild the image and deploy the new version
ENV_FILE_PATH=../environment/frontend.prod.env make docker-deploymentRemote procedure call (RPC) is the way that front-end application communicates with the Backend application. We perform RPC for two reasons: data changing and data fetching.
We are using SWR directly on page instead of using a BFF Gateway implementation for feching data from Backend for Frontend (BFF). SWR has many benefits when fetching data from BFF, some pros are: realtime, paginantion, retry, caching, auto cache invalidation.
The following diagram demonstrate how to perform a data fetching.
