NUMENEON
Full-stack social network — React, Node, MongoDB, glassmorphic SCSS design system, 3-column River Timeline.
See also: Numeneon Light Mode — platinum brushed aluminum theme
Architecture
Wireframe
ERD
About
Numeneon is a full-stack social platform built on a simple premise: feeds should serve people, not harvest attention. It replaces the standard infinite scroll with the River Timeline — a three-column chronological feed where each friend gets their own row, capped at 12 posts per category. You can actually finish catching up.
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
Anti-Viral Feed Algorithm
The Smart Feed surfaces underseen posts — 50% chronological, 30% boosted (underexposed creators), 20% hot. Anti-viral by design: the more something spreads, the more it gets throttled. Outrage doesn't win the algorithm here.
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
Co-Lead & System Architect on a 4-person team. Designed full-stack architecture for both frontend and backend, authored pseudocode specifications guiding the entire team's implementation. Led wireframing and UI strategy, architected dual-theme system (light/dark modes). Built the River Timeline UI, Profile Card flip with contribution heatmap, Activity Visualization (Wave Chart + Heatmap), Messaging Modal, mobile responsiveness, and the comprehensive SCSS design system with glassmorphic styling.
Project Type
Collaborative 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