Tech used:
This fully responsive web application is built using react and the OpenWeatherMap API. By default, users will see current conditions for New York, US, as well as a 7-day forecast. In addition, users can toggle the "Expand For More" button to view additional data related to wind speed, humidity, air pressure, sunrise time, and sunset time.
Users can also search for weather by zipcode by entering it into the search bar on the top right and clicking on the search icon.
The project was heavily inspired by the iOS weather app. I just really like the design of it!
Displayed Data:
-
Show the "current" conditions for New York:
- Location (ie. New York, NY, USA)
- Current weather description (ie. sunny)
- Current temperature
- Today's high temperature
- Today's low temperature
-
Allow the user to toggle more data in the current conditions area:
- Wind Speed
- Humidity
- Pressure
- Sunrise/Sunset Time
-
Show the 7 Day forecast (assumption: data includes 8 Days--which includes current--so I displayed all 8 days)
This app can be accessed live via skyward-assignment.netlify.app or as a local copy. To get a local copy up and running follow these simple example steps.
- Clone the repo
git clone https://github.com/github_username/repo_name.git
- navigate into the folder
cd weather-react-app - Install NPM packages
npm install
-
Login and create an API key for OpenWeatherMap
-
create .env file and save api key as:
VITE_API_KEY = '1234abcdefg12345' -
Run server
npm run dev
-
Navigate to server
`localhost:5173`
In order to complete the assignment in roughly a few hours, there were certain design considerations that I omitted for the sake of time.
-
There is an where the state does not get updated on the search button first click, which requires users to double click (or double press the enter key). I plan on revisiting this issue when I get the time!
-
I typically include linting (ESlint - AirBnB styling), testing (Jest), in order to keep my project scaleable. I have begun exploring TypeScript for its static typing. Given more time, I would implement these tools in the begining.
-
For small-medium size projects, I typically breakdown my
srcfolder structure intoassets(images, etc.),components(buttons, nav, etc.),pages(landing, about, etc.),hooks(useEffects, useRefs, custom hooks etc.) in order to better abstract my codebase into modular pieces. But for the sake of time, I kept all my hooks and functions within the mainapp.jsxfile and passed down relevant hooks and state down. -
When using
fetchor any type of API calls, I typically try to stay away from fetching data within auseEffectand jump over to React Query. This state management library is extremely helpful behind the scenes and is useful when scaling apps. But to keep things simple, theuseEffecthook gets the job done! -
With
useEffect, I typically try to abstract these hooks to be more specific by creating them instead as custom hooks and import them into components/pages only when required. This helps to reduce overall code cleanliness and impact of change. -
To further optimize the search feature, currently only number inputs are vaild but I would like to add more input validation (min length/max length, etc.).
-
I would love to be able to add more custom animations and features. One idea would be to display a new background color/image based on the current weather conditions(ie. sunny - bright orange). I also was considering deconstructing the Skyward website traveling cloud animation from the hero section but left it out due to time.
I start all my projects by first laying out all the project requirements (data, APIs, etc.) for a minimum viable project (MVP), the app logic and how state changes with user interaction, and a basic wireframe. All of which helps me to break larger components of my UI into smaller, reuseable components, in the effort to keep my code DRY (Don't Repeat Yourself!).
Daniel Kim - dan.jkim21@gmail.com
Live Link: https://skyward-assignment.netlify.app/