Repository: github.com/exphoenee/my-sudoq-react Live demo: xudoq.netlify.app
A React + TypeScript front end for solving and generating Sudoku puzzles, built with Vite. All puzzle solving and generation is delegated to the SudokuSolver-API - this app holds no sudoku logic of its own, only UI state and an API client.
src/
├── api/
│ ├── httpClient.ts # axios instance, base URL from VITE_SUDOKU_API_URL
│ └── sudokuApi.ts # solve()/generate() calls against the API
├── hooks/
│ └── useSudokuSolver.ts # board state, persistence, loading/message state
├── Utils/
│ ├── boardTransform.ts # 2D board <-> API's comma-separated string
│ └── MessageTypes.ts # alert variant constants
├── Components/
│ ├── SudokuSolver/ # board UI + control panel
│ ├── FadeIn/ # page-enter fade/slide animation wrapper
│ └── ErrorBoundary/ # catches render errors, shows a fallback message
├── App.tsx # renders SudokuSolver
└── vite-env.d.ts # Vite's client types + import.meta.env typing
The app talks to the API at the URL configured via VITE_SUDOKU_API_URL
(see .env.example, Vite only exposes client-side env vars prefixed with
VITE_). If unset, it falls back to the public demo deployment at
https://sudoku-solver-api.fly.dev.
cp .env.example .envnpm install
npm run devnpm run build # type-checks (tsc --noEmit) then builds with Vite into dist/
npm run preview # serves the production build locallynpm testRuns the suite once with Vitest. Covers the board
<-> API string transforms, the API client's error-message handling (network
failure vs. API-reported error vs. fallback), the useSudokuSolver state
hook (including localStorage persistence), and a component smoke test for
the board (typing keeps focus, Reset clears cells).