Svelte Example Project
A simple task list created with Svelte to learn the framework.
- State Management
- Api Calls (mocked with Json Server)
Clone the project with git
git clone firstname.lastname@example.org:mnavarrocarter/svelte-task-list.git
Install the project dependencies:
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 is pretty simple. There's a sort of module (folder) containing all the tasks components. These are three:
AddTask.sveltecontains the form an logic to create a Task.
ListTasks.svelterenders a list of tasks in the DOM.
Task.svelterepresents 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