CF

Zero To Shipped

24h 38m 44s
English
Paid

Feeling intimidated by fullstack development? Wondering how some developers can ship a functional app in just one day? This engaging video course demystifies and simplifies the process, helping you build and ship products quickly. Turn the daunting world of fullstack development into an approachable and enjoyable experience.

What You Will Learn

This isn't just your typical programming course. In this engaging video series, you will learn:

  • Fullstack development techniques
  • The proper mindset for shipping products
  • Tools and workflows used by experienced developers

Unlock Fast Shipping

Have you ever wondered, "How do you ship so fast?" Many developers are obsessed with doing things "the right way," which can prevent them from shipping even a single project. This course will teach you fullstack development while changing your overall mindset about development. You’ll experience a breakthrough moment with just two magical lines of code that will transform your web development game forever.

Mastering Laser Focus

The goal is to ship apps and deliver value to the end-user without getting bogged down by useless metrics and optimizations that don't matter. ThOuGhTLeAdErS may distract you with irrelevant concerns. Focusing on what truly matters will enable you to ship your projects effectively.

A Journey to Shipping Your Projects

Many developers don’t ship. They sit on unused subdomains and "side project ideas" collecting dust. Renaming that note to "shipped side projects" is simpler than you think. This course will guide you from scaffolding your app to shipping it in production.

Course Highlights

Welcome to Zero To Shipped

  • Comprehensive overview of databases, including SQL and Postgres
  • Storage solutions and authentication techniques (JWT, OAuth)
  • Roles, hosting environments, and understanding serverless architecture
  • Utilizing AWS, managing cold starts, and ensuring scalability
  • Full front-end and back-end development insights
  • Effective caching, session management, and load balancing
  • Understanding microservices and their implementation

The Magic Stack

Sound overwhelming? Not with the right stack. You'll go from zero to a shipped product in just hours using:

  • Next.js: The React Framework for the Web. Used by large companies to create full-stack applications by extending React features.
  • Blitz.js: The Missing Fullstack Toolkit for Next.js. Provides libraries and conventions for scaling applications.
  • Prisma: Next-generation Node & TypeScript ORM for an improved developer experience with intuitive data modeling.
  • Mantine UI: Features over 150 customizable components and hooks to build web applications quickly and efficiently.
  • TypeScript: A type-safe superset of JavaScript to catch errors early and ensure reliable applications.
  • Zod: TypeScript-first schema validation for reliable projects with streamlined development processes.

About the Author: Kitze (Kristijan Ristovski)

Kitze (Kristijan Ristovski) thumbnail

Kitze (real name Kristijan Ristovski) is a Macedonian developer and entrepreneur who has built a series of solo SaaS products (Sizzy, Benji, Kombai) alongside an active independent-creator presence. He publishes the Zero To Shipped Next.js starter and accompanying course aimed at solo founders shipping production SaaS products fast.

His CourseFlix listing carries two Kitze titles: Zero To Shipped (the SaaS-starter course) and the accompanying Zero To Shipped — The Ultimate Next.js Template. Together they form a complete starter for solo developers shipping monetised SaaS products on the React / Next.js stack.

Material is paid and aimed at developer-founders shipping SaaS products as solo operators. For broader content, see CourseFlix's Next.js and SaaS & Indie Hacking category pages.

Watch Online 191 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 191 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome
All Course Lessons (191)
#Lesson TitleDurationAccess
1
Welcome Demo
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
Unlock unlimited learning

Get instant access to all 190 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in the course?
The course includes a lesson on prerequisites, which suggests that there are some foundational skills or knowledge required before enrolling. While specific prerequisites are not detailed, prospective students should have a basic understanding of web development concepts. Familiarity with JavaScript, web frameworks, and development tools would likely be beneficial to fully engage with the course material.
What will I build during the course?
Throughout the course, students will engage in building a fullstack application using Blitz.js. The lessons cover creating projects in Sizzy, scaffolding a Blitz app, implementing authentication with Mantine forms, and deploying the app to Railway. By the end of the course, students will have a functional web application that demonstrates their skills in fullstack development.
Who is the target audience for this course?
This course is designed for developers who find fullstack development intimidating and want to learn how to ship products quickly and effectively. It aims to change the mindset of developers who may struggle with perfectionism or getting bogged down in unnecessary details, making it ideal for those looking to streamline their development process.
How does the course compare in depth and scope to other similar courses?
The course emphasizes shipping products quickly rather than delving into exhaustive theoretical knowledge. It focuses on practical techniques and tools like Blitz.js, Mantine, and Railway for rapid development and deployment. While it might not cover every aspect of fullstack development, it provides actionable insights and methods to help developers focus on delivering functional applications efficiently.
What specific tools and platforms are covered in the course?
The course utilizes a range of tools and platforms including Blitz.js for application scaffolding, Mantine for styling and forms, Prisma for database interactions, and Railway for deployment. It also touches on using GitHub for version control and managing projects in Sizzy, providing a robust toolkit for fullstack development.
What topics are not covered in this course?
The course does not cover every aspect of fullstack development. It focuses on shipping applications quickly, so topics related to deep optimization, advanced database management, or comprehensive security practices might not be addressed. Instead, the course centers on practical tools and workflows that facilitate rapid development and deployment.
What is the time commitment required to complete the course?
With a total of 191 lessons, the course offers extensive material, but the specific runtime is not provided. Prospective students should prepare to invest a significant amount of time to work through the lessons and projects. Given the focus on rapid development, the course is likely structured to be completed at a swift pace, emphasizing practical application over prolonged theoretical exploration.