Chatter.app

Technologies Getting Started API Endpoints Useful

Simple chatting application

💻 Tools / Technologies

Tool / Technology	Description	Source
Express	Backend	Express
Next.js 14	Frontend	Next.js
Socket.io	Low-latency communication tool	Socket.io
MongoDB	Database for storing messages	MongoDB
Next UI	Used to style a big part of the application	NextUI
Tailwind CSS	Used as a CSS framework	Tailwind CSS
Docker	Used to dockerize the application using a single compose file	Docker

🚀 Getting started

This documentation contains the process of building and running the app using Docker. If you want to manually start frontend and backend, please visit /frontend and /backend directories.

Cloning

git clone https://github.com/daddyDOT/chatter-app.git

Config .env variables

Use the .env.example as reference to create your configuration file .env with your MongoDB Credentials

MONGODB_URI="mongodb+srv://username:password@cluster..."
CLIENT_URL="http://frontend:3000"

Environment variables for frontend are located in ./frontend/next.config.mjs

Important

Install express locally in /backend

Since this docker build requires express to be installed locally first, do:

cd backend/
npm install express --save

Don't forget to go back to the root directory for next step

Starting

cd chatter-app
docker compose build
docker compose up

📍 API Endpoints

​

route	description
GET /messages	retrieves messages from database

Documentations that helped

📝 Socket.io + Next.js

💾 Socket.io + Express

Preview of an app