{"id":25834528,"url":"https://github.com/simonanewton/sudoku-solver-react","last_synced_at":"2026-04-12T18:11:43.611Z","repository":{"id":59990647,"uuid":"386100591","full_name":"simonanewton/sudoku-solver-react","owner":"simonanewton","description":"Welcome to Sudoku Solver v1! This is a React based application that lets users play the well known puzzle game Sudoku. This application utilizes a third-party API so users can try many different types of puzzles at various difficulties. Have fun!","archived":false,"fork":false,"pushed_at":"2022-10-28T05:52:45.000Z","size":16583,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2023-03-05T10:11:28.905Z","etag":null,"topics":["bootstrap","game","javascript","nodejs","react","v1"],"latest_commit_sha":null,"homepage":"https://react-sudoku-solver-app.herokuapp.com/","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonanewton.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-07-14T23:17:58.000Z","updated_at":"2022-10-03T18:03:34.000Z","dependencies_parsed_at":"2023-01-20T18:30:21.348Z","dependency_job_id":null,"html_url":"https://github.com/simonanewton/sudoku-solver-react","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fsudoku-solver-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fsudoku-solver-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fsudoku-solver-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonanewton%2Fsudoku-solver-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonanewton","download_url":"https://codeload.github.com/simonanewton/sudoku-solver-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241300388,"owners_count":19940487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","game","javascript","nodejs","react","v1"],"created_at":"2025-03-01T00:58:34.058Z","updated_at":"2026-04-12T18:11:43.573Z","avatar_url":"https://github.com/simonanewton.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sudoku Solver\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./assets/site-header.png\" alt=\"Sudoku Solver Header\" width=\"80%\" /\u003e\n\u003c/div\u003e\n\n## Description\n\nSudoku Solver is a [React](https://reactjs.org/) based web application that generates a valid Sudoku puzzle that users can interact with while keeping track of their elapsed time. Users can generate puzzles at various difficulties so that they can start a new board if they get stuck, find the puzzle too easy, or want something unpredictable. While playing, users can also choose to stop the timer to track their progress, clear the puzzle from the board to start over, or learn more about the game and how it was made.\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./assets/site-preview.png\" alt=\"Sudoku Solver Website Preview\" /\u003e\n\u003c/div\u003e\n\n## Table of Contents\n\n* [Development](#development)\n* [Installation](#installation)\n* [Usage](#usage)\n* [Reflection](#reflection)\n* [Contributing](#contributing)\n* [Credits](#credits)\n* [License](#license)\n\n## Development\n\nReact is great for creating iterative [components](https://reactjs.org/#a-simple-component) so that developers don't have to waste time updating and testing similar elements. However, another pillar of utility behind React is the ability for components to have [state](https://reactjs.org/#a-stateful-component) by keeping track of their own information. Two predominate examples of stateful behavior in this application include the management of puzzle data and the updating of the board timer as seen in the code exerpt below.\n\n```js\nclass App extends Component {\n    constructor(props) {\n        super(props);\n        this.timer = 0;\n        this.state = {\n            time: 0,\n            difficulty: null,\n            values: null\n        };\n    }\n\n    startTimer = () =\u003e {\n        if (this.timer === 0) {\n            this.timer = setInterval(() =\u003e {\n                this.setState({ time: this.state.time + 1 });\n            }, 1000);\n        }\n    }\n\n    stopTimer = () =\u003e {\n        clearInterval(this.timer);\n    }\n\n    resetTimer = () =\u003e {\n        this.stopTimer();\n        this.setState({ time: 0 });\n        this.timer = 0;\n        this.startTimer();\n    }\n\n    generateNewBoard = (level) =\u003e {\n        level ? this.resetTimer() : this.stopTimer();\n        const requestParam = level ? \"?difficulty=\" + level : level;\n        fetch(`https://sugoku.herokuapp.com/board${requestParam}`)\n            .then(result =\u003e result.json())\n            .then(data =\u003e this.setState({ values: data.board, difficulty: level }))\n            .catch(err =\u003e console.log(err));\n    }\n\n    componentDidMount = () =\u003e {\n        this.startTimer();\n        this.generateNewBoard(\"random\");\n    }\n\n    componentWillUnmount = () =\u003e {\n        this.stopTimer();\n    }\n}\n```\n\n## Installation\n\nTo install the required npm packages to run this application, clone the repository and run the following command:\n```sh\nnpm install\n```\n\n## Usage\n\nTo use this application, run the following command:\n```sh\nnpm start\n```\n\n## Reflection\n\nThis project was created with the intention of practicing the creation of a full stack web application from scratch so that I could further my experience with the React Lifecycle, React Bootstrap, and responsive web design. I know that the best way to improve my skills as a web developer is to practice creating personal projects that meet a minimum viability so that I can familiarize myself with the full process of app development. If I were to make this application again in the future, I would challenge myself by creating my own backend sudoku board generation API and create a collapsable mobile-only menu.\n\n## Contributing\n\n\u003cimg src=\"./assets/profile-pic-circle.png\" alt=\"Profile Picture\" width=250/\u003e\n\u003ch3\u003e\u003cb\u003eSimon Newton\u003c/b\u003e\u003c/h3\u003e\n\u003chr align=left width=325 /\u003e\n\u003cp\u003eJunior Full-Stack Web Developer\u003c/p\u003e\n\u003ca href=\"https://github.com/simonanewton\" target=\"_blank\"\u003eGitHub Profile\u003c/a\u003e | \u003ca href=\"https://www.linkedin.com/in/simon-newton-2a7440129/\" target=\"_blank\"\u003eLinkedIn Profile\u003c/a\u003e | \u003ca href=\"https://simonanewtondev.herokuapp.com/\" target=\"_blank\"\u003ePersonal Website\u003c/a\u003e\n\n## Credits\n\nExternal Sudoku API\n* https://github.com/bertoort/sugoku\n\nWebsite Background Image\n* https://unsplash.com/photos/EWDvHNNfUmQ\n\nPrimary NPM Packages\n* https://www.npmjs.com/package/react\n* https://www.npmjs.com/package/express\n* https://www.npmjs.com/package/bootstrap\n* https://www.npmjs.com/package/react-bootstrap\n\n## License\n\n[![license](https://img.shields.io/badge/license-MIT-blue)](https://simonanewton.mit-license.org)\n\nMIT License \u0026copy; Simon Newton \u003chttps://simonanewton.mit-license.org\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonanewton%2Fsudoku-solver-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonanewton%2Fsudoku-solver-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonanewton%2Fsudoku-solver-react/lists"}