All solutions

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

This challenge showed the importance of having a strong foundation in CSS grids.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

I am good! Thanks for the free challenges.

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

This challenge showed the importance of having a strong foundation in CSS grids.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

I am good for now. Thank you for the free challenges!

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

Thanks! I am all good for now.

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I should have used useContext instead of passing around props. I will refactor on my spare time.

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

This challenge showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

I am good for now. Thank you for these free challenges!

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I added a ticker for the company logos for added flare.

I also practiced doing some custom hooks. I may have over did it but I just want to keep the tools sharp.

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

This challenge showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout. I am proud of the results since I was only eyeballing it.

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

I am good for now. Just practicing and learning a lot from these challenges... cheers!

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

Learning some of Tailwind's pseudo-classes capabilities helped me to style the elements conditionally.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

I'm good. I am just keeping my tools and skills sharp with these challenges!

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

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

This project gave me solid practice on REST APIs. Integrating it with NextJS also improved my understanding of the framework's intricacies in handling client side resources.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

I am good. Just learning so much from these challenges!

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I liked how I implemented some UX enhancements. The image will change saturation based on the mouse movement.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

I am good. Enjoying these challenges!

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

None. It's fun to do some basic challenges now and then.

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

I am good for now. Thank you.

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

This challenge proved to be more challenging than expected. Maintaining state across components required for custom hooks and useContext.

I also sprinkled some Framer animations for UX/UI enhancements. The parallax effect for the card and the form validation, which hopefully will enhance the UX.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

The parallax effect on the card was a challenge and will need some improvement. I will revisit the code in my free time.

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

I am good. Enjoying these challenges.

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

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I leaned heavily on Framer-motion library for this challenge.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

This challenge was pretty straightforward. It was nice to have a refresher on the basics occasionally.

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

I am good. Enjoying these challenges!

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

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I sprinkled some Framer animations for UX/UI enhancements.

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

I need to work on making the code for the curved backgrounds cleaner. It was more challenging than I expected. I will have to revisit this code when I have the time.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

I am good for now. I am enjoying doing these challenges and learning so much.

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

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

This challenge proved to be more challenging than expected. Maintaining state across components required for custom hooks and useContext.

I also sprinkled some Framer animations for UX/UI enhancements. Particularly proud of the real-time animation on the car notification when updating the quantity of the items.

The localStorage also stores cart data and makes potential purchases persistent.

The lightbox implementation also leaves room for improvement. I'll refactor this when I have time.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

Using the localStorage in NextJS needs extra code since the build looks for localStorage. Luckily, the documentation provides clear instructions to handle such issues.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

I am fine. I am enjoying doing these challenges!

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

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I heavily used localStorage on this challenge. The user's theme preference and the todos are stored in localStorage. I leaned on Framer Motion for the drag-and-drop functionality.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

I am good for now. Learning so much from these challenges...

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

I sprinkled some Framer animations for UX/UI enhancements. I implemented a typing animation to display the advice. I am quite pleased with the result.

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

This challenge was straightforward. I enjoyed playing around with the API.

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

I am good for now. Learning and having fun with these challenges...

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

I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I sprinkled some Framer animations for UX/UI enhancements.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

I am good for now. I am learning so much from these challenges!

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

I took a deep dive into learning Framer motions in this challenge. From basic motion animation to staggering animations, I wanted to learn the library. Needless to say, the animations are quite exaggerated but well-implemented.

I learned the whileInView props from Framer which is quite handy. I used the intersectionObject early on the project but found out later that whileInView provides this functionality. Nice!

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

I am all good for now. I am just enjoying these challenges!

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

It took me a while to get the Framer animations exactly how I wanted them. Fortunately, their documentation is top notch and it was easy to get familiar with the library.

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

I am good. Just improving my skillset with these challenges!

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

Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

I had so much fun with this challenge. It was challenging but well worth it. I am pleased with how I implemented the logic for the app. This really helped me develop a deeper understanding of hooks.

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

I still need to practice coding forms and using Typescript. Hopefully, these challenges will help me improve my proficiency.

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

I am good for now. Learning so much from these challenges!

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

I am pleased with how I implemented the time frame cards. I had a hard time since Tailwind didn't play nice with the conditional classes I was passing through. I had to rawdog some CSS to make it work.

I also feel that my grid skills are improving.

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

The challenge I encountered was making the time frame cards reusable for all the time frames. Since they have some custom backgrounds I had to do some setup.

I am quite proud of how this challenge turned out. I added some UI enhancement for good measure.

I also didn't have the Figma files, so I was just eyeballing the mockup.

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

I am good for now. I am having fun and learning so much from these challenges.

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

I integrated a lot of libraries into this challenge since I wanted to test and learn how to use them. I focused on enhancing the UX with animations. I am quite happy with the result of this challenge.

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

This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I am proud of the results since I was only eyeballing it.

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

I am all good for now. I am enjoying the challenges!

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

I learned how to use NextJS Image tag to render the appropriate image file for the screen size. I also sharpened my grid skills from this challenge.

I rolled my own tooltip functionality to share social links. I wanted to practice using React hooks to have a solid foundation for more complicated challenges. I am quite proud of the UI enhancement I made.

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

This challenge showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout just right. I just focused on coding the functionality. I am proud of the results since I was only eyeballing it.

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

I am all good for now. Enjoying and learning so much from these challenges.

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

I am proud of how I implemented the dynamic image rendering using the NextJS Image component. I wanted to lean on NextJS image optimization. This is the piece of code to get rid of the warnings and make the image file source dynamic:

Hope this helps.

I also used shadcn for the mobile menu. This saved time and helped me focus on the grid layout. The reason I chose this challenge is I wanted to improve my skills in using Tailwind's grid utilities and implementation.

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

I just eyeballed the layout since I didn't have the .fig file. I focused on learning NextJS, and React, and did my best to make the design close to the mockups.

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

I am fine for now. Enjoying these challenges and learning so much. Thank you.

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

I would have spent more time making the layout closer to the mockup. Unfortunately, the full-page layout was too much without the Figma file. So I just focused on creating a basic slider.

Deploying with NextJS gave me some trouble. I spent some time figuring out the proper path for the background image URLs. The tailwind.config.ts didn't play nice with the deployment build. I needed to specify the direct path to the images, this is quite unusual .

Anyway, I am quite happy with the result. It could use a little refactor but this will suffice for now.

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

The deployment... I spent some time reading issues on Tailwind's git repo. ChatGPT was no help on this one.

I had to append the page URL to the file's path in my tailwind.config.js. Hope this helps:

      backgroundImage: {
        "footer-curve": `url('/fm-coding-bootcamp-testimonials-slider/images/pattern-curve.svg')`,
        "pattern-bg": `url('/fm-coding-bootcamp-testimonials-slider/images/pattern-bg.svg')`,
        "quotes-bg": `url('/fm-coding-bootcamp-testimonials-slider/images/pattern-quotes.svg')`,
      },

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

I am fine for now. I am having fun and learning so much from these challenges.