CodeToWin.pro — African Tech Hackathons & Innovation Platform

1. General Project Overview:
CodeToWin.pro is a premier tech platform dedicated to inspiring, discovering, and accelerating developer talent across Africa through competitive hackathons, coding challenges, and concrete innovation projects. The platform bridges African developers, designers, and innovators with event organizers, tech hubs, and international enterprise sponsors.

CodeToWin replaces traditional credentials with verifiable proof of talent (working code repos, live product demos, and technical rubric evaluations), empowering developers to showcase real-world problem-solving abilities.

2. Context & Core Industry Challenges:
While Africa's tech ecosystem is booming with ambitious engineering talent, organizing large-scale hackathons and matching talents to opportunities previously faced recurring friction points:

• Tool Fragmentation: Organizing teams struggled with scattered tools (Google Forms, Discord channels, and unlinked spreadsheets), resulting in dropped submissions and poor event visibility.
• Submission & Review Bottlenecks: Collecting repositories, demo links, and architectural details before strict deadlines requires a dependable, guided multi-step submission portal.
• Lack of Lasting Recognition: Participants often lacked persistent portfolios celebrating their hackathon rankings, project achievements, and team collaborations.

Central Challenge Addressed:
How to architect an intuitive, modern web platform that streamlines every stage of competitive hackathons—from team matching to multi-step project delivery—while giving tech talent persistent visibility?

3. Business Requirements & Platform Goals:
To foster developer engagement and support seamless event operations, the platform required:

• Frictionless Onboarding: Fast authentication via email OTP and OAuth (Google, GitHub) with immediate role selection (Participant vs. Organizer).
• Guided Project Submission Wizard: A step-by-step submission portal for project pitch, repository URLs, team members, and demo videos with auto-saving drafts.
• Organizer Event Management: Tools to publish challenges, set prize pools (USD & FCFA), and track submissions in real time.
• Talent Directory & Leaderboard: Persistent developer profiles showcasing trophies, verified skills, and collaborative invitation features.

4. My Role & Scope of Work:
As UI/UX designer and frontend engineer, I took charge of the user experience and frontend application architecture:

• UI/UX Design & Visual Identity: Designed high-fidelity prototypes, sleek obsidian dark theme, emerald tech accents (#059669), and clean dashboard typography.
• Frontend Development (React / Next.js): Engineered responsive, accessible components, real-time counters, interactive cards, and multi-step forms.
• Full Services & API Integration:
  • Authentication flow (AuthContext) with JWT session lifecycle, email OTP validation, and OAuth providers.
  • Centralized API client handling Bearer token injection, multipart upload serialization, and 401 session expiration handling.
  • Business endpoints integration: hackathon discovery, registration, team submissions, and developer directory queries.

7. Technical Solutions Implemented:

• Modular Component Architecture: Clean component system powering challenge cards, countdown timers, stepper navigators, and validation wrappers.
• Centralized HTTP Client: An abstraction layer automating Bearer token injection, JSON and FormData handling, and 401 token refresh cleanups.
• Comprehensive Auth Lifecycle: OTP-based registration, credential login, social OAuth with GitHub/Google, and password reset flows.

8. Key Platform Features:

• Hackathon Catalog & Live Filters: Instant search and filtering of tech challenges with dual currency prize pools (USD & FCFA).
• Project Submission Stepper: Guided 4-step wizard capturing repositories, deployed demos, pitch videos, and rubric answers.
• Developer Directory & Leaderboard: Public profiles highlighting hackathon rankings, verified skills, and direct team invitations.
• Organizer Management Portal: Dedicated interfaces to configure challenges and oversee project submissions.

5. Key Technical & Engineering Challenges:

• Persistent Workspace State & Auto-Save: Hackathon deadlines create intense time pressure. To prevent loss of work during project submission, I engineered a real-time state synchronization mechanism (hack_agent_workspace_state) that automatically preserves every submission step in local storage.
• Role-Based Navigation & Permissions: Cleanly segregated participants and hackathon organizers through granular state guards, ensuring tailored dashboard views without code duplication.
• API Resilience & Error Handling: Comprehensive HTTP interceptors handling 401 unauthorized states, token clearing, and clear localized feedback banners.

6. Developer-Centric UI/UX Design:

• Obsidian Dark Mode: Sleek slate and obsidian dark background engineered for high contrast, minimal eye strain during hackathons, and glowing emerald accents (#059669).
• Proof of Work & Badges: Dynamic status badges (Active, In Review, Verified), live countdowns, podium medals, and tech stack tags.

9. Architectural Decisions & Stack Justification:

• React & Next.js: Exceptional client-side responsiveness, clean component isolation, and rapid state management.
• Tailwind CSS: Precise custom design system implementation with rock-solid responsive layouts across devices.
• JWT Bearer Security: Decoupled authentication standard ensuring secure communication between frontend and backend APIs.
• Satoshi, Space Grotesk & Inter Fonts: Modern typography pairing combining cutting-edge tech appeal with optimal readability.

10. Value Delivered & Ecosystem Impact:

• High Sponsor & Partner Confidence: A refined, professional SaaS aesthetic that inspires trust from event sponsors.
• Zero Lost Submissions: Real-time auto-saving prevents data loss during high-stress deadline sprints.
• Tangible Career Opportunities: Provides African developers with a verified track record to connect with international employers.

11. Results & Current Status:

• Live in Production: Accessible globally at codetowin.pro.
• End-to-End User Journey: Seamless onboarding, hackathon registration, project submission, and talent discovery.
• Scalable Foundation: Modular frontend ready for future extensions (real-time chat, audience voting, automated code testing).

12. Takeaways & Engineering Growth:
CodeToWin demonstrated my ability to deliver end-to-end frontend solutions: crafting high-impact UI/UX for developers, architecting reliable stateful workflows, and integrating mission-critical authentication and backend APIs.