// CODIFY

A premium, gamified coding platform frontend built with React and Vite.

Codify Arena is designed as a dark, modern SaaS-style experience where learners solve adaptive problems, track XP progression, maintain streaks, earn badges, and compete on leaderboards.

Highlights

• Purple/emerald design system with polished card-based UI
• Fully routed multi-page app with React Router v6
• Gamified UX patterns: XP bars, streaks, badges, challenge timers, rankings
• Reusable component architecture for rapid iteration
• Smooth motion system: staggered card reveals, animated progress bars, leaderboard row transitions, interactive hover states

Pages

• / Landing
• /login Login
• /signup Signup
• /dashboard Dashboard
• /problem/1 Problem Workspace
• /leaderboard Leaderboard
• /profile Profile

Core Experience

• Sticky global navigation with active route states
• Hero section with product narrative and CTA focus
• Dashboard with progress visibility and challenge flow
• Split problem-solving workspace (statement + editor/test panels)
• Competitive leaderboard and profile insights
• Activity visualizations and achievement system

Tech Stack

• React 18
• React Router v6
• Vite
• CSS (custom design system + animations)

Project Structure

src/
  components/
  pages/
  data/
  styles/
  App.jsx
  main.jsx

Run Locally

npm install
npm run dev

Vision

Codify combines focused practice and competitive motivation into one product experience: solve consistently, level up intelligently, and keep improving with measurable momentum.