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.

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

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

Links

• Solution URL: solution URL
• Live Site URL: live site URL

My process

Built with

• React - JS library
• Vite - Build tool
• Tailwind CSS - Utility-first CSS framework
• Formik - Form management library
• Yup - Schema validation library
• Semantic HTML5 markup
• js

What I learned

During this project, I learned several key concepts and techniques that improved my understanding of web development:

• How to use the <input type="file"> element to open a file explorer and select files for uploading.
• How to implement drag-and-drop functionality for file uploads, allowing users to drag a file into a designated area.
• How to pass values between pages/components using React Router's navigate function. This allows me to pass state (like form values) to another page, making the app more dynamic and interactive.
• How to make my components more organized by breaking them down into smaller, reusable parts for better maintainability and readability.
• The importance of web accessibility. I learned how to improve accessibility by properly associating <label> elements with inputs using id attributes.
• The significance of aria-describedby for providing additional context to users of assistive technologies, and how to use aria-invalid to indicate form validation errors, improving the experience for screen reader users.

These skills have allowed me to build more interactive, user-friendly, and accessible features while keeping my codebase clean and manageable.

// Example of passing values with React Router's navigate function
navigate("/ticket", { state: values });