{"id":31624990,"url":"https://github.com/alexsantosquispe/taskmaster","last_synced_at":"2025-10-06T18:55:05.540Z","repository":{"id":302189179,"uuid":"1011563731","full_name":"alexsantosquispe/taskmaster","owner":"alexsantosquispe","description":"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","archived":false,"fork":false,"pushed_at":"2025-09-15T00:13:58.000Z","size":1460,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-15T02:32:33.005Z","etag":null,"topics":["github-actions","husky","react","react-router","storybook","supabase","tailwindcss","typescript","vite"],"latest_commit_sha":null,"homepage":"https://taskmaster-zeta-orpin.vercel.app","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/alexsantosquispe.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-01T02:43:54.000Z","updated_at":"2025-09-15T00:14:01.000Z","dependencies_parsed_at":"2025-07-17T19:40:05.357Z","dependency_job_id":"c3e4d031-a124-475d-a697-ed18e27e8698","html_url":"https://github.com/alexsantosquispe/taskmaster","commit_stats":null,"previous_names":["alexsantosquispe/taskmaster"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexsantosquispe/taskmaster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexsantosquispe%2Ftaskmaster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexsantosquispe%2Ftaskmaster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexsantosquispe%2Ftaskmaster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexsantosquispe%2Ftaskmaster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexsantosquispe","download_url":"https://codeload.github.com/alexsantosquispe/taskmaster/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexsantosquispe%2Ftaskmaster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278663383,"owners_count":26024389,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"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":["github-actions","husky","react","react-router","storybook","supabase","tailwindcss","typescript","vite"],"created_at":"2025-10-06T18:55:03.450Z","updated_at":"2025-10-06T18:55:05.533Z","avatar_url":"https://github.com/alexsantosquispe.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eTaskmaster\u003c/h1\u003e\n  \u003cp align=\"center\"\u003e\n    A modern task management application built with React, TypeScript, and Tailwind CSS\n  \u003c/p\u003e\n\n[![CI Pipeline](https://github.com/alexsantosquispe/taskmaster/actions/workflows/github_ci.yml/badge.svg?branch=main)](https://github.com/alexsantosquispe/taskmaster/actions/workflows/github_ci.yml)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n[![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)](https://react.dev/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=white)](https://tailwindcss.com/)\n[![Storybook](https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge\u0026logo=storybook\u0026logoColor=white)](https://storybook.js.org/)\n\n\u003c/div\u003e\n\n## 📌 Overview\n\nTaskmaster 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.\n\n## 📚 Table of Contents\n\n- [Overview](#overview)\n- [Quick Start](#quick-start)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n- [Preview](#preview)\n- [Features](#features)\n- [Architecture](#architecture)\n  - [Key Architectural Decisions](#key-architectural-decisions)\n- [Tech Stack](#tech-stack)\n- [Development](#development)\n  - [Available Scripts](#available-scripts)\n  - [Running the App](#running-the-app)\n- [Testing](#testing)\n- [Linting and Formatting](#linting-and-formatting)\n- [Development Practices](#development-practices)\n  - [Code Quality](#code-quality)\n  - [Git Workflow](#git-workflow)\n  - [Code Review Guidelines](#code-review-guidelines)\n- [CI/CD Pipeline](#cicd-pipeline)\n  - [GitHub Actions](#github-actions)\n  - [Local Development](#local-development)\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/) `v18` or later\n- [pnpm](https://pnpm.io/) (recommended) or npm\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone git@github.com:alexsantosquispe/taskmaster.git\ncd taskmaster\n\n# Install dependencies\npnpm install  # or npm install\n\n# Start development server\npnpm dev\n```\n\nVisit `http://localhost:5173` to view the app.\n\n## 🖼️ Preview\n\n### Light Theme\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./screenshots/login.webp\" alt=\"Login Light Theme\" width=\"80%\"/\u003e\n  \u003cimg src=\"./screenshots/light.webp\" alt=\"Light Theme\" width=\"80%\"/\u003e\n\u003c/div\u003e\n\n### Dark Theme\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./screenshots/dark.webp\" alt=\"Dark Theme\" width=\"80%\"/\u003e\n\u003c/div\u003e\n\n## 🚀 Features\n\n- 📝 Create and manage tasks and projects\n- 👥 Multi-user support\n- 🌓 Light and dark mode\n- 📱 Responsive design\n- 🧪 Component testing with Jest and React Testing Library\n- 📖 Component documentation with Storybook\n- 🚀 Fast development with Vite\n- 🎨 Modern UI with Tailwind CSS\n- 🔍 Type-safe with TypeScript\n\n## 🏗️ Architecture\n\nThe application follows a modern React architecture with a focus on component composition and separation of concerns:\n\n```\nsrc/\n├── components/           # Reusable UI components\n│   ├── atoms/           # Atomic design atoms (basic building blocks)\n│   └── molecules/       # Composed components from atoms\n├── config/              # Application configuration\n├── contexts/            # React context providers\n├── hooks/               # Custom React hooks\n├── icons/               # SVG icons and icon components\n├── models/              # TypeScript interfaces and types\n├── pages/               # Page components (routes)\n│   ├── Dashboard/       # Main dashboard view\n│   ├── Tasks/           # Tasks management\n│   ├── Projects/        # Projects management\n│   ├── Reports/         # Analytics and reporting\n│   └── Detail/          # Detailed view components\n├── services/            # API and service layer\n└── utils/               # Utility functions and helpers\n    └── mocks/           # Mock data for development\n```\n\n### Key Architectural Decisions\n\n1. **Component Architecture**:\n   - Atomic Design methodology for component organization\n   - Reusable, composable UI components\n   - Container/Presentational component pattern\n\n2. **State Management**:\n   - React Context API for global state\n   - Local component state for UI-specific state\n\n3. **Styling**:\n   - Utility-first CSS with Tailwind CSS\n   - Component-scoped styles\n\n4. **Type Safety**:\n   - Full TypeScript support\n   - Strict type checking enabled\n\n## 📦 Tech Stack\n\n- **Frontend Framework**: React 18\n- **Language**: TypeScript\n- **Build Tool**: Vite\n- **Styling**: Tailwind CSS\n- **Testing**: Jest, React Testing Library\n- **Linting**: ESLint\n- **Formatting**: Prettier\n- **Version Control**: Git\n\n## 🚀 Development\n\n### Available Scripts\n\n- `dev` - Start development server\n- `build` - Build for production\n- `preview` - Preview production build\n- `test` - Run tests\n- `test:coverage` - Run tests with coverage\n- `test:update` - Update test snapshots\n- `lint` - Run linter\n- `format` - Format code with Prettier\n- `storybook` - Start Storybook\n- `build-storybook` - Build Storybook\n\n### Running the App\n\n1. Start the development server:\n\n   ```bash\n   pnpm dev\n   ```\n\n   The app will be available at `http://localhost:5173`\n\n2. (Optional) Run Storybook to view components in isolation:\n   ```bash\n   pnpm storybook\n   ```\n   Storybook will be available at `http://localhost:6006`\n\n## 🧪 Testing\n\nWe use Jest and React Testing Library for testing our components and utilities. To run the tests, use the following commands:\n\n```bash\n# Run all tests\npnpm test\n\n# Run tests with coverage\npnpm test:coverage\n\n# Update test snapshots\npnpm test:update\n\n# Run tests in watch mode\npnpm test:watch\n```\n\n## 🧹 Linting and Formatting\n\nThis 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.\n\n## 🛠 Development Practices\n\n### Code Quality\n\n- **TypeScript**: Strict mode enabled for type safety\n- **ESLint**: Custom configuration following best practices\n- **Prettier**: Consistent code formatting\n- **Husky**: Git hooks for pre-commit and pre-push\n  - Pre-commit: Runs linting and type checking\n  - Pre-push: Runs tests to ensure code quality\n\n### Git Workflow\n\n1. **Branch Naming**: `feature/feature-name`, `bugfix/description`, `hotfix/description`\n2. **Commit Messages**: Follow [Conventional Commits](https://www.conventionalcommits.org/)\n3. **Pull Requests**:\n   - Link to related issues\n   - Include screenshots for UI changes\n   - Request code reviews\n   - Ensure all tests pass\n\n### Code Review Guidelines\n\n- Follow SOLID principles\n- Keep components small and focused\n- Write meaningful commit messages\n- Add appropriate test coverage\n- Document complex logic\n\n## 🚀 CI/CD Pipeline\n\n### GitHub Actions\n\nThe project includes GitHub Actions workflows for continuous integration:\n\n1. **CI Pipeline** ([.github/workflows/github_ci.yml](https://github.com/alexsantosquispe/taskmaster/actions/workflows/github_ci.yml))\n   - Runs on every push and pull request\n   - Checks code formatting with Prettier\n   - Runs ESLint for code quality\n   - Executes unit tests with Jest\n   - Generates test coverage reports\n   - Builds the application\n\n2. **Deployment**\n   - Automatic deployment to production on merge to `main`\n   - Preview deployments for pull requests\n\n### Local Development\n\n#### Pre-commit Hooks\n\nHusky is configured to run the following on `git commit`:\n\n- Linting with ESLint\n- Type checking with TypeScript\n- Formatting with Prettier\n\n#### Pre-push Hooks\n\nBefore pushing to remote:\n\n- Runs the full test suite\n- Ensures all tests pass\n- Verifies build process\n\n```bash\n# Run linter\npnpm lint\n\n# Fix linting issues\npnpm lint:fix\n\n# Format code\npnpm format\n```\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexsantosquispe%2Ftaskmaster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexsantosquispe%2Ftaskmaster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexsantosquispe%2Ftaskmaster/lists"}