React-based web app that lets you inventory your resistors by reading their color codes. I thought that this project is my alternative to the classic to-do app 🥱.
To add resistors, click the "+" button in the title, and a modal with the form will appear. From there, select the 1st Digit, 2nd Digit, Multiplier, Tolerance and Power Rating, and fill the quantity field.
In the list view, you can adjust the quantity of resistors by using the "+/-" buttons. If the quantity is 0, the resistor will be removed.
You can search for resistors based on the values, and the list of resistors will be updated to show only the ones that match.
As a bonus, when you try to add a non-standard value from the E Series in the New Resistor Form, a message will suggest the nearest values according to the tolerance and accepted values of the E Series.
Please note that the E3, E48, E96, and E192 Series are not supported, only the E6, E12, and E24 Series.
For a theoretical review, I may suggest:
- https://eepower.com/resistor-guide/resistor-standards-and-codes
- https://en.wikipedia.org/wiki/E_series_of_preferred_numbers
- JS Libraries: ReactJS
- Programming Language: TypeScript
- CSS Libraries: TailwindCSS
- Build Tool: Vite
- Hosting: GitHub Pages
- Dev Environment: VSCode with dev containers in Zorin OS
You can see the demo here: https://jhordyess.github.io/resistor-tracker/
This project is the result of my mini project with JS resistor-color-code, It's a resistor value calculator for 4 bands of color that helped me to develop this project.
- Clone the repository:
git clone git@github.com:jhordyess/resistor-tracker.git- Open the project folder:
cd resistor-tracker- Install the dependencies:
yarn- Run the project:
yarn dev- Open the browser at http://localhost:5173/resistor-tracker/
You can use the VSCode dev containers to run the project in a containerized environment.
You need to have installed Docker and VSCode, and the Dev Containers extension.
- Clone the repository:
git clone git@github.com:jhordyess/resistor-tracker.git- Open the project with VSCode:
code resistor-tracker-
Open the command palette and select the option
Dev Containers: Reopen in Container. -
Wait for the container to be built and the project to be started.
-
Open the terminal in VSCode and run the project:
yarn dev- Open the browser at http://localhost:5173/resistor-tracker/
- Add snackbar messages
- Add support for 5 bands or more 🤔
- Improve relative resistor size with powerRating
If you would like to contribute to the project, open an issue or make a pull request on the repository.
© 2023> Jhordyess. Under the MIT license. See the LICENSE file for more details.
Made with 💪 by Jhordyess