Build With Svelte, Deploy With Netlify. Awesome Together!

Two of the coolest technologies for 2023 - Svelte + Netlify (Serverless functions)

What you'll learn

How to use key features of Svelte

Routing, Navigation, Authentication

Create and Implement Netlify Serverless Functions

Build and deploy a complete CRUD application with authentication and Cloud Storage

Requirements

A little javascript experience would help. All software required and accounts needed are FREE

Description

The course is not so much about Svelte and (Netlify) Serverless Functions, although it does cover both, in depth, but it is more about creating a complete project from backend (Mongodb) to a blazingly fast sleek Svelte front end, using routing, navigation, authentication and of course deploying the visually vibrant CRUD course project,Flip, to the internet using some amazing capabilities of Netlify.This course has it all! All using FREE software and accounts!! It doesnt get any better than this! If you love Svelte (and you should), then you will also love Netlify and this course brings you both!The course starts off by briefly covering some important concepts you should consider before developing any application before moving on to the Setup of all software and accounts you will need. Setup sheets are provided for items you can install/setup. Svelte and Mongodb Atlas/Compass will be covered in the course.The course sees you taking on the role of freelancer and your client has provided you with a requirements specification for a project they want to be completed as a web-app. Having considered your client's needs, the application will be built using Svelte, Mongodb and Netlify Serverless functions and deployed to Netlify. The course will take you through the data-flow of the project, covering all important state management, component by component, step by step, giving you exercises along the way to build on your knowledge and skill, culminating in a very fast, very visual web application that will more than satisfy your client's requirements. You will get lots of exercises along the way and to get the most out of this course you need to do these exercises and not just copy code. That way, you build your skill and confidence.You will use Netlify to deploy a temporary website before writing a single line of code and you will see the power of Netlify when it comes to providing the client with a temporary but live view of the progress of your application. At completion of the project we will deploy to Netlify via Github for a seamless efficiency which is the hallmark of Netlify (called Continuous Deployment).This course was developed in late 2022 in preparation for release early 2023 so you will be using latest versions of software as at that time. After Section 2 all sections have a Checkpoint zip file with all the code at the each of that section, checked and confirmed accurate, to aid you in completing the course. If you get stuck, check the next Checkpoint! A lecture on Troubleshooting is included. Try to troubleshoot before you post to Q&A.I hope you enjoy the course and that it leaves you not wondering what to do next nor how, but instead KNOWING what you need to do AND how you will do it in your next project. I wish you every success!

Overview

Section 1: Introduction

Lecture 1 Course Aims, What you can expect, Course Requirements, Course App / Req.Spec

Lecture 2 Concepts : Design, State Management, Svelte, Components, Data-flow

Section 2: Setup - Software & Accounts

Lecture 3 Software / Accounts that YOU need to setup

Lecture 4 Svelte & Dependencies

Lecture 5 Netlify Client

Lecture 6 Course Project Folder Structure / Starter Resource

Lecture 7 Checkpoint 1 / How we will build the course App

Section 3: Course Project - Flip - Part 1

Lecture 8 Create App.svelte

Lecture 9 Basic Component Files

Lecture 10 Our First Store - appStore.js

Lecture 11 Splashscreen - Home.svelte

Lecture 12 Navigation - Nav.svelte

Lecture 13 Navigation - vNav.svelte

Lecture 14 Navigation - Sidebar.svelte

Lecture 15 Navigation - hNav.svelte

Section 4: Course Project - Part 2 - Projects

Lecture 16 Introduction, Setup Mongodb Atlas / Compass, .env file

Lecture 17 Netlify Serverless Functions getProjects.js

Lecture 18 db-helper.js

Lecture 19 Api.js - getProjects() [2]

Lecture 20 projects.js Store [3]

Lecture 21 EXERCISE - Projects.svelte (pages folder)

Lecture 22 Projects.svelte (components/Projects) [4] - Code

Lecture 23 HELP! - it did not work!

Lecture 24 EXERCISE - ProjectItem.svelte

Lecture 25 ProjectItem.svelte Code

Lecture 26 Exercise : ProjectTemplate.svelte

Lecture 27 Checkpoint 4 - Projects.zip

Section 5: Course Project - Part 3 - User Store and Local Storage

Lecture 28 Ring! Ring! Call from Client

Lecture 29 Local Storage / User Store

Lecture 30 registerUser.js - Netlify

Lecture 31 registerUser.js - backend

Lecture 32 Exercise - loginUser.js - Netlify

Lecture 33 loginUser.js - Netlify - code

Lecture 34 Exercise - loginUser.js - backend

Lecture 35 Exercise - Login.svelte - script

Lecture 36 Login.svelte - code

Lecture 37 Exercise - Login.svelte markup

Lecture 38 Login.svelte - markup - code

Lecture 39 Exercise - Logio.svelte

Lecture 40 Logio.svelte - code

Lecture 41 Test it! Login

Section 6: Course Project - Part 4 - CRUD for Projects

Lecture 42 CRUD Intro - addProjects.js - Netlify

Lecture 43 addProject.js - Code

Lecture 44 Exercise - updProject.js - Netlify

Lecture 45 updProject.js - Netlify - Code

Lecture 46 Exercise - delProject.js - Netlify

Lecture 47 delProject.js - Netlify - Code

Lecture 48 /backend/Api.js - addProject()

Lecture 49 Exercise - Api.js - updProj()

Lecture 50 Api.js - updProj() - code

Lecture 51 Exercise - Api.js - delProj()

Lecture 52 Api.js - delProj() - Code

Lecture 53 project.js Store functions for Add, Edit, Delete

Lecture 54 Components - ProjectUpdate.svelte - Script Exercise

Lecture 55 ProjectUpdate.svelte - script - Code

Lecture 56 Exercise - ProjectUpdate.svelte - Markup

Lecture 57 ProjectUpdate.svelte - Markup - Code

Lecture 58 Components Update for Data-Flow (Add, Edit, Delete)

Lecture 59 Test it! Add New Project

Lecture 60 Testing - It does NOT work!!!!

Lecture 61 Test it! - Edit and Delete Project

Lecture 62 Correction for Netlify addProject and projects.js addProj / Checkpoint_6_CRUD

Section 7: Transitions, Alerts & More

Lecture 63 Introduction and Client Call

Lecture 64 ProjectFilter - Part 1 of 2

Lecture 65 ProjectFilter - Part 2 of 2

Lecture 66 Exercise Api.js incLike()

Lecture 67 Exercise ProjectItem.svelte Updates for Like

Lecture 68 Test it! Like

Lecture 69 Alert.svelte

Lecture 70 Using Alerts

Lecture 71 Transitions - Part 2 of 2

Section 8: Extra Section - Ezflip!

Lecture 72 Transitions - Part 1 of 2

Lecture 73 Ring! Ring!

Lecture 74 Exercise EzFlip.svelte

Lecture 75 EzFlip.svelte Code

Lecture 76 Exercise Api.js - updEzFlip(), projects.js - updateEzflip()

Lecture 77 Api.js - updEzFlip(), projects.js - updateEzFlip() Code

Section 9: Deploy

Lecture 78 Deploy_Intro_Changes

Lecture 79 Manual Deploy

Lecture 80 Continuous Deploy - Github Repository

Lecture 81 Continuous Deploy - Local Git Repository

Lecture 82 Continuous Deploy - Link Netlify Website with Github Repo

Lecture 83 Continuous Deploy - Testing!

Lecture 84 End of Section - End of Course

Everyone interested in learning how to create and deploy an application.,Everyone interested in learning more Svelte.,Everyone who wants to know how to use Netlify Serverless Functions.