ship

Zero To Shipped

An engaging video course
Master Fast-Paced Fullstack Development.
Finally ship that product.
kitze avatar
Taught by
Kitze
This badge costs $8 on Twitter, but free when you add it yourself with CSS *taps forehead*
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.
Hi, I'm Kitze waving emoji
kitze avatar
#1 Product of the day on Product Hunt
#1 Product of the week on Product Hunt
Featured on Hacker News (multiple times)
Featured on TechCrunch
I've been suffering the pain of web development for the last 15 years.

I've been through it all: Dreamweaver. Wordpress. jQuery. PHP. Filezilla. Coffeescript. SPA. Mustache. Handlebars. Angular. Gulp. Bower. React. Webpack. Redux. MobX. GraphQL. Gatsby. Next. You name it.

I've tried everything under the sun, but I've never stuck with anything for longer than a few months. Finally, and I'm saying this with tears in my eyes, I found a stack that I'm using for more than 3 years.

I've shipped production apps that made hundreds of thousands of dollars. I want to teach you how you can do the same. It's not that complex.
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?



Themagicstacksparkles

The simplicity and the power of this stack is unparalleled. You can go from zero to shipped product in a matter of hours.
icon
Next.js
The React Framework for the Web
Used by some of the world's largest companies, Next.js enables you to create full-stack web applications by extending the latest React features.
icon
Blitz.js
The Missing Fullstack Toolkit for Next.js
Blitz picks up where Next.js leaves off, providing battle-tested libraries and conventions for shipping and scaling world wide applications.
icon
Prisma
Next-generation Node & TypeScript ORM
Prisma unlocks a new level of developer experience when working with databases thanks to its intuitive data model, automated migrations, type-safety & auto-completion.
icon
Mantine UI
A fully featured React components library
Mantine helps you build fully functional accessible web applications faster than ever. It includes 150+ customizable components and hooks.
icon
TypeScript
A Robust, Type-Safe Superset of JavaScript
Master 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.
icon
Zod
TypeScript-first schema validation with static type inference
Learn how Zod's expressive API leads to more reliable and robust projects, catching potential errors early and streamlining your development process.
Order now
The course is live, but it's still in development.
If you order now you get a 50% discount!
$299

$149

All all the videos

30% discount coupon for
Sizzy

Enrolling in this course is more than just learning.

It's a commitment to yourself that you'll finally ship that product.
Enroll now
14-day money-back guarantee.

We got you covered

Everything that you need

No hypothetical examples, no toy apps. We'll be using all the techniques to build a real app that will go live in production.

Authentication
  • Login
  • Logout
  • Sign up
  • Reset password
  • Forgot password
  • Verify email
OAuth
  • Let users sign up and login with
  • GitHub
  • Twitter
  • Google
Databases
  • Install Postgres
  • Work with Prisma
  • Start a local database server
  • Browse and manage databases
  • Host a production database
  • Clone data from a production database
  • Use the DB clone while maintaining privacy of your users
Roles
  • Separate user roles on DB level
  • Admin role
  • Only certain roles can perform queries/mutations
  • Easily allow/block actions in the app based on a role
Emails
  • Handle email with Mailgun
  • Set up Mailgun DNS with Namecheap
  • Send emails from your domain
  • Receive emails
  • Composing emails with react and JSX
  • Let users manage their email settings
  • Let users unsubscribe from emails
  • Easily preview emails in browser
  • While developing, catch local emails in a mailbox instead of sending them
  • Catch staging emails in a shared inbox (that your team can see)
  • Send email in bulk to multiple users based on certain criteria
Payments
  • Payment integration with LemonSqueezy
  • A layer on top of Stripe that takes care of VAT, taxes, etc.
  • Accept one-time or subscription payments
  • Webhook integration to get notified on new payments and subscriptions
  • User portal for managing user subscriptions
  • Admin dashboard for managing users and subscriptions
Image video & uploads
  • Let users upload images and videos
  • Automatically get user profile pictures from gravatar, twitter, github
Styling
  • Techniques for using Mantine UI more efficiently
  • Layout components for easily working with Horizontal, Vertical, and Grid elements (auto responsive)
  • Easily change the theme for all of your components
  • Implement light mode and dark mode
Different environments
  • Local environment
  • Expose local environment for testing webhooks etc.
  • Set up a staging environment (auto deployed from “development” branch)
  • Production environment (auto deployed from “main” branch)
  • Easily simulate staging/production env variables while working locally on your app
Typesafety
  • Typesafe routes
  • Typesafe forms
  • Typesafe queries
  • Typesafe modals
  • Typesafe mutations
  • Typesafe env variables (build fails if a variable is missing)
Live and fresh data
  • Techniques that will make your website feel as realtime as possible
  • Optimistic UI
Hosting
  • Buy a domain for your app
  • Host your app on a server
  • Connect your deployment to a domain
  • Have different subdomains for variations of the app, or other apps
  • i.e staging, admin, dashboard, etc.
Forms
  • Typesafe forms
  • Styled with Mantine
  • Easily composable
Error handling
  • Handle errors with error boundaries
  • Show errors in toast
  • Show errors in form fields
  • Automatically catch errors with Sentry
  • Get notified on errors in Slack
User profiles
  • Change password
  • Upload profile/cover picture
  • Nudge user to finish profile
Keyboard shortcuts
  • Local keyboard shortcuts
  • Global keyboard shortcuts
  • Displaying shortcuts and keep them in sync with bindings
Dynamic meta tags
  • Easily generate dynamic meta tags with Next.js
  • Use JSX and inline styles / tailwind for dynamic meta tags
Admin panel
  • Browse all users
  • Manage user payment subscriptions
  • Manage billing plans
  • Accept/reject invites
  • Send an invite to a user directly
Responsiveness
  • Techniques to make the app responsive without manually dealing with media queries
  • Tips and tricks on using Sizzy for responsive design
Pagination
  • Server side logic for pagination
  • Client side logic for pagination
Mobile PWA
  • Make your app behave like a native app on iOS/Android
  • Techniques for styling etc.
  • Custom icon
  • Custom splashcreen
Quick code scaffolding
  • Quickly scaffolding with Blitz codegen
  • WebStorm Live Templates
  • Webstorm File Templates
  • Leveraging plop for quick code generation
Desktop app
  • Easily convert your app into a desktop app with Electron
  • Installer with updates
  • Dock icon badge
  • Menubar tray text
  • Custom menu bar popup
AI integration
  • Implementing AI in your app with the OpenAI API
  • Moderate content with AI
Analytics dashboard
  • Easily host and create a dashboard to look at the stats from your app
  • Example: how many users signed up, bought a subscription, did an action, etc.
  • Host dashboard on a subdomain
Status page
  • Show the availability of your app on a separate status page
  • Integrate with a downtime monitoring service
Landing page
  • When no user is logged in, show a basic landing page
  • Use Mantine to quickly make a landing page for your app
Modal management
  • Easily manage global modals
  • Local modals
  • Stacking modals
  • Blocking modals that prevent the user to use the app until they take an action (i.e changing timezone, onboarding, etc.)
Slack integration
  • Get notified when users sign up
  • Get notified on new payments
  • Get notified on errors in your app
Animations
  • Use Framer Motion to make the app smoother
  • Make your UI nicer with hover interactions (i.e row of icons that appears on hover)
  • Enter/Exit animations
Blog
  • Add a blog section to your website
  • Manage content with MDX files
  • Render MDX
  • Custom MDX elements and components
  • Server render your blog
Server-side rendering
  • Some pages have to be server rendered for better performance and SEO
  • Learn techniques on how to do that with Next.js
Onboarding wizard
  • Welcome users with an onboarding wizard
  • Mandatory and async steps
Exposing an API
  • Expose typesafe API endpoints with Next.JS so that other apps can integrate with your app
  • Allow user to generate an API token and use the API endpoints of your app
Cron jobs
  • Schedule cron jobs to do something periodically
Invite system
  • Set up an invite
  • Let users request an invite
  • Admin can browse the invites and search / accept them
  • Admin sends gift codes to users, 5 invites each
  • Users send invite links to their gift codes to other users
Command bar
  • Set up a command center for your application
  • Similar to macOS spotlight, Alfred and Raycast
  • Let users easily navigate and do actions in your app
Webhooks
  • Let your users set up webhooks
  • Ping the webhook URLs when certain events happen in your app
Timezones
  • Let user save their timezone
  • Auto detect timezone changes and let user confirm
  • Display and filter data in user’s timezone
Using AI
  • Use AI tools like ChatGPT efficiently
  • Techniques for using GitHub Copilot and quickly scaffolding code
  • Use Midjourney to generate icons, images, landing page elements, and assets for your app
Telegram bot integration
  • Easily control your app with Telegram
  • Let users perform certain actions through telegram
Downtime monitoring
  • Monitor if your app is up
  • Get pinged/called when it goes down
  • Integrate and show the availability on a status page
Embedding changelogs
  • Instantly inform users about new changes in your app
  • Nudge users to open the latest changes in your app and mark them as read
Submitting bugs
  • Set up a system so users can easily report a bug from within the app
Kitze’s Workflow
  • Learn Kitze's techniques for quickly shipping apps
  • All the apps that that will enhance your dev. workflow
  • The setup and plugins for your code editor
  • Keyboard shortcuts
  • Live templates
  • Scripts
  • etc.
Enroll now

How is the course development going?

Full transparency

I'm going to be fully transparent with the course progress. The course is being released in multiple phases. As soon as a chunk of videos is ready, it goes live and you will you will get access to it. When you sign up, you can watch all the videos that are published right now (90+). You can expect new videos every week until the course is done.

Main content (90 modules)
100%
Advanced content (50 modules)
0%
Bonus content (24 modules)
0%
Frequently asked questions

© 2023 Kitze. All rights reserved.