15.Svelte-Epytodo

Workshop 15 - Epytodo with Svelte

✔ Learn to use Svelte components

✔ Learn how to Route a front application with Svelte

✔ Learn to send requests and use responses with axios

✔ Understand how frontend and backend interact together

Step 0 - Setup

All the required information to install dependencies can be found in SETUP.md.

At any time, if you feel lost with Svelte, you can go to the tutorial

Step 1 - User information

Create a file in the src/components folder, named register.svelte

The component should have 1 prop named token

It should use text input components to get user inputs for the following fields:

• firstname
• name
• email
• password
• password confirmation

You must also create a register button. Don't worry about its behavior, we'll take care of it later.

Of course, you could create all from scratch, but we are here to use library components. Time for a little bit of shopping! (Would you like to try a modal component?)

👉

Step 2 - Registration

Now that we have a basic component, let's add some interaction. The register button should trigger a function that will use axios to send a POST request on localhost:8080/register, with the user information:

{
    "firstname": "firstname",
    "name": "name",
    "email": "email",
    "password": "password"
}

You should get a token as a response. Store it in the token variable, you'll be able to use it to authenticate.

⚠️ axios works in an asynchronous way, so the keyword async / await will become very handy

If you want to go further, you could apply some jwt good practices, this way to store the token is actually not really safe...

While you're there, create another component src/components/login.svelte that will basically have the same behavior as register, but it will only need to send 2 fields:

{
    "email": "email",
    "password": "password"
}

Step 3 - Routing

Create a component src/components/connection.svelte that will serve as the connection page for our website.

It should have 2 buttons: register, and login, that will namely allow us to input registration and login information.

Also create an empty component named src/components/todolist.svelte

Now let's create some routing:

In your App.svelte, add the following line:

import { Router, Route } from 'svelte-routing';

Create a router with 2 routes:

• one with / as path and will use your <Connection> component
• one with /home as path and will us your <todolist> component

Now let's modify your Login and Register components.
Add the following import:

import { navigate } from 'svelte-routing';

Upon receiving the token, Login and Register should redirect to /home

Step 4 - Todo list

Show us what you can do! Use what you have learned to fetch and send new tasks to and from the API. You can be creative and try to come up with some innovative design ideas.

Here are a few ones:

• Create a todo element component, with the required fields
• Create a list element, that will update it's size and display all the todo elements
• Create an add button, and a delete button

To go further

• Amazing things made in Svelte
• Sapper, the server-side rendering framework
• Svelte official website
• Svelte performance comparison

Authors

Amoz Pay	Baptiste Barbotin

Organization

🚀 Don't hesitate to follow us on our different networks, and put a star 🌟 on PoC's repositories.