Challenges

🔌 API

GitHub Profile

Build a React application that looks up any developer on GitHub. The user types a username, hits submit, and gets everything they need: the developer's avatar, name, bio, how many public repos they have, and their follower count.

• Text input and search button on the same line
• Display the profile inside a Card with the avatar as the image cap on top
• Show name and bio in the Card body
• Show public repos, followers, and following as a ListGroup below the body
• API: https://api.github.com/users/{username} (replace {username} with the actual username from the input)
• Hint: Bootstrap Card + ListGroup

Country Finder

Build a React application that searches any country in the world. The user types a country name, hits submit, and instantly sees the capital city, population, and region displayed in a clean table.

• Text input and search button on the same line
• Display results in a Table with Capital, Population, and Region as column headers
• API: https://countries-api.davegarvey.workers.dev/search?q={country} (replace {country} with the actual country name from the input)
• Tip: the response is wrapped, look inside results[0] to get the country data
• Hint: Bootstrap Table

The Weather

Build a React application that checks the weather in any city. The user types a city name, hits search, and instantly sees the city name, current temperature, weather description, and what it feels like.

• Text input and search button on the same line
• Display the city name in a Card header
• Show temperature large and bold in the Card body with the weather description and feels like below it
• API: https://wttr.in/{city}?format=j1 (replace {city} with the actual city name from the input)
• Tip: the weather data is nested, look inside current_condition[0] to get the values
• Hint: Bootstrap Card with card-header and card-body