FallWord

Inspiration

I have always seen those game ads on Reddit and wondered how they were made. Now I finally know by creating a web app/game by myself for the hackathon. Plus, I always wanted to create something which is updated/played in realtime.

What it does

FallWord is a quiz-based singleplayer/multiplayer game. You will be able to play by yourself in the singleplayer mode and reach higher rankings in the leaderboard or play against other online users in the multiplayer mode.

How we built it

It is built using webviews inside blocks. The webview is essentially a react app, bundled together by vite and served to blocks.

Challenges we ran into

The main challenge was to sync the state between the user and the opponent in a multiplayer game. Through realtime channels and with the use of an external rest API, I was able to handle this quite well.

Accomplishments that we're proud of

How the overall app look like. Although not perfect, the overall app turned out quite nice, especially the multiplayer part. It looked impossible to implement when I first started but now I see it as just another tricky React app to navigate.

What we learned

How to manage multiple concurrent states, use of state managers like zustand, how the whole webview-block-realtime architecture/communication works.

What's next for FallWord

There's loads of stuff. First and foremost is to fix the rest API server which handles the matchmaking part. Currently, it's a hit or a miss, you sometimes get an opponent, sometimes not. So this will be my top priority. Next in the pipeline would be to add features like game room, public and private matches, spectator views etc.

Built With

• devvit
• react
• shadcn
• tailwind
• typescript
• zustand