https://github.com/samarbadriddin0v/notion-clone
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.
https://github.com/samarbadriddin0v/notion-clone
clerk convex nextjs stripe typescript
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/samarbadriddin0v/notion-clone
- Owner: samarbadriddin0v
- Created: 2023-11-29T05:54:38.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-02T05:56:55.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T03:01:01.347Z (over 1 year ago)
- Topics: clerk, convex, nextjs, stripe, typescript
- Language: TypeScript
- Homepage: https://notion.sammi.app
- Size: 695 KB
- Stars: 18
- Watchers: 1
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github
README
Building a Notion Clone with Next.js Stripe Node.js Shadcn UI and TypeScript
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/](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