All solutions

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

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

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

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:

• Native HTML Solution: Utilizing <details> and <summary> tags without the need for JavaScript. 🚀
• Accessible Disclosure Solution: Implementing Accessible Disclosure with a11y in mind for enhanced accessibility. 🌐

🛠️ Built With:

• TailwindCSS. 🎨
• npm - prettier - prettier-plugin-tailwindcss. 💻

• 📚 Further Resources:

  If you're interested in creating an Accessible Disclosure, I recommend checking out this informative article by Grace Snow: Tutorial: Let's Build an Accessible Disclosure

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

Thank you. 😊✌️

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

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

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

Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

🎁 Features:

• Little animation with Framer motion using useReducedMotion hook. 🎬
• 97%/100% on lighthouse report and PageSpeed Insights. 🚀
• Tested with the TalkBack screen reader on mobile. 📱
• Custom scrollbar. 🖱️

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

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

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

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

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

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

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

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

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

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. :)

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. :)

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. :)

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. :)

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

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

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

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