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.
https://muhs-notion-clone.netlify.app/
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 🌲
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
Technologies used in the project:
- ReactJS
- TypeScript
- Stripe
- TypeScript
- Convex
- Clerk
- NextJS App routes
- Custom hooks
- TailwindCSS
- Shadcn UI
- Edge store