{"id":15513935,"url":"https://github.com/leojuriolli7/chatterbox","last_synced_at":"2026-03-27T02:42:34.180Z","repository":{"id":184743531,"uuid":"671721944","full_name":"leojuriolli7/chatterbox","owner":"leojuriolli7","description":"Fullstack typesafe realtime chat application with Next 13 and Pusher.","archived":false,"fork":false,"pushed_at":"2023-08-24T23:03:45.000Z","size":1686,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-20T07:34:37.057Z","etag":null,"topics":["chat","chatterbox","fullstack","messenger","nextjs","prisma","pusher","radix","reactjs","realtime","shadcn","tailwind"],"latest_commit_sha":null,"homepage":"https://chatterboxes.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leojuriolli7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-28T01:51:15.000Z","updated_at":"2025-05-19T10:45:45.000Z","dependencies_parsed_at":"2024-10-27T19:14:57.020Z","dependency_job_id":"ea9ee722-6658-4c4d-abb2-ed1b1eb7ae32","html_url":"https://github.com/leojuriolli7/chatterbox","commit_stats":null,"previous_names":["leojuriolli7/chatterbox"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/leojuriolli7/chatterbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojuriolli7%2Fchatterbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojuriolli7%2Fchatterbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojuriolli7%2Fchatterbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojuriolli7%2Fchatterbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leojuriolli7","download_url":"https://codeload.github.com/leojuriolli7/chatterbox/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojuriolli7%2Fchatterbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31011550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-27T02:33:22.146Z","status":"ssl_error","status_checked_at":"2026-03-27T02:33:21.763Z","response_time":164,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chat","chatterbox","fullstack","messenger","nextjs","prisma","pusher","radix","reactjs","realtime","shadcn","tailwind"],"created_at":"2024-10-02T09:56:13.193Z","updated_at":"2026-03-27T02:42:34.157Z","avatar_url":"https://github.com/leojuriolli7.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg src=\"./public/images/logo.png\" width=\"50\" height=\"50\" /\u003e Chatterbox\n\nChatterbox is a realtime messaging application built with [Next 13](https://nextjs.org/) and [Pusher](https://pusher.com/).\n\nYou can create a group chat or start a DM. Users can send text messages, or upload multiple videos or images.\n\nThe 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.\n\n**Deployed on Vercel: https://chatterboxes.vercel.app/**\n\n## Tech stack\n\n- Next.js 13 and Typescript\n- [Pusher](https://pusher.com/) for realtime updates.\n- [Prisma](https://www.prisma.io/) for ORM.\n- [Next Auth](https://next-auth.js.org/) for authentication with Github or Email.\n- [UploadThing](https://uploadthing.com/) for file uploads.\n- [TailwindCSS](https://tailwindcss.com/) for styling.\n- [Radix UI](https://www.radix-ui.com/) primitives + [Shadcn UI](https://ui.shadcn.com/)\n- [zod](https://zod.dev/) for validating forms and parsing API payloads.\n- [React Hook Form](https://react-hook-form.com/) for building forms.\n- [Jotai](https://jotai.org/) for global state.\n\n## Next 13\n\nThis project uses the new Next.js 13 App Router, React Server Components, server actions, suspense and React 18's `cache()`\n\nWe also make use of API Routes (Deployed as serverless functions to Vercel) for actions like registering a new user, creating a message, etc.\n\n## Realtime\n\nWhenever 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.\n\nThis 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.\n\n### Presence\n\nBesides listening and triggering events, Pusher's [presence channels](https://pusher.com/docs/channels/using_channels/presence-channels/) is used to get every user currently online.\n\nWhen 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.\n\n## Typescript\n\nThis project is written in Typescript and uses **Prisma generated types** \u0026 **zod schemas** and types to ensure typesafety across the codebase. Because Prisma auto-generates types, we rarely have to declare or maintain any types.\n\n`zod` is used to validate every form client-side to ensure the values are correct before doing any API calls or mutations.\n\nOn the server, every API route also has zod validation to ensure the input is valid and corresponds to the zod schema before proceeding.\n\nESLint is also configured with strict rules to ensure code quality and minimize bugs.\n\n---\n\n### TODOS\n\n1. \"Today\", \"Yesterday\", etc. indicators\n2. Member status text (Description below user preview card)\n3. Group description\n4. Admin role\n5. Add a default initial channel for all members\n6. Improve reads visualization\n7. Open user details on click in GCs\n8. Search channels and users\n9. Delete messages\n10. Send links (scraping - metascraper and autolinking)\n11. Unread counters (In chats and general)\n12. Leaving GCs\n13. Keyboard events on chat input\n14. Change password in settings modal\n15. Forgot password flow with `nodemailer`\n16. **Bugfix**: Videos not showing on iOS\n17. Invite new users to group chat\n18. Mute chats\n19. Infinite scrolling inside chats and on user/chat list\n20. Experiment converting API Routes to server actions (e.g: delete chat)\n21. Search messages\n22. Reading old messages indicator\n23. Reply\n24. Reactions\n25. Gifs\n26. Mentions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleojuriolli7%2Fchatterbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleojuriolli7%2Fchatterbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleojuriolli7%2Fchatterbox/lists"}