A Typescript react application that will take in a city name and retun the current weather, hourly and daily weather of location. Users have the option have their data be presented in °F or °C. when a user searches for a city that city would be saved at the top of their screen. If the user would like to go to a saved city they can click on the city name and be taken to the page for that location. If they would like to delete a saved city, they can click on the X to the right of the city name. The app will remember the last city the User searched for, if the prefer °F or °C, and the saved cities they have.
Some of the challenges I faced were to properly display the correct current time for every location, and to get my travis builds to pass, along with understanding typescript. Learning a new language has it's own challenges with it. I ran into trouble finding the right type for objects and dom elements. If I could go back I would make sure I read through the Typescript docs more to get a better understanding of how to properly type check everything. when my travis builds were not passing I was confused because it would pass localy. I ran into so many deadends. Turns out Travis didn't have access to enviroment files. I realized when I ran a test the endpoints were not being stubbed. If I took the time to throughly look at the test I would notice it sooner instead of going down rabbit holes looking for answers for problems I didn't have. I realized that I need to learn to take things a little slower and throughly read up on docs of the techs im using to feel confident, and when I encounter a problem to pin point it to find the proper solution in a timly maner,
When designing the layout for the app, I envisioned a single page flat design. so that readers do not have to scroll down to find out more As soon as the page loads, users will see all of the information they require. I was inspired by the weather channel app and the Apple weather app. I chose to include a switch to toggle between °F and °C so that people may select their preference and alter it with the touch of a single button.
When thinking of the look of the app. I wanted users to be able to tell what the weather was just by a looking at the app. I decided to have a dynamic so that whatever the current weather condition of the city is, the background will reflect that status. I chose to use a flat design so that the background would not be obscured by boxes and gives the app a more open feel to it.
- Typescript
- React
- Hooks
- Router
- Material UI
- Moment.js
- Locoal Storage
- Cypress
- Travis-CI
- Heroku
- SCSS
- Webpack
- Github
- Open Weather Api
| Dustin Harbaugh GH |
|
- add cacheing to recent searched cities
- add auto complete in search field