Responsive Huddle Landing Page

Solution retrospective
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.
Please log in to post a comment
Log in with GitHubCommunity 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