Todo App - Svelte + TypeScript Edition

A modern, responsive todo application built with Svelte 5 and TypeScript, featuring a beautiful purple gradient design with gold accents.

Features

• ✨ Svelte 5 + TypeScript - Modern, reactive framework with type safety
• 🎨 Beautiful UI - Purple gradient background with gold accents
• ➕ Add tasks - Easy task creation with form input
• ✅ Toggle completion - Mark tasks as complete/incomplete
• 🗑️ Delete tasks - Remove tasks with a click
• ✏️ Edit tasks - Modify task text
• 🔍 Filter tabs - View All, Active, or Completed tasks
• 📊 Statistics - See task counts at a glance
• 🎯 Drag & drop - Reorder tasks easily
• 💾 Local storage - Tasks persist in browser storage
• 📱 Responsive design - Works great on mobile and desktop
• ⚡ Fast builds - Optimized Vite configuration

Tech Stack

• Svelte 5 - Reactive UI framework
• TypeScript - Type safety
• Vite - Fast build tool and dev server
• Svelte-dnd-action - Drag and drop functionality
• Express - Backend API (for database integration)

Installation

1. Install dependencies:

   npm install
   

Development

Run the development server:

npm run dev

The app will be available at http://localhost:5173

Build

Create an optimized production build:

npm run build

The build output will be in the dist/ directory.

Preview

Preview the production build:

npm run preview

Project Structure

todo-app/
├── src/
│   ├── App.svelte          # Main application component
│   ├── main.ts            # Entry point
│   ├── TaskForm.svelte    # Task input form
│   ├── TaskList.svelte    # Task list with drag & drop
│   ├── TaskItem.svelte    # Individual task component
│   ├── FilterTabs.svelte  # Filter buttons
│   ├── StatsDisplay.svelte # Statistics display
│   ├── vite-env.d.ts      # TypeScript types for Vite
│   └── svelte-dnd-action.d.ts # Type definitions for drag & drop
├── public/
│   └── index.html         # HTML entry point
├── index.js               # Express server (backend)
├── package.json           # Dependencies and scripts
├── tsconfig.json          # TypeScript configuration
├── vite.config.ts         # Vite configuration
└── dist/                  # Build output (generated)

Component Details

App.svelte

Main application component that manages:

• Task state (tasks array)
• Current filter state
• Task CRUD operations
• Statistics calculation

TaskForm.svelte

Form component for adding new tasks with:

• Text input with enter key support
• Validation
• Add button

TaskList.svelte

Displays and manages the list of tasks with:

• Drag and drop reordering
• Filter display
• Task actions (edit, delete)
• Accessibility features

FilterTabs.svelte

Filter buttons for viewing:

• All tasks
• Active tasks only
• Completed tasks only

StatsDisplay.svelte

Shows task statistics:

• Total count
• Completed count
• Active count
• Custom message based on state

TaskItem.svelte

Individual task display with:

• Checkbox for completion
• Task text
• Edit and delete buttons
• Drag handle

Styling

The app uses a beautiful purple gradient design:

• Primary gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%)
• Gold accents: #d4af37
• Clean white container with shadow
• Smooth animations and transitions

Responsive Design

The app is fully responsive:

• Mobile: 12px padding, smaller fonts, stacked form
• Desktop: 24px padding, larger fonts, side-by-side form
• All screens have consistent spacing and typography

Running the Backend

For database integration, you can run the Express backend:

npm start

This will start the API server on port 3000. The frontend will proxy requests to /api through Vite's dev server.

Database Support

The app supports SQLite database integration. When no tasks are found in localStorage, it will attempt to load from restaurants.db. You'll need to set up the database schema in the Express backend.

Browser Compatibility

• Chrome/Edge: ✓
• Firefox: ✓
• Safari: ✓
• Mobile browsers: ✓

License

ISC