https://github.com/fa-sharp/lightning-weather

A full-featured, fast weather app created with React and Next.js
https://github.com/fa-sharp/lightning-weather

nextjs react

Last synced: 5 days ago
JSON representation

A full-featured, fast weather app created with React and Next.js

• Host: GitHub
• URL: https://github.com/fa-sharp/lightning-weather
• Owner: fa-sharp
• Created: 2021-07-23T04:16:20.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-09T05:47:05.000Z (8 months ago)
• Last Synced: 2024-05-09T06:40:02.710Z (8 months ago)
• Topics: nextjs, react
• Language: TypeScript
• Homepage: http://lightning-weather.vercel.app
• Size: 27.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Lightning ⚡️ Weather

A simple, fast weather app created with React and [Next.js](https://nextjs.org/).

[Live Demo here!](https://lightning-weather.vercel.app/)





    

    



## Features

- Displays the current weather and forecast data from OpenWeatherMap

    - Current condition

    - Daily forecast for 7 days

    - Hourly forecast for 2 days, with hourly chart (using [Chart.js](http://www.chartjs.org) library)

- Search for any city/town in the world (if OpenWeatherMap has it in their database)

- User can customize the home screen to show up to four cities

- The app uses Next.js's

[API routes](https://nextjs.org/docs/api-routes/introduction) to get weather data and forecast data from OpenWeatherMap on the server side.

- Data is fetched, cached, and refreshed on the client side using the [SWR](https://swr.vercel.app/) library.

- User settings (units, colors) and saved cities are stored in browser's Local Storage, and retrieved/saved using React Context.

### Accessibility

- Fully keyboard navigable!

- User can turn off colors for higher contrast

- Hourly graph's `` element has fallback text for screen readers

### Internationalization

- Switch between metric and imperial units

- Time/day and number displays will change according to locale of user, with the help of the browser's [Intl class](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)

## Building locally

To build/run the app locally, you will need ```npm```, as well as an API key from [OpenWeatherMap](https://openweathermap.org/api). Store the key in a `.env.local` file in the root folder, containing the following:

```

OPENWEATHER_API_KEY=your_key_here

```

This will set up the API key as an Environment Variable for Next.js.

Then, you can run the development server:

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can also build the app with:

```bash

npm run build

```