Sapien-Base

Description

A social-media platform where users can follow other users, create, like and comment on posts and update their user profile.

The Profile page allows users to update their bio as well as view posts they've created, follow requests, people they're following and people they're followed by.

Objective

The objective of Sapien-Base was to create a social-media platform that covered the core functionality of social-media.
Users would be able to follow and be followed by other users upon accepting follow requests. They'd be able to create posts as well as like and comment on posts by other users. Additionally, their dashboard would be populated with recent posts from themselves and users they follow, and they could manage a user profile containing a bio and profile picture.

Viewing the comments on a post also exposes a form to add your own comment.

Tech used

Sapien-Base is powered primarily by Next.js which provides a first-class full-stack framework developer experience. It made development crazily fast, with this project taking only a month from start to finish.


The ability to create pages server-side meant it wasn't necessary to create an API and endpoints for resources. Because of Next.js's server components I could more freely access and handle database interactions.


Next.js really helped with the user experience too. The ability to easily implement loading screens, skeleton loaders and optimistic updates keep Sapien-Base feeling super fast - as if it were a native app.

Sapien-Base User Dashbord on Mobile Device Sapien-Base Loading User Profile on Mobile Device
The responsive design looks great no matter what device is being used.
Different loading messages could be displayed depending on which page was navigated to. The image on the right shows the loader when navigating to the Profile page.

Challenges

I ran into some difficulties during deployment, as this was my first time deploying with Vercel. Initially in development I'd used a direction connection string to my cloud-based Supabase PostgreSQL database. BUT, as it turns out, when deploying to Vercel - and Vercel communicating with external sources - it prefers to use a pooling connection string!

As Vercel would trigger a build each time a change was made on the main Git branch I decided to do the bulk of development on a seperate 'development' branch. This prevented automatic re-deploys whilst I was working on new features.

Let's Keep in Touch

If you're after a developer for your next project, have something you'd like to ask or just want to stay in touch, feel free to reach out.

ruuksine@gmail.com