A responsive Sudoku Solver web application built using Next.js, TypeScript, React, and Tailwind CSS. The app allows users to input Sudoku puzzles, validate them, and solve them using a backtracking algorithm. The project is deployed on Vercel: Live Demo.
Visit the live app: SudoSolve
- Next.js for server-side rendering and routing
- React for interactive UI
- TypeScript for type-safe development
- Tailwind CSS for styling
- Vercel for deployment
- Input Sudoku Puzzle: Users can input custom Sudoku puzzles using the interactive grid.
- Clear Puzzle: Reset the entire grid with a single click.
- Check Validity: Validate the current state of the puzzle.
- Solve Puzzle: Solve the puzzle using a backtracking algorithm.
- Responsive Design: The app is fully responsive, providing a seamless experience across devices.
The validation function checks if the current puzzle configuration follows the Sudoku rules:
- Each row must contain unique numbers (1-9).
- Each column must contain unique numbers (1-9).
- Each 3x3 subgrid must contain unique numbers (1-9).
If any duplicates are found in the row, column, or subgrid, the puzzle is marked as invalid.
The Sudoku solver uses the backtracking algorithm:
- It finds the first empty cell (represented by
0
). - It attempts to fill the cell with numbers from
1
to9
. - For each number, it checks if placing it in the current cell maintains the validity of the puzzle.
- If a valid number is found, it recursively attempts to solve the rest of the puzzle.
- If no valid number is found, it backtracks by resetting the cell to
0
and tries the next number.
This process continues until the entire puzzle is solved or deemed unsolvable.
The app uses client-side rendering with useEffect
to handle navigation and state management. The useRouter
hook from Next.js ensures smooth navigation back to the home page when the "Go Home" button is clicked.
Ensure you have the following installed:
- Node.js (v18 or later)
- npm or yarn
Clone the repository and navigate to the project directory:
git clone https://github.com/yourusername/sudosolve.git
cd sudosolve
npm install
npm run dev
Open the app in your browser at http://localhost:3000.
- Parts of the UI, buttons and text animation, are inspired by design snippets found on CodePen. Credits go to the original authors for their creative designs.
Note: Some of the UI elements, such as buttons and animations, were adapted and modified from CodePen examples. Credit goes to the respective creators for their inspiring designs.
The project is deployed on Vercel. To deploy your own version:
- Connect your GitHub repository to Vercel.
- Click "Deploy" on Vercel's dashboard.
- Feel free to open issues or create pull requests if you find any bugs or want to add features.