How negiigit/abtalks_redesign works
ABTalks is a mocked, mobile-first interface for a 60-day public coding challenge. A visitor explores the challenge and its tracks, then opens a dashboard to review daily progress, proof history, streaks, and achievements. From a challenge-day page, the student reviews the task, validates GitHub and optional LinkedIn URLs, and reaches a completion state; submission only changes local UI state, with no persistence or external API calls. The graph reflects documented capabilities, but some component wiring is inferred only where sampled page source shows it.
Main entry points: Dashboard.jsx Student dashboard · ChallengeDay.jsx Challenge day · App.jsx Route application · Landing.jsx Challenge landing
Components 19
App navigation
- Route application
src/App.jsx - Challenge landing
src/pages/Landing.jsx - React entry
src/main.jsx
Challenge experience
- Challenge day
src/pages/ChallengeDay.jsx - Proof submission form
src/components/SubmissionForm.jsx - Completion state
src/components/CompletionState.jsx - Edge states
src/components/EmptyState.jsx
Progress dashboard
- Student dashboard
src/pages/Dashboard.jsx - Streak summary
src/components/StreakCard.jsx - Challenge progress
src/components/ProgressBar.jsx - Today challenge
src/components/ChallengeCard.jsx - 60-day grid
src/components/DayGrid.jsx - Proof timeline
src/components/ProofTimeline.jsx - Milestones
src/components/Achievement.jsx
Shared UI and data
- Mock challenge data
src/data/mockData.js - Mobile header
src/components/MobileHeader.jsx - Landing navigation
src/components/Navbar.jsx - Action button
src/components/Button.jsx
Other components
- Visitor / student
Connections 26
- Visitor / student → Route application: opens routes
- React entry → Route application: renders
- Route application → Challenge landing: routes to
- Route application → Student dashboard: routes to
- Route application → Challenge day: routes to
- Challenge landing → Mock challenge data: reads tracks, stats, days
- Challenge landing → Landing navigation: renders
- Challenge landing → Action button: renders
- Student dashboard → Mock challenge data: reads student, days, proofs, awards
- Student dashboard → Mobile header: renders
- Student dashboard → Streak summary: renders
- Student dashboard → Challenge progress: renders
- Student dashboard → Today challenge: renders
- Student dashboard → 60-day grid: renders
- Student dashboard → Proof timeline: renders
- Student dashboard → Milestones: renders
- Today challenge → Challenge day: links to day
- 60-day grid → Challenge day: links to day
- Proof timeline → Challenge day: links to in-progress day
- Challenge day → Mock challenge data: reads challenge and student
- Challenge day → Mobile header: renders
- Challenge day → Proof submission form: renders
- Challenge day → Edge states: renders first-day state
- Challenge day → Completion state: renders after submission
- Proof submission form → Challenge day: calls submit callback
- Completion state → Student dashboard: links back