this is the fourth react project from the odin project's full stack javascript curriculum.
click here for a live version!
- use react with a firebase backend to build a photo-tagging game reminiscent of a "where's waldo" puzzle.
- leverage firebase's firestore NoSQL cloud storage to validate targets and to maintain a leaderboard.
- uses this collage of the national parks and asks users to find and click on six park emblems within it.
- the backend stores the targets' location data relative to the national park collage thereby allowing the game to be both responsive to any changes made to the screen size during gameplay and easily scalable.
- validates target locations dynamically by coupling the backend's relative location data of the targets with the frontend's absolute positioning data of the national park collage.
- a leaderboard is stored on the backend and is fetched during gameplay. the leaderboard is rendered conditionally based on whether or not the user scored in the top 5. irrespective, the user's score and rank are displayed on the leaderboard.
- user may choose to add their name to the leaderboard which will set their data to firestore, the backend.
- leaderboard and user rankings are processed through a function that uses indices to return an ordinal string, thus allowing for ordinal rankings like 1st, 2nd, 3rd ... and so on.
- imports the date-fns library to calculate the user's game duration. uses the differenceInMilliseconds function to calculate the difference between two Date objects, timeOfStart and timeOfEnd.
- the pointer and the target list dynamically respond to a user's click to ensure neither are rendered outside of the national park collage.
- feedback is given to the user when targets are correctly or incorrectly located. further, targets are both blurred from the key and removed from the target list when found.
- improve responsiveness across browsers and devices.