Skip to content

BarryCoding/next-google-docs-clone

BranchesTags

Repository files navigation

Pros and Cons

  • Pros: good practice
    • basic
      • react 19
      • next.js 15 app router
    • project standard
      • eslint
      • prettier
    • styling
      • tailwind css
      • UI library
        • shadcn/ui
        • radix/ui
    • app state management
      • zustand
    • libs
      • nuqs
  • Cons:
    • api: convex
    • authentication: clerk
    • library limitations
      • tiptap
      • liveblocks
    • if any of those free services is down, it is hard for me to debug

Project setup

02:13

node -v

npm -v

npx -v

npx create-next-app@15.0.3
# + name: google-docs
# + ts
# + eslint
# + tailwind
# + src
# + app router
# - turbopack
# - import

cd google-docs

code .
# read version installed
npx shadcn@latest --version

# install inside nextjs project
npx shadcn@2.1.6 init
# + new york
# + neutral
# + css variable
# + --legacy-peer-deps
  • install ui components
npx shadcn@2.1.6 add --all
# + --legacy-peer-deps
  • test ui Button in page
npm install -D prettier prettier-plugin-tailwindcss eslint-config-prettier --legacy-peer-deps

Project structure

28:44

  • read routing
    • page.tsx / layout.tsx
    • dynamic [folderName] / group (folderName)
    • Link component

Tiptap editor

46:49

npm i @tiptap/react@2.10.2 @tiptap/pm@2.10.2 @tiptap/starter-kit@2.10.2 --legacy-peer-deps
  • integration
  • style the editor and print mode

Tiptap extensions

01:02:28

npm i @tiptap/extension-task-list@2.10.2 @tiptap/extension-task-item@2.10.2 --legacy-peer-deps

npm i @tiptap/extension-table@2.10.2 @tiptap/extension-table-row@2.10.2 @tiptap/extension-table-header@2.10.2 @tiptap/extension-table-cell@2.10.2 --legacy-peer-deps

npm i @tiptap/extension-image@2.10.2 --legacy-peer-deps

Editor store

01:26:49

npm i zustand@5.0.1 --legacy-peer-deps

Editor tools

01:44:38

  • more Toolbar functions
    • redo | print | spellcheck(not working properly, lang problem?)
    • Marks bold | italic | underline(install) | remove format
    • comment | todo
npm i @tiptap/extension-underline@2.10.2 --legacy-peer-deps

Font family & headings tools

01:58:18

  • FontFamilyButton 
npm i @tiptap/extension-text-style@2.10.2 @tiptap/extension-font-family@2.10.2 --legacy-peer-deps
  • HeadingLevelButton
    • ui DropdownMenu
    • heading
    • be consistent with global css h1 - h6
npm i @tiptap/extension-heading@2.10.2 --legacy-peer-deps

Color tools (text & highlight)

02:19:05

npm i react-color@2.19.3 --legacy-peer-deps
npm i --save-dev @types/react-color@3.0.12  --legacy-peer-deps

npm i @tiptap/extension-color@2.10.2 --legacy-peer-deps
npm i @tiptap/extension-highlight@2.10.2 --legacy-peer-deps

Link and image tools

02:33:26

  • LinkButton
    • Link
    • configure & global css
npm i @tiptap/extension-link@2.10.2 --legacy-peer-deps
  • ImageButton
    • input file hidden

Align and list tools

02:51:23

npm i @tiptap/extension-text-align@2.10.2 --legacy-peer-deps

Font size tool (custom extension)

03:00:03

Line height tool (custom extension)

03:19:40

  • line-height.ts
  • LineHeightButton
  • recommend cursor ai-editor

Margin ruler component

03:32:55

  • ruler.tsx
    • Ruler
      • more accurate!
    • Marker

Navigation bar component

03:59:42

  • public/logo.svg
  • navbar.tsx
    • document-input.tsx
npm i react-icons@5.3.0 --legacy-peer-deps

Navigation bar tools

04:23:57

  • bad save functionalities

Search input component

04:35:01

update project structure:

  • root layout.tsx
    • font: Inter
    • nuqs -> layout.tsx
npm i nuqs@2.2.3 --legacy-peer-deps
  • page.tsx -> (home)/page.tsx(update css and Navbar)
    • (home)/navbar.tsx(SearchInput)
    • (home)/search-input.tsx(useSearchParam)
    • hooks/use-search-param.ts

Template gallery component

05:00:54

  • templates-gallery.tsx
  • constants/templates.ts
  • public/templates/xxx.svg

Database setup (Convex)

05:16:25

npm install convex@1.17.3 --legacy-peer-deps

npx convex dev
# login to convex?
# an existing project
# 'antonio'

# after add the script to package.json
npm run convex

  • context/convex-client-provider.tsx (paste)

  • update root layout.tsx (convex)

  • schema

  • convex/schema.ts

  • convex/documents.ts

    • query get

  • (home)/page.tsx

    • useQuery

Authentication setup (Clerk)

  • TODO: Next.js + Convex + Clerk Diagram

05:33:29

  • Convex + Clerk + Next.js + Clerk
    • create application
    • follow its framework steps
      • install @clerk/nextjs
      • add env variables
      • src/middleware.ts
    • Create a JWT Template
      • Clerk dashboard app -> Configure -> JWT templates -> convex -> save
      • Do NOT rename the JWT token, it must be called convex
      • Copy the Issuer URL
    • Create the auth config
      • auth.config.ts
    • modify convex-client-provider
      • fullscreen-loader.tsx
    • navbar + UserIcon
npm install @clerk/nextjs@6.5.1 --legacy-peer-deps

Create and list documents

05:51:27

  • convex/documents create

  • templates-gallery.tsx

    • useMutation() create doc

  • convex/documents get with pagination

  • (home)/page.tsx (+DocumentsTable)

    • usePaginatedQuery()

  • documents-table.tsx

    • ui table
    • DocumentRow

Update and delete documents

06:19:00

  • DocumentMenu
    • ui dropdown menu
  • convex/documents removeById updateById
  • rename-dialog
    • ui Dialog
    • conflicts with dropdown and dialog modals
  • remove-dialog
    • ui AlertDialog

Search documents

06:49:22

  • convex/documents get
  • (home)page.tsx useSearchParam

Organizations feature

06:57:25

  • clerk dashboard -> configure -> organization settings (enable)

  • Clerk dashboard -> Configure -> JWT templates -> convex

    • claims add "organization_id": {{org.id}}

  • (home / doc)navbar.tsx OrganizationSwitcher + redirects

  • convex/documents create get update

    • add organizationId

  • Toaster

    • root layout
    • remove-dialog.tsx rename-dialog.tsx template-gallery.tsx toast

Collaboration setup (Liveblocks)

07:23:29

  • live block
    • dashboard quick start -> text editor -> liveblocks tiptap -> next.js -> follow the steps
    • room.tsx, threads.tsx
    • update page.tsx editor.tsx, ...
  • eslint error fixed
npm install @liveblocks/client@2.12.2 @liveblocks/react@2.12.2 @liveblocks/react-ui@2.12.2 @liveblocks/react-tiptap@2.12.2 --legacy-peer-deps
# error missing deps then
npm i @tiptap/extension-collaboration@2.10.2 @tiptap/extension-collaboration-cursor@2.10.2 y-protocols@1.0.6 --legacy-peer-deps

npx create-liveblocks-app@2.20240816.0 --init --framework react

Room permissions

07:47:12

  • env liveblocks API key
npm i @liveblocks/node@2.12.2 --legacy-peer-deps
  • api/liveblocks-auth/route.ts
  • convex/documents getById
  • global error
    • FIXME

Populate user information

08:09:06

  • room.tsx
    • resolve users mentionSuggestions
  • [documentId]/actions.ts
  • avatars.tsx + liveblocks.config.ts

Notifications feature

08:30:35

  • inbox.tsx -> navbar.tsx
  • room.tsx authEndpoint
  • convex/documents getByIds + actions.ts
  • global.css liveblocks z-index issue

Collaborative margin ruler

08:47:19

  • liveblocks config storage
  • room.tsx initialStorage
  • editor.tsx useStorage
  • ruler.tsx useMutation

Document information

08:53:29

  • document.tsx

  • [documentId]/page.tsx

  • loading.tsx

  • navbar.tsx props document, update docTitle

  • DocumentInput props title + id

    • use-debounce.ts
    • icons status

  • navbar.tsx

    • new doc (api.create)
    • rename doc
    • remove doc

Templates initial content & app optimization

09:27:31

  • editor.tsx
  • document.tsx
  • threads.tsx
  • constants/editor.ts

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages