where-is-waldo

Description

Image tagging app using the visual puzzle format of "Where is Waldo?".

Where's Waldo? is a series of book that popularized the intricated super detailed illustration style. This application shows one of these images and allows users to interact with it in order to seek and find some recognizible characters, as well as compete with other people's score.

The illustration is authored by the amazing artist Laurie Greasly.

See it live on amielfilarca.github.io/where-is-waldo

Screenshots

Start

Preview

Game

High Scores

Objectives & Outcomes

• Interact with a NoSQL flexible database.

• Design an application with a clean user interface.

• Understand and integrate a Backend-as-a-Service (BaaS) provider in Firebase into the app.

• Familiarize with Firebase's services, in particular Cloud Firestore.

• Further improve React proficiency in functional components using Hooks.

Development

Javascript Framework

• React

UI Framework

• Material-UI

Libraries, extensions and tools

• Firebase's Firestore - Scalable, flexible NoSQL database for web, mobile and server development.
• ESLint - A linter tool to standardize code
• Prettier - Code formatter
• Github Pages - Hosting

More information

• Made as a solution for the Image Tagging Project in The Odin Project

• ESLint and Prettier configuration on VSCode, by Manorisms

• GH-Pages Deployment

• You can buy the art as a poster from Hcgart.

Future works

As on any project, there are always more things that I would like to implement that didn't make it to the final version you see live. This section lists a few of them for future me to pickup and add them.

• Add images