This device is not compatible.
PROJECT
Create A Simple Feedback Application with Svelte
Learn about components, store management, event declaration, and routing in Svelte by creating a simple feedback application.
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.
Skills
Web Frameworks
Web Development
Prerequisites
Basic knowledge of Svelte
Intermediate knowledge of JavaScript
Basic knowledge of Svelte store
Intermediate knowledge of HTML and CSS
Technologies
Svelte
JavaScript
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
1
Creating the Home Page
Task 0: Initial Setup
Task 1: Create the Home Page
2
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
3
Adding Routing and Notifications
Task 8: Add Routing to the Application
Task 9: Add Toast Notifications
Congratulations!