[App] Creating a game based on the famous series, "Where's Waldo?"
See it live on optimistictrousers.github.io/wheres-waldo Or clone repo, cd into repo, then run "npm run start"
Creating a 2 application with react-router-dom, using Testing Library and Jest to test, and learning how to use Firebase as a BaaS
Beyond that, other learning outcomes were:
- Design reusable components
- Creating and deleting data inside of a Firebase Firestore database
- Grabbing user coordinates using the cursor
- Using Styled Components to style UI
- Allows users to click on an image and select characters from a dropdown menu for their answer
- Mobile-friendly
- Leaderboard to allow users to see the top scores
- Night mode
- Responsive
- Sanitizing user input to prevent users from entering profanity into their names
- Hover over the area you want to select, then click to show a dropdown menu of all of the possible characters. Click on a different part of the image to select another area. For mobile users, simply tap the areas you want to select, then click on the target box to open the menu
- Try to find the characters as fast as possible to show up in the top leaderboards!
- Click the hamburger menu in the top-left to play the 6 different levels!
- After you finish, write your name and you will appear in the leaderboards!
- Firebase - Cloud services (database, authentication)
- ESLint - A linter tool to standardize code
- Github Pages - Hosting
- Prettier - Code formatter
- React Router - Router tool for React applications
- Jest - Assertion and test running library
- Testing Library - Testing library for queries
- Styled Components - CSS-in-JS library for styling
- React - Javascript library
- Making the mouse hover on the image to be more smooth. Currently, the target box will only move if you hover outside of the target box.
- Adding more comprehensive testing
- Adding more levels
- Give the user back their time in seconds with demicals instead of seconds
- Target box does not move when the cursor is inside the target box