{"id":26661357,"url":"https://github.com/gagand29/react-tic-tac-toe","last_synced_at":"2026-05-18T02:31:19.762Z","repository":{"id":284051664,"uuid":"953661267","full_name":"gagand29/React-Tic-Tac-Toe","owner":"gagand29","description":"A simple yet fully functional Tic Tac Toe game built in React using hooks and clean component structure. Great for frontend interview prep.","archived":false,"fork":false,"pushed_at":"2025-03-23T21:32:52.000Z","size":34,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-31T03:46:46.558Z","etag":null,"topics":["beginner-react","coding-interview","frontend-interview","game","react","react-hooks","react-project","tic-tac-toe","ui-challenge"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gagand29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-23T21:17:31.000Z","updated_at":"2025-04-10T04:18:24.000Z","dependencies_parsed_at":"2025-03-23T22:41:57.336Z","dependency_job_id":null,"html_url":"https://github.com/gagand29/React-Tic-Tac-Toe","commit_stats":null,"previous_names":["gagand29/react-tic-tac-toe"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gagand29/React-Tic-Tac-Toe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gagand29%2FReact-Tic-Tac-Toe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gagand29%2FReact-Tic-Tac-Toe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gagand29%2FReact-Tic-Tac-Toe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gagand29%2FReact-Tic-Tac-Toe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gagand29","download_url":"https://codeload.github.com/gagand29/React-Tic-Tac-Toe/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gagand29%2FReact-Tic-Tac-Toe/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33162603,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-17T22:39:12.733Z","status":"online","status_checked_at":"2026-05-18T02:00:06.436Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["beginner-react","coding-interview","frontend-interview","game","react","react-hooks","react-project","tic-tac-toe","ui-challenge"],"created_at":"2025-03-25T13:16:47.465Z","updated_at":"2026-05-18T02:31:19.744Z","avatar_url":"https://github.com/gagand29.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Tic-Tac-Toe 🎮\n\nHi there! 👋 I built this simple **Tic-Tac-Toe game** using **React + TypeScript + Vite**. It's a fun little project to practice React state management, TypeScript types, and some conditional rendering logic. 🚀\n\n---\n\n##  Features:\n- 2-Player Mode (X vs O)\n- Win detection (rows, columns, diagonals)\n- Draw detection\n- Reset Game functionality\n- Built with modern stack: **React 19 + TypeScript + Vite**\n\n---\n\n## **How it works**\n\n### 1️⃣ **State management**\n\nI’m using React’s `useState()` hook to manage two states:\n\n```tsx\nconst [board, setBoard] = useState(Array(9).fill(\"\"));\nconst [isX, setIsX] = useState(true);\n```\n\n- **board:** An array of 9 strings `[\"\", \"\", \"\", ...]` representing each square on the Tic-Tac-Toe board.\n- **isX:** A boolean to track whose turn it is. `true` means it's X's turn, `false` means it's O's turn.\n\n---\n\n### 2️⃣ **Click logic**\n\nWhen a player clicks a square:\n\n```tsx\nconst handleClick = (index: number) =\u003e {\n  if (board[index] || winner || isDraw) return; // prevent overwriting or clicking after game ends\n  const newBoard = [...board];\n  newBoard[index] = isX ? \"X\" : \"O\";\n  setBoard(newBoard);\n  setIsX(!isX);\n};\n```\n\n- Prevents clicking on an already filled square.\n- Fills the square with either `\"X\"` or `\"O\"` based on whose turn it is.\n- Switches the turn after each valid click.\n\n---\n\n### 3️⃣ **Win detection**\n\nI check all possible winning combinations (rows, columns, diagonals):\n\n```tsx\nconst checkWinner = (b: string[]) =\u003e {\n  const lines = [\n    [0, 1, 2], [3, 4, 5], [6, 7, 8],\n    [0, 3, 6], [1, 4, 7], [2, 5, 8],\n    [0, 4, 8], [2, 4, 6]\n  ];\n  for (let [a, b1, c] of lines) {\n    if (b[a] \u0026\u0026 b[a] === b[b1] \u0026\u0026 b[a] === b[c]) return b[a];\n  }\n  return null;\n};\n```\n\n- Checks if any player has won by comparing values in winning positions.\n\n---\n\n### 4️⃣ **Draw detection**\n\n```tsx\nconst isDraw = board.every((cell: string) =\u003e cell !== \"\") \u0026\u0026 !winner;\n```\n\n- Declares a draw if all squares are filled and **no winner** is found.\n\n---\n\n### 5️⃣ **UI**\n\n- A simple 3x3 grid created using CSS Grid inside JSX.\n- Displays `\"Winner: X\"`, `\"Winner: O\"`, `\"It's a Draw!\"`, or `\"Turn: X / O\"` dynamically.\n\n---\n\n## 🛠 **Tech stack**\n\n- ⚛️ React 19\n- ⌨️ TypeScript\n- ⚡ Vite\n- 💄 Inline CSS for styling\n\n---\n\n## 🚀 **How to run**\n\n1. Clone the repo:\n   ```bash\n   git clone https://github.com/gagand29/React-Tic-Tac-Toe.git\n   cd React-Tic-Tac-Toe\n   ```\n\n2. Install dependencies:\n   ```bash\n   npm install\n   ```\n\n3. Run development server:\n   ```bash\n   npm run dev\n   ```\n\n4. Visit:\n   ```\n   http://localhost:5173\n   ```\n\n---\n\n## 🤝 **Contribute or Play Around**\n\nFeel free to fork, download, or edit this project!  \nYou can add:\n- AI opponent \n- Animation on winning cells \n- Scoreboard \n\n---\n\nThanks for checking out my project! 🙌  \n— **Made with ❤️ by Me**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgagand29%2Freact-tic-tac-toe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgagand29%2Freact-tic-tac-toe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgagand29%2Freact-tic-tac-toe/lists"}