https://github.com/alexsantosquispe/taskmaster
This is project to build a task manager to handle projects and multiple users based on like Github Projects. This project is developed with React, Typescript, and TailwindCSS, and using Supabase for BE
https://github.com/alexsantosquispe/taskmaster
github-actions husky react react-router storybook supabase tailwindcss typescript vite
Last synced: 9 months ago
JSON representation
This is project to build a task manager to handle projects and multiple users based on like Github Projects. This project is developed with React, Typescript, and TailwindCSS, and using Supabase for BE
- Host: GitHub
- URL: https://github.com/alexsantosquispe/taskmaster
- Owner: alexsantosquispe
- Created: 2025-07-01T02:43:54.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-09-15T00:13:58.000Z (9 months ago)
- Last Synced: 2025-09-15T02:32:33.005Z (9 months ago)
- Topics: github-actions, husky, react, react-router, storybook, supabase, tailwindcss, typescript, vite
- Language: TypeScript
- Homepage: https://taskmaster-zeta-orpin.vercel.app
- Size: 1.39 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Taskmaster
A modern task management application built with React, TypeScript, and Tailwind CSS
[](https://github.com/alexsantosquispe/taskmaster/actions/workflows/github_ci.yml)
[](https://opensource.org/licenses/MIT)
[](https://vitejs.dev/)
[](https://react.dev/)
[](https://www.typescriptlang.org/)
[](https://tailwindcss.com/)
[](https://storybook.js.org/)
## 📌 Overview
Taskmaster is a modern task management application built to help organize projects and tasks efficiently. It features a clean, intuitive interface with a focus on performance and user experience. Developed as a personal project, Taskmaster also showcases my frontend development skills, including modern tooling, best practices, and attention to design detail.
## 📚 Table of Contents
- [Overview](#overview)
- [Quick Start](#quick-start)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Preview](#preview)
- [Features](#features)
- [Architecture](#architecture)
- [Key Architectural Decisions](#key-architectural-decisions)
- [Tech Stack](#tech-stack)
- [Development](#development)
- [Available Scripts](#available-scripts)
- [Running the App](#running-the-app)
- [Testing](#testing)
- [Linting and Formatting](#linting-and-formatting)
- [Development Practices](#development-practices)
- [Code Quality](#code-quality)
- [Git Workflow](#git-workflow)
- [Code Review Guidelines](#code-review-guidelines)
- [CI/CD Pipeline](#cicd-pipeline)
- [GitHub Actions](#github-actions)
- [Local Development](#local-development)
## 🚀 Quick Start
### Prerequisites
- [Node.js](https://nodejs.org/) `v18` or later
- [pnpm](https://pnpm.io/) (recommended) or npm
### Installation
```bash
# Clone the repository
git clone git@github.com:alexsantosquispe/taskmaster.git
cd taskmaster
# Install dependencies
pnpm install # or npm install
# Start development server
pnpm dev
```
Visit `http://localhost:5173` to view the app.
## 🖼️ Preview
### Light Theme
### Dark Theme
## 🚀 Features
- 📝 Create and manage tasks and projects
- 👥 Multi-user support
- 🌓 Light and dark mode
- 📱 Responsive design
- 🧪 Component testing with Jest and React Testing Library
- 📖 Component documentation with Storybook
- 🚀 Fast development with Vite
- 🎨 Modern UI with Tailwind CSS
- 🔍 Type-safe with TypeScript
## 🏗️ Architecture
The application follows a modern React architecture with a focus on component composition and separation of concerns:
```
src/
├── components/ # Reusable UI components
│ ├── atoms/ # Atomic design atoms (basic building blocks)
│ └── molecules/ # Composed components from atoms
├── config/ # Application configuration
├── contexts/ # React context providers
├── hooks/ # Custom React hooks
├── icons/ # SVG icons and icon components
├── models/ # TypeScript interfaces and types
├── pages/ # Page components (routes)
│ ├── Dashboard/ # Main dashboard view
│ ├── Tasks/ # Tasks management
│ ├── Projects/ # Projects management
│ ├── Reports/ # Analytics and reporting
│ └── Detail/ # Detailed view components
├── services/ # API and service layer
└── utils/ # Utility functions and helpers
└── mocks/ # Mock data for development
```
### Key Architectural Decisions
1. **Component Architecture**:
- Atomic Design methodology for component organization
- Reusable, composable UI components
- Container/Presentational component pattern
2. **State Management**:
- React Context API for global state
- Local component state for UI-specific state
3. **Styling**:
- Utility-first CSS with Tailwind CSS
- Component-scoped styles
4. **Type Safety**:
- Full TypeScript support
- Strict type checking enabled
## 📦 Tech Stack
- **Frontend Framework**: React 18
- **Language**: TypeScript
- **Build Tool**: Vite
- **Styling**: Tailwind CSS
- **Testing**: Jest, React Testing Library
- **Linting**: ESLint
- **Formatting**: Prettier
- **Version Control**: Git
## 🚀 Development
### Available Scripts
- `dev` - Start development server
- `build` - Build for production
- `preview` - Preview production build
- `test` - Run tests
- `test:coverage` - Run tests with coverage
- `test:update` - Update test snapshots
- `lint` - Run linter
- `format` - Format code with Prettier
- `storybook` - Start Storybook
- `build-storybook` - Build Storybook
### Running the App
1. Start the development server:
```bash
pnpm dev
```
The app will be available at `http://localhost:5173`
2. (Optional) Run Storybook to view components in isolation:
```bash
pnpm storybook
```
Storybook will be available at `http://localhost:6006`
## 🧪 Testing
We use Jest and React Testing Library for testing our components and utilities. To run the tests, use the following commands:
```bash
# Run all tests
pnpm test
# Run tests with coverage
pnpm test:coverage
# Update test snapshots
pnpm test:update
# Run tests in watch mode
pnpm test:watch
```
## 🧹 Linting and Formatting
This project uses ESLint for code linting and Prettier for code formatting. We recommend setting up your editor to automatically format and fix linting issues on save.
## 🛠 Development Practices
### Code Quality
- **TypeScript**: Strict mode enabled for type safety
- **ESLint**: Custom configuration following best practices
- **Prettier**: Consistent code formatting
- **Husky**: Git hooks for pre-commit and pre-push
- Pre-commit: Runs linting and type checking
- Pre-push: Runs tests to ensure code quality
### Git Workflow
1. **Branch Naming**: `feature/feature-name`, `bugfix/description`, `hotfix/description`
2. **Commit Messages**: Follow [Conventional Commits](https://www.conventionalcommits.org/)
3. **Pull Requests**:
- Link to related issues
- Include screenshots for UI changes
- Request code reviews
- Ensure all tests pass
### Code Review Guidelines
- Follow SOLID principles
- Keep components small and focused
- Write meaningful commit messages
- Add appropriate test coverage
- Document complex logic
## 🚀 CI/CD Pipeline
### GitHub Actions
The project includes GitHub Actions workflows for continuous integration:
1. **CI Pipeline** ([.github/workflows/github_ci.yml](https://github.com/alexsantosquispe/taskmaster/actions/workflows/github_ci.yml))
- Runs on every push and pull request
- Checks code formatting with Prettier
- Runs ESLint for code quality
- Executes unit tests with Jest
- Generates test coverage reports
- Builds the application
2. **Deployment**
- Automatic deployment to production on merge to `main`
- Preview deployments for pull requests
### Local Development
#### Pre-commit Hooks
Husky is configured to run the following on `git commit`:
- Linting with ESLint
- Type checking with TypeScript
- Formatting with Prettier
#### Pre-push Hooks
Before pushing to remote:
- Runs the full test suite
- Ensures all tests pass
- Verifies build process
```bash
# Run linter
pnpm lint
# Fix linting issues
pnpm lint:fix
# Format code
pnpm format
```
---