All solutions

Good day Frontend Mentor Community! Here is my solution to the Rest API Countries with Color Theme Switcher challenge.

I was able to code and complete another challenge after being out for a while but here is my craft once again. In this challenge, it's more on applying my knowledge and utilizing other libraries to complete the task and my workflow is continuous at this point. I focused more on cleaning my code and doing all the necessary features in this challenge and it was a success.

Features accomplished:

• filtering countries by search input and region
• theme switch to dark or light mode
• error messages on pages with errors
• filtering layout animation when search input or region changes
• utilized pagination and skeleton loading for better user experience

Here are the main problems/features I wasn't able to accomplish:

• filtering with different search input must show exact countries based on it (e.g. "Manila, China" should show both Philippines and China). It could be done with regex but did not bother to try it.
• when typing fast, both filtering and its animation gets visual error and may show wrong countries. This is because of having to filter large data set every keypress which is quite expensive. One solution I think of was adding delay but was not able to do it. If there are any ideas how to fix it let me know!

Working on different edge cases is quite tedious and requires a lot of work. But I am all ears to any feedbacks and advices you guys could offer. Have a nice day everyone!

Good day Frontend Mentor Community! Here is my solution to the Todo App challenge.

I have made this app many times which made it easier to accomplish the logic of this app. This time, I used context for state management and custom hooks for dark mode and local storage. For the color, I used custom properties and configured tailwind to match the design. Then I added reordering and animation feature using framer-motion for this challenge.

Added features:

• added animation to todo items when being added or removed
• added drag effect when reordering items
• animation for empty message base on the number of todo items

Happy to hear any feedback or advice to you all! Have a nice day!

Good day Frontend Mentor Community! Here is my solution to the Multi-step Form challenge.

My first advanced challenge and I managed to pull off this challenge quite easily and faster.

Features added:

• Added validation on inputs using Regular Expressions.

My only concerns are:

• properly customize tailwind so that it would fit the design requirements.
• in Redux on how it will be scaled when project gets big but some said that you might not need Redux.
• How to fix these warnings...

Overall, a fun learning experience and expanding my knowledge about more technologies.

Happy to hear any feedback and advice, it will be helpful for my improvement! Have a nice day everyone!

Good day Frontend Mentor Community! Here is my solution to the E-commerce Product Page challenge.

I have been out for a while because I am learning React and Tailwind CSS but now I'm back with this completed challenge using newly learned React and Tailwind CSS yay!

It was quite challenging to write clean code in React where you don't litter the code with prop drilling, messy code, and unorganized file structure but overall it was fun and accomplishing. Implemented all the features stated in the objective and it feels great being able to do that!

Where I struggled a lot was how should I write my state management? When shall I use useReducer rather than useState and where shall I put that state? This questions requires a lot of thinking and takes up time in order to write clean code.

P.S. I first started this one with just HTML, SASS, and Javascript only and managed to complete the mobile view of the page but I transitioned to React and Tailwind to hone my knowledge in that area further.

Happy to hear any feedback and advice on how to write cleaner code in React! Have a nice day everyone!

Good day Frontend Mentor Community! Here is my solution to the Blogr Landing Page challenge.

First time doing a whole web page challenge and it is indeed difficult for me, a first timer and was only used to making components at a smaller scale. I focused more on the layout and responsiveness in this challenge.

Building this one out made me realize that styles got repeated over and over again, code gets longer which needs breaking them into smaller parts, and having values as custom properties or variables is a must in a bigger scale projects.

I have some difficulties in this challenge mainly on:

• Organizing my code and file structure
• Breaking apart my code into reusable ones (using mixins or utility classes)
• Setting custom properties for styles (such as font-size, transition, etc)
• Dealing with responsiveness in every screen sizes (afraid of not following best practices)

Let me know if there are some useful tips/hacks in overcoming these difficulties of mine and also in improving the quality of my code. Happy to hear every feedback and advice from you all!

Good day Frontend Mentor Community! Here is my solution to the Stats Preview Card Component challenge.

The design layout is quite easy to recognize but where I got struggled a lot was on working with responsiveness mainly on:

• Figuring out how will the image behave inside its container but luckily after some searching, found out the property for that which is object-fit :D
• Flexible gap and padding size base on the screen size but was solved using min() function in CSS.

First time using SCSS preprocessor and thankfully learned it fast and managed to utilize it with this project yay! It was a very nice to know it 'cause what they say about it being a "CSS with superpowers" is really true!

Added some features:

• Image hover effect
• Startup animation on first load
• Responsive in different screen devices

Happy to hear any feedback or advice regarding the code and the design! Let me know if there are some best practices to follow in SCSS!

Good day Frontend Mentor Community! Here is my solution to the Order Summary Component challenge.

I took this challenge to see how fast I can finish it with only few searches (just properties I always tend to forgot). I tend to consume most of my time on container width, font size, gap size, padding size and anything related to sizes just to match the design which makes me took a longer time to solve the challenge. Overall, a fun challenge to test my skills.

Added some hover effects:

• Image and SVG scaling transition on hover (first try)

Happy to hear any feedback and advices regarding the design and in quickly determining the right sizes to every elements!

I have one problem which is how to do the box shadowing in the design into code. Also, I am not sure if the background overlay when hovering the NFT image is an efficient way of doing it. Any feeback is appreciated!

Feel free to check my code and give any helpful feedback that could improve it's current state. Also, I don't know what is the right way to darken the background color of the button when hovered. I used two different color variables for those and not sure if it is the most efficient way. Would be glad to hear your feedback guys, thank you!