notion clone

? Gagasan Gagasan

Buat dan edit catatan seperti di Notion

Klon ini mencoba mereplikasi beberapa gagasan fitur not-fitur yang bagus. Jika Anda belum tahu gagasan. Jadi, saya sangat merekomendasikan untuk memeriksanya!

? Demo Langsung: Notion-Clone.kmuenster.com

? Artikel Menengah: Cara Membangun Editor Teks Seperti Notion

---

---

Fitur

• Perintah Slash (ketik / untuk mengubah blok menjadi jenis konten yang berbeda)
• Dukungan HTML (gunakan tag HTML biasa seperti <a> di blok teks)
• Dukungan gambar (unggah gambar dengan menggunakan perintah /image )
• Seret dan lepas (ulang blok dengan mudah dengan seret dan lepas)
• Pengeditan Tamu (siapa pun dapat membuat halaman publik dan membaginya melalui tautan)
• Manajemen Pengguna (Buat akun untuk membuat halaman pribadi)
• Pekerjaan Terjadwal (Hapus halaman dan akun yang tidak aktif secara otomatis)

Tumpukan teknologi

Frontend dibangun dengan Next.js dan sepenuhnya disampaikan sisi server. Di backend, API REST menangani menyimpan konten pengguna dan manajemen pengguna.

Frontend

Next.js · react.js · scss/sass

Backend

Express.js · MongoDB dengan Mongoose · Nodemailer · JWT (berbasis kue)

Instalasi

1. Klon proyek

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

2. Tambahkan variabel lingkungan

   Backend: Buat file .env di direktori 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"
   

   Frontend: Buat file .env.local di direktori frontend :

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

3. Instal dan jalankan backend (http: // localhost: 8080)

    cd backend
   npm install
   npm start

4. Instal dan Jalankan Frontend (http: // localhost: 3000)

    cd frontend
   npm install
   npm run dev

Hosting

Anda dapat meng -host aplikasi di hampir semua penyedia yang mendukung aplikasi node dan domain khusus. Saya memutuskan untuk menjadi tuan rumah frontend di Vercel.com dan backend di heroku.com. Tetapi Anda dapat meng -host keduanya, Frontend dan Backend, pada penyedia yang sama jika Anda suka.

Atlas Mongodb

Anda harus membuat cluster MongoDB baru di muka. Ini akan menyimpan semua halaman Anda dan memblokir data. Anda dapat membuatnya secara gratis di MongoDB Atlas.

Pastikan , Anda membuat koleksi berikut:

• halaman
• pengguna

Pastikan , Anda mengizinkan akses jaringan ke semua orang (karena Heroku).

Backend

Jika Anda ingin menggunakan backend di heroku.com, buat aplikasi baru di wilayah pilihan Anda di heroku.com.

Pastikan , Anda menambahkan semua variabel lingkungan produksi untuk backend. Anda dapat melihat variabel mana yang dibutuhkan di bagian instalasi dari readme ini.

Pastikan , Anda menambahkan domain khusus untuk API backend Anda. Karena aplikasi ini menggunakan otentikasi berbasis cookie, kami harus menjalankan backend dan frontend pada domain yang sama. Saya, misalnya, menjalankan frontend di www.notion-clone.kmuenster.com dan backend di api.notion-clone.kmuenster.com .

Ingin menjalankan pekerjaan yang dijadwalkan? Untuk menghapus halaman dan pengguna yang tidak aktif, saya sering menjalankan pekerjaan yang dijadwalkan. Jika Anda menginginkan fitur ini juga, Anda harus menambahkan lebih banyak dyno ke aplikasi Anda dan menjalankan pekerjaan $ node jobs/index.js melalui Heroku Scheduler.

Terakhir, Anda dapat menggunakan aplikasi Anda menggunakan Heroku Git.

Pastikan , bahwa ketika Anda mendorong backend ke Heroku, Anda membuat dorongan subtree git karena notion-clone adalah mono-repo yang berisi backend dan frontend. Jadi jalankan git subtree push --prefix backend heroku master alih -alih git push heroku master . Jadi, kami hanya mendorong bagian backend.

Frontend

Jika Anda ingin menggunakan frontend di Vercel.com, Anda dapat dengan mudah menggunakan Vercel Cli.

Dengan Vercel Cli, kita tidak perlu membuat dorongan subtree, sebaliknya kita bisa beralih ke folder Frontend dan menjalankan perintah vercel untuk digunakan:

 cd frontend
vercel

Ini akan membawa Anda melalui panduan pengaturan untuk aplikasi Frontend Anda. Setelah itu aplikasi harus berhasil digunakan.

Pastikan , Anda menambahkan titik akhir API backend sebagai variabel lingkungan produksi di vercel.com.

Pastikan , Anda menambahkan domain khusus untuk frontend Anda (yang idealnya cocok dengan domain yang telah Anda tentukan dalam variabel lingkungan backend Anda)

Tentang

Konstantin Münster - Konstantin.digital

Didistribusikan di bawah lisensi MIT. Lihat LICENSE untuk informasi lebih lanjut.

https://github.com/konstantinmuenster