Train Like a Real Developer

Tackle developer challenges inspired by real-world scenarios. Learn to solve what actually matters.

Why Choose CodeUp Challenge?

Improve your dev skills with challenges inspired by startup tasks, freelance gigs, and production bugs.

What Makes CodeUp Challenge Different?

Real Challenges

Work on realistic problems, not toy examples. Each project is built to teach you what companies expect.

Progressive Learning

From junior to senior, our challenges grow with you. Build confidence step-by-step, one real problem at a time.

Community & Feedback

Share your work, get inspired, and connect with others solving the same challenge. Improve with others.

They Took the Challenge And Grew

CodeUp Challenge helped me build a strong portfolio. The challenges are hands-on. I’ve learned more here than in 3 months of watching tutorials.

Awa Traoré

Junior Frontend Developer

I loved the progressive format. It pushed me to learn quickly, solve real problems, and sharpen my logic.

Bilal Mohamed

Fullstack Engineer

Every challenge prepared me for what I encountered in real jobs. This is what I wish I had at the beginning of my journey.

Fatima Kane

Backend Developer

🔥 Example Challenge

Junior

Dina is a freelance photographer and wants a simple page to share her main links: website, Instagram, contact, and portfolio. She needs a clean, responsive profile page she can use in her social bios. Your mission: build a mini profile page with a photo, her name, a short bio, and a styled list of links with icons.

Perfect for:

  • freelance
  • independent creators
  • portfolios

🛠 Suggested Stack

  • HTML
  • CSS
  • JavaScript
  • FontAwesome
  • Flexbox/Grid

💡 Hints

Use Flexbox or Grid to organize the layout. Design mobile-first. Store the links in a local JSON file. Ensure accessibility with `aria-label` for each icon.

🔥 Example Challenge

Mid

Léa manages a small team at an agency. She needs a clear dashboard to track tasks, their statuses, and who's responsible for each. Your mission: build a task board UI with cards, filters, color-coded tags, and live status updates.

Perfect for:

  • startup
  • SaaS tools
  • productivity

🛠 Suggested Stack

  • React
  • TailwindCSS
  • Zustand
  • Date-fns

💡 Hints

Display tasks as cards in a responsive grid. Use Zustand to manage active filters and state updates. Format dates relatively (e.g., 'in 3 days'). Use color indicators for different statuses.

🔥 Example Challenge

Senior

Julien writes product descriptions often. He wants a tool where he can input a few keywords and get back polished, well-written copy. Your mission: build a sleek interface that lets users generate, edit, and refine text using an AI API (OpenAI).

Perfect for:

  • SaaS
  • marketing copywriting
  • AI tools

🛠 Suggested Stack

  • React
  • TailwindCSS
  • OpenAI API
  • Zustand
  • React Query

💡 Hints

Handle API calls using React Query with proper loading and mutation states. Store generated versions in Zustand with unique IDs. Show errors subtly but clearly. Include an editable, synced textarea post-generation.

Ready to become a better developer?

Start with real-world challenges, learn by building and track your progress.

Frequently Asked Questions

;
;