The demo is available here: https://weather-app-bk.herokuapp.com/
- Loading 5 days forecast for cities
- Showing the average temperature
- Showing the predicted conditions
- Finding nearest city based on geo location
- Fully responsive
To run this application you need to have newset yarn installed. You can download it from here: https://yarnpkg.com/en/docs/install
It's a package manager like npm, but created by facebook.
If you have no other choice, you can use regular npm instead of yarn, but you must be aware that dependencies are not locked for it. Then instead of using yarn start you need to go with npm run start. The same situation is for every other command.
To properly run project you need to create .env in the root directory.
- Set the variable
REACT_APP_WEATHER_API_KEYto the valid API key for http://openweathermap.org API. - Set the variable
REACT_APP_OPEN_CAGE_API_KEYto the valid API key for https://opencagedata.com/ API.
For example, the .env file would look like that:
REACT_APP_WEATHER_API_KEY=420de34685a167618ef1c487988cf9ce
Then use command yarn to install dependencies.
Be aware that yarn will show you missing peer dependencies. It's okey, those dependencies are for some Bootstrap 4 components which are not used.
When you install dependencies there are some warning, that peer dependencies are missing I some packages would not work correctly. I'm aware of this warning, but those dependencies aren't needed because I use components that don't use those packages.
When you start the project there will be 3 warnings. 2 of them are related to CORS. 3rd is React warning which suggests placing dependency for hooks (useEffect), which is not correct in this case, because useEffect shouldn't be dependend on callback function.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
I didn't think and design much upfront. I decided to deliver one small feature at one commit and then move forward constantly. This process should be visible when you look at git history.
I also wrote unit tests for parts that seemed crucial for me. I prefer not to sacrifice quality in the tight time constrains, rather find the tools that will fasten my development process.
To fasten development, I decided to go with Bootstrap 4, it gives me RWD behaviours almost out of the box and the styling is pretty nice for a starter.
Whole application is written with use of functional components and hooks. It's the most up to date aproach.
I decided to show only average of the daily temperature. At the beginning I wanted to implement daily temperature indicator and nightly temperature indicator, but because I had to use 3 hour based API I didn't know how to calculate those values. It depends on the sunset and sunrise and those information aren't exposed.
Also picking the icon and description is simplified. Probably it needs improvement, because the application simply takes first result for the day.
- Proper daily temperature and nightly temperature
- Showing air pressure
- Improving calculation of the weather's description
- Showing possibility of rain
- Showing information about wind
- Maybe some charts would look nice?
- Should work on "jumping" when user hits Search button. When app is loading the button should still be in the same place. Just the UX thing.
- Writing some e2e tests with Cypress and Cucumber to test high level features and to generate living documentation
- Creating StoryBook for keeping designers and programmers on the same side
- Creating proper CI/CD
- Optimization