Full Stack Web Development in the Cloud Course – Svelte, Postgres, Vercel, Gitpod

Ecommerce Empire Academy

In this tutorial for beginners, you will learn how to develop a full-stack web application entirely in your browser using Gitpod ( ). You will build the app with Svelte and Postgres. From creating a new repository to deploying to production, we will write and discuss every line of code.

✏️ Course developed by Mike Nikles. Mike on Twitter: .

📝 Code:
Pull requests are available for each section of the course.

💻 The technology stack for this course includes:
💿 Svelte ( )
💿 SvelteKit ( )
💿 Prisma ( )
💿 Postgres ( )
💿 Vercel ( )
💿 Railway ( )

🎉 This course was made possible through a grant from GitPod.

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:08:51) What you will learn
⌨️ (0:12:07) Gitpod developer environment
⌨️ (0:13:33) Project Overview: A todo app
⌨️ (0:16:33) Architecture
⌨️ (0:20:39) Initialize the application
⌨️ (0:40:12) Intro to SvelteKit
⌨️ (0:55:31) Configure Gitpod
⌨️ (1:32:07) Develop HTML structure
⌨️ (1:53:46) Apply CSS styles
⌨️ (2:44:32) Develop CRUD endpoints: GET and POST
⌨️ (3:31:54) DELETE
⌨️ (4:16:45) PATCH – Edit Text
⌨️ (4:33:22) PATCH – Mark as Done
⌨️ (4:48:41) Enhance HTML forms
⌨️ (5:40:56) Install & start the dev database
⌨️ (5:50:33) Use Prisma ORM
⌨️ (6:26:32) Update API to use Prisma
⌨️ (6:47:58) Deploy Database on Railway
⌨️ (7:03:33) Deploy web app & API on Vercel
⌨️ (7:12:28) Project review
⌨️ (7:16:14) What's next?
⌨️ (7:19:22) Wrap up

Closed captions for this video were provided by Primsa. You can get free captions for your own videos that feature Prisma here:

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

33 thoughts on “Full Stack Web Development in the Cloud Course – Svelte, Postgres, Vercel, Gitpod”

  1. Did not know if this stack really exists. 😀. Thanks for keeping the whole community updated with time. RESPECT. 🙏

  2. I owe everything to you guys. I’ve tried multiple platforms for learning during my journey, but you guys are the best

  3. Many thanks for the video! If I may: the pace of the course is too slow, even for beginners. More than 7h for this project is just too long. But great to see some SvelteKit content 🙂

    1. Thanks for the feedback Reza, I appreciate it. Reflecting on it now, I could have definitely cut the CSS and frontend part quite a bit. Lessons learned for next time :).

  4. Great video! I would love to see a follow up to this video, showing a migration of this app to Supabase. Using the supabase JS client, adding auth and todo ownership, etc. Would you still use Prisma for the ORM and database migrations, even if the client is less necessary?

  5. YOOOOOOOO THIS Dude is BRILLIANT!!!! He hit the nail on the head with the point about how there is so little on the web about linking all your front and backend stuff together! This was an amazing course!!!! Still blows my mind this stuff is free. I’ve paid for courses that were no where near this good! Hope you are doing well and have a good Christmas Mike! Thank you so much!

    1. Hey Stacy, thank you so much for your glowing feedback! This is incredibly empowering and motivating to share more educational content. Have a good Christmas as well!

  6. For people that might get discouraged. Before going into this course make sure you know enough about TypeScript and sveltekit. Instructor runs over imports and typescript syntax which is very confusing for beginners. Don’t let this stop you if you don’t understand what instructor is doing.

    1. Is learning Typescript a must? I was under the impression that Javascript worked with Svelte…

  7. Merry Christmas Mike, this was amazing to build along, … I am getting errors in prisma Database `todos.public` does not exist on the database server at `localhost:5432`. and guys from stackoverflow are saying url for the database should be localhost:5432 …. I will change and see if it works, any advice will be helpful, Thank you!

    1. Merry Christmas to you too! Thanks for the feedback <3! It may be that the `predev` script didn't run properly which executes `prisma migrate dev`. Could you run `./node_modules/.bin/prisma migrate dev` from the project root and see if that creates the database schema correctly? If you still have issues, please open an issue in the GitHub repo and I'll see what I can do.

    2. @Mike Nikles it worked, thank you…only now I see the items(data) added only in the railway, but not in the prisma app, I am sure I am missing something small, as it all worked in production, changes happened after deployment. Hope to see more of your tutorials 😊

  8. I can’t praise this course enough! I learnt so much about so many things, including things that I have been using for years. It’s a real credit to you Mike and a very sincere and big Thank You!

    1. Thank you very much for the kind words Paul! I tried to find a balance between teaching a million things and focusing on what really matters :). So much more I want to talk about, maybe in follow up videos :).

    1. whatsap➕➊➒⓿➑➑➒➑➌➋➋➏

      👆👆message the projected line above for questions and proper consultations. Thank you for watching

  9. ᴷⁱⁿᵈˡʸ ᴴᵉˡᵖ ᴹᵉ ᴿᵉᵃᶜʰ100kˢᵘᵇˢᶜʳⁱᵇᵉʳˢ ᵂⁱᵗʰ ᴺᵒ ⱽⁱᵈᵉᵒˢ

    I wasted thousands of dollars in college and learned nothing compared to what i learned here in this channel for free. You guys are amazing . You people deserve a noble prize for what you are doing here.

  10. I watched a lot of YT tutorials about full stack node.js projects (many with mongodb, but I would prefer postgres for my future project) and some svelte videos in the last days. But this course is the best I watched for a long time! I just want to thank you Mike for this video!
    I’m still a beginner, but this video helped me a lot. (Even if I’m not interested in gitpod, it was an interesting part too.)
    What I wish for the future as a bonus chapter: How to implement protected API endpoints (with login/register/forgot password/access token/refresh token/httponly cookies etc. 😉 )

  11. Wow, no words! This by far is the best explained Svelte tutorial I have seen — many many thanks to Mike for taking the time and sharing such a range of knowledge!

  12. Nick Staresinic

    Thanks very much for your time & effort in making this very useful info widely available, Mike. Top-drawer organization & presentation. All very impressive.

    Of note, I got stuck about half-way through (the “DELETE” section) and had to work through some breaking changes that affect endpoints and hooks.

    YouTube wouldn’t let me add links to the sites I used, but I found the most important info in the docs under “HTTP Method Overrides”. (And to delete a todo, I passed the event object — not the request object — into the api() function and got the todo’s uid from event.params.uid.)

    1. Hey Nick! New to web dev here and wondering if you’ve a GitHub to see how you got past the “DELETE” section about 4 hours into the video.

      Followed your advice regarding HTTP method overrides but can’t figure out how to work around the event / request bits.

    2. Nick Staresinic

      Hi, Albert, I’ve replied twice with links to the info that helped me, but both have “disappeared” — I guess no links are permitted in this thread. FYI, the most useful info on the breaking changes was at the svelte/kit Github repo, pull 3384. That describes how to update the endpoints and hooks.

      You also might check Justin O’Neill’s reply to @BN further down in this comment section.

  13. Mike, this is a fantastic tutorial, thank you! Although it looks like Seveltkit made a change to it’s API components that breaks your example. Find it at: “sveltejs/kit” pull req. number 3384. Updated working code below (provided by Justin ONeill in comments):

    import type { RequestHandler } from “@sveltejs/kit”;

    // get
    export const get: RequestHandler = async ({ request }) => {
    return {
    status: 200,
    body: “Hello from the API!”
    }
    }

    // post
    export const post: RequestHandler = async ({ request }) => {
    const formData = await request.formData();

    return {
    body: formData.get(‘text’) as string
    }
    }

  14. Hello, really awesome video, just perfect.

    i have a question if anybody can help me with I will really appreciate it.
    If I want to deploy the app to a server that I host on my own, the configuration for the “postbuild” and the adapter thing will change? if so how?

    Thanks a lot

Comments are closed.