English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 98 Lessons (12h 45m) | 4.63 GB
Feeling intimidated by fullstack development? Wondering how can some developers ship a functional app in one day? This engaging video course demystifies and simplifies the process, helping you build and ship products quickly. Turn the scary world of fullstack development into an approachable and enjoyable experience.
What is this?
This is an engaging video course, but it’s not your typical programming course. You will learn
- Fullstack development
- Proper mindset for shipping products
- All of my tools & workflows
Let me explain.
You will learn to ship fast
People constantly ask me “how do you ship so fast” but when I tell them the answer they’ll usually say “B..bu.. but that’s not the right way to do things!!!”
The obsession with doing things “the right way” is the reason many devs haven’t shipped a single project. I don’t want to only teach you about a technology stack. Technology stacks come and go.
I want to teach you fullstack development, but to also change your mindset about development overall. I’ll show you two magical lines of code that at first will make you scream in agony, punch some drywall, have a shower and a drink and ask for a full refund. But after a while you’ll realize that I just changed your webdev game forever.
You will learn to laser focus
I’ve always had a single goal: to ship apps and bring value to the end user. I want to teach you how to do that without getting obsessed and getting lost in useless metrics, arbitrary numbers, optimizing your bundle size, network requests, and stuff that doesn’t matter.
ThOuGhTLeAdErS will fill your head with nonsense that doesn’t matter when shipping an app. Will it scale? Will it rerender? Is it memoized? Is it optimized enough? Will it fetch 1 extra kb of data? Will it load in 0.1 ms when a user in an igloo on 2G connection loads it on an old Android phone? None of this matters if you want to ship. You’re not Facebook.
You will ship your projects
Most developers don’t ship. Most developers have hundreds of unused subdomains. You probably have a note called “side project ideas” that’s gathering dust. Renaming that note to “shipped side projects” is simpler than you think.
I will guide you from the moment you scaffold your app, to shipping it in production.
Ready?
Welcome to Zero To Shipped
- Databases
- SQL
- Postgres
- Storage
- Authentication
- JWT
- OAuth
- Roles
- Hosting
- Servers
- Serverless
- AWS
- Cold Starts
- Front-end
- Back-end
- Cookies
- Local Storage
- Caching
- Sessions
- Queries
- Mutations
- Load Balancing
- Scalability
- Microservices
It seems like too much, doesn’t it?
The magicstack
The simplicity and the power of this stack is unparalleled.
You can go from zero to shipped product in a matter of hours.
- Next.js. The React Framework for the WebUsed by some of the world’s largest companies, Next.js enables you to create full-stack web applications by extending the latest React features.Blitz.jsThe Missing Fullstack Toolkit for Next.jsBlitz picks up where Next.js leaves off, providing battle-tested libraries and conventions for shipping and scaling world wide applications.
- Prisma. Next-generation Node & TypeScript ORMPrisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
- Mantine UI. A fully featured React components libraryMantine helps you build fully functional accessible web applications faster than ever. It includes 150+ customizable components and hooks.
- TypeScript. A Robust, Type-Safe Superset of JavaScriptMaster TypeScript’s type-checking strengths to catch potential errors early and enhance confidence when handling data fetching and updates, ensuring a more reliable and efficient application.
- Zod. TypeScript-first schema validation with static type inferenceLearn how Zod’s expressive API leads to more reliable and robust projects, catching potential errors early and streamlining your development process.
Table of Contents
Intro
1 Introduction – CSS Foundations
2 intro
3 fast talking
4 alarms and noises
5 not an expert
6 prerequisites
7 paid tools
Intro to Blitz
8 my editor and plugins setup (enhanced)
9 why blitz js (enhanced)
10 creating a project in sizzy (enhanced)
11 scaffolding blitz js (enhanced)
12 fixing DYNAMIC_SERVER_USAGE (enhanced)
13 github (enhanced)
14 clean up blitz (enhanced)
15 blitz start + user session (enhanced)
Blitz structure
16 blitz pages + cleanup (enhanced)
17 routes in next js (enhanced)
18 prettier paths with @ (enhanced)
19 move to features and page extension (enhanced)
20 app, _document and Layout component (enhanced)
Styling with Mantine
21 install mantine (enhanced)
22 why mantine (enhanced)
23 horizontal, vertical, debugging (enhanced)
24 app shell and basic layout (enhanced)
25 basic links in next js (enhanced)
26 polymorphic components and button links (enhanced)
Forms
27 forms with mantine form and removing blitz form (enhanced)
28 nice authentication form (enhanced)
29 make authentication form functional (enhanced)
Queries and Mutations
30 blitz queries + suspense (enhanced)
31 blitz resolver authorize and zod (enhanced)
32 fix for blitz resolver types order (enhanced)
33 mutations in blitz js (enhanced)
34 explaining the auth mutations (enhanced)
35 blitz context + getting user id (enhanced)
Intro to Prisma
36 prisma and db and sqlite explanation (enhanced)
37 prisma first migration (enhanced)
38 fetching and creating todos with prisma (enhanced)
39 associate todos with user (enhanced)
40 moving to postgres (enhanced)
41 explaining auth on server and client (enhanced)
Easier queries and roles based fetching
42 magical cache invalidation (enhanced)
43 role based fetching, clean multiple todos (enhanced)
Production
44 deployment to railway (enhanced)
45 exploring deployment and connecting locally (enhanced)
Basic Typescript
46 basic typescript (enhanced)
47 types for blitz queries (enhanced)
Admin
48 admin roles (enhanced)
Error handling
49 nicer error and auth handling (enhanced)
50 finish auth (enhanced)
51 error handling (enhanced)
52 prettier error handling (enhanced)
Forms (Part 2)
53 forms (enhanced)
54 validating a form with zod (enhanced)
55 properly typing a form (enhanced)
56 react hanger useInput vs forms (enhanced)
User Profile
57 live templates and page creation (enhanced)
58 user profile page (enhanced)
59 simple mantine modal (enhanced)
60 edit profile form (enhanced)
61 initialze form and redirect to username (enhanced)
62 edit profile page (enhanced)
Emails (part 1)
63 email sending logic (enhanced)
64 catching local email with live preview (enhanced)
65 sending emails using react email (enhanced)
66 catching emails locally with nodemailer app (enhanced)
67 sending welcome email (enhanced)
68 default props and clean up templates (enhanced)
69 typed env (enhanced)
70 gitignoring react-email things (enhanced)
Debugging in production
71 debugging production and local build (enhanced)
Verify User Email
72 check if user email is verified (enhanced)
73 verify user email part 1 (enhanced)
74 verify user email part 2 (enhanced)
Reset Password
75 reset password part 1 (enhanced)
76 reset password part 2 (enhanced)
Separate login and signup
77 separate login and auth forms (enhanced)
Conditional wrap
78 conditional wrapping (enhanced)
Upload Images
79 uploadthing (enhanced)
80 uploadthing part 2 (enhanced)
81 uploadthing part 3 (enhanced)
82 uploadthing part 4 (enhanced)
83 uploadthing part 5 (enhanced)
84 uploadthing part 6 (enhanced)
Onboard User
85 nudge user to finish profile (enhanced)
86 onboarding user modal (enhanced)
Modals
87 global modals (enhanced)
88 stacking modals (enhanced)
89 delete confirmation modal (enhanced)
Styling with Mantine (Part 2)
90 mantine themes (enhanced)
91 mantine styles part 1 (enhanced)
92 mantine styles part 2 (enhanced)
93 light mode and dark mode (enhanced)
User Settings
94 header user menu (enhanced)
95 settings with vertical tabs (enhanced)
96 change password for logged in user (enhanced)
Emails (part 2)
97 user settings for productmarketing emails (enhanced)
98 reusable email components (enhanced)
99 unsubscribe link (enhanced)
Resolve the captcha to access the links!