|
|
||
|---|---|---|
| .. | ||
| .vscode | ||
| public | ||
| src | ||
| .env.local | ||
| .eslintrc.json | ||
| .gitignore | ||
| next-env.d.ts | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| yarn.lock | ||
Crab Fit Frontend
This is the frontend for Crab Fit, written in TypeScript and SCSS, using Next.js app router.
Environment
Default environment variables are provided in .env.local. This should work out of the box while developing with the API. To change or add variables, create a .env file which will override any values in .env.local.
Using VSCode
If you're using VSCode to edit the frontend, be sure to open the frontend folder specifically as your workspace, so you can select the workspace typescript version. This will give you type safety for css modules using the typescript-plugin-css-modules package.
Translations
Translation files are located in frontend/src/i18n/locales. If you need to add any new strings, make sure you only edit the resources in the en folder. Any changes to the other languages including translation of new strings and deletion of removed strings are handled by Transifex.
Temporal API
Crab Fit uses the new Temporal API for all date/time calculations and comparisons. Because this API is not yet supported by any browsers, the @temporal-js/polyfill library is used, with the intention to remove this eventually once support is stable in all major browsers.
Note that much of the Temporal logic is run only when necessary, as the polyfill being used is not optimised and will slow down the frontend otherwise.