🎣 Hook-A-Fish!

🥇 1st place in the Three.js Journey Challenge 019

Try it live here 👉 hook-a-fish.vercel.app

Dive into Hook-A-Fish! Inspired by childhood memories, you will face a fun, fast-paced fishing challenge against the clock.

The goal is simple: catch as many fish as you can. Each fish you catch gives you extra time, and you can share your results with friends to challenge them.

Technologies Used

• React
• Typescript
• Tailwind
• @react-three/fiber
• @react-three/drei
• @react-three/rapier
• @react-three/csg
• @react-spring/web
• zustand
• use-sound
• add-to-homescreen

Setup

The repository contains two separate projects:

• client - React application in Typescript
• server - Colyseus application in Node

Currently, the server has not been developed yet and only the initial boilerplate is available.

# Create client and server .env files
cp client/.env.example client/.env && cp server/.env.example server/.env

# Install dependencies (only the first time)
npm install

# Run the local server at localhost:5173 and localhost:2567 for client and server respectively
npm run dev

# Build for production in the client/dist and server/dist directories
npm run build

Features

TBD

Mobile-Friendly

The game is optimized for mobile devices, providing a smooth and engaging experience on smartphones and tablets. It adapts to smaller screens, ensuring easy interaction and navigation on touch interfaces and can also be installed as PWA.

Coming soon

• Zen mode
• Power-ups
• Multiplayer

Credits

Check out the credits section in the project for a full list of resources used

Feedback

If you have any suggestions, feel free to reach out!

License

© 2025 Francesco Dammacco
This project is licensed under the GNU Affero General Public License v3.0.
See the LICENSE file for details.