WEATHER APP ⛅

A weather forecast app using the OpenWeather API.
Developed for The Odin Project's curriculum.

✨ Demo

📜 Docs

Prerequisites

• node >= 16.9

Install

npm install

Build

Builds the app for production to the dist folder.

npm run build

Develop

Runs the app in development mode. Open http://localhost:5173/ to view it in the browser.

npm run dev

Preview

Locally preview the production build. Open http://localhost:3000/ to view it in the browser.

npm run preview

Lint

Run eslint to report linting errors.

npm run lint

🚀 Deployment

Deployed to Cloudflare Pages.

1. Connect to Git in Cloudflare Dashboard > Workers & Pages > Pages.
2. Pick your Git hosting service. ex. GitHub / Gitlab.
3. Select your repository.
4. Pick your Project name.
5. Select the corresponding Framework preset in the build setting.
6. Add Build command ex. npm run build.
7. Add Build output directory ex. dist.
8. Add Environment variables from .env.example.
9. Deploy site.
10. Setup a Custom domain in Custom domains.

More on deployment to Cloudflare Pages...

Triggering a Deploy

Deploys are triggered on push or pull_request merge to master branch.

Lessons Learned

• Using asynchronous React with async/await.
• Using a Public API (OpenWeatherAPI).
• Handling loading and errors states.
• Using environment variables in React.
• Using CSS Modules with SASS.
• Deploying to Netlify.
• Migrating from CRA to Vite.
• Migrating from Netlify to Cloudflare Pages.
• Deploying to Cloudflare Pages.

Author

👤 Juan Carlos Lucio

• Github: @JCarlosLucio