Conference Ticket Generator with Form Validation and Responsive Design

What are you most proud of, and what would you do differently next time?

What I'm most proud of:

Form validation and accessibility: I’m really proud of how I handled the form validation and ensured that the page is accessible. I made sure to validate inputs, like checking the email format and file size, and provided feedback to the user in real-time. Ensuring that the form is navigable using just the keyboard and screen readers was a great learning experience. Responsive Design: I used Tailwind CSS to create a mobile-first design, and I’m happy with how the page adapts seamlessly across devices. The layout adjusts perfectly from desktop to mobile, and all interactive elements are easily clickable and focusable. User-friendly experience: I focused on making the form user-friendly, with clear error messages and smooth transitions. The overall goal was to make sure the user experience felt intuitive, and I’m proud of the simplicity and effectiveness of the design. What I would do differently next time:

File upload UI: Next time, I would spend more time refining the file upload experience. Although I added basic file size validation, the upload feature could be enhanced with drag-and-drop support and better visual feedback, such as progress bars or thumbnail previews of images. Server-side validation: While client-side validation is important, I would like to implement server-side validation as well to improve security. This would prevent bypassing validation by users who might manipulate the form data. Ticket customization: I would also like to explore adding customizable features for the ticket, such as allowing users to select their seat, event type, or theme, and then display those choices in the generated ticket.

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

Challenges I encountered:

File Upload Handling: One of the challenges I faced was dealing with file uploads, specifically ensuring that the avatar image was the correct format and under the size limit (500KB). Initially, I had trouble providing clear feedback to users when they uploaded a file that was too large or in an unsupported format.

How I overcame it: I implemented file size validation and added an alert for users to know if their file exceeded the size limit. I also added basic checks for supported image formats. Moving forward, I plan to refine the file upload UI to provide a better user experience, like adding drag-and-drop features or previewing the image before submission.

Form Validation Complexity: Another challenge was handling multiple validation checks for the form fields—ensuring that the email was correctly formatted, that no field was left blank, and that the file upload was valid. Keeping track of all these validations without making the code messy was tricky.

How I overcame it: I structured the validation logic in separate functions to make the code more maintainable and readable. I also used preventDefault() to stop form submission until all validations passed, ensuring a smooth process. I also made sure to give clear error messages to guide the user in case they missed a field or input something incorrectly.

Responsive Design for Multiple Screen Sizes: Ensuring that the layout worked seamlessly across different screen sizes was another challenge, especially with the form elements and ticket preview needing to adjust for mobile, tablet, and desktop views.

How I overcame it: I used Tailwind CSS’s responsive utilities to create a mobile-first design. By applying different classes for various breakpoints, I was able to make sure that the form and ticket layout looked good on all screen sizes. I also tested the layout on multiple devices to ensure consistency and responsiveness.

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

Are all interactive elements (inputs, button) easily accessible and usable? Does the button successfully open ticket.html, and does the data transfer correctly?