Skip to content
Submitted 12 months ago

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

#backbone#next#tailwind-css#typescript#lighthouse
Melvin Aguilar 🧑🏻‍💻•61,120
@MelvinAguilar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...PayAPI multi-page website
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

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. 😊✌️

Community feedback

  • Mohammed Fakih•1,590
    @javascriptor1Posted 12 months ago

    Hi Melvin,

    Excellent work as usual. Loved the transition effect very much.

    I noticed you removed the underline for contact us on the hero section. It's visible on the design.

    Another side note regarding the title of the readme file - it is showing Time tracking dashboard solution so you may update the title accordingly.

    Amazing work. Thanks for your contributing a high quality works on FEM. 👏

    Keep up the good work. MKF

    Marked as helpful
    0
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    @javascriptor1 Thank you so much for the keen observations! 🧐 I truly appreciate your attention to detail – you have an eye for things I might miss. 🙏

    1
    Mohammed Fakih•1,590
    @javascriptor1Posted 12 months ago

    You are welcome @MelvinAguilar .

    congratulations for crossing 60k points 🏆. A remarkable performance.

    0
  • Joyal James•265
    @silkcoderPosted 12 months ago

    Congrats, good job

    2
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    Thank you @silkcoder! 🌟 Your congrats mean a lot! Appreciate your support! 😊

    1
  • Viki Wainaina•410
    @CSS-VikiPosted 12 months ago

    Damn good job🙌

    2
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    @CSS-Viki Thank you so much! 🌟 Your comment means a lot!

    1
  • Mohamed Mostafa•480
    @MohamedkazafyPosted 12 months ago

    it's really good project pro, keep going

    2
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    Thank you, @Mohamedkazafy! 🌟, I appreciate your feedback! 🙏

    0
  • David Inoa•150
    @davidinoaPosted 12 months ago

    Excellent work! My favorite thing is the scroll animation, very smooth. One minor detail: on mobile, I would try to fix the alignment of the logo and the hamburger menu. Other than that, it looks great! ✨

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    @davidinoa Thank you so much! 🌟 I appreciate your positive feedback and the valuable suggestion. 🙏 I'll definitely address the mobile alignment. 😊

    1
  • Jithin B P•490
    @Jithin-b-pPosted 12 months ago

    This is awesome!!

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    @Jithin-b-p Glad you think so! 🌟 Your comment means a lot!

    0
  • Rupali•830
    @rupali317Posted 12 months ago

    Very impressive work, @MelvinAguilar! Kudos!

    I used the keyboard to navigate the landing page site. It is good that most of the actionable links are focusable. However, I noticed that the social links at the bottom were not having the visual indication that they were being focused. You might want to check on that

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    @rupali317 I forgot to add "display: block;" to those links 🤦‍♂️. Thanks a lot, I'll fix it when I can!

    1
  • Senibo Don-Pedro•190
    @Senibo-Don-PedroPosted 12 months ago

    Very amazing!!!😎😎😎. Please where can I learn framer motion?

    1
  • Daniel 🛸•44,370
    @danielmrz-devPosted 12 months ago

    That's a high quality job 👌🏼

    1
    Melvin Aguilar 🧑🏻‍💻•61,120
    @MelvinAguilarPosted 12 months ago

    @danielmrz-dev Thank you! 👍 You're doing fantastic too! 🚀😊

    1
  • Bishal Singh Deo🎮•1,440
    @Bishalsnghd07Posted 11 months ago

    Hi Melvin Wow,It's Amazing, it's a totally pixel perfect 👏 From where you learn pixel perfect Melvin?Could you advice me in this?

    0
  • Udeme01•200
    @Udeme01Posted 12 months ago

    Really great job. I Love it.

    0
  • Luis•[object Object]
    @ycluisPosted 12 months ago

    Awesome project!

    0

Please log in to post a comment

Log in with GitHub

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