Back to Projects
In developmentNext.jsReactTypeScriptTailwind CSSVitest2026

Frontend Mentor (Next.js)

Next.js 16 app with React 19 for Frontend Mentor challenges: per-challenge structure (isolated assets, routes, and styles), difficulty and status index, and repo-documented conventions. Lint/format rules.

View DemoView Code

Project Screenshots

Frontend Mentor (Next.js) — vista previa

1 / 5

What I learned

  • App Router and nested layouts per route group
  • Isolating challenges in folders to avoid style/resource collisions
  • Typed index data (union types and shared constants)

Extra information

  • Each challenge includes a preview, Frontend Mentor submission, and GitHub code.
  • Each challenge has difficulty and status badges, plus description and tags.
  • Inside each challenge, an element reached with Tab or Shift+Tab returns you to the start.
  • /start summarizes the two Frontend Mentor–related sites and how they differ.

Technical Details

  • •Next.js 16 (App Router), React 19, TypeScript 5
  • •Tailwind CSS 4
  • •ESLint, Prettier, Vitest