Weather app

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents
Overview
Features
How To Use
learned/improved
Acknowledgements
Contact

Overview

Desktop

base overview - Desktop

Mobile

base

When you access the app, it gets your location and retrieves and displays the weather forecast for that nearest location. (If you don't allow it to get your location, it will default to Tokyo.)

Click the button to the right of "Search for places" to request the above process again.
The menu that opens from "Search for places" allows you to search for a location and display the weather forecast for the selected location.

Built With

Base

Node.js：20.8.0
TypeScript：5.2.2
React：18.2.0
Next.js：13.5.6

Other major libraries

API

OpenWeather API

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

[x] User story: I can see city weather as default, preferably my current location
[x] User story: I can search for city
[x] User story: I can see weather of today and the next 5 days
[x] User story: I can see the date and location of the weather
[x] User story: I can see according to image for each type of weather
[x] User story: I can see the min and max degree each day
[x] User story: I can see wind status and wind direction
[x] User story: I can see humidity percentage
[x] User story: I can see a visibility indicator
[x] User story: I can see the air pressure number
[x] User story(optional): I can request my current location weather
[x] User story(optional): I can convert temperature in Celcius to Fahrenheit and vice versa

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/h-yoshikawa44/ch-weather-app.git
or
git clone git@github.com:h-yoshikawa44/ch-weather-app.git

# Setting Env(Set each value according to your environment.)
cp .env.example .env

# Install dependencies
npm install

# Run the app
npm run start

learned/improved

How to change the color of the background image.
Basic usage of the meter element.
How to style the meter element.
How to control anomalous menus by window size.
How to do a type guard for the Union type.

Acknowledgements

Contact

Website：h-yoshikawa44.com
GitHub：@h-yoshikawa44
Twitter：@yoshi44_lion

h-yoshikawa44 / ch-weather-app

readme