case/workspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
workspace/data/tasks/learning-feed-reels-redesign.md

5.4 KiB
Raw Permalink Blame History

Learning Feed — Reels-Style Visual Redesign

Goal

Transform the Learning Feed from a traditional card-based feed into an Instagram Reels / TikTok-style visual experience with full-bleed images and bold text overlays.

Reference Style (from D J's examples)

  1. Hero/Title cards: Full-bleed background image, large bold white text at bottom with dark gradient overlay, topic badge or author info subtle
  2. Content cards: Dark solid background (#0a0a0a), clean white serif-ish text, numbered listicle format, generous line spacing
  3. Carousel/pagination: Dots at bottom, slide counter badge top-right (e.g., "1/11")
  4. Mobile-first: Cards should feel like full-viewport-height items on phone (not literal 100vh, but tall — aspect ratio ~4:5 or 9:16)

Project Location

/home/wdjones/.openclaw/workspace/projects/learning-feed

Stack

  • Next.js 16 (App Router), Tailwind CSS v4, Framer Motion, ShadCN UI, Lucide Icons, TypeScript
  • SQLite via better-sqlite3 (in serverExternalPackages)
  • Database at data/learning-feed.db

Current State

  • 21 posts, 1 topic (Private Pilot License), 14 posts have Unsplash image URLs
  • Post types: quick_fact, quiz, deep_dive
  • Feed is a vertical scroll of traditional Card components (gray border, small image, text below)
  • Interactions: save, got_it, more_like_this, expand, view

What to Build

1. Redesign PostCard component (components/post-card.tsx)

For posts WITH images (image_url is not null):

  • Full-width card, tall aspect ratio (min-height ~400px, or aspect-[4/5])
  • Background image covers entire card (object-cover, absolute inset-0)
  • Dark gradient overlay from bottom (~60% of card height, bg-gradient-to-t from-black/90 via-black/50 to-transparent)
  • Title in large, bold, uppercase white text at the bottom over the gradient
  • Topic badge (small pill) top-left
  • Author avatar + name bottom-left (small, subtle, over gradient)
  • Post type indicator subtle (icon or small badge)
  • Rounded corners (rounded-2xl), overflow hidden

For posts WITHOUT images (text-only content cards):

  • Same card dimensions
  • Solid dark background (bg-gray-950 or bg-[#0a0a0a])
  • Content text: white, serif-style font (use font-serif or a Google Font like Playfair Display), larger size (~text-lg or text-xl), generous leading (leading-relaxed or leading-8)
  • Numbered items if content has multiple points
  • Clean, minimal — no borders, no badges cluttering

Both card types:

  • Rounded corners (rounded-2xl)
  • No visible card border
  • Subtle shadow or none
  • Tap/click to expand (for deep_dive and quiz types)

2. Interaction overlay (bottom of card)

  • Floating action buttons on right side (vertical stack, like Instagram Reels):
    • ⭐ Save (star icon, fills yellow when active)
    • ✅ Got it (check icon, turns green)
    • 🔄 More like this
  • Semi-transparent, only visible on hover/tap or always subtle
  • Remove the old horizontal action bar at the bottom

3. Feed layout changes (components/feed-page.tsx)

  • Remove the max-w-2xl constraint — cards should be wider on mobile (full width with small padding px-3)
  • On desktop, keep max-w-lg centered (phone-width experience even on desktop)
  • Reduce gap between cards (space-y-4 instead of space-y-6)
  • Keep infinite scroll behavior
  • Keep the sticky header but make it more minimal (just "Learning Feed" text, no border, transparent bg with blur)

4. Image handling

  • Unsplash source.unsplash.com URLs are being deprecated. For now they work — keep using them.
  • Add error fallback: if image fails to load, render as a text-only card instead (gradient background with topic-colored tint)
  • Posts without images should NOT look broken — they should look intentionally text-only (like slides 2/3 in the reference)

5. Quiz post type special treatment

  • Show question on the card face
  • "Tap to reveal" hint text
  • Tap flips/expands to show the answer (use Framer Motion)

6. Typography

  • Title text on image cards: bold, possibly uppercase, large (text-2xl or text-3xl), tight leading
  • Content text on text cards: slightly serif, comfortable reading size, generous spacing
  • Use CSS text-shadow: 0 2px 4px rgba(0,0,0,0.8) on text over images for readability

Files to Modify

  • components/post-card.tsx — Complete redesign (main work)
  • components/feed-page.tsx — Layout adjustments
  • app/globals.css — Any custom CSS needed (text-shadow utility, font imports)
  • tailwind.config.ts — If adding custom fonts

Files NOT to Touch

  • lib/database.ts — No schema changes
  • app/api/* — No API changes
  • scripts/* — No seed changes

Build & Test

cd /home/wdjones/.openclaw/workspace/projects/learning-feed
npm run build
# Must succeed with 0 errors
# Start: PORT=3001 npm start

Quality Bar

  • Cards must look like Instagram/TikTok content — not like a blog or documentation
  • Dark mode only
  • Mobile-first (test at 390px width mentally)
  • Images must have gradient overlays so text is always readable
  • Text-only cards must look intentional, not like broken image cards
  • Smooth animations (Framer Motion) on card entry and interactions
  • No layout shift when images load

DO NOT

  • Change the database schema
  • Add new dependencies unless truly necessary (prefer Tailwind + Framer Motion)
  • Add carousel/swipe between slides (that's Phase 3 — each post is still one card for now)
  • Add audio/video elements