A basic weather app built with React and using OpenWeather's free weather API.
The project currently remains unfinished for now as I want to add a few more features to enhance usability.
TODOs:
- !! Update node packages (seems like there may be vulns)
- Improve UI by showing an error of city not found, and also some city selector
- Separate cards more by day to show discontinuity
- Map
- Current weather card + temperature over time visualization
- Detect system theme of user and/or remember theme last used
I started this project with a vision in Figma (first photo) and the other photo is the current state.
You will need node to build the project. You will also need a free API key from OpenWeather.
- Clone the repository.
- Install node packages:
npm install - Replace
REPLACEMEin the.envfile with your key, or make a.env.localand add your key there (this keeps it out of the git history if you make commits). - Run the app in developer mode (enables website to re-load):
npm run dev - A link like http://localhost:5173/ should appear in the terminal to view the site.
I first did this project as a school assignment for advanced web development, though I plan on coming back to it to add more features.
It was my first real brush with using APIs so learning how to call the API and work with the returned data was a good learning experience.
I also learned to style components within the same file (no .css file).
It was awesome being able to fully modularize each component and then use emotion's theme feature to create a consistent color theme.
Something I found challenging was implementing a dark mode, the code felt messy once I finished though it works. In the future, I would like to add some logic to detect what theme the user's system is and make that the default. I liked that I first drafted my design on paper then Figma as it made implementing the website a lot easier knowing where exactly I was headed.
For iterating on this project, I would like to focus on improving its usability (e.g., organize temperatures between days, adding a temperature visualization).