{"id":31041292,"url":"https://github.com/4cecoder/todo","last_synced_at":"2025-09-14T09:54:08.449Z","repository":{"id":314677324,"uuid":"1056380095","full_name":"4cecoder/todo","owner":"4cecoder","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-14T03:08:56.000Z","size":458,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-14T03:13:46.117Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/4cecoder.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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-09-14T00:56:48.000Z","updated_at":"2025-09-14T03:08:59.000Z","dependencies_parsed_at":"2025-09-14T03:13:52.503Z","dependency_job_id":"b4ee2121-f55e-4d12-9586-b33c951d2668","html_url":"https://github.com/4cecoder/todo","commit_stats":null,"previous_names":["4cecoder/todo"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/4cecoder/todo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4cecoder%2Ftodo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4cecoder%2Ftodo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4cecoder%2Ftodo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4cecoder%2Ftodo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/4cecoder","download_url":"https://codeload.github.com/4cecoder/todo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/4cecoder%2Ftodo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275088386,"owners_count":25403373,"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-09-14T02:00:10.474Z","response_time":75,"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-09-14T09:54:07.149Z","updated_at":"2025-09-14T09:54:08.432Z","avatar_url":"https://github.com/4cecoder.png","language":"TypeScript","readme":"# Todo App\n\nA modern, full-stack todo application built with Next.js 15, TypeScript, ConvexDB, and Clerk authentication. Features real-time synchronization, category organization, and a beautiful responsive UI.\n\n![Todo App Screenshot](https://via.placeholder.com/800x400/3B82F6/FFFFFF?text=Todo+App+Screenshot)\n\n## ✨ Features\n\n- ✅ **Real-time Synchronization** - Changes sync instantly across all devices\n- ✅ **Secure Authentication** - Powered by Clerk.js with social login support\n- ✅ **Category Organization** - Organize todos with customizable categories\n- ✅ **Progress Tracking** - Visual progress bars and completion statistics\n- ✅ **Responsive Design** - Works perfectly on desktop, tablet, and mobile\n- ✅ **TypeScript** - Full type safety throughout the application\n- ✅ **Modern UI** - Built with Tailwind CSS and shadcn/ui components\n- ✅ **Database** - Real-time database with ConvexDB\n- ✅ **API** - RESTful API with comprehensive documentation\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n- Node.js 18.0 or higher\n- npm, bun, or yarn package manager\n- Git\n\n### Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd todo-app\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   # or\n   bun install\n   ```\n\n3. **Set up environment variables**\n\n   ```bash\n   cp .env.example .env.local\n   ```\n\n   Edit `.env.local` with your credentials:\n\n   ```env\n   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_your_key\n   CLERK_SECRET_KEY=sk_test_your_secret\n   NEXT_PUBLIC_CONVEX_URL=https://your-deployment.convex.cloud\n   NEXT_PUBLIC_APP_URL=http://localhost:3000\n   ```\n\n4. **Set up Clerk Authentication**\n   - Create account at [Clerk Dashboard](https://dashboard.clerk.com/)\n   - Create a new application\n   - Copy API keys to your `.env.local`\n\n5. **Set up Convex Database**\n\n   ```bash\n   npx convex dev --once\n   npx convex deploy\n   ```\n\n6. **Run the development server**\n\n   ```bash\n   npm run dev\n   # or\n   bun dev\n   ```\n\n7. **Open your browser**\n   - Navigate to [http://localhost:3000](http://localhost:3000)\n   - Sign up for a new account or sign in\n\n## 📖 Documentation\n\n### User Guides\n\n- **[User Guide](docs/user-guide.md)** - Complete user manual with screenshots and examples\n- **[Setup Guide](docs/setup-guide.md)** - Step-by-step setup instructions for development and production\n- **[Deployment Guide](docs/deployment-guide.md)** - Deploy to Vercel, Netlify, AWS, and more\n\n### Developer Documentation\n\n- **[API Documentation](docs/api-docs.md)** - Complete API reference with examples\n- **[Best Practices](docs/best-practices.md)** - Development guidelines and patterns\n- **[Troubleshooting](docs/other/troubleshooting.md)** - Common issues and solutions\n- **[Vercel Playwright Optimization](docs/vercel-playwright-optimization.md)** - Build optimization guide\n\n### Project Documentation\n\n- **[Product Requirements](docs/PRD.md)** - Product vision and requirements\n- **[Research Notes](docs/research-notes.md)** - Technical research and decisions\n- **[Calendar Sync](docs/calendar-sync/)** - Calendar integration documentation\n\n## 🛠️ Tech Stack\n\n### Frontend\n\n- **Next.js 15** - React framework with App Router\n- **TypeScript** - Type-safe JavaScript\n- **Tailwind CSS** - Utility-first CSS framework\n- **shadcn/ui** - Modern UI components\n- **Lucide Icons** - Beautiful icon library\n\n### Backend\n\n- **ConvexDB** - Real-time database\n- **Clerk** - Authentication and user management\n- **Next.js API Routes** - Server-side functionality\n\n### Development Tools\n\n- **ESLint** - Code linting\n- **Prettier** - Code formatting\n- **Jest** - Unit testing\n- **Playwright** - End-to-end testing\n- **Vitest** - Fast unit testing\n\n## 📁 Project Structure\n\n```\ntodo-app/\n├── app/                    # Next.js app router pages\n│   ├── api/               # API routes\n│   ├── profile/           # User profile page\n│   ├── sign-in/           # Authentication pages\n│   ├── sign-up/\n│   └── todos/             # Main todos page\n├── components/            # Reusable React components\n│   ├── ui/               # shadcn/ui components\n│   └── AuthGuard.tsx     # Authentication guard\n├── convex/               # ConvexDB backend\n│   ├── todos.ts          # Todo operations\n│   ├── categories.ts     # Category operations\n│   ├── schema.ts         # Database schema\n│   └── auth.config.js    # Authentication config\n├── docs/                 # Documentation\n├── lib/                  # Utility functions\n├── public/               # Static assets\n└── tests/                # Test files\n```\n\n## 🔧 Available Scripts\n\n```bash\n# Development\nnpm run dev          # Start development server\nnpm run build        # Build for production\nnpm run build:optimized # Optimized production build (no Playwright)\nnpm run start        # Start production server\nnpm run lint         # Run ESLint\n\n# Testing\nnpm test            # Run unit tests\nnpm run test:ui     # Run tests with UI\nnpm run test:coverage # Generate coverage report\n\n# Database\nnpx convex dev       # Start Convex development\nnpx convex deploy    # Deploy Convex functions\nnpx convex dashboard # Open Convex dashboard\n\n# Verification\nnode verify-auth-setup.js # Verify authentication setup\n```\n\n## 🚀 Deployment\n\n### Vercel (Recommended) - Optimized for Fast Builds\n\n1. **Connect your repository** to Vercel\n2. **Add environment variables** in Vercel dashboard\n3. **Deploy automatically** on every push to main\n\n#### ⚡ Build Optimizations\n\nThis project includes comprehensive optimizations to prevent Playwright from slowing down Vercel builds:\n\n- **60-70% faster builds** by skipping Playwright browser downloads\n- **Reduced resource usage** with optimized dependency management\n- **Automatic environment configuration** via `vercel.json`\n- **Dedicated production build script** for maximum efficiency\n\n**Key Optimizations:**\n\n- `PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1` in Vercel environment\n- Conditional postinstall scripts that skip browser downloads in production\n- Firefox-only Playwright configuration for CI/CD compatibility\n- Optimized build scripts that ignore unnecessary dependencies\n\n**Usage:**\n\n```bash\n# For local production builds (optimized)\nnpm run build:optimized\n\n# For Vercel deployment (automatic)\nnpm run deploy:prod\n```\n\nSee [Vercel Playwright Optimization Guide](docs/vercel-playwright-optimization.md) for detailed technical information.\n\n### Other Platforms\n\n- **[Netlify](docs/deployment-guide.md#netlify-deployment)**\n- **[Railway](docs/deployment-guide.md#railway-deployment)**\n- **[AWS](docs/deployment-guide.md#aws-deployment)**\n- **[Docker](docs/deployment-guide.md#docker-deployment)**\n\n## 🔐 Authentication\n\nThe app uses Clerk for authentication with the following features:\n\n- **Email/Password** authentication\n- **Social login** (Google, GitHub, etc.)\n- **User profiles** with avatars\n- **Session management**\n- **Secure API access**\n\n## 💾 Database Schema\n\n### Users Table\n\n```typescript\n{\n  _id: Id\u003c\"users\"\u003e\n  clerkId: string\n  email: string\n  name?: string\n  createdAt: number\n}\n```\n\n### Categories Table\n\n```typescript\n{\n  _id: Id\u003c'categories'\u003e\n  userId: Id\u003c'users'\u003e\n  name: string\n  color: string\n  createdAt: number\n}\n```\n\n### Todos Table\n\n```typescript\n{\n  _id: Id\u003c\"todos\"\u003e\n  userId: Id\u003c\"users\"\u003e\n  categoryId?: Id\u003c\"categories\"\u003e\n  title: string\n  description?: string\n  completed: boolean\n  createdAt: number\n  updatedAt: number\n}\n```\n\n## 🧪 Testing\n\n### Unit Tests\n\n```bash\nnpm test\n```\n\n### End-to-End Tests\n\n```bash\nnpx playwright test\n```\n\n### Test Coverage\n\n```bash\nnpm run test:coverage\n```\n\n## 🤝 Contributing\n\n1. **Fork the repository**\n2. **Create a feature branch**: `git checkout -b feature/your-feature`\n3. **Make your changes** and add tests\n4. **Run the test suite**: `npm test`\n5. **Commit your changes**: `git commit -m 'Add your feature'`\n6. **Push to the branch**: `git push origin feature/your-feature`\n7. **Open a Pull Request**\n\n### Development Guidelines\n\n- Follow the existing code style\n- Write comprehensive tests\n- Update documentation as needed\n- Use TypeScript for all new code\n- Follow conventional commit messages\n\n## 📊 Performance\n\n- **Lighthouse Score**: 95+ on all metrics\n- **First Contentful Paint**: \u003c 1.5s\n- **Time to Interactive**: \u003c 3s\n- **Bundle Size**: \u003c 200KB gzipped\n\n## 🔒 Security\n\n- **HTTPS Only**: All communications encrypted\n- **Secure Headers**: CSP, HSTS, and other security headers\n- **Input Validation**: All inputs validated and sanitized\n- **Authentication**: JWT-based secure authentication\n- **Authorization**: Row-level security with ConvexDB\n\n## 📈 Analytics \u0026 Monitoring\n\n- **Vercel Analytics**: Built-in performance monitoring\n- **Convex Dashboard**: Database monitoring and logs\n- **Clerk Dashboard**: Authentication monitoring\n- **Error Tracking**: Sentry integration for error monitoring\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n1. **Authentication not working**\n   - Check Clerk configuration\n   - Verify environment variables\n   - Clear browser cache\n\n2. **Database connection issues**\n   - Verify Convex URL\n   - Check network connectivity\n   - Review Convex dashboard\n\n3. **Build failures**\n   - Check Node.js version (18+)\n   - Clear node_modules and reinstall\n   - Check for TypeScript errors\n\nSee **[Troubleshooting Guide](docs/other/troubleshooting.md)** for detailed solutions.\n\n## 📚 Resources\n\n- [Next.js Documentation](https://nextjs.org/docs)\n- [ConvexDB Documentation](https://docs.convex.dev/)\n- [Clerk Documentation](https://clerk.com/docs)\n- [Tailwind CSS](https://tailwindcss.com/docs)\n- [shadcn/ui](https://ui.shadcn.com/)\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- **Next.js Team** for the amazing framework\n- **Convex** for the real-time database\n- **Clerk** for authentication\n- **shadcn** for the beautiful UI components\n- **Tailwind CSS** for the styling system\n\n## 📞 Support\n\n- **Documentation**: [docs/](docs/)\n- **Issues**: [GitHub Issues](https://github.com/your-repo/issues)\n- **Discussions**: [GitHub Discussions](https://github.com/your-repo/discussions)\n\n---\n\n**Happy todo-ing! 🎉**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4cecoder%2Ftodo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F4cecoder%2Ftodo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F4cecoder%2Ftodo/lists"}