Chathink, a web based realtime chat app for educational institutions

Chathink was my final project for UTU/ESI EMT Computer Science (UTU/ESI EMT Informática) in 2021 that got the a 12 (maximum grade posible), when I was 17 years old. For those unfamiliar with Uruguay’s educational system, UTU (Universidad del Trabajo de Uruguay) is similar to a vocational school, offering high school education with a focus on career-oriented subjects.

Chathink is a web application designed for educational institutions, providing real-time chat with support for multiple languages. The system is built around three roles:

  • Administrators
  • Teachers
  • Students

Each role has its own web interface. The project guidelines required each interface to be a separate web application, which isn’t the approach I would choose today. Ideally, I would combine them into a single application for better component reuse or, at most, separate interfaces for administrators and regular users (teachers and students).

Tech Stack

Frontend

We chose

vue.svg logo Vue
for its easy learning curve. Today, I would likely build something similar using
react.svg logo React
or, preferably
solidjs.svg logo SolidJS
.

Backend

The backend consists of two web services: a RESTful

php.svg logo PHP
service, and a
node.svg logo NodeJS
microservice that powers the real-time chat functionality of Chathink using WebSockets with
socketio.svg logo Socket.IO
. Both services handle authentication through
jwt.svg logo JWT
tokens.

Database

The database is powered by

mysql.svg logo MySQL
, configured with two nodes: one master and one slave.

Server

All systems are set up to run inside

docker.svg logo Docker
containers on
rhel.svg logo RHEL
servers, configured using
ansible.svg logo Ansible
. The
mysql.svg logo MySQL
master-slave setup is also managed through
ansible.svg logo Ansible

Planing

The project was managed using Agile/Scrum methodologies. We completed a total of three sprints, each lasting one month. Below are some visual representations of our progress: Project Overview Project big picture Record of Meetings Record of meetings Product Backlog Product Backlog Examples of Sprint Backlog Sprint Backlog Sprint Planning Sprint Planing Burndown Chart Burndown Chart

Here are some snapshots of the design evolution:

Initial Designs

The early designs were quite basic. First designs

Refined Look and Feel

We then developed a more polished appearance. Second designs Creating a chat room Second designs Chatting in a room Second designs Ending a chat room Second designs

Final Design

The final design of the app: Final designs User changing avatar Final designs Admin page Final designs Registration page with different steps Final designs