A high-performance, dark-first social architecture built with Next.js 15, TypeScript, and Tailwind CSS v4. Consolidating micro-posts, long-form editorial content, and archival bookmarking into a single, cohesive feed.
| Main Feed | User Profile |
 |
 |
| Profile Content Tabs | Mixed Stream |
 |
 |
- Dual-stream architecture: Seamlessly toggle between Synchronic Stream (micro-posts) and Archival Editorial (articles).
- Intelligent Header: Adaptive sticky composer that responds to scroll velocity for maximum screen real estate.
- Dynamic Composer: Auto-scaling textarea with integrated character telemetry and validation.
- Inline Expansion: Efficient content truncation with zero-layout-shift expansion for long-form posts.
- Optimistic State: Instantaneous UI updates for interactions utilizing client-side state prediction.
- Condensed Snap-Header: Intersection-observed sticky bar that activates upon banner displacement.
- Visual Identity: Full-bleed media banners with integrated alpha-mask gradients for depth.
- Real-time Metrics: Dynamic follower/following synchronization with the core API.
- Data Partitioning: Tabbed content organization with integrated item-count telemetry.
- Narrative-focused detail view with predictive read-time calculation.
- Media-rich archival presentation with dedicated author modules.
- Integrated response cycles and social interaction hooks.
- Appearance Protocol: Real-time theme injection supporting 6 distinct oklch-based color schemes.
- Persistence Logic: Local-storage synchronization with blocking pre-hydration scripts to eliminate flickering.
- Unified Settings: Centralized interface for identity management and security parameters.
| Token | Value |
|---|---|
| Core Typography | Inter (Sans) / JetBrains Mono |
| Surface Geometry | 2xl / 3xl curvilinear radii |
| Animation Logic | CSS-driven entry transitions |
| Interface Chrome | 4px minimized scrollbars |
Color System (OKLCH-native palettes):
| Schema | Identity |
|---|---|
| Mono | Balanced Neutrals |
| Violet | High-contrast Purple |
| Rose | Warm Spectrum Red |
| Sky | Cool Spectrum Blue |
| Emerald | Natural Spectrum Green |
| Amber | High-visibility Gold |
src/
├── app/ # Routing layer and layouts
├── components/
│ ├── composer/ # Publication interfaces
│ ├── feed/ # Stream rendering logic
│ ├── layout/ # Shell and navigation
│ ├── profile/ # Identity modules
│ ├── settings/ # Configuration protocols
│ └── shared/ # Atomic UI components
├── contexts/ # Global state providers
├── hooks/ # Reactive logic and data fetching
├── lib/ # Core utilities and API clients
└── types/ # Typed contract definitions
# Initialize dependencies
pnpm install
# Execute development environment
pnpm devThe frontend operates as a consumer of the Zerra API. Proxying configuration is handled via next.config.ts, mapping /api/* requests to the core service layer.
Utilizes a centralized fetchApi() provider with the following capabilities:
- Automated credential injection.
- Silent 401 interceptors for background JWT refresh-token rotation.
- Recursive request retries upon successful identity renewal.
- Wide Aspect: Triple-column focused layout with prioritized center-gutter.
- Mobile Aspect: Bottom-docked primary navigation with safe-area compensation.
- Universal layout responsiveness via adaptive Tailwind v4 utility constraints.