Submitted 4 months ago

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

#backbone#next#tailwind-css#typescript#lighthouse

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Preview site View code

This is a solution for...

PayAPI multi-page website

HTML
CSS
JS

4advanced

View challenge

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

@javascriptor1

Posted 4 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

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 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. 🙏

Mohammed Fakih• 1,590

@javascriptor1

Posted 4 months ago

You are welcome @MelvinAguilar .

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

Joyal James• 265

@silkcoder

Posted 4 months ago

Congrats, good job

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 months ago

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

Viki Wainaina• 410

@CSS-Viki

Posted 4 months ago

Damn good job🙌

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 months ago

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

Mohamed Mostafa• 450

@Mohamedkazafy

Posted 4 months ago

it's really good project pro, keep going

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 months ago

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

David Inoa• 150

@davidinoa

Posted 4 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! ✨

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 months ago

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

Jithin B P• 440

@Jithin-b-p

Posted 4 months ago

This is awesome!!

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 months ago

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

Rupali• 360

@rupali317

Posted 4 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

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 months ago

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

Senibo Don-Pedro• 190

@Senibo-Don-Pedro

Posted 4 months ago

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

Daniel 🛸• 37,510

@danielmrz-dev

Posted 4 months ago

That's a high quality job 👌🏼

Melvin Aguilar 🧑🏻‍💻• 61,440

@MelvinAguilar

Posted 4 months ago

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

Bishal Singh Deo🎮• 1,440

@Bishalsnghd07

Posted 3 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?

Udeme01• 150

@Udeme01

Posted 4 months ago

Really great job. I Love it.

Luis• 70

@ycluis

Posted 4 months ago

Awesome project!

Please log in to post a comment

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