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:

npm install

3. Set up environment variables:

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:

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 for the amazing framework
• Supabase for authentication
• TanStack Query for data management
• Pinia for state management