Check out the current weather conditions and see what rating the application gives to your preferred sport.
- Weather Wise
The weather wise application was designed to give the user the information in a fast and affective way about how the weather would impact their day participating in their selected sport. It achieves this with taking into account the weather factors that will affect the specified sport, which has been selected by the user. Then it will run an algorithm that will check the parameters of the weather and produce an easy to understand rating system. This project is a student project, for the Wild Code School, which is a 5 month bootcamp in web development, it is carried out while learning React.
The project was built using the following packages:
- mui/icons-material
- emotion/react
- emotion/styled
- react
- React-router-dom
The other internal methods used while creating this project were:
- react context
The languages and frameworks used in the project were as follows:
- React
- JavaScript
- CSS
The project can be launched by cloning it from the GitHub repository: Weather Wise
The git clone command:
$ git clone <repository url>
Then the command npm install can be used to install all the dependencies:
npm install
Then the user must set up a .env file which contains the API key.
It is also advised to add necessary details to the .gitignore file.
Now use the command npm start to run the server and launch the project.
npm start
The project is deployed using Netlify and is fully operational.
The project is broken out into componenets, the main components in the project are under the source folder, a breakdown of the folders and files can be seen in the following section.
The assets folder contains all the images which relate to the project, they include the icons to the sports selection page and also the the images for the weather icons.
This folder contains all the projects components, which are shown below.
This folder contains the current weather component and the CSS for that component.
This folder contains the files for the rating circle which is called ProgressBar and the CSS for that component.
This file contains the content of the currentRating component to render the current rating page, it takes some variables from the MyProvider using context.
Contains the some of main logic for the project, including the API calls the logic to determine the rating for each sport and the sports data for each sport used when rending each selected sport.
This file contains the main css for the project, some components were extracted and given their own css file due to the growing size of the APP.css file, in the future the aim would be to reduce this file.
This file contains the main components that will be render in the project which are placed within react router for navigation throughout the project.
There is also two hidden files in the project, the .gitignore and the .env, the .env has been explained already. But the .gitignore contains all the files that will be blocked from being uploaded to GitHub.
The rating logic was designed by using weighted percentages out of 10. The follow documentation can be found within the Drive Folder of the project : Rating Logic
The above file will show the excel used to work out the calculations of the project.
The written documentation which describes the logic for each sport can be found here: Rating Description
The documentation shows what weather factors were taken into account for the each sport that was consider, please take into account, that one of the main benefits of this project is about reusablity and scalability, so as we continue to work on the project the sports will be adding and updated.
The next piece of documentation is the sports research which can be found here Sports Research
The project links file contains links to all the external information gathered for the creation of the project. This is not an extensive list. It can be found here Project Link
The API's that were used in this project are as follows:
- The location API, this gets the geolocation of the city that the user has input.
- The weather API, this API gets the weather using the geolocation from the previous API.
- The air pollution API which gives the air pollution quality according to the geolocation.
The API's can be found at the following site Open Weather Map
This project is ongoing and currently in development, we hope to add more sports and improve the recommendations for those sports.
Please feel free to contact me if you have any questions or recommendations
