Hey everyone, what's up 👋🏻
In this video, we are going to build a full stack scheduling application from complete scratch using the best tech on the market. This includes Next.js, Nylas, Supabase Postgres, Prisma, Tailwind CSS, Auth.js, Shadcn/UI, Vercel, Conform and much more. This is a full-stack tutorial, which means we will build everything from start to finish!
🚀 Nylas: https://rebrand.ly/Nylas-Jan
👁️ Part Two: https://youtu.be/8LR2GdtK0Cs
👨🏻💻 GitHub Repository: https://janmarshal.com/courses/create-a-calendar-scheduling-platform-using-next-js-nylas-auth-js-tailwind-2024
🌍 My Website: https://janmarshal.com/
✅ Follow me on X: https://x.com/janmarshaldev
📧 Business ONLY: jan@alenix.de
Features:
🌐 Next.js App Router
🔍 Nylas Calendar API
💪 Create Meetings, Cancel Meetings, Search up the calendar
🔒 Custom auth using Next–Auth
🔑 OAuth (Google and GitHub)
✏️ Custom booking form with dynamic availability & real-time updates
📆 Fully custom-built calendar—no plugins, all from scratch!
👋 Availability Integration into the calendar
💿 Supabase Postgres Database
💨 Prisma Orm
🌐 Fully responsive landing page with a dark mode toggle
✅ Server Validation using Zod and Conform
😱 Unique Username validation
📧 Automatic email confirmations & real-time event syncing
🗂️ File Upload with Uploadthing
🖥️ Beautiful dashboard for meetings, settings, and availability
🎨 Styling with Tailwindcss and Shadcn UI
😶🌫️ Deployment to vercel
- Beautiful Landing Page
- Server side implementation
- Performance Optimized
- Clean Code
Resources used:
Next.js: https://nextjs.org
Nylas: https://rebrand.ly/Nylas-Jan
Tailwind.css: https://tailwindcss.com
Shadcn/UI: https://ui.shadcn.com
Prisma: https://prisma.io
Supabase: https://supabase.com/
Uploadthing: https://uploadthing.com/
Conform: https://conform.guide/
Vercel: https://vercel.com/
React-Spectrum: https://react-spectrum.adobe.com/react-spectrum/index.html
Zod: https://zod.dev/
Conform: https://conform.guide/
Authjs: https://authjs.dev/
Google Cloud Console: https://console.cloud.google.com/
Timestamps:
00:00 Intro
04:40 Installation
14:30 Project Overview
30:00 Implement Auth with Auth.js
02:00:00 Implement Dashboard Layout
02:50:00 Implement Onboarding Route (username & name)
03:50:00 Implement Onboarding Route (nylas)
04:03:00 Authenticate with Nylas
04:40:00 Create Settings Route
05:30:00 Create Availability Route
06:30:00 Create New Event Route
07:12:00 Create Dashboard Event Route (index page)
07:30:00 Create Booking Form
07:57:00 Create Calendar
09:30:00 Create Time Tables Component & deployment