Web application for AmazonFACE. This is basically a hotsite that should have AmazonFACE instructions and details about how to use and access the project data via Datamap platform.
Use https://asdf-vm.com/ to install nodejs version available in .tool-versions. After install nodejs version, run the npm commands:
npm install
Run the app locally, in development mode, using:
npm run dev
The webapp will be available at http://localhost:3000/.
With docker, just run:
docker build -t amazon-face .
docker run -p 3000:3000 amazon-face
The 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/
Use JEST for unit tests.
Scripts:
# Testing once
npm run test
# Testing with watch option on
npm run testing
Use Cypress for end-to-end tests.
# Open cypress screen
npm run cypress
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