Zero To Shipped
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.
More
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.
Watch Online Zero To Shipped
# | Title | Duration |
---|---|---|
1 | Welcome | 02:46 |
2 | Fast pace | 02:12 |
3 | Making mistakes | 01:49 |
4 | Not an expert | 01:25 |
5 | Prerequisites | 01:23 |
6 | Paid tools | 04:15 |
7 | My Editor and Plugins setup | 02:59 |
8 | Why Blitz? | 03:03 |
9 | Create a project in Sizzy | 01:39 |
10 | Scaffolding a blitz app | 06:12 |
11 | Fixing DYNAMIC_SERVER_USAGE error | 03:38 |
12 | Github | 02:37 |
13 | Clean up Blitz things | 01:52 |
14 | Blitz Start and User Session | 02:20 |
15 | Blitz Pages and Cleanup | 06:51 |
16 | Clean up components, add more pages, nested routes | 09:18 |
17 | Imports from src, unambigous imports on the fly | 02:10 |
18 | Move to /features and change next.js for .page extension | 07:06 |
19 | _app, _document and layout component | 12:31 |
20 | Install Mantine | 03:51 |
21 | Why Mantine | 09:32 |
22 | Vertical, Horizontal, and why we don't use margins | 05:35 |
23 | Basic Styled Layout | 05:31 |
24 | Navigating to Links in next.js | 06:11 |
25 | Polymorphic components and Button Links | 04:40 |
26 | Replace Blitz Form with Mantine Form | 13:54 |
27 | Nice Authentication pages | 07:39 |
28 | Make the main Authentication form functional | 03:48 |
29 | Next.js API routes, Blitz queries and Suspense | 23:47 |
30 | Endpoint authentication in Blitz and Zod | 11:00 |
31 | Fix for Blitz resolver types order | 02:47 |
32 | Blitz Mutations | 08:22 |
33 | Explain Authentication mutations | 07:47 |
34 | Blitz context and getting the current authenticated user | 04:40 |
35 | Prisma, db, and sqlite | 10:30 |
36 | Prisma first migration | 08:37 |
37 | Fetching and creating todos with Prisma | 07:16 |
38 | Associate (connect) todos with the user | 07:27 |
39 | Moving from sqlite to Postgres | 09:20 |
40 | Finishing with the authentication flow | 06:45 |
41 | Magically refetching Queries | 11:44 |
42 | Role based fetching, clean multiple todos | 05:51 |
43 | Deploy to Railway | 06:30 |
44 | Exploring production environment, connecting to production DB | 09:35 |
45 | Typescript Types | 04:59 |
46 | Inferring Type from Blitz Queries | 05:52 |
47 | Admin Role | 09:10 |
48 | Nicer Error and Authentication handling | 08:38 |
49 | Finish Authentication | 05:49 |
50 | More Error handling | 13:26 |
51 | Prettier Error handling | 04:59 |
52 | Forms | 18:41 |
53 | Validating a Form with Zod | 02:37 |
54 | Properly typing a Form | 08:49 |
55 | React Hanger useInput vs Forms | 09:00 |
56 | Live Templates and Page Creation | 02:39 |
57 | User Profile Page | 06:13 |
58 | Simple Mantine Modal | 02:29 |
59 | Edit Profile Form | 11:12 |
60 | Initialize Form and redirect to username | 02:19 |
61 | Edit Profile Page | 14:12 |
62 | Email Sending logic | 08:13 |
63 | Catching local Email with Live Preview | 04:02 |
64 | Sending emails using React Email | 07:44 |
65 | Catching emails locally with Nodemailer app | 04:54 |
66 | Sending a Welcome Email | 07:04 |
67 | Default props, clean up templates | 05:33 |
68 | Typed .env | 01:28 |
69 | Gitignoring react-email things | 12:00 |
70 | Debugging production and local build | 02:04 |
71 | Check if user email is verified | 06:52 |
72 | Verify user email (part 1) | 15:40 |
73 | Verify user email (part 2) | 11:46 |
74 | Reset password (part 1) | 17:43 |
75 | Reset password (part 2) | 07:31 |
76 | Separate Login and Authentication forms | 09:18 |
77 | Conditional Wrapping | 03:30 |
78 | Uploadthing initial setup | 08:19 |
79 | Use uploadthing inside a form | 06:26 |
80 | Improve the Avatar component | 07:12 |
81 | Custom UI for the Image Upload | 08:40 |
82 | Allow the user to replace their profile image | 08:43 |
83 | Abstract Upload Logic in a separate component | 09:45 |
84 | Nudge user to finish their profiles | 12:05 |
85 | Onboarding user modal | 08:09 |
86 | Global modals | 13:23 |
87 | Stacking modals | 04:46 |
88 | Delete confirmation modal | 05:31 |
89 | Mantine Themes | 20:44 |
90 | Mantine styles (part 1) | 16:56 |
91 | Mantine styles (part 2) | 16:56 |
92 | Light and Dark mode | 05:34 |
93 | Header User menu | 08:17 |
94 | Settings with vertical tabs | 03:49 |
95 | Change password for logged-in user | 17:44 |
96 | User settings for product/marketing emails | 10:39 |
97 | Reusable email components | 09:59 |
98 | Unsubscribe link | 26:41 |
99 | Create admin page | 03:56 |
100 | Use Mantine V6 | 01:17 |
101 | Sending emails in batch (Part 1) | 04:41 |
102 | Sending emails in batch (Part 2) | 05:36 |
103 | Sending emails in batch (Part 3) | 06:03 |
104 | Sending emails in batch (Part 4) | 08:30 |
105 | Sending emails in batch (Part 5) | 07:54 |
106 | Sending emails in batch (Part 6) | 02:11 |
107 | Sending emails in batch (Part 7) | 08:00 |
108 | Sending emails in batch (Part 8) | 10:20 |
109 | Sending emails in batch (Part 9) | 06:53 |
110 | Sending emails in batch (Part 10) | 09:11 |
111 | Sending emails in batch (Part 11) | 13:04 |
112 | Intro to payments | 04:48 |
113 | Creating a product | 03:15 |
114 | Payment webhooks | 06:01 |
115 | Receiving the webhook | 06:47 |
116 | Verifying the webhook | 04:49 |
117 | Handling a webhook | 06:08 |
118 | Generate checkout link (part 1) | 08:14 |
119 | Generate checkout link (part 2) | 07:02 |
120 | Handling a new order | 08:33 |
121 | Handling refunds | 09:37 |
122 | Creating subscription variants | 06:59 |
123 | Pro Plan Buttons | 09:59 |
124 | Handling subscription events | 09:25 |
125 | Prisma schema for payments | 05:00 |
126 | Fetch products and variants | 07:55 |
127 | Storing subscriptions in db | 12:03 |
128 | Updating subscription | 06:41 |
129 | Billing panel for user | 16:10 |
130 | Improve billing panel | 04:15 |
131 | Handle subscription plan changes | 03:33 |
132 | Admin table with users | 06:51 |
133 | Impersonating other users | 10:12 |
134 | Implementing pagination | 07:36 |
135 | Implementing search | 06:57 |
136 | Creating an invite system | 10:26 |
137 | Protecting by IP address | 06:35 |
138 | Admin invite browsing | 14:25 |
139 | Requesting invite link | 02:41 |
140 | Sent invite email | 12:41 |
141 | Bump blitz & next to latest | 03:57 |
142 | Gift codes (part 1) | 12:24 |
143 | Gift codes (part 2) | 06:22 |
144 | Gift codes (part 3) | 02:22 |
145 | Redeeming gift codes | 15:12 |
146 | Admin inviting a user | 06:20 |
147 | Basics of a blog | 01:38 |
148 | Installing contentlayer | 02:30 |
149 | Using contentlayer | 08:55 |
150 | MDX and custom components | 04:58 |
151 | Improving blog & prerender | 09:21 |
152 | The <MetaTags/> component | 10:54 |
153 | Dynamically generating meta image | 07:34 |
154 | Safely typing meta tags | 10:17 |
155 | Local and global shortcuts | 02:47 |
156 | Documenting shortcuts & keeping in sync | 16:45 |
157 | Part 1 | 15:24 |
158 | Part 2 | 10:42 |
159 | Part 3 | 12:53 |
160 | Extending prisma db | 04:52 |
161 | Spotlight (Part 1) | 12:18 |
162 | Spotlight (Part 2) | 06:38 |
163 | Save timezone | 03:07 |
164 | Enhance onboarding wizard | 14:16 |
165 | Detect timezone changes | 05:40 |
166 | Timezone in context | 07:00 |
167 | Implementing webhooks | 09:09 |
168 | Editing webhook with Editable | 04:53 |
169 | Pinging the webhooks | 06:44 |
170 | Two-way binding tabs to URL | 05:09 |
171 | Exposing an API | 06:57 |
172 | Using the API | 12:29 |
173 | API permissions | 09:03 |
174 | Form for creating API tokens | 09:22 |
175 | Form for editing API tokens | 08:01 |
176 | The auto-animate library | 06:03 |
177 | Show a row of icons on hover | 04:01 |
178 | Optimistic updates | 14:18 |
179 | Buying a domain & connecting deployment | 03:27 |
180 | Setting up staging | 04:14 |
181 | Using Mailtrap | 05:54 |
182 | Finalize Mailtrap | 07:52 |
183 | Preparing profile for SSR | 04:46 |
184 | Initial SSR logic | 05:47 |
185 | SSR for user profile | 06:48 |
186 | Handling user not found | 04:28 |
187 | Invoking blitz queries in gSSP | 05:33 |
188 | Serializing data with superjson | 02:37 |
189 | Responsive design | 10:37 |
190 | Refactoring the auth components | 14:47 |
191 | Creating a landing page | 11:56 |