Back to Projects
In development
Lab
Next.jsReactTypeScriptTailwind CSSVitest2026

Frontend Mentor (Next.js)

A Frontend Mentor challenge collection in Next.js: each challenge lives in its own folder (assets, routes, styles), the index shows difficulty and status, and /start explains the two related sites. Links to preview, FM solution, and repo.

View DemoView Code

Project Screenshots

Frontend Mentor (Next.js) — vista previa

1 / 5

What I learned

  • Nested layouts per route group so challenge shells do not mix
  • Isolate CSS and assets per challenge so one does not break another
  • Type the index with unions 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