chatterbox

Pembual

Chatterbox adalah aplikasi pesan realtime yang dibangun dengan 13 dan Pusher berikutnya.

Anda dapat membuat obrolan grup atau memulai DM. Pengguna dapat mengirim pesan teks, atau mengunggah beberapa video atau gambar.

UI diperbarui secara realtime. Artinya ketika saluran dibuat oleh pengguna lain, atau ketika pesan dikirim, Anda akan langsung melihat pembaruan.

Disarankan di Vercel: https://chatterboxes.vercel.app/

Tumpukan teknologi

• Next.js 13 dan naskah
• Pusher untuk pembaruan realtime.
• Prisma untuk ORM.
• Auth berikutnya untuk otentikasi dengan github atau email.
• Unggah untuk mengunggah file.
• Tailwindcss untuk gaya.
• Radix UI Primitif + Shadcn Ui
• Zod untuk memvalidasi formulir dan parsing muatan API.
• Bereaksi bentuk kait untuk bentuk bangunan.
• Jotai untuk negara global.

13 berikutnya

Proyek cache() menggunakan router aplikasi selanjutnya.

Kami juga menggunakan rute API (digunakan sebagai fungsi tanpa server ke Vercel) untuk tindakan seperti mendaftarkan pengguna baru, membuat pesan, dll.

Waktu nyata

Setiap kali pengguna mengirim pesan, membuat obrolan, atau datang secara online misalnya, semua pengguna lain akan diberitahu dan UI mereka akan diperbarui secara realtime.

Ini dilakukan dengan pendorong. Kami mendengarkan acara seperti message:new atau chat:update . Ketika pengguna membuat tindakan, kami memicu acara di server, dan mendengarkan pengguna lain akan menerima pembaruan.

Kehadiran

Selain mendengarkan dan memicu acara, saluran keberadaan Pusher digunakan untuk membuat setiap pengguna saat ini online.

Saat pengguna masuk, kami mendapatkan setiap pengguna aktif dari pendorong dan menyimpannya di toko jotai lokal. Ketika pengguna masuk atau masuk, Pusher mengirimkan pembaruan dan kami memperbarui toko jotai secara lokal.

Naskah

Proyek ini ditulis dalam TypeScript dan menggunakan prisma yang dihasilkan tipe & skema dan tipe ZOD untuk memastikan pengesahan di seluruh basis kode. Karena prisma menghasilkan jenis otomatis, kita jarang harus menyatakan atau memelihara jenis apa pun.

zod digunakan untuk memvalidasi setiap bentuk sisi klien untuk memastikan nilainya benar sebelum melakukan panggilan atau mutasi API.

Di server, setiap rute API juga memiliki validasi ZOD untuk memastikan input valid dan sesuai dengan skema ZOD sebelum melanjutkan.

Eslint juga dikonfigurasi dengan aturan ketat untuk memastikan kualitas kode dan meminimalkan bug.

---

Todos

1. "Hari ini", "kemarin", dll. Indikator
2. Teks Status Anggota (Deskripsi Kartu Pratinjau Pengguna)
3. Deskripsi kelompok
4. Peran admin
5. Tambahkan saluran awal default untuk semua anggota
6. Meningkatkan visualisasi membaca
7. Buka detail pengguna di klik di GCS
8. Saluran pencarian dan pengguna
9. Hapus pesan
10. Kirim Tautan (Mengikis - Metascraper dan Autolinking)
11. Penghitung yang belum dibaca (dalam obrolan dan umum)
12. Meninggalkan GCS
13. Acara keyboard pada input obrolan
14. Ubah Kata Sandi di Modal Pengaturan
15. Lupa aliran kata sandi dengan nodemailer
16. Bugfix : Video tidak ditampilkan di iOS
17. Undang pengguna baru untuk mengelompokkan obrolan
18. Obrolan bisu
19. Menggulir tak terbatas di dalam obrolan dan dalam daftar pengguna/obrolan
20. Eksperimen Mengubah Rute API ke Tindakan Server (misalnya: Hapus Obrolan)
21. Pesan pencarian
22. Membaca Indikator Pesan Lama
23. Membalas
24. Reaksi
25. Gif
26. Menyebutkan