Early Access to Lessons, Available Now
Everything Svelte

All Things, All Svelte

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
Blah Blah Blah
Star
Star
Star
James Q Quick

Hello!
My name is
James Q Quick.

Window Controls

I’m a Fullstack Web Developer who is addicted to learning and loves working with people. I’m a Full Time Technical Content Creator and have over 7 years of experience in Advocacy and Software Development. In my spare time, I run a YouTube channel, play co-ed soccer with my wife, spend time with my dogs, and can solve a Rubik’s cube in under a minute.

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!)

Not sure if this is for you?

Afterall, this site does have a cat with laser eyes?!

100% Money Back Guarantee

!! 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:25
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
  13. Additional Options Menu on an Individual Invoice List Row
  14. Page States for the Invoices Listing Page
  15. Creating a Portal
  16. Styling the Confirmation Dialogue Box / Modal
  17. Styling Slide Out Panel
  18. Styling the Add an Invoice Form
  19. Styling the Invoice Line Item
  20. Styling our Add a Client
  21. Seeding our Clients
  22. Invoice Form Validation
  23. Styling the Edit an Invoice Slide Out
  24. Styling the Toaster / Snackbar Component
  25. Styling the Individual Invoice Page
  26. Thanks for Paying Page
  27. Styling the Client List Page
  28. Styling the New Client Slide Out Panel
  29. Client Form Validation
  30. Styling the Edit a Client Slide Out Panel
  31. Styling the Settings
  32. Styling the Login
  33. Styling the Forgot Password / Sign Up Pages / Reset Password
Bee
Planet

Module 3

transitions & animations

  1. Animating the Search Input field
  2. Animating the Slide out Panel (New Invoice and New Client)
  3. Animating Between the New Client / Existing form field options
  4. Expanding and collapsing the Client / Invoices on the Client Index Page
  5. Animating Slide out Panel for the Add an Invoice
  6. Creating a Page Transition to View an Invoice

Module 4

custom actions

  1. Handling the Additional Options for Mobile
  2. Click Outside
Boombox
Cassette Tape

Module 5

backend

  1. Up and Running with Supabase
  2. Environment Variables with Dotenv
  3. Working with Stores in Svelte
  4. Database Overview + Data Models
  5. Setting up Supabase for Invoices
  6. Setting up Supabase for Clients
  7. Handling Relationships
  8. Setting up Supabase for Users and Logins
  9. Setting up Supabase for Settings

Module 6

connecting the pieces

  1. Displaying Invoices
  2. Adding an Invoice
  3. Editing an Invoice
  4. Deleting an Invoice
  5. Displaying Clients
  6. Adding a Client
  7. Editing a Client
  8. Deleting a Client
  9. Displaying the Settings
  10. Editing the Settings
Star with Hearts
Strawberry

Module 7

authentication

  1. Setting up the Login
  2. Setting up the Logout
  3. Protecting Pages
  4. Listening for Authentication Changes
  5. Enabling Row Level Security (RLS)

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.

Clippy

frequently asked questions