Day 0: Choosing the Tech Stack

Here’s what I decided on:

Next.js: Used for its rapid development capabilities and server-side rendering features, making it an ideal framework for building dynamic web applications.

Setup Reference: To get started with Next.js, use the create-next-app command:

npx create-next-app@latest my-project --typescript

TypeScript: Implemented to ensure type safety and maintainable code.

Setup Reference: TypeScript comes pre-configured with Next.js when using create-next-app. For additional setup instructions, refer to the official Next.js TypeScript documentation.

TailwindCSS: Utilized for its utility-first approach to styling, allowing efficient design implementation without the need for custom CSS from scratch. Tailwind makes styling quicker and more consistent with minimal effort.

Setup Reference: To install TailwindCSS in a Next.js project, follow these steps:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Configure the tailwind.config.js file and update your global CSS by importing Tailwind’s base styles as described in the TailwindCSS documentation.

Liveblocks: Integrated to enable real-time collaboration, synchronizing the game state across multiple users seamlessly. Liveblocks facilitates real-time updates, ensuring a smooth collaborative experience.

Setup Reference: To integrate Liveblocks, first install the SDK:

npm install @liveblocks/client

Then, follow the Liveblocks documentation for detailed setup and usage instructions.

React: Employed for building the interactive user interface, leveraging its simplicity in managing dynamic state and creating responsive components. React’s component-based architecture is ideal for handling complex user interactions.

Setup Reference: React is already included when using Next.js, as it is a core dependency. For additional information on React, refer to the official React documentation.

Week 1: Project Setup and Basic Structure

The first day was all about setting up the project and laying the groundwork. I created a new Next.js app with TypeScript and configured TailwindCSS. I also designed a simple layout with placeholders for future features like Create Room and Friends. The main task of the day was setting up a static 9x9 Sudoku grid using input elements. This gave me a basic structure to work with, even though the grid isn’t interactive yet. The focus was on setting up a clean foundation for future functionality.

Week 2: Adding Interactivity

Day 2 was spent turning the static grid into something interactive. I used React’s useState hook to manage the grid’s state, allowing users to type numbers into the cells. I also added basic input validation to ensure only numbers 1-9 could be entered. I styled the grid to visually distinguish between editable and non-editable cells. By the end of the day, the grid was interactive, and users could input numbers, which updated the state in real-time.

Week 3: Integrating Liveblocks for Real-Time Sync

On Day 3, I integrated Liveblocks to handle real-time syncing of the Sudoku grid. With Liveblocks set up, changes made by one user are reflected in real-time for all other users. I tested the feature by opening the app in multiple windows, and it worked smoothly. I also added a visual cue to highlight cells that are being edited by another user. By the end of the day, the app had basic real-time collaboration, and I was excited to see it start to take shape.