A weather app using Next.js, Mantine, Edge API Routes, and the OpenWeatherMap and Google Maps API's.
⛈ View your local weather forecast: https://localwx.vercel.app/
First, you'll need an OpenWeatherMap API Key. If you don't have an account, you can create one for free.
Next, you'll need to generate a Google Maps API Key.
After you've generated a key, visit the Credentials page and follow the instructions below:
- Set application restrictions to "None"
- Select "Restrict key"
- Choose "Geocoding" and "Places" from the dropdown
- Save
Use create-next-app to get up and running quickly:
npx create-next-app local-weather --example https://github.com/gregrickaby/local-weatherRename .env.sample to .env in the root of the project. Add the API keys you generated earlier to the following ENV Vars:
// .env
GOOGLE_MAPS_API_KEY="YOUR-KEY"
OPENWEATHER_API_KEY="YOUR-KEY"
├── components
| ├── Alerts.tsx
| ├── Footer.tsx
| ├── Forecast.tsx
| ├── etc...
├── lib
| ├── helpers.ts
| ├── hooks.ts
| ├── types.d.ts
| ├── etc...
├── pages
| ├── api
| | ├── places.ts
| | └── weather.ts
| ├── _app.tsx
| ├── _document.tsx
| └── index.tsx
├── public
| ├── icons/
| ├── favicon.ico
├── .env.sample
├── .gitignore
├── package.json
├── next.config.js
├── etc...
Components - This folder contains React components.
Lib - This folder contains internal hooks and function files.
Pages - This folder contains standard Next.js pages and /api middleware routes.
Public - This folder contains all of the static assets.
Start local dev server:
npm run devLint code:
npm run lintTest a build prior to deployment:
npm run build && npm start- React components by Mantine
- Weather icons by @basmilius
- Weather data from OpenWeatherMap API
- Geocoding data from Google Maps
Please see CONTRIBUTING for more information.