Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/0xabdulkhaliq/pixelhunt

Inspired by "Where's Wally", Discover hidden charecters and claim your spot at the top!
https://github.com/0xabdulkhaliq/pixelhunt

express game mongoose react tailwindcss waldo

Last synced: 8 days ago
JSON representation

Inspired by "Where's Wally", Discover hidden charecters and claim your spot at the top!

Awesome Lists containing this project

README

        

![Pixel Hunt](https://i.ibb.co/St902T4/pixelhunt.webp)

### ❝ An engaging, full-stack hidden object game inspired by "Where's Wally", featuring a dynamic React + Tailwind frontend, and a robust Express + Mongoose backend. ❞




❯  
View Demo
 · 
Report Bug
 · 
Request Feature
  ❮



## Game Manual

1. **[Head to the live site](https://pixelhunt.vercel.app/)** on any device using your browser.

2. **Select a Game:**

- On the homepage, browse the available game options.
- Click on a game to select a gameboard (Waldo image).

3. **Start the Game:**

- After selecting a game, you will be taken to the `/gameboard` page.
- The gameboard page will show you the list of objects/characters you need to find.
- Once you are ready, click the **Start** button to begin the game.

4. **Play the Game:**

- The timer will start counting as soon as you hit the **Start** button.
- Tap on the characters/objects in the image to mark your selections.
- An anchor will appear at your selected spot. Choose the object you think you found.
- If your selection is correct, a green marker will be placed. If it's incorrect, a red marker will appear.

5. **Finish the Game:**

- Continue finding all the hidden characters/objects as listed.
- The game ends once you have found all the required characters/objects.
- A form will prompt you to enter your name and show your completion time.
- Enter your name and hit **Submit** to record your score.

6. **View the Leaderboard:**

- Navigate to the **Leaderboard** page to see how you rank among other players.
- Use the arrow keys on the top left and top right to switch between leaderboards for different games.
- Scores are ranked based on the fastest completion times.

7. **Enjoy playing PixelHunt** and good luck finding all the hidden characters!


## Tech Stack

![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)    ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)    ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)

![Express JS](https://img.shields.io/badge/Express-000000.svg?style=for-the-badge&logo=Express&logoColor=white)    ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white)    ![Mongoose](https://img.shields.io/badge/Mongoose-880000.svg?style=for-the-badge&logo=Mongoose&logoColor=white)


## Tools Used

![NPM](https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white)   ![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white)   ![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
  ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)

![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)   ![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)   ![Figma](https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=figma&logoColor=white)   


## Let's Connect 👋



Linkedin Profile
  

mail/
  

Github Profile