Community Platform.
A full-stack community platform combining a public showcase, multi-step membership applications, role-based authentication, applicant management, project CMS, and a BlockNote-powered publishing system in a single Next.js application.
Full-stack Web Application · 2025–2026
- 01 · Role
- Full-stack development · Product architecture · UI/UX implementation
- 02 · Platform
- Responsive Full-stack Web
- 03 · Period
- 2025–2026
- 04 · Status
- Full-stack Web Application · 2025–2026
Project context
Community Platform is a full-stack web application I built around the concept of a fictional creative-technology and social-impact collective. Rather than being only a marketing landing page, the product combines a public showcase, multi-step community applications, authentication, role-based authorization, an admin workspace, applicant management, project publishing, and a Studio Journal CMS. Public visitors can explore the collective, its areas of work, published projects, and journal stories, then submit an application to join. Administrators use a protected Studio OS to manage applications, projects, publications, profile information, and active sessions.
Core challenge
The main challenge was combining a visually expressive creative-community website with a real database-backed management system inside one coherent Next.js architecture. Public content needed to come from the database, projects and journal entries published by administrators needed to appear automatically on the public site, detailed community applications had to be collected and organized, and protected routes had to remain inaccessible to unauthorized users. Additional challenges included storing rich-text documents as structured JSON, adapting interaction patterns between desktop and mobile, and balancing a motion-heavy interface with a maintainable full-stack architecture.
What I built
- 01
Built the public website and protected admin workspace as one full-stack application using Next.js App Router, React, and TypeScript.
- 02
Designed the data layer with Prisma ORM and PostgreSQL around User, Session, Account, Verification, Announcement, and Work models.
- 03
Integrated Better Auth with the Prisma adapter to provide email/password authentication, database-backed sessions, and extended community profile fields.
- 04
Implemented a role-based access model where public applications are created with the `user` role and the administrative role cannot be supplied or changed through client-side registration input.
- 05
Protected the Studio OS through server-side authorization checks at login, protected layout, server-action, and API-route levels.
- 06
Built a multi-step community application flow collecting name, birth year, phone, email, password, profession, field of study, skills, motivation, and city.
- 07
Used React Hook Form and Zod for structured validation, password rules, phone formatting, and normalization of user-submitted data.
- 08
Developed an applicant management table with TanStack Table supporting search, sorting, pagination, column visibility, fullscreen mode, and city/role/profession/field filters.
- 09
Built a Project CMS where administrators can create, edit, and delete project entries and have published work appear automatically in the public Selected Work section.
- 10
Implemented a Studio Journal CMS with BlockNote, allowing administrators to create stories using cover images, titles, and block-based rich-text content.
- 11
Stored BlockNote documents as JSON in PostgreSQL and reconstructed them on public journal pages through a read-only BlockNote renderer.
- 12
Built dynamic SEO metadata for individual journal stories, including title, description, Open Graph, Twitter Card, publication time, update time, and article-specific preview imagery.
- 13
Created a dynamic API route that converts base64 journal cover data stored in the database into binary image responses suitable for social previews.
- 14
Added reading progress, scroll-to-top behavior, author metadata, and sharing through the Web Share API, Twitter/X, LinkedIn, WhatsApp, email, and copy-link actions.
- 15
Used Framer Motion across landing-section reveals, staggered animations, mobile navigation, multi-step form transitions, cards, dialogs, and interaction feedback.
- 16
Integrated Lenis to provide smooth scrolling across the public landing experience.
- 17
Created a reusable responsive UI system with Tailwind CSS 4, shadcn/ui, and Radix UI primitives.
- 18
Implemented adaptive interaction patterns that use Dialog components on desktop and Drawer interfaces on mobile for settings and sharing flows.
- 19
Used Zustand for lightweight global UI state management of the settings modal and its active tabs.
- 20
Implemented administrator profile editing, profile-image updates, and the ability to invalidate active sessions across all devices.
- 21
Connected the public landing page to PostgreSQL-backed project and journal content while providing curated demo content as a fallback when the database is empty.
Technical approach
The application is built with Next.js App Router, React, and TypeScript. The public landing page retrieves the Better Auth session together with published project and Studio Journal records from PostgreSQL through Prisma, then passes that data into client-side motion components. Prisma ORM provides the data-access layer over PostgreSQL, with the production database configured through a Neon-compatible DATABASE_URL. Better Auth uses its Prisma adapter for email/password authentication, persisted sessions, and account data. Accounts created through the public community application receive the default `user` role, while access to the Studio OS requires an `admin` session. Authorization is enforced beyond the UI layer through protected layouts, server actions, and API routes. Project and announcement CRUD operations are implemented through Next.js server actions, followed by `revalidatePath` calls so public content reflects administrative changes. Studio Journal entries are stored as BlockNote JSON documents and rendered publicly with a read-only BlockNote editor. Next.js dynamic metadata generates story-specific Open Graph and Twitter previews. Tailwind CSS 4, shadcn/ui, and Radix primitives form the interface layer; Framer Motion provides transitions and interaction animation, Lenis handles smooth scrolling, React Hook Form and Zod manage application validation, TanStack Table powers the applicant data grid, and Zustand manages lightweight global UI state.
System structure
- 01
Framework
Next.js · React · TypeScript - 02
Database
PostgreSQL · Neon · Prisma - 03
Authentication
Better Auth · Database Sessions - 04
Authorization
Applicant/User · Admin - 05
CMS
Projects · Studio Journal · BlockNote - 06
Forms
React Hook Form · Zod - 07
Data Grid
TanStack Table - 08
UI
Tailwind CSS · shadcn/ui · Radix UI - 09
Motion
Framer Motion · Lenis - 10
State
Zustand - 11
Deployment
Vercel
Current state
The project currently works as a full-stack community platform with a public showcase, membership application flow, admin-only Studio OS, applicant management, Project CMS, and Studio Journal. Projects and journal stories created by administrators are persisted in the database and surfaced on the public website. Public applications are created under the `user`/Applicant role, while management routes and mutations are protected by the `admin` role. Although the codebase contains some UI preparation for an `editor` role and a `status` field exists on the User model, a separate editor authorization layer and a complete Accept/Reject application workflow are not currently implemented.