shark chat js

แชทฉลาม

แอพแชทที่สร้างด้วย TRPC, Tailwind CSS, Ably, Redis, Cloudinary, Drizzle Orm, Next.js.

ที่เก็บนี้เป็น monorepo (turborepo)

คุณสมบัติ

• สร้างอัปเดตลบกลุ่มแชท
• ส่งอัปเดตลบข้อความ
• Markdown (GFM, ตารางที่รองรับ), การไฮไลต์รหัส, latex ในข้อความ
• ข้อความอ้างอิง
• ข้อความฝังข้อความ (แสดงข้อมูลกราฟของลิงก์ในข้อความ)
• ส่งรูปภาพ/ไฟล์ผ่านข้อความภาพซูมเข้า
• ข้อความโดยตรงกับใคร
• สมาชิก View & Kick Group
• emotes ที่กำหนดเอง
• เชิญสมาชิกกลุ่มผ่านรหัสเชิญหรือ URL
• อัพโหลดอวาตาร์ผู้ใช้แบนเนอร์กลุ่มและไอคอน
• แสดงการแจ้งเตือนเมื่อได้รับข้อความใหม่
• นักเขียนข้อความที่ขับเคลื่อนด้วย AI
• AI chatbot ในตัว (ขับเคลื่อนโดย Inworld)
• ลบบัญชี
• โหมดแสงและมืด
• Typescript 100%

เล่นกับมัน: https://shark-chat.vercel.app
เรียนรู้เพิ่มเติม: https://shark-chat.vercel.app/info

เล่นกับมันในท้องถิ่น

แชทฉลามรวมเข้ากับบริการของบุคคลที่สามจำนวนมากเพื่อรองรับคุณสมบัติที่หลากหลายและทำงานได้อย่างสมบูรณ์แบบในสภาพแวดล้อมที่ไม่มีเซิร์ฟเวอร์

ดังนั้นคุณต้องลงทะเบียนบัญชีสำหรับแต่ละบริการเพื่อตั้งค่าโครงการอย่างถูกต้องก่อนที่จะเล่นกับมันในพื้นที่ กรุณาเติมตัวแปรสภาพแวดล้อมทั้งหมดใน. env.example

upstash

สร้างฐานข้อมูล Redis ที่เว็บไซต์ของพวกเขาและรับ REDIS_URL , REDIS_TOKEN จากคอนโซล

เรียลไทม์

สร้างโครงการใหม่บน https://ably.com วาง ABLY_API_KEY ลงในตัวแปรสภาพแวดล้อม

ฐานข้อมูล

โดยค่าเริ่มต้นจะใช้ Drizzle ORM กับ Neon Serverless PostresQl สำหรับฐานข้อมูล คุณอาจใช้ผู้ให้บริการรายอื่นหากคุณต้องการ

สร้างฐานข้อมูล PostresQL และรับ DATABASE_URL ของคุณ

เป็นเมฆ

สร้างโครงการใหม่บน https://cloudinary.com คัดลอกชื่อคลาวด์คีย์และ API Secret

Auth Next Auth

เติม NEXTAUTH_URL และ NEXTAUTH_SECRET อ่านเอกสารของพวกเขาสำหรับรายละเอียดเพิ่มเติม

ปัจจุบันรองรับ GitHub OAuth เท่านั้น ทำตามคำแนะนำนี้เพื่อตั้งค่าแอพ OAuth บน GitHub สร้าง GITHUB_ID ด้วย GITHUB_SECRET

โหมดการพัฒนา

เรียกใช้ pnpm run dev และแก้ไขไฟล์เพื่อดูการเปลี่ยนแปลง

สร้างจากแหล่งที่มา

โครงการนี้ใช้ turborepo และ PNPM

pnpm run build

มันควรจะสามารถปรับใช้บน Vercel หรือแพลตฟอร์มอื่น ๆ