My First React App deploy
Tags: dohackathon
Published: 2021-01-07 22:52:23

## 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
![app_landscape_screenshot](https://i.ibb.co/3WnY5Gq/Captura-de-pantalla-2021-01-06-a-las-00-47-39.png)
![app_portrait_screenshot_1](https://i.ibb.co/RDkfgMp/Captura-de-pantalla-2021-01-06-a-las-00-50-12.png)
![app_portrait_screenshot_2](https://i.ibb.co/7znSw5C/Captura-de-pantalla-2021-01-06-a-las-00-50-18.png)

### 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.