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

It was built with VueJs and Tailwind CSS . We chose VueJs for its easy learning curve. Today, I would likely build something similar using React or, preferably, SolidJS .

Backend

The backend consists of two web services: a RESTful PHP service, and a NodeJS microservice that powers the real-time chat functionality of Chathink using WebSockets with Socket.IO. Both services handle authentication through JWT tokens.

Database

The database is powered by MySQL , configured with two nodes: one master and one slave.

Server

All systems are set up to run inside Docker containers on RHEL servers, configured using Ansible. The MySQL master-slave setup is also managed through 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