chatterbox 다운로드 - chatterbox 소스 코드 다운로드

chatterbox

기타 소스코드

1.0.0

다운로드

수다쟁이

채터 박스는 다음 13과 푸셔로 구축 된 실시간 메시징 응용 프로그램입니다.

그룹 채팅을 만들거나 DM을 시작할 수 있습니다. 사용자는 문자 메시지를 보내거나 여러 비디오 또는 이미지를 업로드 할 수 있습니다.

UI는 실시간으로 업데이트됩니다. 의미 다른 사용자가 채널을 작성하거나 메시지가 전송되면 즉시 업데이트가 표시됩니다.

Vercel에 배포 : https://chatterboxes.vercel.app/

기술 스택

다음 JS 13 및 TypeScript
실시간 업데이트를위한 푸셔.
Orm의 프리즘.
GitHub 또는 이메일로 인증을위한 다음 인증.
파일 업로드에 대한 업로드
스타일링을위한 테일 윈드 스.
Radix UI 프리미티브 + Shadcn UI
양식을 검증하고 API 페이로드를 파싱하기위한 Zod.
구축 양식에 대한 후크 형태.
글로벌 주를위한 Jotai.

다음 13

이 프로젝트는 새로운 Next.js 13 앱 라우터, React Server 구성 요소, 서버 작업, 서스펜스 및 React 18의 cache() 사용합니다.

또한 새 사용자 등록, 메시지 생성 등과 같은 작업을 위해 API 경로 (Vercel에 서버리스 함수로 배포)를 사용합니다.

실시간

사용자가 메시지를 보내거나 채팅을하거나 온라인으로 올 때마다 다른 모든 사용자가 알림을 받고 UI에 실시간으로 업데이트됩니다.

이것은 푸셔와 함께 이루어집니다. 우리는 message:new 또는 chat:update 와 같은 이벤트를 듣습니다 . 사용자가 조치를 취하면 서버에서 이벤트를 트리거 하고 다른 사용자의 청취는 업데이트를받습니다.

있음

이벤트를 듣고 트리거하는 것 외에도 Pusher의 존재 채널은 모든 사용자를 현재 온라인으로 확보하는 데 사용됩니다.

사용자가 로그인하면 모든 활성 사용자를 Pusher에서 얻고 로컬 Jotai 매장에 저장합니다. 사용자가 로그인하거나 로그 오프하면 Pusher는 업데이트를 보내고 JOTAI 매장을 로컬에서 업데이트합니다.

TypeScript

이 프로젝트는 TypeScript로 작성되었으며 Codebase의 TypeSafety를 보장하기 위해 Prisma 생성 유형 및 ZoD 스키마 및 유형을 사용합니다. Prisma는 자동 생성 유형을 자동 생성하기 때문에 유형을 선언하거나 유지하지 않아도됩니다.

zod API 호출 또는 돌연변이를 수행하기 전에 값이 올바른지 확인하기 위해 모든 양식 클라이언트 측을 검증하는 데 사용됩니다.

서버에서 모든 API 경로에는 입력이 유효하고 진행하기 전에 ZOD 스키마에 해당하는 ZOD 유효성 검사가 있습니다.

ESLINT는 또한 코드 품질을 보장하고 버그를 최소화하기 위해 엄격한 규칙으로 구성됩니다.