# Margin | Matthew Bayers

Project type: Social Web Application

Role on this project: Product Design & Full-Stack Development

Year: 2026

Technologies and disciplines: Product Design, UI/UX Design, Next.js, TypeScript, Prisma, PostgreSQL

## Overview

Margin explores a simpler, more intentional social platform through a finite, chronological feed, intentional posting limits, mutual friendships, and smaller shared spaces. It is designed to make room for life outside the feed.

## The concept

Margin began with minimalism. I wanted to explore what a social platform might look like if it were designed around simplicity, intentionality, and the idea that less could offer more. Technology should make room for life, not take up all of it.

## Designing a connected experience

The interface carries a shared visual language across the feed, profiles, gallery, messaging, and Spaces. Warm paper tones, olive accents, the custom Margin Aside typeface, and the original Margin Editorial Geometry icon family give Margin its identity. Responsive navigation, adjustable reading sizes, and motion preferences support the same experience across desktop and mobile.

## From interface to full-stack application

The original implementation connects the interface to authentication, invitation-based membership, PostgreSQL and Prisma, private media, and server-side authorization. Friendship boundaries, conversations, Spaces, and data lifecycle rules carry the product decisions into the application architecture.

## An interactive portfolio demo

The public demo lets visitors explore as Ines, a fictional member, without registering. Visitors can compose posts, try conversations, arrange photographs, and explore Spaces using sample content. Changes stay in memory within one tab and reset on refresh or exit. The full-stack implementation remains in the source, separate from the demo.

## Links

- [Portfolio case study](https://matthewbayers.com/work/margin)
- [Case study in Markdown](https://matthewbayers.com/work/margin.md)
- [Live demo](https://social-8vx3.onrender.com)
- [Source code](https://github.com/mbayers6370/social)