https://github.com/caisere/todoapp-vue
https://github.com/caisere/todoapp-vue
pinia supabase tailwindcss-v3 tanstack-query typescript vue-router vue3
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/caisere/todoapp-vue
- Owner: Caisere
- Created: 2025-09-23T16:47:45.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-09-23T16:55:50.000Z (9 months ago)
- Last Synced: 2025-09-23T18:33:17.330Z (9 months ago)
- Topics: pinia, supabase, tailwindcss-v3, tanstack-query, typescript, vue-router, vue3
- Language: Vue
- Homepage: https://todo-app-vue-xi.vercel.app
- Size: 312 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Modern Todo Application (Vue 3 Version)
A 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.
## Features
- ✨ Modern, responsive UI with a clean design built with Vue 3 Composition API
- 🔐 Authentication with Supabase (Email/Password + GitHub OAuth)
- 📝 Dynamic Page Titles Based on Routing
- 🔍 Real-time search functionality
- 🏷️ Filter todos by status (All/Active/Completed)
- 📱 Fully responsive design for all devices
- 💾 Hybrid storage (API + Local Storage)
- 🚀 Optimistic updates for a snappy UI
- 📊 Live statistics dashboard
- ♿ Accessibility features (ARIA labels, semantic HTML)
- 🎯 Pagination support
- 🔄 Real-time updates
## Technology Stack
- **Frontend Framework**: Vue 3 with Composition API
- **State Management**: Pinia
- **Data Fetching**: TanStack Query (Vue Query)
- **Styling**: Tailwind CSS
- **Authentication**: Supabase Auth
- **Routing**: Vue Router 4
- **API Client**: Axios
- **Notifications**: Vue Toastification
- **Build Tool**: Vite
- **TypeScript**: Full TypeScript support
## Installation
1. Clone or copy this Vue 3 version
2. Install dependencies:
```bash
npm install
```
3. Set up environment variables:
```bash
cp .env.example .env
```
Edit `.env` and add your Supabase credentials:
```
VITE_SUPABASE_URL=your_supabase_url_here
VITE_SUPABASE_KEY=your_supabase_anon_key_here
```
4. Start the development server:
```bash
npm run dev
```
The application will be available at `http://localhost:5173`
## Available Scripts
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run type-check` - Run TypeScript type checking
## Vue 3 Architecture
### State Management
- **Pinia** for global state management (auth, page state)
- **TanStack Vue Query** for server state management
- **Local Storage** for offline capabilities
- **Optimistic Updates** for better UX
### Component Structure
```
src/
├── components/ # Reusable Vue components
├── views/ # Route-level components
├── stores/ # Pinia stores
├── api/ # API integration layer
├── services/ # External services (Supabase)
├── types.ts # TypeScript type definitions
└── App.vue # Root Vue component
```
## Migration from React
This Vue 3 version maintains feature parity with the React version while offering:
- **Simpler State Management**: Pinia vs React Context/Redux
- **Better Performance**: Vue's efficient reactivity system
- **Cleaner Templates**: Vue's template syntax vs JSX
- **Built-in Directives**: v-if, v-for, v-model for common patterns
- **Composition API**: Similar to React Hooks but more flexible
## Authentication
The app supports multiple authentication methods:
- **Email/Password**: Traditional email and password authentication
- **GitHub OAuth**: Social login with GitHub
- **Session Management**: Automatic token refresh and session handling
## Contributing
Contributions are welcome! This Vue 3 version demonstrates modern Vue development patterns and can serve as a reference for Vue 3 applications.
## Acknowledgments
- [Vue.js](https://vuejs.org/) for the amazing framework
- [Supabase](https://supabase.com/) for authentication
- [TanStack Query](https://tanstack.com/query/latest) for data management
- [Pinia](https://pinia.vuejs.org/) for state management