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
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
Quick code scaffolding
  • Quickly scaffolding with Blitz codegen
  • WebStorm Live Templates
  • Webstorm File Templates
  • Leveraging plop for quick code generation
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.)
Animations
  • Use auto-animate to make your app feel more alive
  • 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
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
OAuth
  • Let users sign up and login with
  • GitHub
  • Twitter
  • Google
Mobile PWA
  • Make your app behave like a native app on iOS/Android
  • Techniques for styling etc.
  • Custom icon
  • Custom splashcreen
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
Slack integration
  • Get notified when users sign up
  • Get notified on new payments
  • Get notified on errors in 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
Order now
Last chance to get it with 50% discount!
$299

$149

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.
Buy now
14-day money-back guarantee.
Questions?
TwitterGitHubYouTube

© 2024 Kitze. All rights reserved.