Wordsearch Puzzle Game

Background

WordSeeky.com was created casually over a couple weekends. It was one of my first side projects made with Next.js that had more features than a simple CRUD app.

At the time I had been rather frustrated with my day-job. Many aspects of my assignment left me unable to code as much as I would have liked.

So instead of slowly letting my skills die on the vine, I decided to invest some effort into something fun and challenging.

This project was a great way to relax after work. Figuring out how to generate the game board was enjoyable, and making adding customization was a good challenge.

After getting the basic features set up I decided to put it to the side for a while. It's hard to justify spending a lot of time on such a simple game when I have so many other ideas.

Either way it helped kick off a new habit of coding in my free time that I've continued to this day.

Project Features

It's built with Next.js, React, TypeScript, TailwindCSS, MUI, and the Supabase API for database.

The project features a simple, clean landing page with navigation bar offering links to signup and login.

The signup page offers a simple form with fields for email, username, and password. The form is validated using Zod on the client for immediate feedback, then sent to a nextjs server action to be validated again and inserted into the database.

The authentication system uses next-auth v5 for session management.

The dashboard provides a button to start a new game, and a list of the user's previous games if they have any.

The new game button opens a modal with settings to customize the game. They may select the size of the grid, the number of words to find, add or remove words, and selectively disable words. There's a checkbox to toggle whether or not to generate the game with words showing 'backwards' (e.g. right-to-left, bottom-to-top, etc.). The Grid Size and Number of Words controls intelligently adjust to ensure the grid can fit the number of words.

The game page displays the grid of letters, and the words to find configured for the game. The user can select words by clicking on the first letter of the word and dragging to highlight the rest of the word. The word being selected is shown with white text on black background. Words previously found are shown in black text with a grey background.

The user can toggle 'god mode' with a button click to reveal all words in the grid, highlighted with a green background.

Upon finding all the words, a dialog opens allow the user to Play Again or Return to the Dashboard.

The user can save the current game state to the database by clicking the 'Save Game' button. The game state is saved as a JSON object in the database.

Incomplete saved games may be resumed by clicking on the game's listing on the dashboard.

Project Status

The project's still in it's early stages and not hosted publicly yet.

It provided a great introduction to using a service like Supabase, but I'm planning to migrate away from it shortly before going live. There's no sense in paying for a Supabase subscription on a project that won't get very much traffic.

Once the database is migrated, I've built up a list of ideas and features I'll be working on to make the project more interesting and engaging.

Until then, I'll be using it as an example when helping mentees and students when the opportunity arises.