ABTalks Redesign
Reference documentation for the ABTalks 60-day challenge redesign. Design system, features, decisions, and project context.
About ABTalks
ABTalks is a 60-day coding challenge for Indian college students. The premise is simple: pick a track (Web Dev, AI/ML, DSA, Mobile, or Backend), then build something every day for 60 days.
Each day you complete two actions: push a commit to a public GitHub repo and publish a LinkedIn post about what you built. Those two artifacts — the commit and the post — are your proof of work. After 60 days, you have 120 pieces of public evidence that you can actually build.
Why it exists: building consistency and making students visible to recruiters. A resume says “I know React.” A 60-day commit history proves it.
Who it's for: primarily mobile users, late at night, after college. The platform needs to work well on a phone at 11 PM.
About This Redesign
The original ABTalks product worked but had never been designed — it was functional with default styling. This is a ground-up mobile-first redesign built as a hackathon submission.
This was built as part of a hackathon challenge. The goal was to reimagine the ABTalks experience with a strong design system, attention to edge cases, and features that reinforce the product's core purpose of making daily proof visible to recruiters.
Important: all data throughout this application is mocked. There is no real authentication or backend, per the challenge's stated scope. Student profiles, submissions, and statistics are all mock data designed to demonstrate the UI and features.
Design System — Brutalist Command Center
High-contrast, mechanical, developer-tool credibility layer. Every element is designed to feel deliberate and information-dense rather than decorative. Zero border radius on all interactive elements. Hard offset shadows that never blur.
Color Palette
Type Scale
Heading one
Heading two
Heading three
Subheading
Label bold
Body text for paragraphs and descriptions.
Buttons — Zero Border Radius
Card — Hard Offset Shadow
4px hard shadow, 12px radius, 2px ink border.
For high-priority content like today's task.
For success/confirmation states.
Pills & Badges
Feature Overview
Core (MVP)
- • Landing page — explains the challenge, shows platform stats, track picker preview
- • Dashboard — your streak, today's task, 60-day progress grid, achievements
- • Day page — task details, learning objectives, proof submission form with auto-drafted LinkedIn caption
- • Three edge cases — mid-challenge, first-day, empty profile, all fully designed
- • Dark mode — full light/dark support across every route
Track Personalisation
- • Track selection — choose from 5 tracks, each with distinct 60-day curricula
- • Personalised content — dashboard and day pages reflect your chosen track's tasks
- • Day navigation — prev/next controls, all 60 days browsable with preview states for future days
Streak Mechanics
- • Interactive streak freeze — actually usable, not just a badge. Click to protect a missed day.
- • Milestone celebrations — Day 7, 30, and 60 trigger distinct celebration states
- • Live micro-interactions — toast notifications on submit and freeze use
Visibility & Sharing
- • Public profile — recruiter-readable /u/username page with outbound proof links
- • Share cards — downloadable branded image cards for each day's submission
- • Leaderboard — ranked by streak or completion, with profile links
Other
- • Submission history — reverse-chronological record of all proof submitted
- • Search/filter — find specific days across the 60-day curriculum
- • Time-aware nudges — different tone banners for day/evening/late-night
- • Settings — track switching, theme control, notification prefs, privacy toggle
Edge Cases & Design Decisions
Missed days feel supportive, not punishing
Red squares communicate what happened — they never include copy that shames or scolds. “The red squares are behind you; today's yellow square is the only one that matters.”
Streak freeze turns failure into a feature
Rather than letting one missed night destroy momentum, the freeze mechanic acknowledges that life happens and gives students a recovery path that feels earned, not handed out.
Public profiles exist because the brief says so
The original brief explicitly says the daily proof mechanic exists to make students “visible to recruiters.” The /u/username page is the only artifact in the product that actually fulfils that goal — it creates something a recruiter can open and evaluate.
Empty states are invitations, not apologies
Every empty state — no submissions, no achievements, no track selected — points the user toward the single next action they should take, rather than showing a blank screen or a generic “nothing here yet” message.
Time-aware nudges respond to the stated usage pattern
The brief says students use the platform “on their phones, late at night after college.” The nudge banner changes tone based on time of day — gentle during the day, more urgent (but never shaming) late at night.
Tech Stack
- Framework: React 19 + TanStack Start (file-based routing, SSR)
- Styling: Tailwind CSS v4 with custom design tokens
- Fonts: Space Grotesk (display), Inter (body), JetBrains Mono (labels)
- State: React Context + localStorage (no backend)
- Data: Mocked JSON — 2 full 60-day track curricula, 3 demo profiles, 20 leaderboard entries
- Deployment: Cloudflare (via Vite + Nitro)