Weather Tea React
A weather forecast app you can explore and play with
Why have I built it
Interactivity. Nowadays it is a key element to make people engage with a certain content and it is basically everywhere on the internet.
As I coded this project - not for anyone else, but as a personal effort within the context of a SheCodes workshop -, I knew I wanted to take the opportunity to create something a little bit different and that could be appealing for people to explore in a fun way.
The Concept
By the time I started the Weather Tea React, I had already built a Vanilla JavaScript version of the same idea. This meant I could use the previous result as a starting point and, based on that, have a clearer vision of what were the sections that could be translated into separate React components.
This segmentation allowed for better organization of the code but it also implied a logic that made it easier to recreate any given part of the app and adapt it to different contexts or styling.
In the end it was so effortless to add interactive content to the screen that I decided to dive right into it and duplicate it all, creating the Weather Snack 😜
Down to code
So if you look into it, both versions work in the exact same way: most of the components I had identified on the draft are their own JavaScript files - with a few additions as I tried to use grids to make the app mobile friendly -, and these separate files handle all the calculations and mapping of the API data, leaving the styling to be handled on the parent component.
As a consequence, all I had to do was add the word ‘Snack’ to my classes and adjust the CSS file accordingly, and then use conditional rendering on the main App.js to allow the switch between Weather Tea or Weather Snack. Or "actually, both".
PS: If you did not understand this ending, stop everything and go play with the Weather Tea React.