14 - Oct - 2023

Notion Clone

• npx create-next-app@latest notion-clone

• npx convex dev

• npx shadcn-ui@latest init

• npx shadcn-ui@latest add dropdown-menu

• npx shadcn-ui@latest add alert-dialog

• npx shadcn-ui@latest add skeleton

• npx shadcn-ui@latest add command

• npx shadcn-ui@latest add popover

• npx shadcn-ui@latest add avatar

• npx shadcn-ui@latest add button

• npx shadcn-ui@latest add input

• npx shadcn-ui@latest add label

• npm install @clerk/clerk-react

• npm install next-themes

• npm install usehooks-ts

• npm install zustand

• npm install convex

• npm install sonner

npm run dev <== for running app

npx convex dev <== for connect DB

Learning context:-

• file & folder structure
• group routing system
• fab-icon dark/light theme toggle support
• shardcn-ui dark/light theme toggle
• custom hook for tracking scrolling
• user auth system
• sliding draggable side bar
• TypeScript props passing
• Design layout system
• Resizing HTML element
• convex db query
• at Navigation.tsx -
  • inside handelMouseDown function implement addEventListener
  • inside handelMouseUp function implement removeEventListener