تنزيل notion clone - تنزيل رمز مصدر notion clone

notion clone

كود الذكاء الاصطناعي

1.0.0

تنزيل

؟ استنساخ الفكرة

إنشاء وتحرير الملاحظات مثل في الفكرة

يحاول هذا الاستنساخ تكرار بعض فكرة ميزات الملاحظات الرائعة. إذا كنت لا تعرف فكرة. حتى الآن ، أوصي بشدة بالتحقق من ذلك!

؟ التوضيح المباشر: فكرة clone.kmuenster.com

؟ المقالة المتوسطة: كيفية بناء محرر نصية مثل الفكرة

فكرة استنساخ لقطة شاشة

سمات

أوامر SLASH (اكتب / لتحويل الكتلة إلى أنواع محتوى مختلفة)
دعم HTML (استخدم علامات HTML العادية مثل <a> في كتل النص)
دعم الصور (تحميل الصور باستخدام أمر /image )
السحب والإفلات (إعادة ترتيب الكتل بسهولة عن طريق السحب والإفلات)
تحرير الضيوف (يمكن لأي شخص إنشاء صفحات عامة ومشاركتها عبر الرابط)
إدارة المستخدم (إنشاء حساب لإنشاء صفحات خاصة)
الوظائف المجدولة (حذف الصفحات والحسابات غير النشطة تلقائيًا)

مكدس التكنولوجيا

تم تصميم الواجهة الأمامية باستخدام Next.js وجانب الخادم بالكامل. على الواجهة الخلفية ، يتعامل API REST مع حفظ محتوى المستخدم وإدارة المستخدم.

الواجهة

next.js · React.js · SCSS/Sass

الخلفية

express.js · mongodb مع mongoose · nodemailer · jwt (قائم على ملفات تعريف الارتباط)

تثبيت

استنساخ المشروع

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

إضافة متغيرات البيئة

الواجهة الخلفية: إنشاء ملف .env في الدليل backend :

 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"

الواجهة الأمامية: إنشاء ملف .env.local في دليل frontend :

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

تثبيت وتشغيل الواجهة الخلفية (http: // localhost: 8080)
```
 cd backend
npm install
npm start
```
تثبيت وتشغيل الواجهة الأمامية (http: // localhost: 3000)
```
 cd frontend
npm install
npm run dev
```

الاستضافة

يمكنك استضافة التطبيق على أي مزود تقريبًا يدعم تطبيقات العقدة والمجالات المخصصة. قررت استضافة الواجهة الأمامية على vercel.com والخلفية على Heroku.com. ولكن يمكنك استضافة كل من الواجهة الأمامية والخلفية ، على نفس المزود إذا كنت ترغب في ذلك.

Mongodb أطلس

يجب عليك إنشاء مجموعة جديدة من MongoDB مقدمًا. سيخزن جميع صفحتك وحظر البيانات. يمكنك إنشاء واحدة مجانًا على أطلس Mongodb.

تأكد من إنشاء المجموعات التالية:

الصفحات
المستخدمون

تأكد من السماح بالوصول إلى الشبكة إلى الجميع (بسبب هيروكو).

الخلفية

إذا كنت ترغب في نشر الواجهة الخلفية على Heroku.com ، فقم بإنشاء تطبيق جديد في منطقتك المفضلة على Heroku.com.

تأكد من إضافة جميع المتغيرات البيئية للإنتاج للواجهة الخلفية. يمكنك معرفة المتغيرات المطلوبة في جزء التثبيت من هذا ReadMe.

تأكد من إضافة مجال مخصص لواجهة برمجة تطبيقات الواجهة الخلفية. نظرًا لأن التطبيق يستخدم مصادقة قائمة على ملفات تعريف الارتباط ، يتعين علينا تشغيل الواجهة الخلفية والواجهة في نفس المجال. أنا ، على سبيل المثال ، قم بتشغيل الواجهة الأمامية على www.notion-clone.kmuenster.com والخلفية على api.notion-clone.kmuenster.com .

تريد تشغيل وظائف مجدولة؟ لحذف الصفحات غير النشطة والمستخدمين ، أقوم بتشغيل وظائف مجدولة بشكل متكرر. إذا كنت تريد هذه الميزة أيضًا ، فيجب عليك إضافة المزيد من Dynos إلى طلبك وتشغيل Job $ node jobs/index.js عبر Heroku Scquduler.

أخيرًا ، يمكنك نشر تطبيقك باستخدام Heroku Git.

تأكد من أنه عندما تدفع الواجهة الخلفية إلى Heroku ، فإنك تقوم بدفع الشجرة الفرعية GIT لأن notion-clone هي عبارة عن ريبو أحادي يحتوي على الواجهة الخلفية والواجهة الأمامية. لذا قم بتشغيل git subtree push --prefix backend heroku master بدلاً من git push heroku master . وبالتالي ، فإننا ندفع الجزء الخلفي فقط.