🔴 Let's build Google Docs with REACT.JS! (Next.js, Rich Text Editor, Tailwind CSS & Firebase)

🔴 LOOKING FOR THE CODE? 🛠️

🎙️ PODCAST

🌍 SOCIALS:

❤️ SUPPORT

🕐 TIMESTAMPS:
00:00 Introduction
01:01 Build Showcase (1/2)
03:26 Tabnine Sponsorship
05:38 Firebase and NextAuth Connection Explained
08:00 Technologies Used in the Build (2/2)
11:27 Initialising the Build
18:59 Building the Contacts Page
22:20 Building the Header Component
57:22 Building the Section underneath the Header
1:23:44 Implementing Firebase
1:33:45 Implementing NextAuth
1:45:57 Implementing Firestore Database
1:53:46 Building the Login Functionality
2:35:47 Building the Create Document Function
2:53:37 Building the Document Row Component
3:04:52 Implementing the Rich Text Editor
3:41:01 Building the Text Editor Component (Check Pinned Comment for Complete File)

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Google Docs and it's subsidiaries in any form. Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for education purposes.

#reactjs #tailwindcss #nextjs

[SonnySangha]

❗HERE's the LAST FILE!!! (ITS THE ONLY PART NEEDED TO FINISH, literally 1 minute away from finishing before it crashed!) - Deployment is the EXACT same as the other Next.js APPS!!!!

Hope you ALL enjoyed this build, I LOVE you all!!!!
#PAPAFAM
💙

TextEditor.js


import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import
import { EditorState } from "draft-js";
import { db } from "../firebase";
import { useRouter } from "next/dist/client/router";
import { convertFromRaw, convertToRaw } from "draft-js";
import { useSession } from "next-auth/client";
import { useDocumentOnce } from

const Editor = dynamic(
() => => module.Editor),
{
ssr: false,
}
);

function TextEditor() {
const [session] = useSession();
const [editorState, setEditorState] =
const router = useRouter();
const { id } = router.query;

const [snapshot] = useDocumentOnce(

);

useEffect(() => {
if {
setEditorState(


)
);
}
}, [snapshot]);

const onEditorStateChange = (editorState) => {
setEditorState(editorState);

db.collection("userDocs")
.doc(session.user.email)
.collection("docs")
.doc(id)
.set(
{
editorState: convertToRaw(editorState.getCurrentContent()),
},
{
merge: true,
}
);
};

return (
<div className="bg-[#F8F9FA] min-h-screen pb-16">
<Editor
editorState={editorState}

toolbarClassName="flex sticky top-0 z-50 !justify-center mx-auto"
editorClassName="mt-6 p-10 bg-white shadow-lg max-w-5xl mx-auto mb-12 border"
/>
</div>
);
}

export default TextEditor;

[hollywoodsprite]

You've improved like mad, able to articulate yourself eloquently and effortlessly live is a very difficult task not to mention an extremely powerful skill to have

[areyoukidding]

For those who still cant understand next js let me help you.. React can be used to write both client-side render pages and server-side render pages(when i say server-side render means it is without next js). Next js is a FRAMEWORK which makes our life easier to make server-side render pages application. The beauty is we write those applications with react components.

[kuo]

I stumbled upon the "window" is not defined problem, then I remember you did a code along for Google Docs. I can't thank you enough.

[pavansiddharthareddy]

Sonny we also want pure mern stack and react native without firebase

[shecodes]

Dude ur energy is insanely amazing, i am mainly coding angular right now but i always come to your videos u r just too awesome

[sunarpichin]

Thanks bro!!!! I genuinely dont understand why the made draft.js so complex🤦🏻‍♂️ You saved me!!

[simply_the_dev]

I"m not done with the video but i found the solution to the break points. I created a styles folder, then created a global.css file and added the three tailwind directives, then lastly i erased the default css import in app.js and listed the global.css instead. And it worked.

[teguhbadrusalam]

I just found this chanel, its totally amazing. You are the real legend. I have hit the bell, i hope i dont miss your live stream in the future. Thanks a lot for your dedication Sonny!!

[vanshajpoonia]

On the road to 100k... Let's do it bro 🔥🔥

[mohibkhan]

This is what I pay for my internet!! 🔥 Really Great Job Sonny Much Appreciated!

[thekrats]

Hey Sonny, first off, big fan of your content! Your tutorials have really helped me level up my coding skills. I'm currently working on my final year Computer Science project and I've chosen to create a Notion clone incorporating the Zettelkasten note-taking method. I know it's a big project, but I believe with the right guidance, I can pull it off. but can you create full Notion clone.

[thevisival]

Yo this is awesome! Thanks Papa Sonny!!

[umangshahi]

when you did the SSR trick for getting the user's image, i couldnt do anything because my mind was literally blown when it actually worked

[thejezzi]

This smile at the beninging like "haha I know how to build awesome stuff and you dont hahahaha noob but I'll show anyway"

[iwacip]

God bless you papareact. This is lit 🔥

[abishkarpoudel]

Finally completed the build litrally was a roller coaster but i did it.Thank you sonny for these builds looking forward to more react js focused projects(uber, zoom etc) lots of love and support from Nepal..

[robfu]

You should make a tutorial on how to make a portfolio, or a business website and stuff like that, it would be awesome!

[dharanigowtham-tj]

at 03:47:40 you need to add "use client" at top of the file to work in 2024 NextJS 14. if you missed it you will get window error

[zuruh]

Your content is really great ! Keep it up man ! Love from France :D