Currently: swap letters, find words, with friends. (A work-in-progress)
Eventually: Boggle but competitive.
Try it out at https://word-scramble-react.vercel.app/
Swap letters, find words, get points. The longer the word, the more points you get.
On your turn,
- (1) drag to swap a pair of letters
- (2) drag to select a word.
// development setup
git clone https://github.com/mikey555/word-scramble-react.git
cd word-scramble-react
// install dependencies
npm install
npm i -g vercel
Duplicate .env.example and rename .env.
Sign up for a Vercel Hobby plan with a KV (Redis) storage. Add the four KV_ env vars to your .env.
Unfortunately there's no documented way to run KV locally with RedisJSON support.
// TODO
// run tests
// run in development
vercel dev
// deploy preview
vercel
// deploy prod
vercel deploy
Since websocket sessions are confined to a single tab, you can test multiplayer by opening a separate tab or window for each player.
- Selecting words: I implemented a custom hook
useSelectionDrag()using PointerEvents. - Swapping letters: I used React DnD, a popular drag-and-drop library, to implement letter swapping. I also built a custom hook
useTransformAnimation()that manages letter position and animation. Swapping works with both touch and mouse interaction. - Real-time multiplayer: players can interact with a shared board. Built using pub-sub messaging client Ably.
- Lobby: players can start a game or join an existing game with a 4-letter room code. Rooms and game state is stored in Redis.
- React
- Typescript
- Redis DB for storing game state, rooms
- Tanstack / React Query
- T3: Next.js, tRPC, Tailwind CSS
- Ably pub-sub messaging
- shadcn/ui
- react-spring (animation)
Although I've implemented the foundations, the game is a work-in-progress. I'm now working on game design - coming up with engaging multiplayer experience.