https://github.com/kamo333/tic-tac-toe-game
React · Styled-Components · Context API · Jest · React Testing Library · GitHub Actions · CI/CD | Tic-Tac-Toe Game
https://github.com/kamo333/tic-tac-toe-game
ci-cd context-api github-actions jest reactjs reacttestinglibrary styled-component
Last synced: 2 months ago
JSON representation
React · Styled-Components · Context API · Jest · React Testing Library · GitHub Actions · CI/CD | Tic-Tac-Toe Game
- Host: GitHub
- URL: https://github.com/kamo333/tic-tac-toe-game
- Owner: KAMO333
- Created: 2023-05-28T14:26:35.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2026-03-05T13:31:14.000Z (3 months ago)
- Last Synced: 2026-03-05T15:29:35.983Z (3 months ago)
- Topics: ci-cd, context-api, github-actions, jest, reactjs, reacttestinglibrary, styled-component
- Language: JavaScript
- Homepage: https://tictactoe-by-kamo.netlify.app/
- Size: 722 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🕹️ React Tic-Tac-Toe (Lofi Edition)
[](https://github.com/KAMO333/tic-tac-toe-game/actions/workflows/ci.yml)
A professional-grade, full-stack Tic-Tac-Toe game built with **React**, **Styled-Components**, and a focus on **Test-Driven Development (TDD)**. This project features immersive sound effects, Lofi background music, and a robust CI/CD pipeline.
---
## 🚀 Features
- **Immersive Audio**: Integrated background music player and sound effects (SFX) using React Context.
- **Dynamic Avatars**: Custom player avatars generated via `react-nice-avatar`.
- **Responsive Design**: Built with Styled-Components for a seamless experience across devices.
- **Production Quality**: Automated testing and CI/CD integration.
---
## 🏗️ Architecture
The project follows a modular architecture to separate concerns:
- **Components**: Atomic UI elements (Buttons, Cells, Modals).
- **Contexts**: Global state management for Game Logic, Audio, and UI Themes.
- **Hooks**: Custom logic for audio playback and modal state.
- **Utils**: Pure, tested mathematical logic for win-conditions and music randomization.
---
## 🧪 Testing & Quality Assurance
This project maintains a high standard of code quality through comprehensive testing.
### Test Categories
1. **Unit Tests**: Pure logic verification in `src/utils`.
2. **Component Tests**: UI verification using React Testing Library.
3. **Integration Tests**: State and Context flow verification for `GameContext`.
### Running Tests
```bash
# Run tests in watch mode
npm test
# Generate a full coverage report
npm test -- --coverage --watchAll=false
```
### CI/CD Pipeline
Automated workflows are configured via **GitHub Actions**. Every push to `master` triggers a build and test cycle to ensure zero-regression deployments.
---
## 🛠️ Tech Stack
| Category | Technology |
| ---------- | ------------------------------ |
| Frontend | React 18, Styled-Components |
| State | React Context API |
| Testing | Jest, React Testing Library |
| Automation | GitHub Actions |
| Icons/UI | React Icons, React Nice Avatar |
---
## 🚦 Getting Started
1. Clone the repo: `git clone git@github.com:KAMO333/tic-tac-toe-game.git`
2. Install dependencies: `npm install`
3. Start the dev server: `npm start`
---
## 📝 License
Distributed under the MIT License.