Svelte Study Planner

This project is a simple task management application built with SvelteKit. It was created as a beginner-friendly tutorial project to explore Svelte as an alternative frontend framework to React.

The application allows users to add tasks, mark them as completed, delete tasks, and save tasks in the browser using localStorage.

Project Purpose

The purpose of this project is to demonstrate how Svelte can be used to build a small interactive web application. It also introduces several core Svelte concepts, including component structure, reactivity, event handling, data binding, conditional rendering, list rendering, and browser storage.

This project is designed for students who are familiar with React and want to see how Svelte differs in syntax and development style.

Features

• Add new tasks
• Mark tasks as completed
• Delete tasks
• Save tasks with localStorage
• Restore tasks after page refresh
• Simple and clean user interface

Technologies Used

• SvelteKit
• Svelte 5
• JavaScript
• HTML
• CSS
• localStorage

How to Run the Project

1. Clone the repository

git clone <>

2. Open the project folder

cd svelte-study-planner

3. Install dependencies

npm install

4. Start the development server

npm run dev

5. Open the local URL shown in the terminal

Project Structure

src/
├── lib/
│   └── TodoApp.svelte
├── routes/
│   └── +page.svelte

File Explanation

• TodoApp.svelte: contains the main todo application logic and interface
• +page.svelte: imports and displays the TodoApp component as the main page

Main Svelte Concepts Demonstrated

1. Components

This project uses a Svelte component called TodoApp.svelte to organize the main application UI and logic.

2. Reactivity

The app uses Svelte 5 reactive state with $state(...). When the task list changes, the UI updates automatically.

3. Data Binding

The input field uses bind:value={newTask} so the variable always stays in sync with the text box.

4. Event Handling

The app uses event handlers such as:

• onclick={addTask}
• onclick={() => deleteTask(task.id)}
• onkeydown={(e) => e.key === 'Enter' && addTask()}

These handlers make the application interactive.

5. Conditional Rendering

The app uses {#if} to show a message when there are no tasks.

6. List Rendering

The app uses {#each} to display all tasks in the array.

7. Browser Storage

The app uses localStorage to save tasks so they remain available after the page is refreshed.

How localStorage Works in This Project

When the application is loaded, it checks whether saved tasks already exist in localStorage. If they do, the tasks are loaded into the app.

Whenever a task is added, completed, or deleted, the updated task list is saved back into localStorage.

This makes the app more practical and improves the user experience.

Comparison Between Svelte and React

This project also helped me compare Svelte with React.

Similarities

• Both are used to build interactive user interfaces
• Both support component-based development
• Both can be used for modern frontend applications

Differences

Svelte

• Uses a more HTML-like syntax
• Has built-in reactivity
• Requires less boilerplate for simple state updates
• Supports direct binding like bind:value

React

• Uses JSX
• Typically relies on hooks such as useState
• Often requires more code for forms and state updates
• Has a larger ecosystem and broader industry adoption

Reflection

Through this project, I found that Svelte is simple and beginner-friendly for building small applications. Features like direct binding and built-in reactivity make the code easier to read and write.

Compared with React, Svelte feels more straightforward for basic projects because there is less setup and less boilerplate. However, React still has advantages in terms of ecosystem, community support, and real-world industry usage.

Overall, Svelte is a strong alternative for frontend development, especially for developers who want a lightweight and elegant framework.

Future Improvements

If this project were expanded further, possible improvements could include:

• task filtering
• task categories
• task priority levels
• edit task functionality
• multiple pages with routing
• statistics dashboard

Author

Created for a web development assignment exploring a technology outside the course material.