Case Study — Social Platform — 2025

Build Different. Connect. Share.

Project Thoughts Social Platform
Stack Next.js · PostgreSQL · Backblaze
Role Full-Stack Development
Duration Weeks 1 – 12
Scroll to explore
01

The Vision

Origin Story
A Blank Canvas for Expression

Thoughts started with a simple question: what if a social platform respected its users? No algorithmic noise, no dark patterns — just a distraction-free space where thoughts and images speak for themselves. We wanted to build something we'd actually want to use.

The Challenge
Full-Stack from Zero

Building a production-grade social platform end-to-end — authentication, post creation, cloud storage, live hosting with SSL — in under 12 weeks. Every decision mattered: database schema, API design, UI components, deployment pipeline.

The Approach
Minimal Interface. Maximum Impact.

We committed to a dark, editorial design language. Every page — from login to feed — follows the same visual system: dark backgrounds, sharp typography, clean card layouts. No feature bloat, no compromises on performance. The stack was chosen deliberately: Next.js 15 for full-stack React, PostgreSQL for relational integrity, Backblaze for cost-effective object storage, and Hetzner + Nginx for battle-tested hosting.

5
Core Pages
12
Weeks of Dev
3NF
DB Normalization
SSL
Let's Encrypt
02

System Architecture

FRONTEND
Next.js 15 with React for server-side rendering and client-side hydration
TailwindCSS for responsive, utility-first styling across all screen sizes
Dark-theme UI system: card components, feed layout, modal overlays, full-screen image viewer
BACKEND
Next.js API routes handle auth, post CRUD, report submissions, and user settings
PostgreSQL on Azure VM — normalized to 3NF — stores users, posts, comments, tags, reports
Serverless function pattern for report-post-via-email flow using Brevo SMTP
STORAGE
Backblaze B2 with S3-compatible API for all user-uploaded post and profile images
Images served via signed URLs with expiry for access control
INFRA
Hetzner VPS running Ubuntu — Nginx reverse proxy routes requests to Next.js process
Cloudflare DNS management, DDoS protection, CDN caching at edge nodes
Let's Encrypt SSL certificate auto-renewal via Certbot on the Nginx host
Uptime Kuma monitoring with email alerts for all critical services
AUTH
JWT-based sessions stored in localStorage for persistent auto-login across page reloads
Unique user IDs assigned at registration; passwords hashed server-side
Password change flow with current-password verification before update
03

Tech Stack

[N]
Next.js 15
Framework · Full-Stack
[R]
React
UI · Component Layer
[T]
TailwindCSS
Styling · Responsive Design
[P]
PostgreSQL
Database · Azure VM
[B]
Backblaze B2
Object Storage · S3 API
[Ng]
Nginx
Reverse Proxy · Hetzner VPS
[CF]
Cloudflare
DNS · CDN · DDoS Guard
[UK]
Uptime Kuma
Monitoring · Alerting
04

Building the Platform

[ IMG ]
Add: Homepage Feed Screenshot
fig 01 — main feed · card layout · dark theme

The Feed: Where It All Lives

The main page renders a scrollable feed of posts in a clean card layout. Each card surfaces the post title, description, author handle, and image if provided — no noise, no ads, just content. Rounded corners, subtle borders, and hover states make browsing feel fluid and intentional.

Posts are fetched server-side via Next.js for fast initial loads, then hydrated on the client for instant interactivity. Images are served from Backblaze via CDN-cached URLs.

SSR Card Layout Image CDN Full-Screen Viewer
[ IMG ]
Add: Login / Register Page Screenshot
fig 02 — auth flow · register & login pages

Auth: Secure by Design

Registration collects name, email, and password. Each user is assigned a unique ID on creation. Passwords are hashed server-side — never stored in plain text. After login, a JWT is stored in localStorage for seamless auto-login on return visits.

Users can log out at any time, and a password change flow requires verifying the current password before updating. All auth pages follow the same dark design system for visual consistency.

JWT Auth localStorage Password Hashing Auto-Login
[ IMG ]
Add: Post Creation Interface Screenshot
fig 03 — post creation · image upload · tagging

Create: Distraction-Free Publishing

The post creation interface strips everything non-essential. Users provide a title, description, optional image, and tags. The image upload connects directly to Backblaze B2 via the S3 API — no intermediary storage on the server, no file-size headaches.

Tags are implemented as a flexible tagging system stored in a separate relational table, allowing posts to be filtered and discovered by topic. The interface uses icon-based controls instead of text buttons for a cleaner, more modern feel.

Rich Tags Direct S3 Upload Icon Controls
[ IMG ]
Add: Post Detail with Comments Screenshot
fig 04 — post detail · right-side comment panel

Comments: Conversation at the Side

When a user opens a post, the full image expands front-and-center with a comment panel docked to the right. This keeps the primary content in focus while keeping discussion accessible — a layout pattern borrowed from the best parts of modern creative platforms.

Comments are fetched per-post and displayed in chronological order. The panel scrolls independently of the image, so long discussions never push the media out of view.

Split-Panel UI Per-Post Comments Full-Screen Image

Development Timeline

Weeks 1 – 2
Project Foundation
Defined project scope, created system definition document, established 3NF database schema, set up Next.js project with TailwindCSS, initialized PostgreSQL on Azure VM.
System Definition DB Schema Wireframes
Weeks 3 – 5
Core Auth + Feed
Built registration and login pages with JWT flow, implemented auto-login via localStorage, created the post feed with SSR, and connected Backblaze for image storage.
JWT Feed SSR Backblaze Integration
Weeks 6 – 8
Check-In #2 Milestone
Completed login/registration flows, post creation with tag support, UI polish pass, bug fixes, report post button, and full cloud integration with SSL certification on Hetzner.
SSL Live Report Button UI Polish Cloud Hosting
Weeks 9 – 11
Feature Completion
Added comment panel, password change feature, icon-based navigation, full-screen image viewer, serverless report-via-email function with Brevo, and resolved all remaining navigation bugs.
Comments Serverless Email Password Change Icon Nav
Week 12
Final Delivery
End-to-end QA, Uptime Kuma monitoring live, final UX review, presentation preparation, and live demo on production environment at xyz.com.
Production Live Monitoring Demo Ready
05

Data Model

User Entity
+ user_id: UUID
+ name: VARCHAR
+ email: VARCHAR
- password_hash: TEXT
+ created_at: TIMESTAMP
has many Posts
has many Comments
Post Entity
+ post_id: UUID
+ title: VARCHAR
+ description: TEXT
+ image_url: TEXT
+ author_id: UUID (FK)
+ created_at: TIMESTAMP
belongs to User
has many Tags, Comments
Comment Entity
+ comment_id: UUID
+ body: TEXT
+ post_id: UUID (FK)
+ user_id: UUID (FK)
+ created_at: TIMESTAMP
belongs to Post
belongs to User
06

Assessment Criteria

Check-In · Week 8–9 · 5%

Mid-Point Milestone

  • Login and registration flows are fully functional with proper validation
  • Post creation interface complete with tag support
  • UI improvements applied across all main pages
  • Bug fixes and error resolution documented in project journal
  • Report post button implemented and wired to backend
  • Cloud hosting live with SSL certification (Let's Encrypt)
  • Backblaze image storage integrated and tested
Final Delivery · Weeks 11–12 · 25%

Final Deliverable

  • Serverless function for reporting posts via email (Brevo SMTP) working end-to-end
  • All buttons and interactive elements function with minimal errors
  • All pages navigate seamlessly — no manual URL entry required
  • Auto-login via localStorage with logout available at any point
  • Password change feature implemented and verified secure
  • Comments panel visible on post detail pages, right-side layout
  • Icon-based navigation replacing text buttons throughout
  • Full-screen image viewer functional on post detail
  • Smooth, polished user experience with no blocking errors
  • Uptime Kuma monitoring active with email alerting configured
07

Live on Production

[ IMG ]
Add: Architecture Diagram or Monitoring Dashboard
fig 05 — uptime kuma · monitoring dashboard · live services

Real Infrastructure. Real Users.

Thoughts runs on a production Hetzner server with a real domain, real SSL, real monitoring. When a user at xyz.com makes a request, it flows through Cloudflare's edge network to Nginx on our VPS, which forwards to the Next.js process, which queries Azure PostgreSQL and fetches images from Backblaze — all in under 200ms.

Uptime Kuma watches the domain, server, database, and storage in real time. If anything drops, an email fires within minutes. This isn't a localhost demo — it's a production system built with the care that production demands.

Production Live Cloudflare CDN Real-Time Monitoring Email Alerting