Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All solutions

  • Submitted

    REST Countries API (Next.js & Server Actions + TypeScript + Tailwind)

    #accessibility#next#tailwind-css#typescript#lighthouse
    • HTML
    • CSS
    • JS
    • API

    2


    🎁 Features:

    • Next.js Server Actions to fetch data with:
      • Filtering πŸ“‚
      • Pagination ♻️
      • Sorting πŸ”
    • Achieved +95% in Lighthouse score for performance, accessibility, best practices, and SEO. πŸ“Š
    • Resemblance with the original design. 🎨
    • Small animations with Framer motion. 🎬
    • No errors or warnings using ESLint (Airbnb style guide). βœ”οΈ
    • Custom hooks. 🎣
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. πŸ’»

    πŸ› οΈ Built With:

    • Next.js 14. ⚑
    • TypeScript πŸš€
    • TailwindCSS. 🎨
    • ESLint (Airbnb style guide). πŸ“¦
    • Framer-motion. 🎬
    • npm - prettier - prettier-plugin-tailwindcss. πŸ’»

    πŸ” Clarifications:

    • While the Rest Countries API was an option, it had limitations like lack of pagination and limited filtering capabilities. I opted to utilize Server Actions in Next.js and the data.json provided with the challenge. This allowed seamless integration with MongoDB for efficient data handling.
    • I acknowledge that continuous polling for change requests might consume more data, but it was implemented for experimental purposes.

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

    Thank you. 😊✌️

  • Submitted

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

    #backbone#next#tailwind-css#typescript#lighthouse
    • HTML
    • CSS
    • JS

    12


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

  • Submitted

    Social proof section (Tailwind CSS 🎨)

    #accessibility#lighthouse#pwa#tailwind-css#semantic-ui
    • HTML
    • CSS

    6


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    🎁 Features:

    • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. πŸ“Š
    • Progressive Web App (PWA) support. πŸ“±πŸŒ
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. πŸ’»

    πŸ› οΈ Built With:

    • TailwindCSS. 🎨
    • npm - prettier - prettier-plugin-tailwindcss. πŸ’»

    Thank you. 😊✌️

  • Submitted

    FAQ accordion (Tailwind CSS)

    #accessibility#animation#pwa#tailwind-css#lighthouse
    • HTML
    • CSS
    • JS

    6


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    🎁 Features:

    • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. πŸ“Š
    • Progressive Web App (PWA) support. πŸ“±πŸŒ
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. πŸ’»
    • Resemblance with the original design. 🎨
    • No media queries were used. πŸ“±
    • Integrated very small animation. ✨

    πŸ’» Two Solutions in Two Branches:

    πŸ› οΈ Built With:

    • TailwindCSS. 🎨
    • npm - prettier - prettier-plugin-tailwindcss. πŸ’»

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

    Thank you. 😊✌️

  • Submitted

    Skilled e-learning landing page (Tailwind CSS)

    #accessibility#lighthouse#pwa#tailwind-css#semantic-ui
    • HTML
    • CSS

    5


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    🎁 Features:

    • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. πŸ“Š
    • Progressive Web App (PWA) support. πŸ“±πŸŒ
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. πŸ’»
    • Resemblance with the original design. 🎨

    πŸ› οΈ Built With:

    • TailwindCSS. 🎨
    • npm - Prettier. πŸ’»

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

    Thank you. 😊✌️

  • Submitted

    Four card feature section (Tailwind CSS)

    #accessibility#lighthouse#pwa#tailwind-css#semantic-ui
    • HTML
    • CSS

    6


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    🎁 Features:

    • Progressive Web App (PWA) support. πŸ“±πŸŒ
    • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. πŸ“Š
    • Utilized TailwindCSS for responsive styling. 🎨
    • Codebase is well-maintained and formatted using Prettier. πŸ’»
    • Resemblance with the original design. 🎨

    πŸ› οΈ Built With:

    • TailwindCSS. 🎨
    • npm - Prettier. πŸ’»

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

    Thank you. 😊✌️

  • Submitted

    Time tracking dashboard (Next.js + TypeScript + Tailwind CSS + ESLint)

    #accessibility#next#tailwind-css#typescript#pwa
    • HTML
    • CSS
    • JS

    3


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    🎁 Features:

    • Tabbed interfaces. πŸ“‘
    • Controllable using arrow keys and Tab. ⌨️
    • Tooltip that allows copying statistics. πŸ“Š
    • Resemblance with the original design. 🎨
    • Progressive Web App (PWA) support. πŸ“±πŸŒ
    • Small animations with Framer motion. 🎬
    • No errors or warnings using ESLint (Airbnb style guide). βœ”οΈ
    • Client-side fetching with SWR to simulate an API. 🌐
    • Custom hooks. 🎣
    • Tested with the TalkBack screen reader on mobile. πŸ“±

    πŸ› οΈ Built With:

    • Nextjs 13.5.4. βš›οΈ
    • TypeScript. πŸ“
    • TailwindCSS. 🎨
    • Framer-motion. 🎬
    • ESLint (Airbnb style guide). πŸ“¦

    ❓ Question:

    Not very proud of the prop drilling in the solution. Any recommendations to avoid it? I've tried using the Context API to reduce it, but I don't see much difference.

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

  • Submitted

    Fylo dark theme landing page (React JS + Tailwind CSS + Framer Motion)

    #accessibility#framer-motion#lighthouse#react#tailwind-css
    • HTML
    • CSS
    • JS

    16


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    🎁 Features:

    πŸ› οΈ Built With:

    • React JS. βš›οΈ
    • React Hook Form. πŸ“
    • Framer Motion. 🎬
    • TailwindCSS. 🎨
    • npm - prettier - prettier-plugin-tailwindcss. πŸ“¦

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

  • Submitted

    Article preview component (Tailwind CSS + JavaScript)

    #accessibility#tailwind-css
    • HTML
    • CSS
    • JS

    13


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    πŸ› οΈ Built With:

    • TailwindCSS
    • npm - prettier

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

  • Submitted

    Single price grid component (Tailwind CSS)

    #accessibility#tailwind-css
    • HTML
    • CSS

    9


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    πŸ› οΈ Built With:

    • TailwindCSS
    • npm - prettier

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

  • Submitted

    Stats preview card component (Tailwind CSS)

    #accessibility#lighthouse#tailwind-css
    • HTML
    • CSS

    6


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    ❓Help:

    • I'm trying to get a 100% score on Lighthouse, any resources or videos you can share would be very helpful. Especially, How to improve my FCP (First Contentful Paint) score?

    πŸ› οΈ Built With:

    • TailwindCSS
    • npm - prettier

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

  • Submitted

    NFT preview card component (Tailwind CSS)

    #accessibility#tailwind-css
    • HTML
    • CSS

    6


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    Built With:

    • TailwindCSS
    • npm - prettier

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

  • Submitted

    Bookmark landing page (React + TailwindCSS)

    #accessibility#tailwind-css#react
    • HTML
    • CSS
    • JS

    4


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    Help:

    • I'm not very good with animations, I would really appreciate any resources you can provide.

    Built With:

    • React-JS
    • TailwindCSS
    • Yarn - Vite - Prettier

    Any suggestions on how I can improve and reduce unnecessary code are welcome!

    Thank you. 😊✌️

  • Submitted


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    Help:

    • Any resource or suggestion on how to create or improve the accessibility of a switcher theme component is welcome; although this is the code for my component, I will be grateful for any suggestions.

    I added:

    • πŸŒ” Light and Dark mode
    • πŸ”§ Using localStorage to save theme preferences

    Built With:

    • React-JS
    • TailwindCSS
    • Yarn - Vite - Prettier

    Any suggestions on how I can improve and reduce unnecessary code are appreciated!

    Thank you. 😊✌️

  • Submitted

    URL shortening API landing page (React πŸš€ + SASS modules + Axios)

    #accessibility#react#sass/scss#vite#axios
    • HTML
    • CSS
    • JS
    • API

    4


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    Questions:

    • In React, what is the most popular class naming convention?
    • I've read that it's not recommended to have three or more nested folders within a project, so what's the most common way to organize files in React?

    Features:

    • πŸ”§ Focus on button using forwarding references
    • πŸ”§ Using localStorage to save url
    • πŸ”’ Form validation with react-hook-form
    • πŸ”” Notifications with react-toastify
    • 🎨 Custom scrollbar

    Built With:

    • React-JS
    • SASS modules
    • BEM naming convention
    • Axios - Dotenv
    • react-hook-form
    • react-toastify
    • Yarn - Vite

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. 😊✌️

  • Submitted

    Ping single column coming soon (React + TailwindCSS + Dark/Light mode)

    #accessibility#react#tailwind-css#vite
    • HTML
    • CSS
    • JS

    2


    Hi there πŸ‘‹, I’m Melvin and this is my solution for this challenge. πŸš€

    I added:

    • πŸŒ” Light and Dark mode
    • πŸ”§ Using localStorage to save theme preferences
    • πŸ”’ Form validation with react-hook-form
    • πŸ”” Notifications with react-toastify
    • 🎨 Custom scrollbar

    Built With:

    • React-JS
    • TailwindCSS
    • react-hook-form
    • react-toastify
    • Yarn - Vite

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. 😊✌️

  • Submitted

    3-Column Card Component (SASS + Flexbox + BEM)

    #accessibility#sass/scss#bem
    • HTML
    • CSS

    5


    Hi there, I’m Melvin and this is my solution for this challenge. πŸ‘‹

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

  • Submitted


    Hi there, I’m Melvin and this is my solution for this challenge. πŸ‘‹

    Features:

    • AOS (Animate on Scroll) with prefers-reduced-motion.
    • Custom scrollbar

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

  • Submitted

    Advice Generator App (SASS + JS + BEM + Mobile-first)

    #bem#fetch#sass/scss#accessibility
    • HTML
    • CSS
    • JS
    • API

    2


    Hi there, I’m Melvin and this is my solution for this challenge. πŸ‘‹

    • I add a delay and a spinner during loading to prevent the user from spamming the button. Do you think the spinner is accessible enough?
    • What tips would you give me to improve the accessibility of the page?

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

  • Submitted

    Interactive Rating Component (SASS + JS + Mobile-first + BEM)

    #bem#sass/scss#accessibility
    • HTML
    • CSS
    • JS

    3


    Hi there, I’m Melvin and this is my solution for this challenge. πŸ‘‹

    • I created some simple animations. I would greatly appreciate any reading resources that can improve the animations.
    • What tips would you give me to improve the accessibility of the page?

    Any feedback on how I can improve and reduce unnecessary code is welcome!

    Thank you. :)

  • Submitted


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    πŸ› οΈ Built With:

    • SASS. 🎨
    • BEM notation. πŸ“
    • Mobile-first approach. πŸ“±

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

    Thank you. 😊✌️

  • Submitted

    Order summary component (SASS + Mobile first + BEM)

    #accessibility#sass/scss#bem
    • HTML
    • CSS

    1


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    πŸ› οΈ Built With:

    • SASS. 🎨
    • BEM notation. πŸ“
    • Mobile-first approach. πŸ“±

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

    Thank you. 😊✌️

  • Submitted


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    πŸ› οΈ Built With:

    • SASS. 🎨
    • BEM notation. πŸ“
    • Mobile-first approach. πŸ“±

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

    Thank you. 😊✌️

  • Submitted


    Hi there πŸ‘‹, I’m Melvin, and this is my solution for this challenge. πŸš€

    πŸ› οΈ Built With:

    • SASS. 🎨
    • Gird layout. πŸ“

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

    Thank you. 😊✌️