findUs (WHERE IS WALDO) 👋

A Where is Waldo (Photo Tagging) type App made with React and Firebase. 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

• Connecting Firebase to a React client.
• Using Firebase as a backend.
• Using CSS Modules with SASS.
• Deploying to Netlify.
• Migrating from CRA to Vite.
• Migrating from Netlify to Cloudflare Pages.
• Deploying to Cloudflare Pages.
• Setting up a PWA with PWA Vite Plugin.

Author

👤 Juan Carlos Lucio

• Github: @JCarlosLucio