Performance

Measured runtime and rendering behavior

Lighthouse 95TTFB 520ms

Preloads critical authenticated data with preloadAuthQuery in server layouts/pages to reduce initial client waterfalls.
Uses paginated queries (usePaginatedQuery) and intersection-based infinite scrolling for feed and notifications.
Defers non-critical UI with next/dynamic (ssr: false) for edit/delete dialogs.
Uses lazy media loading (next/image with lazy loading and video pause-on-scroll via IntersectionObserver).
Debounces search input before querying (useDebounce) to limit unnecessary backend traffic.

Security

Trust boundaries and protection model

Access control is enforced both at routing and backend levels using `proxy.ts` cookie checks and Convex auth guards (`requireAuth`/`requireAuthUserId`) in mutations.Authorization checks are applied to sensitive mutations (e.g., editing/deleting posts, deleting notifications) and upload routes require authenticated middleware in UploadThing.

Route access is guarded in proxy.ts by session-token cookie checks, redirecting unauthenticated users away from protected routes.
Backend mutations enforce authentication through requireAuth / requireAuthUserId helpers and return Unauthorized when missing auth.
Ownership/authorization checks are enforced before destructive actions (for example, post edit/delete and notification deletion).
UploadThing routes (postMedia, avatar, chatImage) require authenticated middleware and enforce file type/size limits.

Access control is enforced both at routing and backend levels using `proxy.ts` cookie checks and Convex auth guards (`requireAuth`/`requireAuthUserId`) in mutations.
Authorization checks are applied to sensitive mutations (e.g., editing/deleting posts, deleting notifications) and upload routes require authenticated middleware in UploadThing.

Lessons

What improved engineering quality over time

Optimistic interfaces must include reconciliation logic against authoritative real-time data to avoid duplicated or stale UI states.Privacy features require consistent cross-module enforcement; account privacy and online-status settings must be respected by profile visibility, follow flows, and presence queries.

Real-time products need explicit optimistic-state reconciliation rules, not just optimistic updates.
Privacy requirements must be treated as domain invariants and enforced consistently across all relevant modules.
Hybrid rendering works best when initial route data is server-preloaded and high-frequency updates stay on live client subscriptions.
Typed backend modules and shared validation reduce feature drift as social-domain complexity grows.

Optimistic interfaces must include reconciliation logic against authoritative real-time data to avoid duplicated or stale UI states.
Privacy features require consistent cross-module enforcement; account privacy and online-status settings must be respected by profile visibility, follow flows, and presence queries.

Outcome

Resulting system quality and product impact

productionfullstack

Delivered a deployed social platform with authenticated feed, search, explore, messaging, notifications, and profile/settings flows.
Implemented private-account follow requests and conditional profile/post visibility.
Added media upload workflows for posts, avatars, and chat images with auth-gated upload endpoints.
Added custom OG generation for posts/pages and polished interaction patterns (animations, skeletons, responsive mobile behavior).

Building a serious product with high engineering standards? Let's architect it with clarity.

Start a Conversation

Z-Social

Z-Social is a full-stack Next.js 16 + Convex social platform that implements authenticated real-time feed, messaging, notifications, follow-requests for private accounts, and search over posts/usernames.

fullstackproduction

Next.jsFullstackRealtimeSocial GraphTypeScriptApp Router

Next.js 16
TypeScript
Convex
Better Auth
Tailwind CSS v4
UploadThing
Zustand
Zod

LighthouseTTFBmsScreens

Highlight

Implemented a hybrid feed system that combines follow-based pagination with discovery injection from friends-of-friends and engagement-ranked strangers.

Highlight

Built real-time direct messaging with optimistic UI, image upload flow, cancel/retry handling, read-state updates, typing status, and online presence.

Highlight

Implemented privacy-aware social graph behavior with private accounts, follow requests (pending/accepted/rejected), and conditional profile/post visibility.

Live Demo GitHub

Problem

Constraints and product-level risks

Next.jsFullstackRealtime

Deliver a social feed that supports both followed content and meaningful discovery for users with sparse networks.
Support real-time one-to-one messaging with media while keeping the UI responsive under network variability.
Implement privacy controls (private profiles, follow requests, online visibility) without breaking core engagement flows.
Keep auth, uploads, notifications, and profile operations consistent across server-rendered routes and client-interactive screens.

Approach

Implementation direction and execution strategy

Next.js 16TypeScriptConvex

Z-Social is a full-stack social networking application built with Next.js 16 App Router and Convex.
It delivers authenticated real-time feed, messaging, notifications, search, and profile workflows in a single web app.
The core goal is to provide a modern social experience with privacy-aware follow mechanics and responsive real-time updates.

Architecture

System boundaries and layered decisions

renderingdatadomain

Rendering Model

The app uses Next.js App Router with server components for route/layout composition and metadata generation, then hydrates client feature components for interactive real-time behavior through Convex subscriptions.

Data Strategy

Convex serves as backend, database, and real-time transport, with typed tables/indexes/search-indexes and dedicated modules for posts, comments, follows, messages, notifications, users, and search.

Domain Logic

Business logic is implemented in Convex mutations/queries: feed construction and discovery injection, reaction/comment/mention notifications, private-account follow-request workflows, messaging presence/read-state, and profile visibility gating.

Frontend

Next.js App Router

Data / Reactivity

Structured Data Layer

Backend / Domain

Domain Boundaries

Performance

Runtime Discipline

Auth / Security

Trust Boundaries

Node Explanation

The app uses Next.js App Router with server-rendered route shells and metadata, then hydrates client feature modules that subscribe to live Convex queries.

(See architecture visual below.)

Performance

Measured runtime and rendering behavior

Lighthouse 95TTFB 520ms

Preloads critical authenticated data with preloadAuthQuery in server layouts/pages to reduce initial client waterfalls.
Uses paginated queries (usePaginatedQuery) and intersection-based infinite scrolling for feed and notifications.
Defers non-critical UI with next/dynamic (ssr: false) for edit/delete dialogs.
Uses lazy media loading (next/image with lazy loading and video pause-on-scroll via IntersectionObserver).
Debounces search input before querying (useDebounce) to limit unnecessary backend traffic.

Security

Trust boundaries and protection model

Route access is guarded in proxy.ts by session-token cookie checks, redirecting unauthenticated users away from protected routes.
Backend mutations enforce authentication through requireAuth / requireAuthUserId helpers and return Unauthorized when missing auth.
Ownership/authorization checks are enforced before destructive actions (for example, post edit/delete and notification deletion).
UploadThing routes (postMedia, avatar, chatImage) require authenticated middleware and enforce file type/size limits.

Access control is enforced both at routing and backend levels using `proxy.ts` cookie checks and Convex auth guards (`requireAuth`/`requireAuthUserId`) in mutations.
Authorization checks are applied to sensitive mutations (e.g., editing/deleting posts, deleting notifications) and upload routes require authenticated middleware in UploadThing.

Lessons

What improved engineering quality over time

Real-time products need explicit optimistic-state reconciliation rules, not just optimistic updates.
Privacy requirements must be treated as domain invariants and enforced consistently across all relevant modules.
Hybrid rendering works best when initial route data is server-preloaded and high-frequency updates stay on live client subscriptions.
Typed backend modules and shared validation reduce feature drift as social-domain complexity grows.

Optimistic interfaces must include reconciliation logic against authoritative real-time data to avoid duplicated or stale UI states.
Privacy features require consistent cross-module enforcement; account privacy and online-status settings must be respected by profile visibility, follow flows, and presence queries.

Outcome

Resulting system quality and product impact

productionfullstack

Delivered a deployed social platform with authenticated feed, search, explore, messaging, notifications, and profile/settings flows.
Implemented private-account follow requests and conditional profile/post visibility.
Added media upload workflows for posts, avatars, and chat images with auth-gated upload endpoints.
Added custom OG generation for posts/pages and polished interaction patterns (animations, skeletons, responsive mobile behavior).

Building a serious product with high engineering standards? Let's architect it with clarity.

Start a Conversation