Early Access to Lessons, Available Now
Everything Svelte

All Things, All Svelte

Sponsored By
Vercel
New x arrow circle
computer crown
swirl

Everything you need to know to build a modern web application.

If these buzz words don’t mean anything to you (yet), don’t worry.
we’ll go step-by-step, in bite-sized, manageable chunks.

Start Now
Pizza
TV

about this course

This course is designed to teach you everything you need to know to build to a custom full stack web application.

We’ll start from scratch. That’s right, no starter files! We’ll take it one step at a time as we build the frontend and backend. We’ll explore topics like authentication, accepting payments, relational databases, testing, and automatic deployment.

Dots and Lightning
Geometri Shapes

what you'll build

The Dollar Holler is a full stack application that creates and manages client invoices. Users will be able to login, create an invoice, and send it to a client. A client will be able to download a PDF of the invoice, as well as, remit payment online.

Product Shot

topics we'll cover

The Deets

...and much, much more!
(that's what I'm supposed to say, right?!)

Amy Dutton

Hello!
My name is
Amy Dutton.

Window Controls

I’m the Director of Design at ZEAL. I have over 20 years of web experience, officially making me a granny in Internet years. I live right outside of Nashville, TN with my husband, 3 adorable kids, and 2 dogs. If I’m not sitting in front of my computer making things, I’m hanging out with family and friends. I love streaming all the things, playing cards, reading, and drinking coffee. Lots of coffee.

Scroll
Space with Planets
White Star
White Star
White Star

who is this for?

  • People who want to build a web application from scratch.
  • Web developers who want to get better at JavaScript. You don’t need to be a JavaScript expert, but you do need to be comfortable with the language: writing variables, arrow functions, and promises.
  • You don’t need to be a CSS Wizard, but you do need to understand the basic principles of CSS.
  • This course doesn’t require any prior knowledge of backend development, Node, or database management. We’ve got you covered.
  • People curious about Svelte. (Spoiler Alert: It’s awesome!)

!! Warning !!
This will probably change

videos & modules

Closed Captioning Closed captiioiniing and transcripts are provided for every video.

Heart with Bolt
Heart
Pizza

Module 1

introduction

  1. Introduction 2:22
  2. App Review 2:03
  3. Tooling 8:25
  4. Installing SvelteKit 6:47
  5. Installing Tailwind 9:39
  6. Linting 8:24
Roller Skate
Lady Bug

Module 2

styling

  1. Custom Theme Elements 9:09
  2. Intro to Routes 10:25
  3. Intro to Layouts 11:01
  4. Creating Aliases 7:22
  5. Styling the Dashboard Layout 17:24
  6. Setting up a Current Path Navigation 10:06
  7. Responsive Pass on the Dashboard Layout 31:58
  8. Styling the Invoice List 37:59
  9. Responsive Pass on the Invoice List Page 17:53
  10. Setting up Global Types for TypeScript 13:26
  11. Seed Data and Svelte Stores 17:30
  12. Displaying Invoices Dynamically and Adding the Invoice Total 11:29
  13. Working with Dates and Making Smart Tags 19:52
  14. Additional Options Menu on an Individual Invoice List Row 24:25
  15. Page States for the Invoices Listing Page 17:44
  16. Creating a Portal 9:08
  17. Styling the Confirmation Dialogue Box / Modal 44:48
  18. Styling Slide Out Panel 9:51
  19. Styling the Add an Invoice Form 28:27
  20. Styling the Invoice Line Item 26:05
  21. Adding and Removing Line Items 15:36
  22. Making our Line Items Smart 15:30
  23. Configuring the Subtotal, Discount, and Total Amount 12:11
  24. Styling our Add a Client Inline 10:38
  25. Seeding our Clients 5:36
  26. Invoice Form Validation 9:42
  27. Additional Validation for Clients 3:07
  28. Submitting the Form to Add an Invoice 26:34
  29. Styling the Edit an Invoice Slide Out 18:35
  30. Code Clean Up and Bug Squashing 11:52
  31. Making our Invoice Form Responsive 19:11
  32. Styling the Toaster / Snackbar Component 26:55
  33. Setting up the Pieces for our Individual Invoice Page 17:16
  34. Styling the Individual Invoice Page 16:27
  35. Making the Individual Invoice Page Content Dynamic 16:48
  36. Updating our Settings for the Individual Invoice Page 8:32
  37. Parsing Markdown on our Individual Invoice page 3:09
  38. Setting up the Print Invoice Functionality 1:12
  39. Setting up the Copy Link Button 5:55
  40. Responsive Pass on the Individual Invoice Page 5:57
  41. Setting up a Print Stylesheet 8:59
  42. Thanks for Paying Page 4:30
  43. Styling the Error Page 8:12
  44. Styling the Client List Page 25:07
  45. Adjusting the Client List for Mobile 6:14
  46. Determining the Received and Balance for Each Client 9:21
  47. Styling the Blank Client State 2:50
  48. New Client Slide Out Panel 19:07
  49. Edit a Client Slide Out Panel 10:28
  50. Styling the Individual Client Page 19:23
  51. Calculating the Individual Client Page Fields 9:10
  52. Styling the Settings 15:09
  53. Styling the Login 12:16
  54. Styling the Logout / Alert Component 3:18
  55. Styling the Forgot Password / Sign Up Page / Reset Password Pages 9:04
Bee
Planet

Module 3

transitions & animations

  1. Animating the Search Input field 11:00
  2. Animating the Slide out Panel (New Invoice and New Client) 4:11
  3. Creating a Page Transition to View an Invoice 1:43

Module 4

custom actions

  1. Clicking Outside the Additional Options 9:04
  2. Handling the Additional Options Invoices for Mobile 21:30
  3. Styling the Options when the User Swipes 5:58
  4. Handling the Cancel Functionality when the User Swipes 10:47
  5. Additional Options for Mobile (vs Desktop) 6:13
  6. Handling the Additional Options for Client on Mobile 8:42
  7. Handling Touch Screens 8:37
Boombox
Cassette Tape

Module 5

backend

  1. Up and Running with Supabase 5:27
  2. Environment Variables with Dotenv 5:38
  3. Data Modeling Structures 6:59
  4. Setting up Supabase for Invoices and Line Items 4:03
  5. Setting up Supabase for Clients 1:31
  6. Setting up Supabase for Settings 1:27
  7. Handling Relationships 1:51
  8. Setting up User Relationships with Invoices, Clients, and Settings 3:07
  9. Populating the Database with Data 13:00

Module 6

connecting the pieces

  1. Displaying Invoices 10:19
  2. Displaying Clients 11:14
  3. Adding a Client 10:27
  4. Adding an Invoice 14:24
  5. Editing a Client 3:15
  6. Deleting an Invoice 6:57
  7. Deleting a Client 12:56
  8. Search Invoices 14:40
  9. Search Clients 6:34
Star with Hearts
Strawberry

Module 7

authentication

  1. Handle Sign Up 25:06
  2. Protect Login 6:48
  3. Handling Logout 4:28
  4. Client Side Authentication 7:18
  5. Server Side Authentication 16:25
  6. Handling Forgot Password 10:03
  7. Handling Update Password 13:45
  8. Adding Row Level Security (RLS) Policies 18:37
  9. Individual Client and Individual Page Bug 10:39
  10. Displaying the Settings 10:19
  11. Editing the Settings 33:43
  12. Updating the Password within Settings

Module 8

ecommerce with stripe

  1. Setting Up Stripe
  2. Connecting Stripe to the application
  3. Handling Stripe Webhook
  4. Create Stripe Checkout Session/Invoice

Module 9

testing

  1. Testing Overview
  2. Automatic Testing with Cypress - Why Cypress?
  3. Installing and Setting up Cypress
  4. Brief Overview of Testing and Cypress
  5. Testing Adding an Invoice
  6. Mocking Data
  7. Testing the Invoices page
  8. Testing the Clients page
  9. Testing the Settings
  10. Testing Stripe
  11. What is Visual Regression Testing / Percy Overview
  12. Setting up Percy
  13. Updating the ReadMe.md
Star with Eyes
Rainbow Cloud

Module 10

email

  1. Setting up Send Grid
  2. Setting up the Email Template
  3. Emailing Invoices

Module 11

GitHub Actions

  1. Setting up a Github Action to Send Email Reminders
Cassette
Unicorn

Module 12

Deployment

  1. Deploying to Vercel
  2. Stripe Deployment Setup
Starter
$ 78
Accepting Pre-Orders
  • Access to the first 8 modules / ~46 videos
  • Stream content from any device
  • Source Code - Completed Examples and Exercises
  • Unlimited Updates and Access Never Expires
Buy
Complete
$ 148
Accepting Pre-Orders
  • Access to the all ~11 modules / ~63 videos
  • Stream content from any device
  • Source Code - Completed Examples and Exercises
  • Unlimited Updates and Access Never Expires
Buy
Squiggle
Half Circle
circle
grid
squiggle
 

team license packages

Available for Pre-orders

There's no better way to learn than to work through a course with a group of people.

With a bulk license, you can allocate each slot to a student or an employee.

The bulk license includes everything within the Complete Plan. Spots cannot be reassigned once used.

Please contact support@everythingsvelte.com for larger groups and more information.

10 Spots $1,008
20 Spots $1,792
30 Spots $2,232
Clippy

frequently asked questions

VHS
Be Kind
Rewind