Skip to content
OverviewSolutions
14
Comments
13
P
Yonerfy
@Yonerfy

All comments

  • Rita•375
    @MargaritaBusyginaCa
    What are you most proud of, and what would you do differently next time?

    I am most proud of building the slider component instead of using the library.

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

    The hardest part was building the slider and getting a number of characters for the password length from the slider position. I used linear interpolation to calculate the position of the slider circle.

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

    Code quality and readability. Maybe there are some bad practices I use.

    Responsive Password generator app built with Vue + tailiwnd

    #vue#tailwind-css
    1
    P
    Yonerfy•210
    @Yonerfy

    I really liked your solution, good job.

  • NameLessS•190
    @NameLesSs00
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Tip Calculator app using next.js and tailwind

    #next#tailwind-css
    1
    P
    Yonerfy•210
    @Yonerfy

    Good job done this one.

  • P
    Yonerfy•210
    @Yonerfy

    Good work.

  • P
    Mars - Martiniano Leguizamon•275
    @martinianol
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully implementing a responsive and accessible Newsletter Sign-Up Form using React, Vite, and Styled-Components. The project effectively handles user interactions such as focusing the input, triggering errors, and providing helpful feedback messages. Additionally, deploying the project to GitHub Pages was a great learning experience, especially figuring out how to use import.meta.env.BASE_URL to handle dynamic paths.

    Next time, I would focus on enhancing the user experience by adding subtle animations and refining the form validation logic with a dedicated library like yup or react-hook-form. Additionally, I would consider using TypeScript for better type safety and a more robust development experience.

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

    The biggest challenges I faced were: 1. Handling file paths for images and fonts when deploying to GitHub Pages. • Solution: Learning to use import.meta.env.BASE_URL and properly structuring my project by moving static assets to the public/ folder. 2. Managing focus and blur states for the input field to provide a smooth user experience. • Solution: Using React useRef and useEffect to handle click events, keyboard accessibility, and input focus/blur management. 3. Displaying images within styled-components using dynamic paths. • Solution: Moving assets to the public/ folder and referencing them correctly for both development and production modes.

    What specific areas of your project would you like help with?
    1. Accessibility improvements: Making sure the form is fully accessible via keyboard and screen readers. 2. Animation techniques: Adding shake animations or subtle transitions to improve user feedback. The gradient background did not allow me to transition the way I wanted

    Newsletter Sign-Up Form – React, Styled-Components

    #react#vite#styled-components
    1
    P
    Yonerfy•210
    @Yonerfy

    Great very well done.

  • P
    Yonerfy•210
    @Yonerfy

    Hey Munib Ahmad, great job with the CSS! You just need to add the functionality. You can use JavaScript to make the share menu appear. Right now, the component doesn't have any functionality. Also, don't forget to provide the link to the code. Best of luck finishing what’s left!

  • P
    Yonerfy•210
    @Yonerfy

    Very good job with this layout! You just need to adjust it better for laptops at 1024px and also the background image for the footer. Great job, I really liked how you organized the code!

  • P
    Yonerfy•210
    @Yonerfy

    Hey T23harms, great job on this one! It looks really good.

    There are a few things you need to fix to make it even better:

    • Your text is overlapping because you set a fixed height in your card content. Try removing the height or setting it to auto.
    • You did well with the width by using percentages, but it's better to use relative units instead of pixels. This will help the layout adapt better to mobile and tablet screens.
    • Adding a border to the image will make it match the design more closely.
    • Don't forget to remove the template README.

    Great job, mate! Keep going—you’re doing really well. 🙂

  • P
    tasosbeast•150
    @tasosbeast
    What are you most proud of, and what would you do differently next time?

    What I am most proud of

    I am proud of starting to learn React and successfully applying it to this project. It has been a great learning experience, and I am happy with how I managed to create interactive components and manage state effectively.

    What I would do differently next time

    Next time, I will try to make the project simpler and not overcomplicate things. While using React for this project was a valuable learning experience, I will consider the scale and complexity of the project before deciding on the tools and technologies to use. This approach will help me focus on the core requirements and deliver more efficient solutions.

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

    Challenges I encountered

    At some point, the project kind of overwhelmed me, and I felt like I was spending too much time on it. The complexity of managing state and ensuring all components interacted correctly in React was a bit challenging. However, I overcame these challenges by breaking down the tasks into smaller, manageable pieces and focusing on one issue at a time. I also relied on resources like the React documentation and interactive tutorials on Scrimba to help me understand and implement the necessary concepts. This approach helped me stay organized and gradually complete the project.

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

    Areas where I would like help

    • State Management: I would appreciate feedback on how I managed state in this project. Are there more efficient ways to handle state for this type of application?
    • Component Structure: I would like input on the structure of my components. Are there any best practices I should follow to make my components more reusable and maintainable?
    • Performance Optimization: Any tips on optimizing the performance of my React application would be helpful. Are there specific techniques I should consider for improving load times and responsiveness?
    • Styling with Tailwind CSS: Feedback on my use of Tailwind CSS for styling would be great. Are there any improvements I can make to my class structure or usage of utility classes?

    Thank you in advance for any feedback and suggestions!

    Four Card Feature Section - Built with React and Tailwind CSS

    #react#tailwind-css
    1
    P
    Yonerfy•210
    @Yonerfy

    Very good work, I liked the effect you added to the cards.

    Marked as helpful
  • P
    Yonerfy•210
    @Yonerfy

    Very good solution, Nice!!

  • JanJohn PulPaul•60
    @popol09
    What are you most proud of, and what would you do differently next time?

    Probably the closest to the design i created

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

    Spacing between paragraph elements

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

    Nothing

    React and tailwind with minimal supervison

    #react#tailwind-css
    1
    P
    Yonerfy•210
    @Yonerfy

    Very good solution! You just missed the lines that divide the sections—you can use an <hr /> for those. For the table, you can use border-bottom. But other than that, great job! Keep it up.

  • Ingrid Rauany Dias Soares•10
    @ingridrauany
    What are you most proud of, and what would you do differently next time?

    A list of things that a learned or remembered when I made this first project of Frontend Mentor:

    • Setup a project with: vite, eslint, prettier, styled-components, vitest, testing-library.
    • Difference between default exports and named exports;
    • Create a barrel to export components;

    Social links profile solution using Vite - React

    #react#styled-components#vite#typescript
    1
    P
    Yonerfy•210
    @Yonerfy

    I really liked how you organized the code and how you structured the folders. Great job!

  • P
    Yonerfy•210
    @Yonerfy

    Very good job, it turned out almost the same. I really liked how you structured the html. good job keep it up.

  • P
    Yonerfy•210
    @Yonerfy

    ✅ Well-structured HTML: Your HTML is clean, properly indented, and easy to read. ✅ Good use of CSS: Your styles are well-organized, and you've applied a simple yet effective design.