Where imagination finds its voice. A modern, premium blogging and story-sharing social platform built with Next.js 16, React 19, Tailwind CSS v4, and TanStack Query.
Backend Repository: /Storiboard-Server
Live Preview: /storiboard
Storiboard is a fully-featured, highly interactive social blogging platform designed for dreamers, writers, and creators. It offers a beautiful, glassmorphic UI, rich interactive components, and real-time style actions designed to help users share their stories, fiction, memoirs, and ideas without limits.
Whether you're looking to publish rich stories, connect with an audience through a robust followers system, or discover trending ideas from the community, Storiboard provides a seamless, state-of-the-art blogging experience.
Note: Configuration files (package.json, tsconfig.json, etc.) are standard Next.js setup files and are omitted for brevity.
storeboard/
├── 📁 app/ # Next.js App Router - Core application structure
│ ├── page.tsx # Landing page
│ ├── auth/ # Authentication (login, register)
│ ├── home/ # Authenticated user area
│ │ ├── advanced-editor/ # Story publishing dashboard
│ │ ├── followers/ # Followers management
│ │ ├── messages/ # User messaging
│ │ ├── notifications/ # Real-time alerts
│ │ ├── profile/ # User profile & edit
│ │ └── save-post/ # Bookmarked stories
│ ├── admin/ # Admin dashboard
│ └── hooks/ # React hooks (debounce, etc.)
│
├── 📁 components/ # Reusable React components
│ ├── social-post-card.tsx # Main post card component
│ ├── comment-sidebar.tsx # Threaded comments panel
│ ├── create-post.tsx # Post composer
│ ├── home-navbar.tsx # Navigation bar
│ └── ui/ # shadcn/ui primitives (button, card, input, etc.)
│
├── 📁 providers/ # React Context & Providers
│ ├── AuthContext.tsx # Authentication state
│ ├── QueryClient.tsx # TanStack Query setup
│ └── Protect*.tsx # Route protection components
│
├── 📁 utils/ # Utilities & API
│ ├── helpers.ts # Helper functions
│ └── api/
│ ├── endpoints.ts # TanStack Query hooks
│ └── validations.ts # Zod validation schemas
│
├── 📁 lib/ # Library utilities
│ └── utils.ts # Tailwind merge utilities
│
└── 📁 public/ # Static assets
Make sure you have Node.js (v18.x or higher) and npm installed on your machine.
-
Clone the Repository:
git clone https://github.com/devmilon923/Storiboard-UI.git cd Storiboard-UI -
Install Dependencies:
npm install
-
Configure Environment Variables: Create a
.env.localfile in the root directory and configure the environment variables:NEXT_PUBLIC_API_URL=your_backend_api_url NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_name
-
Run the Development Server:
npm run dev
Open http://localhost:3000 in your browser to view the application.
-
Build for Production:
npm run build npm run start
- Secure OTP Verification: Implements 5-digit OTP validation during user registration for enhanced security
- Backend OTP Hashing: OTPs are cryptographically hashed using industry-standard algorithms (likely bcrypt or similar) before storage
- Token-Based Session Management: Uses JWT tokens with automatic refresh mechanisms via
renewTokenendpoints - Multi-Layer Security: Integrates role-based access control (Admin, User, Moderator) with protected routes
- Cursor-Based Pagination: Implements efficient cursor pagination for infinite scrolling with
limitandpc(page cursor) parameters - Trending Feed System: Curated "Trending" tab that surfaces popular posts based on engagement metrics (likes, comments, shares)
- Saved Posts Management: Dedicated "Save Post" tab for bookmarked content with separate API endpoints (
/post/bookmarks/) - Read Time Estimation: Automatically calculates and displays estimated reading time for each post (default 200 words/minute)
- Real-time Feed Updates: TanStack Query manages cache invalidation for instant post creation and bookmark updates
- Multi-Level Comment System: Full support for main comments and nested replies (up to N-levels)
- Threaded Reply Architecture: Replies are linked to parent comments via
sourceIdandcommentType("post" | "replie") - Infinite Comment Pagination: Each comment thread supports infinite pagination through
useGetAllCommentsanduseGetAllRepliehooks - Interactive Comment Sidebar: Dedicated comment panel displaying entire conversation thread with real-time updates
- Comment Actions: Like, reply, and delete functionality on each comment with optimistic UI updates
- Type-Safe Database ORM: Prisma ORM for fully type-safe database operations and migrations
- PostgreSQL Integration: Production-grade relational database with ACID compliance
- Auto-Generated Migrations: Schema versioning through Prisma Migrate for collaborative development
- Optimized Queries: Efficient data fetching with relation loading and selective field queries
- Scalable Architecture: Ready for deployment on cloud platforms like Vercel, Railway, or AWS
- Backdrop blur utility combined with border-opacity overlays (
backdrop-blur-sm bg-card/80 border-border/50) for floating UI panels - Semi-transparent components with visual depth and modern aesthetic
- Premium Dark Mode: High-contrast, deep-slate backgrounds with subtle pastel accents that reduce eye strain while retaining visual vibrance
- Consistent Design System: Tailwind CSS v4 with custom color tokens for cohesive branding
- Readable Typography: Optimized font sizes and line-height ratios for comfortable reading
- Smooth hover animations on actionable items (
group-hover:scale-110 group-hover:rotate-3) - Sleek transitions and fade-in animations (
animate-in fade-in slide-in-from-bottom-4) - Loading states with spinning loaders for async operations
- Flexible grids and flexbox layouts that adapt to desktop, tablet, and mobile
- Native-like experience with proper spacing and touch-friendly buttons
- Persistent navigation bar with contextual menu items
- React 19: Latest React features with server and client components
- Next.js 16: App Router for modern file-based routing and API routes
- TanStack Query: Powerful data fetching, caching, and synchronization
- Tailwind CSS v4: Utility-first CSS with advanced features and plugins
- React Hook Form: Performant form handling with validation
- Zod: Type-safe schema validation for both frontend and backend
- Lucide React: Consistent icon library throughout the application
- Sonner: Beautiful toast notifications for user feedback
- Tiptap Editor: Rich text editor for composing stories with markdown support
- Follow System: Track and manage followers with dedicated followers dashboard
- Like & Bookmark: Interactive post engagement with persistent bookmarks
- Real-time Notifications: Event log system for user interactions and updates
- User Profiles: Comprehensive profiles with bio, website, address, and profession
- Advanced Search & Filtering: Search by profession, with infinite pagination
Storiboard utilizes a carefully curated color system and modern styling guidelines to offer a premium UI:
- Premium Dark Mode: High-contrast, deep-slate backgrounds with subtle pastel accents that reduce eye strain while retaining visual vibrance.
- Glassmorphism: Backdrop blur utility combined with border-opacity overlays (
backdrop-blur-sm bg-card/80 border-border/50) to create floating UI panels. - Micro-Animations: Hover animations on actionable items (
group-hover:scale-110 group-hover:rotate-3) and sleek transitions to keep the application feeling responsive and alive. - Fluid Layouts: Responsive grids and flexboxes configured via Tailwind CSS to ensure a native-like experience on desktop, tablet, and mobile browsers.
This project is licensed under the MIT License. See the LICENSE file for more information.