mlh-fellowship / prep-project-22.jul.prep.1

MLH Prep Project for Pod 22.JUL.PREP.1

MLH Prep Project

Over the next 2 weeks, you'll be building a React App that works with various APIs (Application Programming Interfaces) that talk to different data sources to do cool stuff.

We're using the OpenWeather API to get weather data on different cities. Your challenge over the next 2 weeks is to build out this website and add even more functionality to it. At the moment, it displays basic information about a location when you type it in. Check out Issues for some more ideas!

You'll need to get your own API Key from their website (for free) and add it as an environment variable in a .env file. We have a template available as example.env.

You'll be using React initially to build this. If you're new to React, check out the website for some information on getting started!

prep-project-22.jul.prep.1's Issues

Hourly Forecasts

Allow the user to put a time + date in to get an idea of what the weather will be like then. At the moment, it only displays the weather right now.

Map for selecting location

Instead of just typing the location in, display a map to the user (using OpenStreetMap for example), and take the coordinates of their pin and use that to display weather information.

Make it a 2 way thing, and if a user types a location in, it displays a pin on the map as well!

If you have an API key, let @wrussell1999 know so it can be added to the Netlify website hosting it!

Improve mobile usability

The card that displays the weather information isn't responsive. It's far too narrow on mobile, and too wide on desktop. Can you look into making it be an appropriate size on all screen sizes.

Using Geolocation API to get the users location

Using the Geolocation API to get the users location as the first weather results displayed, instead of just New York City.

Read more here.

Helping the user bring the right things based on the weather

• If it's raining, bring an umbrella
• If it's sunny, bring suncream
• If it's cold, bring a coat

Change the colour scheme based on temperature / weather type

Change the websites appearance to match the weather conditions. The Apple Weather app has some cool examples in iOS 15, check them out here.

Autocomplete for cities

At the moment, when you type in a city, it won't help you finish your entry with suggestions. A cool feature would be if it had a drop down menu that suggested locations similar to the name. For example, if I type in Cambridge, it could tell me Cambridge, MA, USA or Cambridge, UK to help users get the right answers!