Leschat! | Messenger real-time | Pern-Graphql
Aplikasi obrolan real -time yang dibuat dengan Pern + GraphQL - Fitur Pesan Privat, Global & Grup
Demo
Disarankan di Netlify (front-end) & Heroku (back-end)
Dibangun menggunakan
Front-end
- ReactJs - Frontend Framework
- Apollo Client - Perpustakaan Manajemen Negara untuk mengelola data lokal dan jarak jauh dengan GraphQL
- Langganan Apollo - Dapatkan pembaruan real -time dari server GraphQL Anda
- Konteks API W/ Hooks - Untuk keadaan pengguna, obrolan yang dipilih, notif toast, tema dll.
- React Router - Untuk Routing & Navigasi Umum
- Bentuk react hook - untuk bentuk yang fleksibel
- Bahan -UI dengan banyak kustomisasi CSS - Perpustakaan UI
- Yup - untuk validasi formulir
- Tanggal -FNS - Untuk memanipulasi & memformat tanggal
Back-end
- Node.js - Lingkungan Runtime untuk JS
- Apollo Server - Untuk membangun server API GraphQL yang mendokumentasikan diri
- Langganan Apollo - Langganan adalah operasi graphQL yang menonton acara yang dipancarkan dari Apollo Server.
- PostgreSQL - Opens -Source SQL Database untuk menyimpan data
- Sequelize - NodeJS ORM untuk database berbasis SQL
- JSON Web Token - Standar untuk Mengamankan/Mengotentikasi Permintaan HTTP
- Bcrypt.js - untuk kata sandi hashing
- Dotenv - untuk memuat variabel lingkungan dari file .env
Fitur
- Otentikasi (Login/ Daftar w/ Nama Pengguna & Kata Sandi)
- Obrolan real-time menggunakan web-sockets
- Pesan pribadi dengan semua pengguna terdaftar
- Saluran Global untuk Obrolan All-Users-At-One
- Pembuatan grup dengan pengguna pilihan
- Pengguna dapat berangkat dari grup setelah ditambahkan
- Pembuat grup dapat menambah/menghapus anggota dari grup
- Pembuat grup dapat menghapus grup, & pesannya bersamanya
- Pencipta kelompok dapat mengganti nama nama kelompok tersebut
- Manajemen kesalahan dengan pesan deskriptif
- Pemberitahuan Toast untuk Tindakan: Membuat Grup, Menghapus Pengguna dll.
- Memuat pemintal untuk proses pengambilan yang relevan
- Tanggal yang diformat untuk menambahkan/memperbarui pertanyaan/jawaban/komentar
- Sakelar mode gelap dengan penyimpanan lokal simpan
- UI responsif yang tepat untuk semua layar
Tangkapan layar
Desktop/tablet
Mobile
Penggunaan
Variabel Env:
Buat file .env di direktori server dan tambahkan yang berikut:
PORT = 4000
JWT_SECRET = "Your JWT secret"
Klien:
Buka klien/src/backendurls.js & ubah objek "backendurls" menjadi:
{
http: "http://localhost:4000",
ws: "ws://localhost:4000/graphql"
}
Jalankan Server Pengembangan Klien:
cd client
npm install
npm start
Server:
Buka Server/Config/Config.json & Perbarui Nilai Kunci Pengembangan agar sesuai dengan kredensial PostgreSQL lokal Anda.
Instal 'Sequelize-Cli' & 'Nodemon' sebagai paket global, jika Anda belum melakukannya.
Jalankan perintah ini untuk memigrasikan tabel SQL ke PSQL lokal Anda sendiri: sequelize db:migrate
Jalankan Backend Development Server:
cd server
npm install
npm run dev
