https://github.com/darkhorsecorder/nextjs-notion-clone-vercel
https://github.com/darkhorsecorder/nextjs-notion-clone-vercel
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/darkhorsecorder/nextjs-notion-clone-vercel
- Owner: DarkHorseCorder
- Created: 2023-03-23T15:04:09.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-23T15:04:18.000Z (over 2 years ago)
- Last Synced: 2025-04-03T15:21:22.669Z (6 months ago)
- Language: JavaScript
- Size: 1.22 MB
- Stars: 11
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Nextjs-NotionClone-vercel
[Live Demo](https://sayem-nextjs-vercel.vercel.app/)
## 📓 Notion Clone
#### Create and Edit Notes like in Notion
This clone tries to replicate some of the great note-taking features Notion has. If you don't know [Notion.so](https://notion.so) yet, I highly recommend to check it out!
---
## Features
- **Slash Commands** (Type `/` to turn the block into different content types)
- **HTML Support** (Use regular HTML tags like `` in text blocks)
- **Image Support** (Upload images by using the `/image` command)
- **Drag And Drop** (Reorder blocks easily by drag and drop)
- **Guest Editing** (Anyone can create public pages and share them via link)
- **User Management** (Create an account to create private pages)
- **Scheduled Jobs** (Delete inactive pages and accounts automatically)
## Tech Stack
The frontend is built with Next.js and fully server-side rendered. On the backend, a REST API handles saving user content and user management.
#### Frontend
Next.js · React.js · SCSS/SASS
#### Backend
Express.js · MongoDB with Mongoose · Nodemailer · JWT (Cookie-based)
## Installation
1. **Clone the project**
2. **Add environment variables**
Backend: Create an `.env` file in the `backend` directory:
```
FRONTEND_URL="http://localhost:3000"
DOMAIN="localhost"
JWT_KEY="yourSecretForTokenGeneration"
PORT=8080
MONGO_URI="mongodb+srv://username:password@cluster.gqqwp.gcp.mongodb.net/database?retryWrites=true&w=majority"
MAIL_HOST="smtp.sendgrid.net"
MAIL_PORT=465
MAIL_USER="apiKey"
MAIL_SENDER="Your Name "
MAIL_PASSWORD="yourSendGridApiKey"
```
Frontend: Create an `.env.local` file in the `frontend` directory:
```
NEXT_PUBLIC_API="http://localhost:8080"
```
3. **Install and run backend (http://localhost:8080)**
```sh
cd backend
npm install
npm start
```
4. **Install and run frontend (http://localhost:3000)**
```sh
cd frontend
npm install
npm run dev
```
## Deploy on Vercel.com
### - Sign up on Vercel.com
### - New Project
### - Import from git repository
### - Deployment Build
## Google OAuth2
### Use Google ClientID for google OAuth authentication login.
### Add live site to Google whitelist
### Save all you've done!
## That's all!
## Thanks. @DarkHorseCoder