Where is Waldo is a fullstack Photo Tagging game where your goal is to find all the hidden characters as fast as possible. After finding all of them, you can submit your score on the leaderboard, sorted by fastest times.

This was one of the first FullStack projects I created, it's purpose was to tie everything I learned from The Odin Project's course together in a fun project.

• Server side character location checking.
• Server side stopwatch timer to prevent cheating.
• Top-10 leaderboard sorted by fastest times.

• Javascript
• React
• Vite
• Vercel

• Express
• Nodejs
• PostgreSQL
• Prisma ORM
• OnRender
• Neon

• Node.js
• npm
• PostgreSQL (ensure your database is running)
• Basic knowledge of using a terminal (steps are beginner-friendly)

git clone https://github.com/3antozz/Where-is-Waldo
cd Where-is-Waldo

cd api
npm install

1- Create a .env file in the api/ directory (based on .env.example) and fill in the required environment variables such as:

• Database connection URL
• Session secret

2- Start the backend server:

npm start

1- Open a new terminal window or tab:

cd client
npm install
npm run dev

2- Rename the .env.example file to .env in the client/ directory

1- Once both servers are running:

2- Visit http://localhost:5173 in your browser

• React-router – Client side routing.
• Lucide React – Import Icons.

• express-session – Simple session middleware for Authenticating.
• prisma/client – ORM - Auto-generated and type-safe query builder for Node.js.
• passport-github2 – This module lets you authenticate using GitHub OAuth 2.0 in your Node.js applications.
• prisma-session-store – An express session store implementation for the Prisma ORM.
• express-validator – User input validation middleware.
• express-async-handler – Asynchronous exception-handling middleware.
• cors – Package for providing a Connect/Express middleware that can be used to enable CORS.