Advanced Todo List PWA

A modern, full-stack Progressive Web Application (PWA) todo list built with React, TypeScript, Vite, Tailwind CSS, and Neon PostgreSQL. Features complete user authentication, category management, cross-device synchronization, and mobile-optimized responsive design.

🚀 Features

• ✅ Modern Stack: Built with React 19, TypeScript, and Vite
• 🎨 Beautiful UI: Styled with Tailwind CSS with mobile-first responsive design
• 📱 Progressive Web App: Installable on all devices with offline support
• 🔐 User Authentication: Secure login/signup with JWT tokens and database persistence
• 🗄️ Neon Database: PostgreSQL cloud database for cross-device synchronization
• 🏷️ Category Management: Create, edit, and delete custom todo categories
• 📊 Priority Levels: Organize todos with Low, Medium, High priority indicators
• 📅 Due Dates: Set and track due dates with overdue indicators and calendar integration
• 🔍 Advanced Filtering: Filter by status, priority, category, due date, and search functionality
• � Offline Support: Service worker caching for offline functionality
• 🔄 Real-time Sync: Automatic synchronization across devices and browsers
• � Mobile Optimized: Touch-friendly interface with proper viewport handling
• 🎯 Intuitive UX: Clean, modern interface with smooth animations and micro-interactions

🛠️ Tech Stack

• Frontend: React 19, TypeScript, Vite
• Backend: Neon PostgreSQL (Serverless)
• Styling: Tailwind CSS
• Icons: Heroicons
• Forms: React Hook Form with Zod validation
• Authentication: Custom JWT implementation with secure token handling
• PWA: Vite PWA plugin with Workbox service worker
• Storage: Neon Database + localStorage fallback
• Deployment: Netlify with automatic builds
• CI/CD: Netlify Build with environment variables

📦 Installation

1. Clone the repository:

git clone <your-repo-url>
cd todolist

2. Install dependencies:

npm install

3. Create environment file:

cp .env.example .env

4. Start the development server:

npm run dev

🚀 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🌐 Live Demo

🔗 Live Application: https://legendary-pithivier-da3424.netlify.app

🚀 Deployment to Netlify

This project is configured with netlify.toml for automatic deployments.

Automatic Deployment

1. Push your code to GitHub
2. Connect your repository to Netlify
3. Netlify will automatically:
   • Install dependencies
   • Build the project
   • Deploy to production
   • Set up PWA features

Environment Variables

The following environment variables are configured in Netlify:

VITE_DATABASE_URL=postgresql://[user]:[password]@[host]/[database]
VITE_JWT_SECRET=your-secure-jwt-secret-key-here
VITE_APP_NAME=Advanced Todo List

⚠️ Security Note: Never commit actual secrets to your repository. Use strong, unique secrets for production.

Manual Deployment

# Build and deploy
npm run build
netlify deploy --prod --dir=dist

🗂️ Project Structure

src/
├── components/          # Reusable UI components
│   ├── CategoryManager.tsx  # Category CRUD management
│   ├── Header.tsx          # Main navigation header
│   ├── InstallButton.tsx   # PWA install prompt
│   ├── LoginForm.tsx       # User login form
│   ├── SignupForm.tsx      # User registration form
│   ├── TodoFilters.tsx     # Advanced filtering system
│   ├── TodoForm.tsx        # Add/edit todo modal
│   └── TodoItem.tsx        # Individual todo item
├── contexts/            # React Context providers
│   └── AuthContext.tsx     # Authentication state management
├── hooks/              # Custom React hooks
│   ├── useCategories.ts    # Category management
│   └── useTodos.ts         # Todo CRUD operations
├── lib/                # Utility functions and services
│   ├── auth.ts             # Authentication utilities
│   ├── authApi.ts          # Authentication API layer
│   ├── authDatabase.ts     # User database operations
│   ├── authLocal.ts        # Local authentication fallback
│   ├── categoryDatabase.ts # Category database operations
│   ├── database.ts         # Neon database client
│   ├── todoDatabase.ts     # Todo database operations
│   └── utils.ts           # Helper utilities
├── pages/              # Page components
│   ├── AuthPage.tsx        # Login/signup page
│   └── Dashboard.tsx       # Main todo dashboard
├── types/              # TypeScript type definitions
│   └── index.ts           # App-wide types
├── App.tsx             # Root component with routing
├── main.tsx           # App entry point with PWA
└── index.css          # Global styles with mobile optimizations

🎯 Usage

Getting Started

1. Create Account: Sign up with email and password
2. Login: Use your credentials to access your todos
3. Install PWA: Click the install button to add to your home screen

Managing Todos

1. Add Todo: Click "Add Todo" button to create new tasks
2. Set Priority: Choose Low, Medium, or High priority levels
3. Assign Category: Select or create custom categories
4. Set Due Date: Add deadlines with calendar picker
5. Edit Todo: Click edit icon to modify existing todos
6. Complete Todo: Check the box to mark as completed
7. Delete Todo: Use trash icon to permanently remove

Organization & Filtering

1. Search: Use search bar for title/description lookup
2. Filter by Status: All, Active, or Completed todos
3. Filter by Priority: Filter by Low, Medium, High priority
4. Filter by Category: Show todos from specific categories
5. Filter by Due Date: Today, This Week, Overdue options
6. Manage Categories: Create, edit, and delete categories

Synchronization

• Cross-Device: Login from any device to access your todos
• Offline Support: App works offline, syncs when reconnected
• Real-time Updates: Refresh button syncs latest changes

🔮 Future Enhancements

• 👥 Collaboration and sharing features
• 🔔 Push notifications for due dates
• 🌙 Dark mode toggle
• 📊 Advanced analytics and insights
• 🏷️ Tag system beyond categories
• 📱 Native mobile apps
• 🔄 Recurring todos
• 📎 File attachments
• ⏰ Time tracking

🤝 Contributing

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

� PWA Features

• Installable: Add to home screen on any device
• Offline Support: Works without internet connection
• Service Worker: Caches app resources for fast loading
• Responsive: Optimized for desktop, tablet, and mobile
• App-like Experience: Full-screen mode with native feel

🗃️ Database Schema

Users Table

CREATE TABLE users (
  id TEXT PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  password_hash TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

Categories Table

CREATE TABLE categories (
  id TEXT PRIMARY KEY,
  user_id TEXT REFERENCES users(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  color TEXT DEFAULT '#3B82F6',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

Todos Table

CREATE TABLE todos (
  id TEXT PRIMARY KEY,
  user_id TEXT REFERENCES users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  description TEXT,
  completed BOOLEAN DEFAULT false,
  priority TEXT CHECK (priority IN ('low', 'medium', 'high')),
  category TEXT DEFAULT 'General',
  due_date TIMESTAMPTZ,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

🚀 Performance

• Build Size: ~580KB (gzipped: ~178KB)
• Lighthouse Score: 95+ Performance, 100 Accessibility
• Mobile Optimized: Touch-friendly 44px minimum touch targets
• Fast Loading: Service worker caching and code splitting
• Database: Neon serverless PostgreSQL with connection pooling

�📄 License

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

🙏 Acknowledgments

• React - UI library
• Vite - Build tool
• Tailwind CSS - Styling
• Neon - Serverless PostgreSQL
• Netlify - Hosting and deployment
• Heroicons - Beautiful icons

---

Built with ❤️ using React 19, TypeScript, Tailwind CSS, and Neon PostgreSQL