Sudoku Solver Web App Development

A comprehensive skill for building a full-stack Sudoku solver application with a ReactJS + TypeScript frontend and Java Spring Boot REST API backend.

What This Skill Does

This skill guides you through the complete development lifecycle of a Sudoku solver web application, from project scaffolding to deployment. It ensures proper project structure, required tooling, compilation, and documentation for a production-ready full-stack application.

Instructions

Follow these steps to build the Sudoku solver application:

1. Verify Copilot Instructions Setup

Ensure the `copilot-instructions.md` file exists in the `.github` directory of your workspace. This file should contain workspace-specific custom instructions for GitHub Copilot.

2. Clarify Project Requirements

Confirm the architecture:

**Frontend**: ReactJS with TypeScript for type safety and modern UI development

**Backend**: Java Spring Boot for building RESTful APIs

**Integration**: REST API communication between frontend and backend

**Core Feature**: Sudoku puzzle solving algorithm

3. Scaffold the Project

Set up the project structure:

Create a root directory for the monorepo or separate repositories

Initialize the React + TypeScript frontend using `create-react-app` or Vite

Initialize the Spring Boot backend using Spring Initializr (https://start.spring.io/)

Configure proper directory structure:

- `/frontend` - React application

- `/backend` - Spring Boot application

- `.github/` - GitHub-specific files including Copilot instructions

4. Customize the Project

Tailor the generated scaffolding:

Configure TypeScript settings (`tsconfig.json`) for frontend

Set up Spring Boot application properties (`application.properties` or `application.yml`)

Define REST API endpoints for Sudoku operations (submit puzzle, get solution, validate)

Create React components for Sudoku grid, input handling, and results display

Implement Sudoku solving algorithm in Java backend

Configure CORS settings for frontend-backend communication

5. Install Required Extensions

Ensure proper development environment:

**Frontend**: ESLint, Prettier, TypeScript extensions

**Backend**: Java Extension Pack, Spring Boot Extension Pack

**General**: GitHub Copilot, GitLens, REST Client

Install npm dependencies for React application

Install Maven/Gradle dependencies for Spring Boot

6. Compile the Project

Build both parts of the application:

**Frontend**: Run `npm run build` or equivalent to compile TypeScript and bundle assets

**Backend**: Run `mvn clean install` or `./gradlew build` to compile Java code and run tests

Verify no compilation errors

Ensure all type checks pass in TypeScript

Confirm all unit tests pass in backend

7. Create and Run Tasks

Set up automated tasks:

Configure VS Code tasks (`.vscode/tasks.json`) for building frontend and backend

Create npm scripts for common frontend operations (dev, build, test, lint)

Set up Maven/Gradle tasks for backend operations

Create a unified task to run both frontend and backend concurrently

Test all tasks execute successfully

8. Launch the Project

Start the application in development mode:

Launch Spring Boot backend (typically on port 8080)

Launch React development server (typically on port 3000)

Configure VS Code launch configurations (`.vscode/launch.json`)

Verify frontend can communicate with backend API

Test Sudoku solving functionality end-to-end

9. Ensure Documentation is Complete

Finalize project documentation:

Create comprehensive README.md with:

- Project overview and features

- Setup instructions for both frontend and backend

- API endpoint documentation

- Development workflow

- Build and deployment instructions

Document Sudoku algorithm approach

Add inline code comments for complex logic

Include example Sudoku puzzles for testing

Create CONTRIBUTING.md if open-source

Update `copilot-instructions.md` with project-specific guidelines

Example Usage

1. Create workspace and initialize Git repository

2. Follow scaffolding steps to generate React and Spring Boot projects

3. Implement Sudoku grid UI with 9x9 input cells in React

4. Create POST endpoint `/api/sudoku/solve` in Spring Boot controller

5. Implement backtracking algorithm for solving Sudoku

6. Connect frontend form submission to backend API

7. Display solved puzzle or validation errors in UI

8. Build, test, and launch application

9. Document setup and usage instructions

Constraints

Requires Node.js and npm installed for frontend development

Requires JDK 17+ for Spring Boot backend

Requires Maven or Gradle build tool

GitHub Copilot extension must be active in VS Code

Ensure proper CORS configuration for local development

Backend should validate Sudoku puzzle inputs

Frontend should handle API errors gracefully

Notes

Use GitHub Copilot to accelerate development of boilerplate code

Leverage TypeScript for compile-time type safety in frontend

Follow Spring Boot best practices for REST API design

Consider implementing additional features: puzzle generation, difficulty levels, hints

Ensure responsive design for Sudoku grid UI

Add loading states and error boundaries in React components

Implement proper logging in Spring Boot for debugging

Sudoku Solver Web App Development

Sudoku Solver Web App Development

What This Skill Does

Instructions

1. Verify Copilot Instructions Setup

2. Clarify Project Requirements

3. Scaffold the Project

4. Customize the Project

5. Install Required Extensions

6. Compile the Project

7. Create and Run Tasks

8. Launch the Project

9. Ensure Documentation is Complete

Example Usage

Constraints

Notes

Reviews (0)