Chatterbox is a realtime messaging application built with Next 13 and Pusher.
You can create a group chat or start a DM. Users can send text messages, or upload multiple videos or images.
The UI is updated in realtime. Meaning when a channel is created by another user, or when a message is sent, you will instantly see the update.
Deployed on Vercel: https://chatterboxes.vercel.app/
- Next.js 13 and Typescript
- Pusher for realtime updates.
- Prisma for ORM.
- Next Auth for authentication with Github or Email.
- UploadThing for file uploads.
- TailwindCSS for styling.
- Radix UI primitives + Shadcn UI
- zod for validating forms and parsing API payloads.
- React Hook Form for building forms.
- Jotai for global state.
This project uses the new Next.js 13 App Router, React Server Components, server actions, suspense and React 18's cache()
We also make use of API Routes (Deployed as serverless functions to Vercel) for actions like registering a new user, creating a message, etc.
Whenever a user sends a message, creates a chat, or comes on-line for example, all other users will be notified and their UI will be updated in realtime.
This is done with Pusher. We listen to events like message:new or chat:update. When a user makes an action, we trigger the event on the server, and other user's listening will receive the updates.
Besides listening and triggering events, Pusher's presence channels is used to get every user currently online.
When a user logs in, we get every active user from Pusher and store them in a local jotai store. When a user logs in or logs off, Pusher sends an update and we update the jotai store locally.
This project is written in Typescript and uses Prisma generated types & zod schemas and types to ensure typesafety across the codebase. Because Prisma auto-generates types, we rarely have to declare or maintain any types.
zod is used to validate every form client-side to ensure the values are correct before doing any API calls or mutations.
On the server, every API route also has zod validation to ensure the input is valid and corresponds to the zod schema before proceeding.
ESLint is also configured with strict rules to ensure code quality and minimize bugs.
- "Today", "Yesterday", etc. indicators
- Member status text (Description below user preview card)
- Group description
- Admin role
- Add a default initial channel for all members
- Improve reads visualization
- Open user details on click in GCs
- Search channels and users
- Delete messages
- Send links (scraping - metascraper and autolinking)
- Unread counters (In chats and general)
- Leaving GCs
- Keyboard events on chat input
- Change password in settings modal
- Forgot password flow with
nodemailer - Bugfix: Videos not showing on iOS
- Invite new users to group chat
- Mute chats
- Infinite scrolling inside chats and on user/chat list
- Experiment converting API Routes to server actions (e.g: delete chat)
- Search messages
- Reading old messages indicator
- Reply
- Reactions
- Gifs
- Mentions