Skip to content
OverviewSolutions
13
Comments
2
Udeme01
@Udeme01

All comments

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarSubmitted 10 months ago

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

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

    12
    Udeme01•200
    @Udeme01Posted 10 months ago

    Really great job. I Love it.

    0
  • Mahmoud Tarek•670
    @mahmoudAcmSubmitted about 1 year ago

    Notification Page Challenge Solution

    ❤️ Hello, Frontend Mentor Community,

    Highlights

    This is my solution for the Notification Page.

    • Optimized Performance: My solution has achieved an impressive 93% score on Google Pagespeed Insights, ensuring swift loading times and seamless interactions. 🚀

    • Unrivaled Precision: With a remarkable accuracy rate of 99.9%, my solution sets a new standard for excellence. 🎯

    • User-Centric Design: Users can easily manage their notifications by marking them as read, enhancing their overall experience.

    • Versatile Notification Mocking: Experience the flexibility of simulating various notification types to ensure the solution's adaptability.

    • Learning Opportunities: Delve into the intricacies of my codebase to explore advanced TypeScript features and data validation techniques using react-form-hook.

    • Join My Journey: Follow along as I tackle challenges, infusing solutions with custom features and refinements.

    • Open to Improvement: Your insights and suggestions are greatly appreciated! Help me enhance and refine my solution. 💡

    NOTIFICATION PAGE 🔔 [ ACCESSIBLE - TAILWIND CSS - TYPESCRIPT ]

    1
    Udeme01•200
    @Udeme01Posted about 1 year ago

    I love it.

    1