Frontend Mentor - Conference ticket generator solution

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

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
• Author

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

Screenshot

Screenshots

Links

• Live Demo

My process

Built with

• Semantic HTML5
• TailwindCSS
• TypeScript
• React
• React Hook Form
• Zod

Author

• Shivangam Soni
• GitHub - @ShivangamSoni
• LinkedIn - shivangam-soni
• Frontend Mentor - @ShivangamSoni
• CodePen - ShivangamSoni
• iCodeThis - Shivangam_Soni
• StackOverflow - shivangam-soni
• ORCiD - Shivangam Soni
• Instagram - shivangam_soni
• X - ShivangamSoni
• Threads - @shivangam_soni