This is the first NextJS project I created. I borrowed a simple JS/React Tic Tac Toe app, converted it to Typescript, upgraded it to use NextJS, then mostly rewrote it with an updated model, Board, Cell, and Game components in order to make a Sudoku game--while still preserving the ability to go back to a previous state (which seems kinda handy for a Sudoku game that doesn't prevent one from making an incorrect move).
As an experiment one can switch to a 4x4 grid which is pretty trivial to solve, but I thought it would be interesting and possibly make it easy to test.
I used Cursor to help update dependencies, do some project cleanup, and make the README a little spiffier. But the code was 100% human. Before Cursor it would take a lot of googling to solve minor issues with various module and project configuration problems. In the span of an hour it took my 15 month old project and brought it up to date! 🚀
- 🎮 Two grid sizes: 4x4 and 9x9
- 🎨 Modern, responsive design with Tailwind CSS
- ⚡ Built with Next.js for optimal performance
- 📱 Mobile-friendly interface
- 🎯 Real-time validation
- 🎨 Clean, minimalist UI
- Node.js 18.0.0 or later
- pnpm 8.0.0 or later
-
Clone the repository:
git clone https://github.com/nickhart/sudoku.git cd sudoku -
Install dependencies:
pnpm install
-
Start the development server:
pnpm dev
-
Open http://localhost:3000 in your browser.
pnpm dev- Start the development serverpnpm build- Build the production applicationpnpm start- Start the production serverpnpm lint- Run ESLintpnpm test- Run tests
sudoku/
├── src/
│ ├── components/ # React components
│ ├── model/ # Game logic and state management
│ ├── pages/ # Next.js pages
│ ├── styles/ # Global styles
│ └── utils/ # Utility functions
├── public/ # Static assets
└── tests/ # Test files
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by the classic Sudoku game
- Built with Next.js
- Styled with Tailwind CSS
Started with an example React tic-tac-toe app, converted it to typescript, turned it into a sudoku game, and then:
- ability to switch between a 4x4 and 9x9 grid
- added tailwindcss and cleaned up css
- templates (enabled partially-filled games)
- hover states--disable if not clickable
- more color palattes?
- show conflicts/errors/contraints?
- annotations
- hints
- auto-play (via correct annotations)