Build AI Google Doc Clone with Next.js, Typescript, Clerk, Prisma, Neon (Postgres), OpenAI, ShadCN

Hi all 👋! In this tutorial, you will learn how to create full stack Google Doc clone, with AI features to help you suggest storylines, plot twist and even resume ideas while covering all CRUD operations such as adding, editing, deleting docs, authentication, data manipulation using Next.js, TypeScript, React, Clerk, Google Sign in, Prisma, Neon, ShadCN UI, React Hook forms, Zod, OpenAI, TailwindCSS and more.
📑FREE Modern Next.js 15+ Guide: oliverthedev.com/next15guide
🚀The Ultimate Modern Next.js Complete Course 2024: www.udemy.com/course/ultimate...
⭐ Github Repo for this project: github.com/oliver-gomes/quill...
💡 OLIVER THE DEV COMMUNITY:
nas.io/oliver-the-dev (Support me for the price of a coffee & get exclusive content and resources for career advancement)
✅ SUBSCRIBE SO YOU DON’T MISS ANY TUTORIALS
/ @oliverthedev
⏰ T I M E S T A M P S
00:00 App Demo
07:02 Installation
08:43 Neon Database
10:00 Data Model Prisma
14:50 Clerk Auth
18:00 Components
38:48 New Document
54:30 Recent Document
1:04:58 Single Document
1:08:22 Editor Block
1:46:35 Drawer AI
1:51:56 Open AI Implementation
2:14:00 Doc Templates
2:19:55 Fixing Common Errors and adding Suspense
2:25:52 Recap Demo & Outro
📍CONNECT WITH OLIVER THE DEV:
Twitter/X: / oliver_thedev
Instagram: / oliverthedev
Github: github.com/oliver-gomes
#nextjs #vercel #reactjs #nextjstutorial #openai

Пікірлер: 8

  • @smartdriver2990
    @smartdriver29902 күн бұрын

    Great job bro, keep it up

  • @oliverthedev

    @oliverthedev

    2 күн бұрын

    Thank you! Glad you enjoyed it 😄🙌

  • @pranshubasak8796
    @pranshubasak879617 сағат бұрын

    can i use gemini api rather than open Ai

  • @alexdin1565
    @alexdin1565Күн бұрын

    thanks for sharing but why we can't add images using this editor?

  • @oliverthedev

    @oliverthedev

    Күн бұрын

    Hey, you should be able to add images, I mean i can add images to the editor when i click on the picture icon and upload image from my computer. This feature was added in the editor.tsx modules.

  • @alexdin1565

    @alexdin1565

    Күн бұрын

    @@oliverthedev Thanks, I will recheck it because it's not working in my code

  • @abhisheaksaraswat-ib1of
    @abhisheaksaraswat-ib1ofКүн бұрын

    Great, which VS theme you’re using.

  • @oliverthedev

    @oliverthedev

    Күн бұрын

    Thanks! I am using Material Theme High Contrast