Project: Building Inkflow — A Full-Stack Social Publishing Platform in Next.js 16

Live: View Live Preview

Stack: Next.js 16 · TypeScript · Prisma · PostgreSQL · NextAuth · Tailwind · Zod

Inkflow is a full-stack publishing platform where users can write rich blog posts, follow creators, bookmark content, and engage through likes and threaded comments.

Built with the Next.js App Router architecture, Inkflow demonstrates secure authentication flows, relational data modeling, content workflows, and scalable UI patterns.

Key Highlights

• Multi-provider authentication (Credentials, Google, GitHub)
• Rich-text publishing with BlockNote editor
• Follow system with follower/following dialogs
• One-level threaded comment system
• Like & bookmark engagement system
• Tag-based discovery and paginated feed
• In-app notification system (DB-backed)
• Role-based admin access
• Email verification & password reset via Resend
• Deployed on Vercel with Neon PostgreSQL

Inkflow showcases production-style architecture using server actions, Prisma relational modeling, and JWT-based session handling.

1. Why I Built Inkflow

Most portfolio projects stop at CRUD. I wanted to go beyond that and build something closer to a real social publishing product — including authentication, relational data modeling, content workflows, and user interaction systems.

Inkflow started as a blog platform project, but I expanded and refined it into a production-style full-stack application with social features, structured data relationships, and deployment-ready architecture.

2. Product Goals

The goal was to build a system where users can:

• Create and publish rich blog posts
• Discover content via tags and search
• Follow other users
• Like and bookmark posts
• Comment with one-level threaded replies
• Receive in-app notifications
• Manage profile information
• Securely authenticate via multiple providers

3. Architecture Overview

Inkflow is built using the Next.js 16 App Router, leveraging:

• Server Components for rendering and data fetching
• Client Components for interactivity
• Server Actions for secure mutations
• Middleware for route protection
• Prisma for relational data modeling

Request Lifecycle

Request → Middleware → Server Component Render → HTML → Hydration → Client Interaction → Server Action → Cache Revalidation

This hybrid rendering model improves performance and SEO while maintaining SPA-level interactivity.

4. Tech Stack Decisions

- Framework

Next.js 16 (App Router)

Chosen for hybrid rendering, server actions, built-in routing, and full-stack capabilities.

- Database

PostgreSQL (Neon)

Relational schema required for users, follows, comments, and notifications.

- ORM

Prisma

Used for type-safe queries and modeling relationships between:

• Users
• Blogs
• Comments
• Likes
• Bookmarks
• Follows
• Notifications
• Tokens

- Authentication

NextAuth (Auth.js v5)

• JWT session strategy
• Credentials + Google + GitHub
• Prisma Adapter
• Email verification + password reset via Resend

Forms & Validation

• React Hook Form
• Zod schema validation
• Server-side validation enforcement

- Editor

BlockNote for rich-text blog creation.

File Upload

EdgeStore for cover image handling.

5. Data Modeling

Inkflow contains 10 core models:

• User
• Blog
• Comment
• CommentLike
• Like
• Bookmark
• Follow
• Notification
• EmailVerificationToken
• PasswordResetToken

Relational Highlights

• One-to-many: User → Blogs
• Many-to-many via join tables: Likes, Bookmarks
• Self-relation: Comment → parentId (one-level threading)
• Follow graph: User ↔ User
• Notification linked to user, blog, or comment

This relational structure mirrors real social platform architecture.

6. Feature Implementation Highlights

6.1 Publishing Workflow

• Draft vs published state
• Tag-based filtering
• Cover image upload
• Paginated feed /blog/feed/[page]

6.2 Engagement System

• Likes (unique per user/blog)
• Bookmarks (unique constraint)
• One-level threaded replies
• Comment likes

6.3 Social Graph

• Follow/unfollow system
• Followers/following dialogs
• Follow model storing relationships

6.4 Notifications (DB-backed)

Stored in database when:

• Someone follows you
• Someone comments
• Someone replies

(Real-time delivery intentionally not implemented due to Vercel websocket limitations — architectural tradeoff.)

6.5 Role-Based Access

UserRole.ADMIN used for access restriction on protected routes and server actions.

7. Security Design

• User ID derived from session, not client input
• Zod validation on all mutations
• Middleware route protection
• Unique constraints at DB level
• Server-side authorization enforcement

8. Deployment Architecture

• Vercel for hosting
• Neon PostgreSQL
• Resend for transactional email
• OAuth credentials for Google/GitHub

Prisma client generated during postinstall to ensure correct deployment on Vercel.

9. Engineering Lessons Learned

• Server/client boundary discipline improves scalability
• Never trust client-provided IDs
• Relational modeling must be carefully designed before implementation
• Cache revalidation is critical after server mutations
• Production-ready auth is more complex than simple JWT tutorials

10. What I Would Improve Next

• Real-time notifications via WebSocket-compatible hosting
• Infinite scroll feed
• Better loading and empty states
• Creator analytics dashboard
• Full-text search with indexing