Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

PayAPI multi-page website (Next.js + TypeScript + Tailwind + ESLint)

backbone, next, tailwind-css, typescript, lighthouse
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the PayAPI multi-page website challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


🎁 Features:

  • Achieved 98% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
  • Simplifying form management using react-hook-form. 📝
  • TypeScript-first schema declaration and validation usin zod library. ✅.
  • Resemblance with the original design. 🎨
  • Small animations with Framer motion. 🎬
  • Ensuring a delightful experience for users who prefer reduced motion. 🚫🎉
  • No errors or warnings using ESLint (Airbnb style guide). ✔️
  • Custom hooks. 🎣
  • Progressive Web App (PWA) support. 📱🌐
  • Utilized TailwindCSS for responsive styling. 🎨
  • Codebase is well-maintained and formatted using Prettier. 💻
  • Tested with the TalkBack screen reader on mobile. 📱🔊
  • Toast Component with Sonner. 🍞🔔

🛠️ Built With:

  • Next.js 14. ⚡
  • TypeScript 🚀
  • TailwindCSS. 🎨
  • react-hook-form and zod. 📝
  • ESLint (Airbnb style guide). 📦
  • Framer-motion. 🎬
  • npm - prettier - prettier-plugin-tailwindcss. 💻

Any suggestions on how I can enhance this solution or achieve even better performance are welcome!

Thank you. 😊✌️

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 Melvin Aguilar 🧑🏻‍💻'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