All solutions

What are you most proud of, and what would you do differently next time?

Before starting this project, I planned out data flow & data structure by drawing diagrams to further elaborate how data will go form and to database in the backend.

What challenges did you encounter, and how did you overcome them?

Properly handling and validating user input, ensuring no bad input is stored into the database.

What specific areas of your project would you like help with?

The Drag & Drop, while there's a library for that, I wanted to code the logic myself but did not succeed yet.

What are you most proud of, and what would you do differently next time?

Completing the challenge without using any layout frameworks was my goal and I have achieved it. If I were to do this challenge again, I'd consider a mobile first approach as that would've made completion easier.

What challenges did you encounter, and how did you overcome them?

The transition from desktop to mobile was a bit of an obstacle. My goal was to avoid creating mobile-specific and desktop-specific elements, and purely transition using CSS. This was achieved using CSS grid layout.

What specific areas of your project would you like help with?

Nothing, I'm happy with how it turned out.

Hello!

This is my first (almost) native Front End Mentor completion! After a while of being heavily reliant on powerful tools (React.js, NEXT.js) I thought it'd be a fun challenge to work with native tools again.

Tools:

• HTML
• JavaScript
• SASS

Hey! This is my first GURU level challenge completion.

Tools used:

• NEXT.js app router
• TypeScript
• Shadcn-ui
• TailwindCSS
• React-Hook-Forms

Let me know what you think 😁

Hey! This by far my best Front End Mentor challenge Tools & Techniques I used

• React.js framework
• Redux state management to update stepper state
• TailwindCSS for the responsive design
• React-hook-forms for form validation

Let me know what you think ^^

Hey! This is my second time completing this project. And I am very happy with the progress I've been making. Let me know if you have any feedback ^^

Hey! Very fun challenge :). Nothing much to say as I almost didn't encounter any difficulties building this project. Only thing I may have struggled with at first was the timer which appears after the user makes a decision.

Hope you like it ^^

Learned a lot about state management while building this project. Surprisingly, it was not as easy as it seemed in the beginning.

Tools: Library: ReactJS Styling: Styled-components State management: Redux & React-Redux

Was a fun challenge ^^ Built it using Styled-Components for styling, React Redux for state management, and local data caching to store todos and load them upon reloading.

Unfortunately, I was unable to implement Drag & Drop bonus task as I do not know how to implement it yet. I'll be back for it later though :)

Let me know if you have any feedback 🫡

Had much fun building this one :) Thought it'd be easy at first, and I decided to challenge myself by adding extra features:

• An extra filter
• Local data caching instead of fetching from API everytime the webpage loads
• Pages (As in, dividing the array of countries to pages instead of loading the entire thing :p)

And yea, turns out it wasn't as easy as expected, but I did learn new tricks and libraries ^^

• Redux & React Redux
• React Router
• Styled Components

The main issue I have faced with this project is making its font size responsive to all screen sizes. Usually, I set my font sizes in REM values and I don't have to touch them again. But for this challenge, the font was too large already, so on smaller screen, it looked a lot bigger, which I had to consider when scaling down to smaller devices.

The difficulties I faced while building this project:

• Angle arrows' positioning, I was unable to position them the same way they are in the original design.
• Making the design fit full-screen on all devices. My workaround was to give a max-width of 1440 because that's the most optimal for the photos provided.