antonioerdeljac/notion-clone-tutorial

Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023

This is a repository for Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023

VIDEO TUTORIAL

Key Features:

• Real-time database 🔗
• Notion-style editor 📝
• Light and Dark mode 🌓
• Infinite children documents 🌲
• Trash can & soft delete 🗑️
• Authentication 🔐
• File upload
• File deletion
• File replacement
• Icons for each document (changes in real-time) 🌠
• Expandable sidebar ➡️🔀⬅️
• Full mobile responsiveness 📱
• Publish your note to the web 🌐
• Fully collapsable sidebar ↕️
• Landing page 🛬
• Cover image of each document 🖼️
• Recover deleted files 🔄📄

Prerequisites

Node version 18.x.x

Cloning the repository

git clone https://github.com/AntonioErdeljac/notion-clone-tutorial.git

Install packages

npm i

Setup .env file

# Deployment used by `npx convex dev`
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=

Setup Convex

npx convex dev

Start the app

npm run dev

notion-clone-tutorial's Issues

dark:hidden & dark:block not working properly

Hey there, while toggling from light to dark theme and from large to medium screen, not getting proper ui look.
seems like dark:hidden & dark:block is not working, how can I resolve these issue please help..

Please Helpppp: Unpublished url error

Getting this issue when I try to see an unpublished url

Unhandled Runtime Error Error: Convex functions should not be imported in the browser.

convex\documents.ts (6:32) @ eval

4 | import { Doc, Id } from "./_generated/dataModel";
5 |

6 | export const archive = mutation({
| ^
7 | args: { id: v.id("documents") },
8 | handler: async (ctx, args) => {
9 | const identity = await ctx.auth.getUserIdentity();

even though my convex server is running, I'm facing this error.

Navigation component breaks in mobile view

I have this problem that is extremely annoying for the UX. How could I solve it?

You have reached your limit of 500 users.

api.documents.getById: missing the required field `id` issue

Hi there, i have encountered this issue.

Unhandled Runtime Error
Error: [CONVEX Q(documents:getById)] [Request ID: 81d15a7f7fb88b35] Server Error
ArgumentValidationError: Object is missing the required field `id`. Consider wrapping the field validator in `v.optional(...)` if this is expected.

Object: {}
Validator: v.object({id: v.id("documents")})


  Called by client

app/(main)/(routes)/documents/[documentsId]/page.tsx (24:28) @ api

  22 | const Editor = useMemo(() => dynamic(() => import("@/components/editor"), { ssr: false }) ,[]);
  23 | 
> 24 | const document = useQuery(api.documents.getById, {
     |                          ^
  25 |   id: params.id
  26 | });
  27 | 

Does anyone could help with that? really appreciate that!

Convex Login Fail

When Login from comand-line. Browser window day successful but terminal fail with error
Error: Socket connection timeout
Please help me tried to find online docs but didn't find any solution. Tried to login multiple times.

VIDEO TUTORIAL url false 🙂

it points to Discord Clone TUTORIAL
Thank u again for your contributions to the Next.js community!!!

Deleting document permanently does not delete coverImages and images in content

I observed that we were not handling the scenario when we deleted a document from the trash, the cover image and all the images associated with the content in the edgestore still existed. I fixed it for my version. I liked the tutorial and learned a lot from it. Please review if the changes I did handled this issue correctly or not.
apoorvyadav1111/Motion@a4982f9

Looking forward to get inputs from you.

Convex useConvexAuth

Not sure why Convex UseConvexAuth is not working for me. isAuthenticated is always false despite logging in and Clerk says i'm logged in. could be a convex problem..tbh i just want to follow the tutorial without the hassle.

this is my solution to overcome the problem so far..

import { SignInButton, SignUpButton, UserButton, useAuth } from "@clerk/clerk-react";
import Link from "next/link";

import { useScrollTop } from "@/hooks/use-scroll-top";
import { ModeToggle } from "@/components/mode-toggle";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/spinner";
import { cn } from "@/lib/utils";

import Logo from "./logo";

export const NavBar = () => {
  const { isSignedIn, isLoaded } = useAuth();
  const scrolled = useScrollTop();

  return (
    <div
      className={cn(
        "z-50 bg-background dark:bg-[#1F1F1F] fixed top-0 flex items-center w-full p-6",
        scrolled && "border-b shadow-sm"
      )}
    >
      <Logo />
      <div className="md:ml-auto md:justify-end justify-between w-full flex items-center gap-x-2">
        {!isLoaded && <Spinner />}
        {!isSignedIn && isLoaded && (
          <>
            <SignInButton mode="modal">
              <Button variant="ghost" size="sm">
                Log in
              </Button>
            </SignInButton>
            <SignUpButton mode="modal">
              <Button size="sm">Get Jotion free</Button>
            </SignUpButton>
          </>
        )}
        {isSignedIn && (
          <>
            <Button variant="ghost" size="sm" asChild>
              <Link href="/documents">Enter Jotion</Link>
            </Button>
            <UserButton afterSignOutUrl="/" />
          </>
        )}
        <ModeToggle />
      </div>
    </div>
  );
};

export default NavBar;

Clerk says I logged in, but convex does not

const { isAuthenticated, isLoading } = useConvexAuth();
console.log(isAuthenticated) gives false

therefore I don't see the option to log out or button

Un-archive will bring back the dead

I believe un-archiving a parent will un-archive children that had been archived before the parent was. E.g.:

• Add a document P
• Add a child document C
• Archive document C - maybe we didn't mean to create it.
• Later on, you accidentally archive P
• Un-archive P
• Now C has been restored too, maybe not what you want

onEditorContentChange initialization option is deprecated

const editor: BlockNoteEditor = useBlockNote({ editable, initialContent: initialContent ? (JSON.parse(initialContent) as PartialBlock[]) : undefined, onEditorContentChange: (editor) => { onChange(JSON.stringify(editor.topLevelBlocks, null, 2)); }, uploadFile: handleUpload, });

Error: onEditorContentChange initialization option is deprecated, use , the useEditorChange(...) hook, or editor.onChange(...)