📝 GDG To-Do List

A modern, feature-rich task management application with authentication

Features • Demo • Installation • Usage • Tech Stack • Contributing

---

📋 Overview

GDG To-Do List is a powerful, intuitive task management application built for productivity enthusiasts. Featuring seamless Google OAuth integration, real-time task updates, and an elegant user interface, it provides everything you need to stay organized and productive.

✨ Features

🔐 Authentication & Security

• Google OAuth 2.0 - Secure authentication via Supabase
• Email/Password Login - Alternative authentication method
• Persistent Sessions - Stay logged in across browser sessions
• Secure Logout - Safe session termination

✅ Task Management

• Smart Task Creation - Add tasks with optional date/time metadata
• Inline Editing - Click any task to edit in place
• Status Tracking - Mark tasks as complete/incomplete
• Soft Delete - Tasks move to trash before permanent deletion
• Task Recovery - Restore deleted tasks from trash
• Bulk Operations - Clear all trashed tasks at once

🎯 Organization & Filtering

• All Tasks View - Complete overview of active tasks
• Active Filter - Focus on pending work
• Completed Filter - Review finished tasks
• Trash View - Manage deleted items

🎨 User Experience

• Responsive Design - Optimized for desktop, tablet, and mobile
• Modern UI/UX - Clean, Google Material-inspired interface
• Smooth Animations - Polished transitions and interactions
• Loading States - Visual feedback during async operations
• User Profile Display - Avatar and name in app header

🚀 Demo

Live Application: https://todo.gowreesh.works

Screenshots

Main Interface

• Clean task list with sidebar navigation
• Intuitive add task interface
• Profile section with logout option

Login Modal

• Google OAuth integration
• Email/password alternative

💻 Tech Stack

Frontend

• HTML5 - Semantic markup and structure
• CSS3 - Modern styling with flexbox, grid, and animations
• JavaScript (ES6+) - Vanilla JS with OOP principles

Backend & Services

• Supabase - Authentication and backend services
• Google OAuth 2.0 - Third-party authentication

Libraries & Tools

• Font Awesome - Icon library
• Google Fonts - Typography (Segoe UI)

📦 Installation

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Supabase account (for authentication setup)
• Node.js (optional, for local development server)

Quick Start

1. Clone the repository

   git clone https://github.com/Gowreesh-VT/GDG-To-Do-List.git
   cd GDG-To-Do-List

2. Configure Supabase

   Create a Supabase project at supabase.com

   Enable Google OAuth:

   • Navigate to Authentication → Providers
   • Enable Google provider
   • Configure OAuth credentials

3. Update Configuration

   Edit JS/script.js with your Supabase credentials:

   this.supabaseUrl = 'YOUR_SUPABASE_PROJECT_URL';
   this.supabaseKey = 'YOUR_SUPABASE_ANON_KEY';

4. Deploy

   Option A: Local Development

   # Using Python
   python -m http.server 8000
   
   # Using Node.js
   npx serve

   Option B: Static Hosting

   • GitHub Pages
   • Netlify
   • Vercel
   • Cloudflare Pages

🎯 Usage

Getting Started

1. Authentication

   • Click "Continue with Google" for OAuth login
   • Or use email/password credentials

2. Adding Tasks

   • Enter task description in the input field
   • (Optional) Set date and time
   • Press Enter or click Add button

3. Managing Tasks

   • ✓ Click checkbox to mark complete
   • ✏️ Click task text to edit inline
   • 🗑️ Click delete icon to move to trash

4. Filtering Tasks

   • Use sidebar to switch between views
   • All → Active → Completed → Trash

5. Trash Management

   • Restore individual tasks
   • Clear all permanently

Keyboard Shortcuts

Shortcut	Action
Enter	Add new task (when input focused)
Click	Edit task inline

🏗️ Project Structure

GDG-To-Do-List/
├── index.html              # Main application
├── CNAME                   # Custom domain config
├── README.md               # Documentation
│
├── CSS/
│   └── style.css          # Styles and animations
│
├── HTML/
│   └── login.html         # Alternative login page
│
└── JS/
    └── script.js          # Application logic

🔧 Configuration

Environment Variables

For production deployments, use environment variables:

// Example: Using Netlify environment variables
const SUPABASE_URL = process.env.SUPABASE_URL;
const SUPABASE_KEY = process.env.SUPABASE_ANON_KEY;

Customization

Colors & Themes (CSS/style.css)

:root {
  --primary-color: #your-color;
  --background-gradient: your-gradient;
}

Task Storage (JS/script.js)

• Currently uses localStorage
• Can be extended to Supabase database

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development Guidelines

• Follow existing code style
• Add comments for complex logic
• Test on multiple browsers
• Update documentation as needed

🐛 Known Issues

• Tasks are stored locally (no cloud sync yet)
• No task categories/tags (planned feature)
• No push notifications for due dates

🗺️ Roadmap

• Cloud sync with Supabase database
• Task categories and tags
• Priority levels (high, medium, low)
• Due date notifications
• Search and advanced filtering
• Dark/Light theme toggle
• Task sharing and collaboration
• Mobile app (React Native)

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Gowreesh VT

• GitHub: @Gowreesh-VT
• Website: gowreesh.works

🙏 Acknowledgments

• Google Developer Group (GDG) - Project inspiration
• Supabase - Authentication infrastructure
• Font Awesome - Icon library
• Google Fonts - Typography
• Open source community

📞 Support

For support, please:

• Open an issue on GitHub
• Contact: [Your Email]

---

⭐ Star this repository if you find it helpful!

Made with ❤️ by Gowreesh VT