
Submitted about 1 year ago
PayAPI multi-page website (Next.js + TypeScript + Tailwind + ESLint)
#backbone#next#tailwind-css#typescript#lighthouse
@MelvinAguilar
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
Please log in to post a comment
Log in with GitHubJoin 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