This project runs a resistor calculator UI and API, the user choose the colors and the band and it will display the resistance equivalence
This app was created as a MonoRepo with Nx using Vite and Yarn, to install the project just clone the repo
git clone [email protected]:CharleyDvs/resistor-calculator.git
and in the app folder install with Yarn:
yarn install
To start the application just use:
yarn start
this will run both the UI and API in parallel.
Components for this project are fully documented and tested, once the installation is finished just use:
yarn storybook
To run unit tests, use the command:
yarn test:unit
For e2e testing (Not fully finished):
yarn test:e2e
Design tokens are variables used in as scss variables that control most of the appeareance of the app and it's components.
This app has it's own design tokens as part of its design system, these tokens come from JSON files that could be generated by an app like Figma, for the moment it only has colors. You can find this values in the folder /libs/shared/styles/tokens
.
Note: Generate design tokens is completely optional as the app already has a set of design tokens
Just overwrite the json files with whatever values you want, this tokens are generated using amazon's Style dictionary, for more info about the structure you can read more here. After installing it's recommended to install Style dictionary globally:
npm install -g style-dictionary
installing it as a dev-depency could require config changes, after the library is installed just run:
yarn generate:tokens
this will create a new tokens.module.scss at the root of the styles library that you can import from your components. It is not recommended to add values manually as the file will be overwritten with the command, however manual changes can be made in the JSON files.
- Connect to a real database
- Add tests to the backend
- Document the backend with swagger
- Generate types from the backend
- Add Cypress tests for the frontend
- Adopt more design tokens
- Setup a CI/CD pipeline
- Dockerize
✨ This workspace has been generated by Nx, Smart Monorepos · Fast CI. ✨ So all comands available in Nx also work for the application, read below:
Enhance your Nx experience by installing Nx Console for your favorite editor. Nx Console provides an interactive UI to view your projects, run tasks, generate code, and more! Available for VSCode, IntelliJ and comes with a LSP for Vim users.
Run npx nx build Resistor-Calculator
to build the application. The build artifacts are stored in the output directory (e.g. dist/
or build/
), ready to be deployed.
To execute tasks with Nx use the following syntax:
npx nx <target> <project> <...options>
You can also run multiple targets:
npx nx run-many -t <target1> <target2>
..or add -p
to filter specific projects
npx nx run-many -t <target1> <target2> -p <proj1> <proj2>
Targets can be defined in the package.json
or projects.json
. Learn more in the docs.
Nx comes with local caching already built-in (check your nx.json
). On CI you might want to go a step further.
Run npx nx graph
to show the graph of the workspace.
It will show tasks that you can run with Nx.