Skip to content
A simple task list project to learn Svelte
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.gitignore
README.md
db.json
package-lock.json
package.json
rollup.config.js

README.md

Svelte Example Project

A simple task list created with Svelte to learn the framework.

Contains:

  • Routing
  • State Management
  • Api Calls (mocked with Json Server)

Installation

Clone the project with git

git clone git@github.com:mnavarrocarter/svelte-task-list.git

Install the project dependencies:

npm ci

Start the fake api using json-server. (You need json-server installed globally)

json-server --watch db.json

And then run the project:

npm run dev

Architecture

Architecture is pretty simple. There's a sort of module (folder) containing all the tasks components. These are three:

  1. AddTask.svelte contains the form an logic to create a Task.
  2. ListTasks.svelte renders a list of tasks in the DOM.
  3. Task.svelte represents a single task usually in the task list.

There's also a tasks.js file that holds the main business logic and contains the tasks store state. This file is crucial for the application. It extends the api provided by writable (svelte/store) by adding some methods that abstract working with the tasks state. The centralized state cannot be touched by any other actor, only read.

The views folder holds the views user for the router, wich are registered in the App.svelte component.

You can’t perform that action at this time.