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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
- 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
- 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.
- 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
- 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
Comments
No comments yet. Be the first to share your thoughts.