A revamped version of this project is available in my new application.

Weather App

css

react

api

Develop an application that provides users with weather information.

Designed by

Milena Ulman

Difficulty

Adobe XD design is free. You can use this design for your portfolio/website without any limitations. Additionally, you can share the completed project wherever you want.

Note: All new designs will be coming through BigDevSoon with Figma. This one is considered a legacy design but will always be here.

Read me first

The goal of this project is to build a Weather App similar to the design above.

Technologies & tools will be proposed down below but feel free to use different ones if you're more familiar with them. Have fun along the way.

Project requirements

If not using CodeSandbox, boilerplate the application with CRA.
Get your free API key from OpenWeather API, (or any similar weather API you can find). Study the documentation before starting implementation.
The website looks similar to the design (Desktop and Mobile) and is available for users through a link.
On the initial page load, weather for either hardcoded city (e.g. London) is shown or geolocation logic checks which city should be presented.
Users can check the weather of cities using the search bar, request to the API should trigger after entering a minimum of 2 characters and be debounced to prevent too many requests at once. (no enter click, listen to keypress and fetch data after e.g. 300 milliseconds delay, try to avoid fetch on the first character typed in)
When users use the search bar, current weather should be replaced by the search result, if the city couldn't be found, an appropriate message to the user shall be displayed.
Users can change between Celsius and Fahrenheit temperatures to get more adequate results.
Handle loading and errors in the code appropriately. (handle error first, then loading, then data)

Additional requirements

To avoid working on a real API and burning its daily limits, implement a mock server first (try to recreate original schema/data format), code the app, and when it'll be ready switch to the real Weather API (e.g. OpenWeather) for final testing if all works nicely together.
Implement more fields from the API, explore, discover what's available and make it as robust as it's possible. Use all the data! 🔥
Add API tests to your code, using e.g. jest.
Add e2e tests to your code, using e.g. cypress.

How to start

In most cases, CodeSandbox will be the best place for starting out rapidly.

You could also use an IDE, VSCode for example, and create e.g. a GitHub repository with custom deployment. More about it in the "Build & Deploy" section.

First steps

Be Agile! Plan your work upfront either with Scrum or Kanban by creating e.g. Trello board for this project.
Open the design by clicking the button under the above image.
Get familiar with design, it contains all the assets (except icons sometimes - use e.g. fontawesome), CSS properties you'll need to use.
After deciding on either CodeSandbox or GitHub repo, set your project with initial files, directory structure (your own preference).
Nothing will stop you now. Don't forget to share a link once you completed the project!

Technologies & Tools

CSS
JavaScript
React
Ant Design (Recommended components for this project)
Ant Design Icons (Recommended icons for this project, need above dependency)
fetch, axios, or react-query for data fetching

Core concepts

Fetching data in React from API.
Fetching data in React as user types or clicks.
Get city name using geolocation.
Grid, Form, Card, and more Ant Design components.
Getting Started with React.
Thinking in React.
Lists and Keys in React.
Lifting State Up in React.
Controlled Components in React.
Hooks in React.
API testing in JavaScript.

Stuck, can't progress?

Take a break, think about all the pieces you need to build for this project.

You can try out the BigDevSoon platform to maximize your learning effectiveness.

Build & Deploy

If you decided on CodeSandbox, there should be a "Share" button that you can use as a link for your completed project.

Otherwise, for simple, static projects (HTML, CSS, JavaScript) you can try GitHub Pages. For more complex deployments (React, etc.), Netlify or Vercel should be good. If the project has a little bit of Backend, try Heroku for it.

Share your solution

It would be amazing if you can tweet @BigsonDev with the link to the completed project and/or GitHub repo. All the mentees would love to see what you've built (and me too).

spread the word

Do you think this project is cool? Share it with someone! 👀