My First React App deploy

What I built

I've built a circumference arc elements calculator, using React + Redux + Bootstrap.

Category Submission:

Random Roulette

App Link

https://elementos-circunferencia-3v4hs.ondigitalocean.app/

Screenshots

Description

Just giving the radius and the angle described by the arc, you can get the length of the arc, its chord, the height of the arc portion, plus the area and perimeter of the circular sector.

Link to Source Code

https://github.com/fip3torrejon/elementos-circunferencia

Permissive License

MIT

Background

Well, a relative used to calculate those elements in a Flash-based site, so he asked me to help him with that and I thought to build this micro-app, to put into practice my React and Bootstrap knowledge, and try to use and understand better the Redux workflow applying it in my app.

How I built it

I used the DO App Platform for the first time, following a tutorial that received by email. I'm familiar with Git and Github, so the connection and the deployment were very simple.
About my app, I designed it mobile-first; a container with rows, and cards to input and show the results, wrapped in boxes for each (input and result box). Thought about it with lots of colors, contrasting each section. I didn't think about typography, because I focused on usability; so, now I will start testing some fonts to make it looks better.
Once the design was ok, I started creating the React app using create-react-app. I cleaned it, and code the basic structure and components of the project (container >> boxes >> cards for the input and the results; plus the header for the app title and the credit footer).
Then I installed react-bootstrap and I started to implement my mobile-first design.
Once it was done, I told myself "how the hell will I manage the input data to make the calculations??"

container
|
|---input box
| |---input card 1 -------------->|
| |---input card 2 -------------->|
|                                 |?
|                           [calculations]
|---results box              |?   |? |?
| |---results card 1 <-------|    |  |
| |---results card 2 <------------|  |
| |---results card 3 <---------------|

Seconds later, redux knocked on my door and took me to my react with redux online courses. I approved the course but just with theory because I've never implemented (even as an exercise) any of the things that I learned from them.
So, I reviewed and rechecked all videos: I went to the terminal, installed redux and react-redux, create the reducers and actions to connect my data... and implements Providers, create mapToProps, dispatchToProps methods/functions and... I was so happy, seeing the data inputs updating inside other components.
Then I implement calculations functions to get the results because the app was designed, and it worked perfectly... happy and happier.
Finally, I sent those functions to a module and imported it into my results cards (I thought it was a good practice, and my code looks cleaner).

I want to add some features, like multilanguage settings, or display a canvas showing the circumference elements based on radius and angle inputs.

Additional Resources/Info

This is my first app deployment
... and my first post about my work as a developer
... and my first serious post in English

(Could I call it a hat-trick?? let me know)

So, I hope you enjoy the app and the post; sorry if it wasn't the best English, but I will improve... I'll keep myself writing and reading and writing more to get better.

I thank you in advance for all the comments and code reviews.
Hugs from Chile.