Ticket - Generator

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

1. What did you build? I built a Ticket Generator using React and TailwindCSS that allows users to register for an event and generate a visually appealing digital ticket. The form collects user details such as their avatar, full name, email, and GitHub username. Once submitted, it dynamically generates a ticket with a unique design, including curved edges, a rotated ticket number, and a background pattern.

Key features include:

Drag-and-drop image upload for the avatar Dynamic form validation A visually styled ticket with a custom shape Navigation between the form and the ticket page

2. What did you learn? Through this project, I deepened my knowledge in: ✅ Advanced TailwindCSS – Creating custom shapes using clip-path and layering background images ✅ Handling file uploads in React – Using the FileReader API for previewing uploaded images ✅ State management & form handling – Managing user inputs and dynamically passing data between pages ✅ Routing in React – Navigating between the form and the generated ticket while preserving user data

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

One challenge I faced was accurately shaping the ticket card with rounded cutouts and aligning the dashed separator line. Getting clip-path to work correctly required trial and error. Additionally, ensuring the background pattern blended seamlessly into the design took some tweaking.

I’d love feedback on:

Optimizing the ticket shape – Are there better ways to achieve the cutout effect? Improving accessibility & responsiveness – How can I make sure the form and ticket look great on all screen sizes? Enhancing the user experience – What additional features could make the ticket generation process smoother?