Forum

A social media where users can upload posts and make nested comments on those posts.

Project Goals

My goal was to gain experience creating a social media application.

Tech Stack

The frontend uses Vue and Nuxt. The backend is built using Supabase with custom database functions. I deployed the application with Netlify for its reliability, integration with Nuxt, and near-zero configuration that allowed me to set everything up quickly.

Problems and Thought Process

I don't often write backend code, so writing the code for the client and server simultaneously was a little challenging, and also a very valuable learning experience.

I initially wrote the backend using Node and Express, but I quickly felt the limitations of my naive JSON-based database. Self-hosting a database system was an option, but a provider like Supabase is simply more robust and reliable. As Supabase is built on Postgres, I had to learn a good amount of SQL to make the backend possible.

One challenge was figuring out how to represent the hierarchical structure of a comment thread in a one-dimensional database. After considering various approaches, I settled on a structure known as closure tables. The idea is store the comments in one table, and a representation of the parent-child relationships in another table. This significantly simplifies querying, insertion, and deletion of comments, and greatly improves response times. It sacrifices higher storage requirements for faster response times, but I think it's a trade-off that's well worth it.

Lessons Learned

What I got the most out of this project is that in many cases the frontend is nothing more than an interface for the backend. A sound software architecture is one where the responsibility of each end is well delineated. As such I now believe every frontend developer should have at least a cursory knowledge of backend programming (and vice versa) in order for them to make informed decisions about their programming.