📝 Svelte Todo List App

A modern, lightweight Todo List web application built using Svelte 5, TypeScript, and Vite.
The app focuses on clean UI, reactive state management, and a modular component-based architecture.

🚀 Features

• ➕ Add new todos
• ✅ Mark tasks as completed
• 🗑️ Remove todos
• 🔁 Reactive state management using Svelte stores
• 🧩 Component-based structure
• ⚡ Fast development & build thanks to Vite
• 🛡️ Fully typed with TypeScript

🛠️ Tech Stack

Core Frameworks

• Svelte 5 – reactive UI framework
• TypeScript – static typing and better developer experience
• Vite – fast development server and optimized builds

Tooling & Configuration

• @sveltejs/vite-plugin-svelte – Svelte integration for Vite
• svelte-check – static analysis and type checking
• @tsconfig/svelte – recommended TypeScript config for Svelte

📁 Project Structure

src/
├── app.css                # Global styles
├── App.svelte             # Root component
├── main.ts                # App entry point
├── vite-env.d.ts          # Vite type declarations
├── lib/
│   ├── AddTodo.svelte     # Component for adding new tasks
│   ├── Header.svelte      # Application header
│   ├── TodoItem.svelte    # Single todo item
│   └── TodoList.svelte    # List of todos
└── store/
    └── todos.ts           # Svelte store for todo state

🧠 State Management

The application uses Svelte stores (writable) to manage the todo list globally.
This allows components to reactively update when the state changes without prop drilling.

▶️ Getting Started

1️⃣ Install dependencies

npm install

2️⃣ Run development server

npm run dev

App will be available at:

http://localhost:5173

✅ Type Checking

npm run check

Runs svelte-check and TypeScript validation.

🎯 Purpose

This project was created as a learning and portfolio project, demonstrating:

• Modern Svelte 5 syntax
• Component communication
• Reactive stores
• Type-safe frontend development

📄 License

This is an open-source project. Feel free to use and modify it as needed!