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.

• Set up remote caching
• Set up task distribution across multiple machines
• Learn more how to setup CI

Run npx nx graph to show the graph of the workspace. It will show tasks that you can run with Nx.

• Learn more about Exploring the Project Graph