TaskMan is a gamified task management app built with React. It turns everyday tasks into a retro-style productivity experience with scoring, levels, priorities, deadlines, categories, sound effects, and a responsive UI.
The project was created as part of a full-stack software engineering program and demonstrates practical frontend development, component-based architecture, testing, CI/CD, Docker, and Git best practices.
https://taskman-yellow-user.vercel.app
https://github.com/tamtam888/TaskMan
- Add, complete, edit, and delete tasks
- Prioritize tasks by level: High, Normal, Low
- Organize tasks by category: All, Shopping, Mission, Other, Completed
- Toggle between Game Mode and Classic Mode
- Track score and level based on completed tasks
- Google Sign-In for user authentication
- Save each user's tasks, score, and level locally
- Add due dates with overdue detection
- Add optional participants to each task
- Play sound effects for key actions
- Responsive retro pixel-style UI
- Unit tests with Jest and React Testing Library
- CI/CD workflow with GitHub Actions
- Dockerized production build served with Nginx
| Area | Technology |
|---|---|
| Frontend | React, JavaScript, HTML5, CSS3 |
| Auth | Google OAuth2 with @react-oauth/google |
| Date Handling | date-fns, react-datepicker |
| Security | DOMPurify for user input sanitization |
| Testing | Jest, React Testing Library |
| CI/CD | GitHub Actions |
| Containerization | Docker, Nginx |
| Styling | Custom CSS, responsive retro UI |
| Tooling | ESLint, Prettier |
TaskMan/
public/ Static assets
src/ React source code
components/ Reusable UI components
tests/ Test files and test helpers
.github/workflows/ CI/CD workflows
Dockerfile Production Docker build
nginx.conf Nginx configuration for Docker
package.json Scripts and dependencies
git clone https://github.com/tamtam888/TaskMan.git
cd TaskMan
npm install
npm startThe app will run locally at:
http://localhost:3000
npm startRuns the app in development mode.
npm run buildCreates a production build in the build folder.
npm testRuns the test suite with React Testing Library.
Build the Docker image:
docker build -t taskman-app .Run the container:
docker run -p 8080:80 taskman-appOpen:
http://localhost:8080
The repository includes GitHub Actions workflows for:
- Installing dependencies
- Running tests
- Building the React app
- Uploading the build artifact
- Building a Docker image
- Optional deployment integration through configured secrets
TaskMan was designed to make task management feel more engaging by combining simple productivity flows with game-like feedback. The goal was not only to build a working task app, but also to practice clean component structure, accessible UI controls, user input handling, automated checks, and deployment-oriented project setup.
- Deadline-near notifications
- Visual timeline for task progress from creation date to deadline
- Calendar sync for tasks with participants
- Improved collaboration flows
- More advanced scoring logic based on deadline status
- React component architecture
- State handling with functional components and hooks
- Form validation and input sanitization
- Authentication integration with Google OAuth
- Responsive UI implementation
- Testing with Jest and React Testing Library
- CI/CD setup with GitHub Actions
- Docker-based production deployment
This project is for portfolio and learning purposes.