{"id":30275528,"url":"https://github.com/remojs/taskify","last_synced_at":"2025-09-02T15:11:05.707Z","repository":{"id":308607803,"uuid":"1026846232","full_name":"Remojs/Taskify","owner":"Remojs","description":"Gestor de tareas moderno con integración a Google Calendar y Supabase. Organiza, sincroniza y visualiza tus pendientes fácilmente.","archived":false,"fork":false,"pushed_at":"2025-08-06T20:43:54.000Z","size":1476,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-08-06T22:05:37.972Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://trytaskify.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/Remojs.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}},"created_at":"2025-07-26T18:29:14.000Z","updated_at":"2025-08-06T20:48:10.000Z","dependencies_parsed_at":"2025-08-06T22:05:42.074Z","dependency_job_id":"a9b682d9-1a20-47e6-9af9-61a3020690a2","html_url":"https://github.com/Remojs/Taskify","commit_stats":null,"previous_names":["remojs/taskify"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Remojs/Taskify","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remojs%2FTaskify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remojs%2FTaskify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remojs%2FTaskify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remojs%2FTaskify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Remojs","download_url":"https://codeload.github.com/Remojs/Taskify/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Remojs%2FTaskify/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270696153,"owners_count":24629790,"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-08-16T02:00:11.002Z","response_time":91,"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":[],"created_at":"2025-08-16T09:41:09.242Z","updated_at":"2025-08-16T09:41:12.950Z","avatar_url":"https://github.com/Remojs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 Taskify - Modern Task Management App\n\n\u003e A scalable, feature-based React application for efficient task management with Google Calendar integration and modern UI components.\n\n![Taskify Hero](src/assets/task-hero.png)\n\n## ✨ Key Features\n\n- **📝 Advanced Task Management**: Create, edit, delete, and organize tasks with intuitive UI\n- **🎨 Priority \u0026 Color Coding**: Visual organization with customizable colors and priority levels\n- **📅 Google Calendar Integration**: Seamless sync with your Google Calendar\n- **📱 Responsive Design**: Perfect experience across all devices\n- **🌓 Dark/Light Mode**: Toggle between themes for optimal viewing\n- **⚡ Real-time Updates**: Instant sync across browser tabs with Supabase\n- **🔄 Task Views**: Switch between grid and slider views\n- **✅ Smart Filtering**: Collapsible completed tasks section\n- **🎯 Modern Architecture**: Feature-based structure for scalability\n\n## 🛠️ Technology Stack\n\n### **Core Technologies**\n- **React 18.3.1** - Modern functional components with hooks\n- **TypeScript** - Type-safe development experience  \n- **Vite** - Lightning-fast build tool and dev server\n- **Tailwind CSS** - Utility-first styling framework\n\n### **Backend \u0026 Database**\n- **Supabase** - PostgreSQL database with real-time subscriptions\n- **Row Level Security** - Secure user data isolation\n- **Google Calendar API** - Task synchronization with Google services\n\n### **UI \u0026 Design System**\n- **Shadcn/UI** - High-quality, accessible component library\n- **Radix UI** - Unstyled, accessible UI primitives\n- **Lucide Icons** - Beautiful, consistent icon set\n- **CVA** - Class variance authority for component variants\n\n### **State Management \u0026 Data**\n- **TanStack Query** - Powerful data fetching and caching\n- **React Hook Form** - Efficient form handling with validation\n- **Zod** - TypeScript-first schema validation\n\n### **Developer Experience**\n- **ESLint** - Code linting and quality enforcement\n- **PostCSS** - CSS processing and optimization\n- **TypeScript ESLint** - Advanced TypeScript linting rules\n\n## 🏗️ Project Architecture\n\nTaskify follows a **feature-based architecture** for maximum scalability and maintainability:\n\n```\nsrc/\n├── features/                    # 🎯 Feature modules\n│   ├── tasks/                  # Task management feature\n│   │   ├── components/         # TaskCard, TaskForm, TaskList, TaskSlider\n│   │   ├── hooks/             # useTasks, useGoogleCalendar\n│   │   ├── services/          # taskService, googleCalendarService\n│   │   ├── types/             # task.types.ts (centralized types)\n│   │   └── index.ts           # Feature exports\n│   └── app/                   # Main application feature\n│       ├── components/        # TaskManager (main component)\n│       └── index.ts           # App exports\n├── shared/                     # 🔄 Shared resources\n│   ├── components/            # Reusable UI components\n│   │   └── ui/               # Core design system (10 essential components)\n│   ├── hooks/                # Shared hooks (useToast, useMobile)\n│   ├── services/             # Shared services (supabase)\n│   ├── utils/                # Utilities (cn, dateFormatters)\n│   └── index.ts              # Shared exports\n├── pages/                     # 📄 Application pages\n│   ├── Index.tsx             # Home page\n│   └── NotFound.tsx          # 404 page\n├── assets/                    # 🖼️ Static assets\n└── styles/                    # 🎨 Global styles\n```\n\n### **🎯 Architecture Benefits**\n\n- **Feature Isolation**: Each feature is self-contained and independent\n- **Scalability**: Easy to add new features without affecting existing code\n- **Code Reusability**: Shared components and utilities across features\n- **Type Safety**: Centralized types per feature for better TypeScript experience\n- **Bundle Optimization**: Only 10 essential UI components (removed 47 unused ones)\n- **Clean Imports**: Barrel exports for organized import statements\n\n## 🚀 Getting Started\n\n### **Prerequisites**\n- **Node.js** 18+ (recommended: 20+)\n- **npm** or **yarn** package manager\n- **Supabase** account (free tier available)\n- **Google Cloud** account (for Calendar API - optional)\n\n### **🛠️ Installation**\n\n1. **Clone the repository**\n```bash\ngit clone https://github.com/yourusername/taskify.git\ncd taskify\n```\n\n2. **Install dependencies**\n```bash\nnpm install\n# or\nyarn install\n```\n\n3. **Environment Setup**\n```bash\n# Copy environment template\ncp .env.example .env\n\n# Edit .env with your credentials:\n# VITE_SUPABASE_URL=your_supabase_url\n# VITE_SUPABASE_ANON_KEY=your_supabase_anon_key\n# VITE_GOOGLE_CLIENT_ID=your_google_client_id (optional)\n```\n\n4. **Database Setup**\n```bash\n# Run the provided SQL script in your Supabase SQL editor\n# File: supabase-setup.sql\n```\n\n5. **Start Development Server**\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\n🎉 **Application will be available at:** `http://localhost:8080`\n\n### **📦 Build for Production**\n\n```bash\n# Create optimized build\nnpm run build\n\n# Preview production build locally\nnpm run preview\n```\n\n## 💾 Database Setup\n\nThis project uses **Supabase** as the backend:\n\n### **Quick Setup:**\n1. Create account at [supabase.com](https://supabase.com)\n2. Create new project\n3. Run `supabase-setup.sql` in SQL Editor\n4. Copy project URL and anon key to `.env`\n\n### **Database Features:**\n- ✅ **PostgreSQL** with real-time subscriptions\n- ✅ **Row Level Security** for user data isolation  \n- ✅ **Auto-backup** and scaling\n- ✅ **Type-safe** queries with generated types\n\n## 📱 Features Showcase\n\n### **Task Management**\n- **Create Tasks**: Rich form with title, description, priority, color, and date\n- **Smart Views**: Toggle between grid and slider layouts\n- **Priority System**: High, Medium, Low with visual indicators\n- **Color Coding**: 8 predefined colors for task categorization\n- **Quick Actions**: Mark complete, delete, edit tasks\n\n### **Google Calendar Integration**\n- **Auto-sync**: Tasks automatically added to Google Calendar\n- **Two-way sync**: Changes reflect in both applications  \n- **Smart scheduling**: Respect existing calendar events\n\n### **User Experience**\n- **Dark/Light Mode**: System preference with manual toggle\n- **Responsive Design**: Optimized for mobile, tablet, and desktop\n- **Real-time Updates**: Changes sync instantly across tabs\n- **Smooth Animations**: Micro-interactions for better UX\n- **Accessibility**: Full keyboard navigation and screen reader support\n\n## 🎨 Design System\n\nTaskify uses a **modern design system** built with:\n\n- **10 Essential UI Components** (optimized from 54 original)\n- **Consistent Color Palette** with dark/light mode support\n- **Typography Scale** for hierarchical information\n- **Spacing System** based on Tailwind's spacing scale\n- **Animation Library** for smooth micro-interactions\n\n## 🧪 Development Scripts\n\n```bash\n# Development\nnpm run dev          # Start dev server\nnpm run build        # Production build\nnpm run preview      # Preview production build\nnpm run lint         # Run ESLint\n```\n\n## 📊 Performance Optimizations\n\n- **Bundle Size**: Reduced by 40-50% by removing unused components\n- **Tree Shaking**: Only essential code included in build\n- **Code Splitting**: Feature-based modules for optimal loading\n- **Image Optimization**: Optimized assets for faster loading\n- **Lazy Loading**: Ready for component-level lazy loading\n\n## 🤝 Contributing\n\nWe welcome contributions! Please follow these guidelines:\n\n1. **Fork** the repository\n2. **Create** a feature branch (`git checkout -b feature/amazing-feature`)\n3. **Commit** your changes (`git commit -m 'Add amazing feature'`)\n4. **Push** to the branch (`git push origin feature/amazing-feature`)\n5. **Open** a Pull Request\n\n### **Development Guidelines**\n- Follow the feature-based architecture\n- Use TypeScript for type safety\n- Write meaningful commit messages\n- Test your changes thoroughly\n- Update documentation as needed\n\n## 📄 License\n\nThis project is licensed under the **MIT License** - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **[Shadcn/UI](https://ui.shadcn.com)** - Beautiful, accessible component library\n- **[Supabase](https://supabase.com)** - Backend-as-a-Service platform\n- **[Vite](https://vitejs.dev)** - Next-generation frontend tooling\n- **[Tailwind CSS](https://tailwindcss.com)** - Utility-first CSS framework\n- **[Radix UI](https://www.radix-ui.com)** - Low-level UI primitives\n\n## 🤖 Built with AI Assistance\n\nThis project demonstrates **modern AI-assisted development**:\n\n- **� Claude Sonnet 4**: Architecture design and code generation\n- **💻 GitHub Copilot**: AI pair programming for faster development  \n- **🎨 Lovable**: AI-powered frontend generation for rapid prototyping\n- **🗄️ Supabase**: Intelligent backend services with auto-generated types\n\n---\n\n**⭐ Star this repository if you found it helpful!**\n\nMade with ❤️ using modern React and AI assistance.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremojs%2Ftaskify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fremojs%2Ftaskify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fremojs%2Ftaskify/lists"}