Svelte and Firebase - The Complete Guide (2023)

Create 2 apps with Svelte - Twitter and Trello clones. Unleash Svelte reactivity and speed. Use Firebase as data store.

Is this course right for you?

This course covers creating two applications with Svelte. Most of the features are made from scratch without any dependency package. This covers - Form Validation, Pagination, Modal, Popups,  Snackbar and many others. You will learn how to create everything from the ground up.

The course covers the explanation of Svelte by working on actual projects. This course will give you the confidence and skills required to start any project.

Students should have basic javascript knowledge to start working on this course.

What is Svelte?

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

What are you going to work on?

The first application explains base Svelte features by working on the real project - Trello clone, a simple task management application

In the second application, students will build a Twitter-like app from scratch - the HTML layout part is not part of the course (This will be provided in the course materials to save time and focus purely on  Svelte). The focus of this course is coding and not writing HTML content. 

The course starts with the preparation of the base layout of the application. All designs - images, and content are provided by the instructor.

Content can be briefly summarized in these points:

• Layout preparation - A few lectures to prepare the HTML for your application. Separation of layout into the Svelte components. 

• Template syntax - Use special syntax inside of HTML

• Directives & Events - Value binding of variables.

• Svelte Kit Routing - This part explains creating a "multi-page" application. Students will learn how to create a routing with different routing strategies and navigation to the routes. 

• Reactivity - Explains how to create and manage reactive data

• Lifecycle function - How to use onMount and onDestroy

• Stores - More complex reactive data

• Transitions - Fancy effects with Svelte

• Auth Forms - Students will learn how to create a reactive form and bind the data to form inputs.

• Custom Form Validation - Covers creating a custom input/form validation and error handling from scratch.

• Firebase/Firestore - Initialization of Firebase application (data storage)

• Store Functions - Important part of the projects. Allows the feature-related code to be separated into its context. 

• Authentication - This part covers creating a login, register, and logout functionality. Students will learn how to authenticate a user upon the application visit.

• Provider and Context - This creates a provider component, which can hold the data on the root level and provide them to underlying components. 

• Snackbars - App-wise functionality created with Provider to display any message as a toast popup.

• Glide Creation - Covers how to create a new glide and display it on the main page. From this point on, students will often work with Firebase/Firestore.

• Follow Functionality - Follow functionality allows users to subscribe to other users. 

• Display Glides from Following - Subscription (Following) to other users will allow seeing the Glides (messages) they post.

• Paginate Glides - It would be inefficient to fetch/display all of the glides on the initial load. Students will learn how to implement their lazy loaded pagination when data are loaded as the users browse the application.

• Create Sub-Glides - It's essential to have a way to respond to glides. This feature enables a user to create subglides, which is an answer to the glide.

• Modal Messenger - Students will learn how to create a modal component from scratch. This will be used to display a messenger component on any page.

• Image Upload - Deployment to Firebase Storage

• Deployment to Vercel - Finally, the application will be live hosted on Vercel. Anybody on the internet will be able to visit your application.

While working on the features above, the students will learn and understand Svelte features. They will know how to architecture applications and will be able to create their applications with Svelte.