Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 5 months ago

Responsive Huddle Landing Page

react, next
P
ejparnell•270
@ejparnell
A solution to the Huddle landing page with a single introductory section challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I'm most proud of how up-to-date and production-ready the stack is. I used Next.js 15, React 19, and TypeScript 5, and made sure to follow best practices across the board—from clean project structure and strong TypeScript patterns to performance optimizations and accessibility. I paid close attention to developer experience too, setting up ESLint, Prettier, strict TypeScript settings, and a scalable folder structure. The CSS architecture is organized using modules and custom properties to support a consistent design system.

If I were to do things differently next time, I’d break things down more modularly. Right now, some components are larger than they need to be, and I’d prefer to extract out reusable pieces and logic into smaller components or custom hooks. I’d also like to add tests across the stack—unit, integration, and E2E—along with dynamic imports and structured metadata to further improve performance and SEO.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges was transitioning from a basic HTML/CSS setup to a full Next.js 15 + TypeScript stack while still maintaining the original design. Since I only had static JPGs (no Figma files), getting a pixel-perfect, fully responsive layout took some extra attention. I also had to integrate TypeScript in a meaningful way—making sure all assets, handlers, and constants were properly typed using patterns like as const.

Performance and accessibility were also priorities. I used the Next.js Image component to optimize loading without compromising visual quality, and I made sure the markup followed modern accessibility standards, including semantic HTML and keyboard navigation.

To keep everything maintainable and professional, I set up strict TypeScript settings, ESLint, and Prettier from the start, and followed a clean project structure. These decisions helped me deliver something that not only looks good but is also built with scalable, production-level code

What specific areas of your project would you like help with?

CSS tips and tricks are always welcome as well as any Next.js SEO feedback.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on ejparnell's solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License