NextJs Messenger Clone

NextJS-Messenger-Clone

Aplikasi obrolan real-time yang sepenuhnya responsif yang dibuat dengan NextJS 13 (App Router), MongoDB, Tailwind CSS, Pusher, Next-Auth dan Cloudinary.

• NextJS (13.4.x)
• Bereaksi (18.x)
• MongoDB (6.x)
• Tailwind CSS (3.x)
• Pusher (5.x)
• Next-auth (4.x)
• Naskah (5.x)
• Skrip pembuatan produksi

Demo langsung

Lihat demo langsung di Vercel

Fitur

• Pembaruan obrolan real-time dengan Pusher
• Obrolan grup
• Hapus riwayat obrolan
• Hosting gambar dengan cloudinary
• Dukungan Tema Dinamis (mode terang dan gelap)
• Dukungan untuk layar desktop dan seluler

Instalasi

Pengaturan MongoDB

1. Arahkan ke https://www.mongodb.com/atlas/database dan daftar

2. Temukan dan pilih Build a Database
   Pilih tingkat gratis dan tekan di Create di bagian bawah
   

3. Buat Pengguna (Catat Kata Sandi)
   Gulir ke bawah untuk Add entries to your IP Access List
   Masukkan 0.0.0.0/0 dan tekan Add Entry
   

4. Tekan Go to Databases
   

5. Klik Connect dan Pilih MongoDB for VSCode
   Salin string koneksi dan simpan dalam notepad
   Ganti <password> dengan Kata Sandi Anda diatur pada Langkah 3
   Tambahkan test di akhir string koneksi (ex. connectionstring/test )
   

Siapkan otentikasi github

1. Arahkan ke https://github.com/
   Klik dropdown profil Anda di kanan atas
   Klik Settings
   

2. Klik Developer settings
   Klik OAuth Apps
   Klik New OAuth App
   

3. Berikan nama untuk aplikasi Anda
   Jenis http://localhost:3020/ Di Homepage URL dan bidang Authorization callback URL .
   Klik "Daftar Aplikasi"
   

4. Salin Client Id dan perhatikan
   Klik Generate a new client secret , Salin dan Perhatikan
   

Mengatur otentikasi google

1. Arahkan ke https://console.cloud.google.com dan buat proyek baru
   

2. Arahkan ke proyek yang baru dibuat dan cari API & Services
   

3. Pergi ke OAuth consent screen
   Klik Bidang External
   Klik CREATE
   

4. Klik bidang App name dan beri nama
   Di bidang surat pengguna, pilih email Anda
   Gulir ke bawah ke Developer contact information dan ketik email Anda
   Klik SAVE AND CONTINUE sampai Anda berada di Langkah Summary
   

5. Pergi ke Credentials
   Klik CREATE CREDENTIALS
   Pilih OAuth client ID
   

6. Pilih Web application sebagai Jenis Aplikasi
   Gulir ke bawah ke Authorized redirect URIs dan tambahkan http://localhost:3020/api/auth/callback/google
   Klik CREATE
   Salin CLient ID dan Client Secret dan perhatikan
   

Siapkan cloudinary

1. Arahkan ke https://console.cloudinary.com dan login
   Pergi ke Dashboard dan catat Cloud name
   

2. Pergi ke Pengaturan
   Lalu pergi untuk Upload
   

3. Klik Add upload preset
   Ubah Signing Mode menjadi Unsigned
   Klik Save Salin Nama Preset yang Baru Ditambahkan dan Perhatikan
   

Pusher Pengaturan

1. Arahkan ke https://dashboard.pusher.com/channels
   Klik Create app (atau Get Started )
   Beri nama aplikasi
   Pilih React untuk Frontend dan Node.js untuk Backend
   Buat aplikasi
   

2. Pergi ke App Keys
   Catatan Nilai
   

Proyek Pengaturan

1. Klon/Unduh Repo
2. Buat file yang disebut .env.local di direktori root proyek Anda, ketik yang berikut di CMD/PowerShell

    cp env.example .env.local
   

3. Di dalam file .env.local , tambahkan tombol MongoDB, Pusher, Cloudinary, GitHub dan Google dari langkah -langkah sebelumnya
4. yarn install Untuk Menginstal Ketergantungan (Jalankan npm install yarn Jika Anda Tidak Memasang Benang)
5. yarn prisma db push untuk Membuat Koleksi DB
6. prisma generate untuk menciptakan klien prisma

Penggunaan

Perkembangan

yarn dev

• Bangun aplikasi terus menerus (diaktifkan HMR)

Produksi

yarn build yarn start

• Bangun aplikasi sekali (HMR dinonaktifkan) ke /.next/

---

Semua perintah

Memerintah	Keterangan
yarn dev	Bangun aplikasi terus menerus (diaktifkan HMR)
yarn build	Bangun aplikasi sekali (HMR dinonaktifkan) ke /.next/
yarn start	Jalankan Bangunan Produksi

Lihat juga

• Beberapa ide desain diambil dari Facebook Messenger
• Beberapa ide implementasi untuk proyek ini diambil dari Josh dan Antonio
• Proyek bootstrap dengan create-next-app