Google Calendar Clone with Reactjs | Nextjs

In this tutorial, I walk you through how I built a fully functional Google Calendar clone using Next.js, React, Day.js, Neon Postgres, and Drizzle ORM. You’ll learn how to work with dates efficiently, create and save events, and manage your data using a modern tech stack. Whether you’re a beginner or an advanced developer, this video will provide valuable insights and practical coding tips to enhance your development skills!

👩🏾‍💻 Source code: https://github.com/de-mawo/google-calendar-clone

If you’d like to support my work, here are a few ways:

1. 💡 Purchase my Next.js Multivendor Template at https://saasstart.app/products/dps-resto-multivendor-template . It’s perfect for building scalable e-commerce applications quickly!

2. 📺 Subscribe to my channel to stay updated with more awesome tutorials and content.

3. ☕ Buy me a coffee at buymeacoffee.com/mawondepf to show your appreciation and keep me energized for future tutorials!

Thank you for watching, and don’t forget to like, comment, and share the video if you found it helpful!

TimeStamps

00:00 Project Demo

08:45 Header Scaffolding

40:11 Main View Component

01:28:57 Zustand Global State Set Up

01:44:31 Week View

02:35:20 Day View

02:48:20 Get Current , Previous & Next Week Month/Week/Days functions

02:59:59 Events Create Dialog

03:27:28 Events Summary Dialog

03:42:27 Hide Side Bar & Create Button

03:50:23 Small Sidebar Calendar

04:17:46 Database Setup

04:58:12 Fetch and Display events from Database