This device is not compatible.


Create A Simple Feedback Application with Svelte

Learn about components, store management, event declaration, and routing in Svelte by creating a simple feedback application.

Create A Simple Feedback Application with Svelte

You will learn to:

Create and integrate Svelte components.

Use Svelte store to manage global states.

Dispatch and listen to custom events.

Use a routing library for switching between pages.


Web Frameworks

Web Development


Basic knowledge of Svelte

Intermediate knowledge of JavaScript

Basic knowledge of Svelte store

Intermediate knowledge of HTML and CSS




Project Description

In this project, we will create a simple feedback application using Svelte.

Svelte is a new approach for front-end development that allows us to create very small-sized applications at compile-time. It does not embed a runtime like React or Vue. Also, it is very easy to understand.

We’ll start by creating a home page that will display a list of courses. In the next step, we’ll create a feedback page that will allow users to add and delete feedback. Lastly, we’ll set up Svelte routing to switch between pages. The “Feedback” button on the course card will redirect the user to the feedback page, and similarly, the “Home” button on the feedback page will redirect the user back to the home page.

Following is the preview of the final result of this project.

Project Tasks


Creating the Home Page

Task 0: Initial Setup

Task 1: Create the Home Page


Creating the Feedback Page

Task 2: Create a Feedback List

Task 3: Implement the Delete Functionality

Task 4: Create the Feedback Stats component

Task 5: Create Rating Buttons

Task 6: Create the Feedback Form

Task 7: Complete the Feedback Page


Adding Routing and Notifications

Task 8: Add Routing to the Application

Task 9: Add Toast Notifications