Skip to content
OverviewSolutions
4
Comments
1

ErazorWhite

@ErazorWhiteUkraine130 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

  • [React, TS, Recoil, Router, Formik + Yup, DND, vite] Kanban web app

    #react#react-router#recoil#styled-components#typescript
    ErazorWhite•130
    Submitted 7 months ago

    State Management Best Practices: While Recoil has been effective, I'd appreciate feedback on best practices for scaling state management in larger applications. Are there patterns or techniques within Recoil (or alternative libraries) that could improve efficiency and maintainability?

    Performance Optimization: Any suggestions on optimizing the performance of the drag-and-drop feature would be helpful. I'm curious if there are more efficient ways to implement this or if there are alternative libraries that might offer better performance.

    Please feel free to provide any feedback or suggestions on these areas or any other parts of the project you think could be improved.

    0 comments

  • [React, TS, Formik + Yup, Vite, styled] Multi Step Form

    #react#typescript#vite#styled-components
    ErazorWhite•130
    Submitted 8 months ago

    In my implementation inside the render of the MultiStepForm component, I use Formik, which follows the construct:

    {(formikProps) => (
        MultiStepFormFields
          {...formikProps}
          currentStepIndex={currentStepIndex}
          goTo={goTo}
          next={next}
          back={back}
          pagesCount={pagesCount}
        
      )}

    I would certainly prefer to pass MultiStepFormFields only as a prop component in Formik and not clutter up extra lines of code. I ended up limiting myself with my custom hook, now the page index has to be passed from component to component. I came across another implementation in YouTube that seems to get rid of this limitation. But I'm running out of time to try it, should move next.

    1 comment

  • [React, TS, RHF + Yup, Vite, styled] Mortgage Repayment Calculator

    #react#typescript#vite#styled-components
    ErazorWhite•130
    Submitted 8 months ago

    In the beginning, I tried to set up linaria for a long time, but it never worked. babel didn't work well at the build stage. So I gave up this idea and went to runtime CSS in the form of styled-components.

    1 comment

  • [React, JS, Formik + Yup, Vite, CSS Modules, PostCSS] Contact form

    #react#vite
    ErazorWhite•130
    Submitted 9 months ago

    It would be great to get tips on using Formik in this way. I have no confidence that the result correctly implements the Formik logic as intended by the library author.

    1 comment

Latest comments

  • Dylan Heslop•2,460
    @dylan-dot-c
    What are you most proud of, and what would you do differently next time?

    This is my first time officially using both Zustand and Framer Motion so I would like so insights to how I handled the global state and how can I make it better.

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

    Global State Management and Form Validations.

    I solved the state problem with Zustand since it was fun and easy to use.

    For form validations I was thinking about React Hook form but didnt want to add more complexity.

    Another problem I had was validating the form before moving onto the next step. The form wasnt like the normal forms where you have a submit button to check, so I did an interceptor function(Thats what I call it but basically a wrapper) around the increment function so that before it moves on to the next step it validates the form and only when its correct it will go on to the next one.

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

    Global State Management and better structure of files and components

    Responsive Multi-Step Form With TypeScript, React, Framer and Zustand.

    #framer-motion#react#typescript#zustand#vite
    3
    ErazorWhite•130
    @ErazorWhite

    Congrats on completing this challenge :) I loved your page-turning animations, they make your form much more alive and it's great.

    For a text input with a phone number, I would add a mask to make the text match the format of a phone number.

    I also noticed that by default you already have the "Arcade" plan selected as soon as the user goes to the second page. I don't know if this is the right solution, maybe you should make it so that the user has to explicitly click on one of the three items.

    You might also want to add layout breakpoints when the viewport narrows. If you turn on developer mode in the browser and start narrowing the viewport, at some point part of your form will become invisible. Alternatively, you can wrap the form in a container with padding properties, and center the contents of the container.

    Although it's not at the Figma layout, I like how you added the phrase "No addons selected" to the Summary page. If you don't mind, I will borrow this behavior in my solution to this challenge.

    I would add cusor: pointer for the "Change" button on the Summary page for interactivity.

    Also on the addon selections page, I would make the entire area inside the frame a label element so that the user can click on the area and the addon is selected. A Cursor: pointer on the entire area wouldn't hurt either. If this isn't done, users will have to hunt for pixels. :D

    Good job and best of luck!