circlechat

A web based chat platform.

About the project

Circlechat is a web based chat application. The core service provided is the instant transmission of messages between users.

In Circhechat, users can

• login, register, and edit their profile
• create channels and update the channels they created
• send messages to channels and edit their own messages
• view whether other users are online

Whenever a channel, message or profile's data is changed it is updated in real time on all clients. This means that when a user updates her profile description, or posts a message, all clients are notified and update the view accordingly.

Architecture

Circlechat is orchestrated through docker. There are 4 containers:

• client: a react-redux javascript client
• web: a REST API and websocket server written in nodeJS
• nginx: an nginx server and reverse proxy, which either serves the client application or routes requests to the API server
• db: a postgresql database

The application can be deployed in two environments:

• dev, meant for development. Features include automatically restarting the client and webserver on code changes for fast development.

• production, optimized for user-facing deployment. For instance, the client is built and minified.

Client

While the client served to all devices, mobile and desktop alike, the view is adapted to the screen size. The mobile layout makes use of touchscreen features, such as swiping between views. On larger screens, more information is displayed.

The client is a single page application, build with react (+react router) and redux. The layout is implemented with css grid.

• available under two color themes (light and dark).
• infinite scroll: more messages are fetched when the user has scrolled to the top of a chat.
• loading bars indicate that a server response is pending.

The store is unit-tested with jest with docker-compose run client npm test

Web

The web container is a nodeJS applcation responsible for the rest API and websockets.

The codebase is separated into modules (auth, profiles, channels, messages). Each module is made up of:

• a service file which handles database interactions
• a router file where express API routes are defined
• an events file which subscribes to websocket events

It is unit tested with mocha with docker-compose run web npm test

REST API

endpoint	method	request body	response body	description
/api/v1/auth/login/	POST	{email, pw}	{token, userId, lastLogoutAt}	login with userId or email. The response includes a JWT token to be sent back with every subsequent request
/api/v1/auth/	POST	{email, pw	none	register a new user
/api/v1/auth/password	PUT	{currentPw, newPw}	{user}	update a user's password
/api/v1/auth/email	PUT	{pw, newEmail}	{user}	update a user's email
/api/v1/auth/:id	GET	none	{userId, email}	get a user's information
/api/v1/auth/:id	DELETE	none	none	delete a user
api/v1/channel/	POST	{profileId, name}	{profileId, name, createdAt, updatedAt}	create a channel for profile with id
api/v1/channel?id	GET	none	{profileId, name, createdAt, updatedAt}	get a channel's information
api/v1/channel/	PUT	{name}	{id, updatedAt}	update a channel
api/v1/channel?	DELETE	none	none	delete a channel
api/v1/channel/all	GET	none	{channels: [{profileId, name, createdAt, updatedAt}]	update a channel
api/v1/message/	POST	{profileId, channelId, text}	{profileId, channelId, text, createdAt, updatedAt}	create a new message for user in channel
api/v1/message?id	GET	none	{profileId, channelId, text, createdAt, updatedAt}	get a message
api/v1/message?id	PUT	{text}	{profileId, channelId, text, createdAt, updatedAt}	update a message
api/v1/message?id	DELETE	none	none	delete a message
api/v1/message/all?id?n?after	GET	none	{messages: [{profileId, channelId, text, createdAt, updatedAt}], hasMore}	get n or all messages maybe after a specific message, in a channel or in all channels
api/v1/profile/	POST	{userId, name?, description?, status?}	{userId, name, description, status}	create a new profile
api/v1/profile?id	GET	none	{userId, name, description, status}	get profile with id
api/v1/profile?userId	GET	none	{userId, name, description, status}	get the profile of a user
api/v1/profile?id	PUT	{name, description, status}	{userId, name, description, status}	update profile with id
api/v1/profile?id	DELETE	none	none	delete profile with id
api/v1/profile/all	GET	none	{profiles: [{userId, name, description, status}]}	get all profiles

Commands

• start in dev environment

  • create a docker machine
  • create a .env file (see docker-compose.yml for the required variables)
  • docker-compose -f docker-compose.dev.yml build
  • run docker-compose -f docker-compose.dev.yml run web node app/manage/create to create the database tables
  • docker-compose -f docker-compose.dev.yml up

• start in prod environment

  • create a docker machine
  • create a .env file (see docker-compose.yml for the required variables)
  • docker-compose build
  • run docker-compose run web node app/manage/create to create the database tables
  • docker-compose up -d

State of development

Currently, circlechat is a MVP. All desired features have yet to be implemented. Namely, all chat and profile features are present, but there exists only one global circle: all users are automatically added to a global circle, which holds all channels and profiles. The next major development step is the implementation of user-created circles, each with their own channels and profiles.