A premium mobile-first redesign of the ABTalks 60-day coding challenge platform for Indian college students.
Designed for students who use the platform late at night on their phones, with a strong focus on consistency, public proof of work, recruiter visibility, and motivation through streaks.
/ /dashboard /day/12
- Mobile-first UI optimized for 390px
- Premium light and dark mode
- Current streak tracking
- Overall challenge progress
- Today's task experience
- GitHub and LinkedIn proof submission
- First-day (0 streak) edge-case support
- Missed-day "Streak Rescue" experience
- Empty-profile fallback support
- Sticky onboarding flow
- Consistent startup-style design system
- React
- Vite
- Tailwind CSS
- React Router
- Lucide React
ABTalks already works functionally, but it has never been intentionally designed for the real behavior of students:
- Mobile-first usage
- Late-night coding sessions
- Daily GitHub + LinkedIn proof submission
- Long-term streak motivation
- Recruiter visibility through public work
This redesign focuses on clarity, trust, momentum, and emotional encouragement.
The first experience for a student who has never heard of ABTalks.
- Premium hero section
- Trust metrics
- How the challenge works
- GitHub + LinkedIn proof cards
- Alumni story
- 2:00 AM Club
- Sticky onboarding flow
- Light & dark mode
The home screen after joining the challenge.
- Current streak
- Circular progress ring
- Overall completion
- Today's task
- Achievement badges
- Weekly activity
- Leaderboard
- Streak rescue
- Dark mode toggle
The complete experience of a single challenge day.
- Task overview
- Difficulty & time estimate
- Learning outcomes
- Requirements checklist
- Helpful hints
- GitHub proof submission
- LinkedIn proof submission
- Sticky submit action
This project is optimized for 390px width, which matches the evaluation viewport used by the judges.
- Large touch targets
- Thumb-friendly navigation
- Sticky actions
- High contrast
- Reduced cognitive load
- One primary action per screen
A mocked first-time state is implemented.
When isFirstDay = true:
- Shows 0 Day Streak
- Displays:
"Start today to begin your public learning streak."
- Shows a Begin Day 1 action
The final deployed demo uses the normal 12-day state for presentation quality.
Implemented through the Streak Rescue card, which helps reduce discouragement after missing a day.
A fallback state is implemented using mocked data:
- Initials avatar
- "New Student"
- "Track not selected"
A late-night community card designed around the real behavior of college students who build after classes.
GitHub + LinkedIn submissions reinforce consistency and recruiter visibility.
Prevents a single missed day from feeling like total failure.
Email + college validation without full authentication.
The app includes a complete dark mode system.
- Theme toggle in the top bar
- localStorage persistence
- Consistent dark surfaces
- Brand gradients preserved
- Light mode remains unchanged
┌─────────────┐ │ Landing │ └─────┬───────┘ │ │ Apply & Enter Dashboard ▼ ┌─────────────┐ │ Dashboard │ └─────┬───────┘ │ │ Continue Day 12 ▼ ┌─────────────┐ │ Day 12 │ └─────┬───────┘ │ │ Submit GitHub + LinkedIn ▼ ┌─────────────┐ │ Completed │ └─────────────┘
[Hero] ↓ [Trust Stats] ↓ [How It Works] ↓ [Proof Cards] ↓ [Alumni Story] ↓ [2:00 AM Club] ↓ [Sticky Onboarding]
[Header] ↓ [Streak + Progress] ↓ [Today's Task] ↓ [Checklist] ↓ [Continue CTA] ↓ [Weekly Activity] ↓ [Achievements / Leaderboard]
[Back + Day] ↓ [Task Overview] ↓ [Learning Outcomes] ↓ [Requirements] ↓ [Hints] ↓ [GitHub Input] ↓ [LinkedIn Input] ↓ [Submit]
src/ ├── assets/ # Icons, illustrations, visuals ├── context/ # Theme context ├── pages/ │ ├── Landing.jsx │ ├── Dashboard.jsx │ └── DayPage.jsx ├── App.jsx ├── App.css ├── index.css └── main.jsx
- Primary:
#2563EB - Indigo:
#4F46E5 - Surface:
#F8FAFC - Dark:
#0B1020 - Accent:
#EA580C
- Cards:
24px - Buttons:
18px
- Soft, layered, low-opacity shadows
- High contrast text
- Large tap targets
- Clear hierarchy
- Keyboard-friendly inputs
- Consistent focus states
This repository is a team submission for the ABTalks Vibe Coding Hackathon.
The UI/UX redesign, dark mode, onboarding flow, edge-case handling, and final polish were implemented through iterative AI-assisted development using Antigravity IDE during the hackathon.
See PROMPTS.md for the primary prompts used during development.
This project intentionally avoids:
- Authentication
- Real backend
- Production database
- Recruiter/admin panels
All data is mocked to keep the focus on product thinking, mobile UX, and visual design quality.