Skip to content

Latest commit

 

History

History
119 lines (86 loc) · 4.24 KB

README.md

File metadata and controls

119 lines (86 loc) · 4.24 KB

Frontend Mentor - Conference ticket generator solution

This is a solution to the Conference ticket generator challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

SSR live demo

Table of contents

Overview

The challenge

Users should be able to:

  • Complete the form with their details
  • Receive form validation messages if:
    • Any field is missed
    • The email address is not formatted correctly
    • The avatar upload is too big or the wrong image format
  • Complete the form only using their keyboard
  • Have inputs, form field hints, and error messages announced on their screen reader
  • See the generated conference ticket when they successfully submit the form
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • React - JS library
  • Express
  • Vite SSR

What I learned

I learned new react 19 hook useActionState. This hook reduces use of useState hook. Also no need to use third party form libraries for forms. This form is designed like react-hook-forms.

Following design specifications are achieved,

  1. 50% less re-rendring of the forms

    form render
    react-hoot-forms 4 times on submit
    useActionState form 2 times on submit
    Form fields render
    react-hook-form rerender with parent form
    useActionState form rerender on prop change(memoised)

  2. 8% Less bundle size

  3. Mounting Phase:

  • UseActionStateForm:

    • Actual Duration: 7.3 ms
    • Base Duration: 4.3 ms
    • Start Time: 1170.2 ms

  • react hook Form:

    • Actual Duration: 4.9 ms
    • Base Duration: 3 ms
    • Start Time: 1135.7 ms
    react hook Form mounts faster than UseActionStateForm with a lower actual and base duration.
  1. Update Phase:

  • UseActionStateForm:

    • Actual Duration: 0.6 ms
    • Base Duration: 4.5 ms
    • Start Time: 124883.5 ms

  • react hook Form:

    • Actual Duration: 2.3 ms
    • Base Duration: 2.3 ms
    • Start Time: 207708.4 ms

UseActionStateForm updates faster than react hook Form with a significantly lower actual duration.

  1. Also I learned about clamp() function is ccs. This function reduces use of media query. Responsive pages are easy to design with clamp() especially font-size and widths.

  2. Built SSR form using express and vite ssr bundler. SSR forms reduces initial page rendering for client. This improves user experience. SSR live demo Note :- page might be slow because response is delayed by 50 secound by render.com. The puprpose on this SSR rendering to test/learn reacts api renderToPipeableStream on express app.

    web vitals results

Screenshot

Form page Ticket Page
Form page Ticket page
Form page errors Form page field
Form page errors Form page field
Change and remove btn web vitals results
Change and remove btn web vitals results