{"id":31763436,"url":"https://github.com/caisere/todoapp-vue","last_synced_at":"2026-05-09T16:41:04.857Z","repository":{"id":316280426,"uuid":"1062735109","full_name":"Caisere/TodoApp-Vue","owner":"Caisere","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-23T16:55:50.000Z","size":319,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-23T18:33:17.330Z","etag":null,"topics":["pinia","supabase","tailwindcss-v3","tanstack-query","typescript","vue-router","vue3"],"latest_commit_sha":null,"homepage":"https://todo-app-vue-xi.vercel.app","language":"Vue","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/Caisere.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-09-23T16:47:45.000Z","updated_at":"2025-09-23T16:55:53.000Z","dependencies_parsed_at":"2025-09-23T18:33:19.600Z","dependency_job_id":null,"html_url":"https://github.com/Caisere/TodoApp-Vue","commit_stats":null,"previous_names":["caisere/todoapp-vue"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/Caisere/TodoApp-Vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caisere%2FTodoApp-Vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caisere%2FTodoApp-Vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caisere%2FTodoApp-Vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caisere%2FTodoApp-Vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Caisere","download_url":"https://codeload.github.com/Caisere/TodoApp-Vue/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Caisere%2FTodoApp-Vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279002342,"owners_count":26083340,"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-09T02:00:07.460Z","response_time":59,"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":["pinia","supabase","tailwindcss-v3","tanstack-query","typescript","vue-router","vue3"],"created_at":"2025-10-09T23:20:52.001Z","updated_at":"2025-10-09T23:20:53.764Z","avatar_url":"https://github.com/Caisere.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modern Todo Application (Vue 3 Version)\n\nA feature-rich, responsive Todo application built with Vue 3 and modern web technologies. This is a Vue 3 conversion of the original React todo application, maintaining all the same functionality while leveraging Vue's ecosystem.\n\n![Todo App Screenshot](public/readme.png)\n\n## Features\n\n- ✨ Modern, responsive UI with a clean design built with Vue 3 Composition API\n- 🔐 Authentication with Supabase (Email/Password + GitHub OAuth)\n- 📝 Dynamic Page Titles Based on Routing \n- 🔍 Real-time search functionality\n- 🏷️ Filter todos by status (All/Active/Completed)\n- 📱 Fully responsive design for all devices\n- 💾 Hybrid storage (API + Local Storage)\n- 🚀 Optimistic updates for a snappy UI\n- 📊 Live statistics dashboard\n- ♿ Accessibility features (ARIA labels, semantic HTML)\n- 🎯 Pagination support\n- 🔄 Real-time updates\n\n## Technology Stack\n\n- **Frontend Framework**: Vue 3 with Composition API\n- **State Management**: Pinia\n- **Data Fetching**: TanStack Query (Vue Query)\n- **Styling**: Tailwind CSS\n- **Authentication**: Supabase Auth\n- **Routing**: Vue Router 4\n- **API Client**: Axios\n- **Notifications**: Vue Toastification\n- **Build Tool**: Vite\n- **TypeScript**: Full TypeScript support\n\n## Installation\n\n1. Clone or copy this Vue 3 version\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Set up environment variables:\n\n```bash\ncp .env.example .env\n```\n\nEdit `.env` and add your Supabase credentials:\n```\nVITE_SUPABASE_URL=your_supabase_url_here\nVITE_SUPABASE_KEY=your_supabase_anon_key_here\n```\n\n4. Start the development server:\n\n```bash\nnpm run dev\n```\n\nThe application will be available at `http://localhost:5173`\n\n## Available Scripts\n\n- `npm run dev` - Start development server\n- `npm run build` - Build for production\n- `npm run preview` - Preview production build\n- `npm run type-check` - Run TypeScript type checking\n\n## Vue 3 Architecture\n\n### State Management\n- **Pinia** for global state management (auth, page state)\n- **TanStack Vue Query** for server state management\n- **Local Storage** for offline capabilities\n- **Optimistic Updates** for better UX\n\n### Component Structure\n\n```\nsrc/\n├── components/         # Reusable Vue components\n├── views/              # Route-level components\n├── stores/             # Pinia stores\n├── api/               # API integration layer\n├── services/          # External services (Supabase)\n├── types.ts           # TypeScript type definitions\n└── App.vue           # Root Vue component\n```\n\n## Migration from React\n\nThis Vue 3 version maintains feature parity with the React version while offering:\n\n- **Simpler State Management**: Pinia vs React Context/Redux\n- **Better Performance**: Vue's efficient reactivity system\n- **Cleaner Templates**: Vue's template syntax vs JSX\n- **Built-in Directives**: v-if, v-for, v-model for common patterns\n- **Composition API**: Similar to React Hooks but more flexible\n\n## Authentication\n\nThe app supports multiple authentication methods:\n\n- **Email/Password**: Traditional email and password authentication\n- **GitHub OAuth**: Social login with GitHub\n- **Session Management**: Automatic token refresh and session handling\n\n## Contributing\n\nContributions are welcome! This Vue 3 version demonstrates modern Vue development patterns and can serve as a reference for Vue 3 applications.\n\n## Acknowledgments\n\n- [Vue.js](https://vuejs.org/) for the amazing framework\n- [Supabase](https://supabase.com/) for authentication\n- [TanStack Query](https://tanstack.com/query/latest) for data management\n- [Pinia](https://pinia.vuejs.org/) for state management\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaisere%2Ftodoapp-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaisere%2Ftodoapp-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaisere%2Ftodoapp-vue/lists"}