Prathmesh Kattukar Logo Image
Prathmesh Kattukar

Project 1 - Chattr

Chattr is a real-time one-on-one chat application built with Next.js, TypeScript, Convex, and Clerk. It allows users to authenticate, discover other users, and exchange messages instantly using Convex’s realtime subscriptions. The app includes features like typing indicators, message editing and deletion, read receipts, and a responsive chat interface built with Tailwind CSS, and is deployed on Vercel.

Project Image

Project Overview

Chattr is a real-time one-on-one messaging web application built with Next.js (App Router), TypeScript, Convex, and Clerk. The app enables users to sign up, discover other users, and start conversations with instant message delivery powered by Convex’s realtime data subscriptions. It includes features such as typing indicators, message editing and soft deletion, read receipts, and timestamp formatting. The interface was designed with Tailwind CSS to provide a responsive sidebar–chat layout across devices, and the application is deployed on Vercel with a Convex backend for scalable realtime messaging.

Chattr focuses on real-time user interaction and efficient data flow by leveraging Convex queries and mutations to synchronize messages instantly between users. The project involved structuring conversation and message schemas, handling user presence indicators, and managing client-side state for features like typing status and unread messages. Building this application strengthened my understanding of realtime application architecture, full-stack data flow, and integrating third-party services such as authentication and cloud deployment.

Tools Used

HTML
CSS
JavaScript (ES6+)
TypeScript
React
React Hooks
React Router
Next.js
Tailwind CSS
Convex
Clerk Authentication
Realtime Applications
REST APIs
Responsive Design
GIT
Github
Version Control
Vercel Deployment