Skip to content
OverviewSolutions
14
Comments
13
P

Yonerfy

@Yonerfy210 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest 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•255
    @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!

View more comments