🧭 Todo App (SvelteKit Demo)

This small project was built to explore SvelteKit’s SSR/CSR model, component design, and client-server communication patterns — while applying software architecture and code-quality practices.

🚀 Features

✅ Add, edit, delete, complete, search, and list todos.

✅ Reusable modal component for both adding and editing tasks.

✅ SSR for initial data loading.

✅ Clean separation between server and client logic.

⚙️ How to Run Locally

1️⃣ Clone the repository

git clone https://github.com/myasul/svelte-todo.git
cd svelte-todo

2️⃣ Install dependencies

npm install

3️⃣ Run the development server

npm run dev

Then open your browser and visit:

👉 http://localhost:5173

4️⃣ (Optional) Build for production npm run build npm run preview

🧩 Architecture Overview

🔹 TodoService — Server-Side Logic

Located in src/lib/server/TodoService.ts

• Handles reading, writing, and updating todos from a local JSON “database”
• Used by /api/todos endpoints for SSR and data persistence

🔹 TodoApi — Client-Side Fetch Layer

Located in src/lib/client/TodoApi.ts

• Abstracts fetch() calls for CRUD operations
• Centralizes error handling and response parsing
• Keeps frontend logic clean and reusable

🔹 +page.svelte — Frontend UI

Located in src/routes/+page.svelte

• SSR fetches all todos on first paint

• Local reactive states:

  • allTodos: source of truth
  • visibleTodos: current filtered view
  • pageState: app mode (Idle, Adding, Editing)
  • selectedTodo: currently edited todo

• TodoModal reused for both add and edit workflows

• filterTodos utility handles client-side search logic

🔄 Separation of Concerns

This pattern mirrors a clean architecture approach — easy to scale or replace data sources later.

⚡ SSR + Client Updates

• Initial load: SSR provides the todo list for a fast first paint
• Subsequent actions: CSR fetches updates via API routes without a full reload
• Search: client-side only for responsiveness and simplicity

🧑‍💻 Tech Stack

• Framework: SvelteKit
• Language: TypeScript
• Styling: TailwindCSS
• Persistence: Local JSON file (simulating a DB)
• Rendering: SSR (SvelteKit load function) + CSR updates