Chattify is a real-time messaging app that lets users register, set up a profile, and chat with other users. It's one of my first full-stack projects, and honestly it was a proper learning curve from start to finish.
Coming in mostly from the frontend side, I had to figure out a lot as I went structuring a backend with Express, connecting to a database, handling authentication, and getting everything to actually talk to each other. One thing that stood out was using Postman for the first time to test my API endpoints. I hadn't used it before and at first it felt like a lot, but it ended up being really useful for checking that routes were working before the frontend was even set up. It also helped me understand HTTP methods and middleware a lot better than just reading about them would have.
There were plenty of moments where things broke in ways I didn't expect Socket.io not delivering messages, Cloudinary throwing auth errors, MongoDB connection strings causing issues depending on the environment, and a fair amount of Zustand and React Router debugging on the frontend. Each one of those was frustrating at the time but taught me something I wouldn't have picked up otherwise.
This project isn't perfect, but it's mine and I'm proud of how far it pushed me.
- Real-time messaging — Messages are sent and received instantly using Socket.io, no refresh needed.
- Authentication — Users can register and log in. Passwords are hashed with bcrypt and sessions are managed with JWTs.
- Profile pictures — Users can upload and update a profile photo, stored via Cloudinary.
- Online indicators — The app shows which users are currently active.
- Responsive layout — Works on both desktop and mobile.
- Light / dark mode — Theme switching via DaisyUI.
The frontend is built with React and Vite, with Zustand handling global state and Tailwind CSS + DaisyUI for styling. The backend runs on Node.js with Express, connected to a MongoDB Atlas database through Mongoose. Real-time messaging uses Socket.io on both ends, authentication is handled with JWTs and bcrypt, and profile images are managed through the Cloudinary API.
| Layer | Technology |
|---|---|
| Frontend | React 18 + Vite |
| State Management | Zustand |
| Styling | Tailwind CSS + DaisyUI |
| Routing | React Router |
| Real-Time | Socket.io |
| Backend | Node.js + Express |
| Database | MongoDB Atlas + Mongoose |
| Auth | JWT + bcrypt |
| Media | Cloudinary |
Will be added once deployed.
- Node.js
v18+ - A MongoDB Atlas account
- A Cloudinary account
git clone https://github.com/wlo-dev/chattify.git
cd chattifyCreate a .env file in the /backend folder:
PORT=5001
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_api_key
CLOUDINARY_API_SECRET=your_api_secret
NODE_ENV=developmentMake sure
.envis in your.gitignore— don't commit credentials.
# Backend
cd backend
npm install
# Frontend
cd ../frontend
npm install# From /backend
npm run dev
# From /frontend
npm run devFrontend runs at http://localhost:5173, backend at http://localhost:5001.
There's still a lot I want to add to this:
- Group chats
- Message reactions
- Read receipts
- Message search
- Push notifications
Feel free to open an issue or submit a pull request if you spot something or want to contribute.
- Fork the repo
- Create a branch —
git checkout -b feature/your-feature - Commit —
git commit -m "feat: your change" - Push —
git push origin feature/your-feature - Open a Pull Request