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:
Protected Routes:
Profile:
Account:
You can customize the appearances of the website:
Dark mode:
Chat and Message: