09.Svelte

Workshop 9 - Event Calendar with Svelte

✔ Learn Svelte's basic functionalities

✔ Understand Svelte's advantages

✔ Start a simple Svelte project

✔ Deploy a Svelte project

Step 0 - Initialization

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

💡 You may want to take a look at the Svelte tutorial and documentation for this workshop.

Step 1 - Your first component

To begin with, we will learn how to create a simple component and display it in our page.

Create a components directory in src/ which will contain a file named TopBar.svelte.

Inside it, you'll create a basic top bar that will be fixed at the top of your page and display the title of your application.

Display your component with a cool style 🚀
For this, you can use CSS or a UI library like Svelte Materialify

Then, you can call it inside your App.svelte to display it 🤩

📖 Resources

• Import components in Svelte
• Svelte's style

Step 2 - Time for Events

You've created your first Svelte components, that's cool! But your application is a bit empty, isn't it sad? 😢

Create file named Event.svelte in src/components, it will contain a component to display an event with the following props:

• id as a number
• title as a string
• description as a string
• startingDate as a Date
• endDate as a Date

💡 You can export these variables as types with a script module to define your properties.

💡 You may want to create an array with every month of the year displayed properly. The same applies for the days of the week.

Then, create two events in your App.svelte and display them.

Don't forget to apply styles to your components 😉

📖 Resources

• Properties with Svelte

Step 3 - Interaction

It's time to add more events 🚀

Create a Button component which opens a Form component in the center of your page.

Your Button must store the state of your form (open or closed) as a boolean. You must also add two functions to control the state of the Form component.

You have to display another Button to close the page when it's open.

Step 4 - Send your form

Add fields to your Form component to add new events.

You must add the following fields:

• event name
• description
• start date
• end date

💡 The input tag will be useful.

💡 Take a look at the on:submit property.

A button must appear to cancel the form and another one to submit it. It should add an event to your page.

💡 You should use a store to synchronize your components.

Resources

• Store API
• For loop in Svelte

Bonus

Congratulations! You made your first Svelte application. To go further, consider implementing the following bonuses:

• Add a login form to handle multiple users.
• Create multiple pages using SvelteKit
• Implement Dark Theme support.

Further reading

• Cool Svelte projects
• 6 reasons to use Svelte
• Svelte vs React
• Switch from React to Svelte
• Svelte API

Authors

Tom Chauveau

Organization

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