![[Project] Toolks: a site for calc tools](https://rodrigorocha.space/wp-content/uploads/2021/05/projects-1170x658.jpg)
Datasheet:
Languages:
Javascript, HTML and CSS
Technologies:
React (with React Helmet, React Snap and React Router, project created with Create-React-App)
Repository:
https://github.com/rodrigogomesrc/Toolks
Site:
About
Toolks is a collection of online calculation tools, such as to calculate rule of three, percentage, draw letters and numbers, and can create random groups from a list of given names. In this function it can also give suggestions of the number of groups that can be created according to the number of people in the list.
Why did I build the project?
Starting at React, I needed ideas to put into practice what I was learning. As I was starting, I wanted something simple. So, since I already had some very simple project ideas for calculating things that I find useful and often search the Internet to quickly calculate it, besides calculations that I do out of curiosity. I also thought of others that might be useful in some situations even though it’s not exactly what I need. So I put it all together and created a tool collection site.
Building, Experimentating and Learning
The site was not meant to be “perfect”, but to test things I was learning in React and to improve the knowledge of Javascript itself. The main thing I wanted to learn from this project was how to create components, import, pass data from one component to another, do validations, call function and so on. That is, interact with the components.
Because I was in the beginning and just experimenting, I didn’t pay attention to splitting the roles of the components properly. Not doing so, the code got messy and with many repetitions where they were not needed. This made me realize one of the main advantages of React componentization that I wasn’t tapping into. For my next project, which would be rebuilding my personal site and building this blog, this knowledge was leveraged to maximize as much as I could of organizing and reusing code.
Other things that I could try and learn from the project were SEO techniques when trying to index on Google and optimize it for that purpose. Learning how to dynamically manipulate page tags and page headers using React Helmet. Another package that I utilized to try to make the site more performant, load faster to try to make it better to be indexed, was the React Snap package. It’s used to create a basic static version of the site to be preloaded until Javascript is fully loaded, decreasing the time of the first appearance of the site.
Project future
The site will still be available and updated for the same purposes that I can try out new things from React or web development in general, and I still want to put more tools in place so I can take advantage of them when I need them. And also so other people can use them hoping they are accessible over the internet.
Current Status
The project is currently not receiving any update, but I still intend to update it with more calc tools.
About the project articles
These articles contained in the website (blog) of mine are here to describe many aspects of programming projects (or other types os projects if necessary) I develop. Describing development aspects or other informations I find necessary; They are more like a report than an actual article. Those are here to serve as my portfolio.
As these projects can be a work in progress, so are these “reports”. So it’s not a fixed article but one to be edited as the informations about the project changes, though mantaining it consistent to the project development.
