Skip to content

Explore the development of a powerful Notion clone using NextJS, Stripe for payments, NodeJS for backend, Shadcn UI for sleek design, and TypeScript for robust, type-safe code. Unlock seamless collaboration and dynamic content management.

Notifications You must be signed in to change notification settings

samarbadriddin0v/notion-clone

Repository files navigation

Building a Notion Clone with Next.js Stripe Node.js Shadcn UI and TypeScript

project-image

Unlock the potential of modern web development by enrolling in our comprehensive course on building a Notion clone using cutting-edge technologies. This hands-on project-based learning experience will guide you through the entire process of creating a feature-rich collaborative note-taking application equipped with the latest web development tools and frameworks.

🚀 Demo

https://notion.sammi.ac/

🧐 Features

Here're some of the project's best features:

  • Real-time database 🔗
  • Recover deleted files 🔄📄
  • Stripe Integration
  • Subscription plan
  • Light and Dark mode 🌓
  • Blocknote
  • Expandable sidebar ➡️🔀⬅️
  • Infinite children documents 🌲

🛠️ Installation Steps:

1. Install packages

npm i & yarn install

2. Setup .env file

# CLERK AUTHORIZATION ENVIRONMENT VARIABLES
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=

# CONVEX ENVIRONMENT VARIABLES
CONVEX_DEPLOYMENT=
NEXT_PUBLIC_CONVEX_URL=

# DOMAIN
NEXT_PUBLIC_DOMAIN=

# EDGE STORE
EDGE_STORE_ACCESS_KEY=
EDGE_STORE_SECRET_KEY=

# STRIPE 
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
NEXT_PUBLIC_STRIPE_SECRET_KEY=

3. Setup Convex

npx convex dev

4. Start the app

npm run dev

💻 Built with

Technologies used in the project:

  • ReactJS
  • TypeScript
  • Stripe
  • TypeScript
  • Convex
  • Clerk
  • NextJS App routes
  • Custom hooks
  • TailwindCSS
  • Shadcn UI
  • Edge store

About

Explore the development of a powerful Notion clone using NextJS, Stripe for payments, NodeJS for backend, Shadcn UI for sleek design, and TypeScript for robust, type-safe code. Unlock seamless collaboration and dynamic content management.

Topics

Resources

Stars

Watchers

Forks