notion clone Download - notion clone Download

notion clone

AI-Quellcode

1.0.0

Herunterladen

? Begriffsklon

Erstellen und bearbeiten Sie Notizen wie im Begriff

Dieser Klon versucht, einige der großartigen Notion mit Notizen zu replizieren. Wenn Sie die Vorstellung nicht kennen. Also empfehle ich dringend, es auszuprobieren!

? Live-Demo: Begriff-clone.kmuenster.com

? Mitteler Artikel: So erstellen Sie einen Texteditor ähnlichen Begriff

Begriff Klon Screenshot

Merkmale

Slash -Befehle (Typ / um den Block in verschiedene Inhaltstypen umzuwandeln)
HTML -Unterstützung (Verwenden Sie regelmäßige HTML -Tags wie <a> in Textblöcken)
Bildunterstützung (Bilder hochladen mithilfe des Befehls /image )
Drag & Drop (Blocks leicht durch Drag & Drop) nachzuordnen
Gastbearbeitung (jeder kann öffentliche Seiten erstellen und sie über Link teilen)
Benutzerverwaltung (Erstellen Sie ein Konto, um private Seiten zu erstellen)
Geplante Jobs (automatisch inaktive Seiten und Konten löschen)

Tech Stack

Das Frontend ist mit Next.js und vollständig serverseitig gerendert. Auf dem Backend übernimmt eine REST -API das Speichern von Benutzerinhalten und die Benutzerverwaltung.

Frontend

Next.js · react.js · scss/sass

Backend

Express.js · MongoDB mit Mongoose · NodeMailer · JWT (Cookie-basierte)

Installation

Klonen Sie das Projekt

 git clone https://github.com/konstantinmuenster/notion-clone.git
 cd notion-clone

Umgebungsvariablen hinzufügen

Backend: Erstellen Sie eine .env -Datei im backend -Verzeichnis:

 FRONTEND_URL="http://localhost:3000"
DOMAIN="localhost"
JWT_KEY="yourSecretForTokenGeneration"
PORT=8080
MONGO_URI="mongodb+srv://username:[email protected]/database?retryWrites=true&w=majority"
MAIL_HOST="smtp.sendgrid.net"
MAIL_PORT=465
MAIL_USER="apiKey"
MAIL_SENDER="Your Name <[email protected]>"
MAIL_PASSWORD="yourSendGridApiKey"

Frontend: Erstellen Sie eine .env.local -Datei im frontend -Verzeichnis:

 NEXT_PUBLIC_API="http://localhost:8080" // references your Backend API endpoint

Backend installieren und ausführen (http: // localhost: 8080)
```
 cd backend
npm install
npm start
```
Frontend installieren und ausführen (http: // localhost: 3000)
```
 cd frontend
npm install
npm run dev
```

Hosting

Sie können die Anwendung auf nahezu jedem Anbieter hosten, der Knotenanwendungen und benutzerdefinierte Domänen unterstützt. Ich beschloss, die Frontend auf Vercel.com und das Backend auf Heroku.com zu hosten. Aber Sie können sowohl Frontend als auch Backend auf demselben Anbieter auf demselben Anbieter hosten, wenn Sie möchten.

MongoDb Atlas

Sie müssen im Voraus einen neuen MongoDB -Cluster erstellen. Es wird alle Ihre Seite gespeichert und Daten blockieren. Sie können eine kostenlos auf MongoDB Atlas erstellen.

Stellen Sie sicher , dass Sie die folgenden Sammlungen erstellen:

Seiten
Benutzer

Stellen Sie sicher , dass Sie den Netzwerkzugriff auf alle (aufgrund von Heroku) zulassen.

Backend

Wenn Sie das Backend auf Heroku.com bereitstellen möchten, erstellen Sie eine neue App in Ihrer bevorzugten Region auf Heroku.com.

Stellen Sie sicher , dass Sie alle Produktionsumgebungsvariablen für das Backend hinzufügen. Sie können sehen, welche Variablen im Installationsteil dieses Readme benötigt werden.

Stellen Sie sicher , dass Sie eine benutzerdefinierte Domain für Ihre Backend -API hinzufügen. Da die Anwendung eine Cookie-basierte Authentifizierung verwendet, müssen wir Backend und Frontend auf derselben Domäne ausführen. Ich führe zum Beispiel die Frontend unter www.notion-clone.kmuenster.com und das Backend auf api.notion-clone.kmuenster.com aus.

Möchten Sie geplante Jobs ausführen? Um inaktive Seiten und Benutzer zu löschen, führe ich häufig geplante Jobs aus. Wenn Sie diese Funktion auch wünschen, müssen Sie Ihrer Bewerbung mehr Dynos hinzufügen und den Job $ node jobs/index.js über Heroku Scheduler ausführen.

Zuletzt können Sie Ihre App mit Heroku Git bereitstellen.

Stellen Sie sicher , dass Sie, wenn Sie das Backend nach Heroku schieben, einen Git-Subtree-Druck machen, da es sich um ein Mono-Repo notion-clone das Backend und Frontend enthält. Also rennen Sie git subtree push --prefix backend heroku master anstelle von git push heroku master . So schieben wir nur den Backend -Teil.

Frontend

Wenn Sie das Frontend auf Vercel.com bereitstellen möchten, können Sie die Vercel CLI so einfach verwenden.

Mit der Vercel CLI müssen wir keinen Subtree -Druck machen, stattdessen können wir einfach zum Frontend -Ordner wechseln und den Befehl vercel ausführen, um bereitzustellen:

 cd frontend
vercel

Dadurch führen Sie die Setup -Handbuch für Ihre Frontend -Anwendung. Danach sollte die App erfolgreich bereitgestellt werden.

Stellen Sie sicher , dass Sie den Backend -API -Endpunkt als Produktionsumgebungsvariable auf Vercel.com hinzufügen.

Stellen Sie sicher , dass Sie eine benutzerdefinierte Domain für Ihr Frontend hinzufügen (die idealerweise der Domain entspricht, die Sie in Ihren Backend -Umgebungsvariablen angegeben haben).