In this tutorial for beginners, you will learn how to develop a full-stack web application entirely in your browser using Gitpod (https://www.gitpod.io/). 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: https://twitter.com/mikenikles.
📝 Code: https://github.com/gitpod-io/full-stack-web-development
Pull requests are available for each section of the course.
💻 The technology stack for this course includes:
💿 Svelte (https://svelte.dev/)
💿 SvelteKit (https://kit.svelte.dev/)
💿 Prisma (https://www.prisma.io/)
💿 Postgres (https://www.postgresql.org/)
💿 Vercel (https://vercel.com/)
💿 Railway (https://railway.app/)
🎉 This course was made possible through a grant from GitPod.
❤️ Try interactive Frontend courses we love, right in your browser: https://scrimba.com/freeCodeCamp-Frontend (Made possible by a grant from our friends at Scrimba)
⭐️ 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: https://pris.ly/closedcaptions
🎉 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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news