Wish You Were Here

A React app for finding out the weather by clicking on a map!

The purpose of this example is to show how to hide an api key from the frontend JavaScript (hint: use a backend Function!)

Styling uses Tailwind.

If your browser allows it, the app will find your location when you load the page.

Dependencies

This project was bootstrapped with Vite.

You'll need an api key from OpenWeatherMap API to retrieve weather data.

You'll also need a Google Maps api key.

  printf 'WEATHERAPI=<your-api-key>\nVITE_GOOGLE_MAPS_API=<your-api-key>' > .env
  npm install

Open a terminal window and run the app using the Netlify cli:

npm run dev

By default, the app will run at http://localhost:8888/

npm test

npm install netlify-cli -g
netlify deploy

You will need to add these Build Environment Variables to Netlify:

Name		Name	Last commit message	Last commit date
Latest commit History 40 Commits
functions		functions
public		public
src		src
tests		tests
types		types
.gitignore		.gitignore
README.md		README.md
index.html		index.html
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
tailwind.config.cjs		tailwind.config.cjs
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts