NUMENEON
Full-stack social network — React, Node, MongoDB, glassmorphic SCSS design system, 3-column River Timeline.
Architecture
Wireframe
ERD
About
Numeneon is a full-stack social platform centered on a chronological feed. It replaces infinite scroll with the River Timeline — a three-column layout where each friend gets their own row, capped at 12 posts per category.
The River Timeline
Standard feeds have one problem: everything competes for the same
vertical lane. The River Timeline solves this with parallel
horizontal currents — Thoughts, Media, Milestones — one row per
friend. The Sluice Gate caps each row at 12 items
before overflow. The frontend processes this in 4 steps:
GROUP → SORT → SPLIT → RENDER
Smart Feed Algorithm
The Smart Feed weights posts by recency and exposure: 50% chronological, 30% boosted (low-reach creators), 20% trending. Viral spread is throttled — the more widely something has already been seen, the lower its ranking.
What Else Lives Here
Real-time messaging via WebSockets. A hidden MyStudio — a MySpace Basement tribute with Top 8 friends, custom themes, and embedded music players. A Daily Learning page with Big O notation, mythology, and a rotating tech term — built because I wanted to use it myself.
Tech Stack
My Role
Lead Designer & Architect. Designed the full-stack architecture (frontend and backend), led wireframing and UI strategy, and built the dual-theme system, River Timeline, Profile Card with contribution heatmap, Wave Chart, Heatmap, Messaging Modal, mobile responsiveness, and the full SCSS design system.
Project Type
Bootcamp Project
Key Features
River Timeline
Three-column feed with epoch-based grouping and carousel navigation. One user, one row—no infinite scroll chaos.
Profile Flip Card
Dual-sided card showing profile info on front, analytics dashboard with wave chart and heatmap on back.
Real-time Messaging
WebSocket-powered DMs with conversation list and instant notifications.
Theme Toggle
Dark mode (neopunk neon) and light mode (platinum brushed aluminum) with persistent preferences.
Mobile Responsive
Tab-based navigation and optimized layouts for mobile viewing.
Global Search
Search modal for finding users and posts across the platform.
MyStudio
Nostalgic throwback profile with music player, Top 8 Friends grid, theme picker, and personal mood display.
Daily Learning
Bilingual study tool (EN/ES): Big O, loops, methods, tech jargon, 948 SAT/GRE + Pulitzer vocabulary, mythology. Mark as known, daily rotation, deep linking.
WebSockets
Real-time notifications for friend requests, messages, and updates—no polling required.
Post Composer
Create posts with category selection: Thoughts, Media, or Milestones—each flows to its own column.
Bilingual Support
English/Spanish toggle for Daily Learning with embedded translations using the _es field pattern.
Media Lightbox
Full-screen image and video viewer with smooth transitions and keyboard navigation.
Post Detail Modal
Expanded view of any post with full content, replies, and engagement options.
User Navigation
Click any avatar or username anywhere in the app to view that user's full profile.
Card User Headers
Every post card shows who posted it with avatar and username visible inside the card.
Collapsible Categories
Collapse any category you don't want to see. Preference saves to localStorage; auto-expands when new posts arrive.
The River Timeline
┌─────────────────────────────────────────────────────────┐
│ RIVER TIMELINE │
├───────────────┬───────────────┬─────────────────────────┤
│ 💭 THOUGHTS │ 🖼️ MEDIA │ 🏆 MILESTONES │
│ Text posts │ Photos/videos │ Achievements │
├───────────────┼───────────────┼─────────────────────────┤
│ User A Ep2 │ User A Ep2 │ User A Ep2 │
│ [◀ 2/12 ▶] │ [◀ 1/12 ▶] │ │
├───────────────┼───────────────┼─────────────────────────┤
│ User B │ User B │ User B │
│ [◀ 5/12 ▶] │ [◀ 3/12 ▶] │ [◀ 1/12 ▶] │
├───────────────┼───────────────┼─────────────────────────┤
│ User A Ep1 │ User A Ep1 │ User A Ep1 │
│ [12/12 full] │ [◀ 3/12 ▶] │ │
└───────────────┴───────────────┴─────────────────────────┘
Posts grouped by user, capped at 12 per category. Smart Overflow creates separate rows when exceeded—so you can actually finish your feed.
Design System
Colors
#4fffff
#c9a8ff
#1ae784
#e94ec8
Effects
- Glassmorphic surfaces with backdrop blur
- Neon glow shadows
- Chamfered corners (clip-path)
- Scan line overlays
Team
Colin Weir
Team Lead & Posts System
Posts backend/frontend, data flow architecture, PostsContext, code review
Pablo Cordero
Co-Lead, System Architect & UI Architect
Full-stack architecture design, pseudocode specs, wireframing, dual-theme system, River Timeline UI, Profile Card flip, Wave Chart + Heatmap, SCSS design system
Cristal Ruiz
Friends System
Friends backend/frontend, FriendsContext, friend request UI, social features
Natalia Pricop
Auth & Backend
Authentication system, user registration/login, Django migrations, backend APIs
Tito
Infrastructure
API client setup, theme system, app entry points, utilities