CAChat - A Chat App Website

Project Specification

  • Tools/Languages: TypeScript (JavaScript), React, Supabase (PostgreSQL), Node.js, Cypress, Jest, and other Node libraries
  • Workflow tools: GitHub Planner and GitHub Actions
  • Environment: Solo full-stack developer
  • Timeline: Actively maintaining as needed
  • Project Link: Website, Repository, Demo

Description

This is a chat app with many customization features, end-to-end encryption, and other amazing features that allow you to keep up with your friends from anywhere. Create private chats just for you and your friends, or discoverable chats that anyone can join. Encryption features can also encrypt your message so that only you and your friends can read it. This is a comprehensive chat app that allows you to do many things, so join us!

Video Demo

Backend

The server is developed in Node.js, hosted on Render, and containerized via Docker. It is secured by Render’s SSL enforcement. This is where most of the communications with the database (Supabase cloud service) and secure logic of the application happen.

While Supabase has the ability to provide a server-less backend, I do not think that it is ready for that yet. Instead, I decided to encapsulate it via this server to perform heavier tasks like data type validations, acting as an API endpoint for the website’s contact form, and Hcaptcha verifier.

Frontend

The frontend is developed using React, with MaterialUI being the main UI library used. Powered by MaterialUI, I was able to have cometic features like dark mode and chat customization. For the most part, MaterialUI is responsive, pretty, and simple to look at. In the past, I have used TailwindCSS, but I felt that I should try experimenting with more established libraries.

Here is a collage from this website:

Home:

Chats:

Friends:

Discover:

Protected Routes:

Profile:

Account:

You can customize the appearances of the website:

Dark mode:

Chat and Message:

Address

Surprise, AZ, United States of America