Ticket - Generator

Solution retrospective
- 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
- 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
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?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ippotheboxer
Hello, nice work on this challenge! The solution looks accurate and works well. Here are some of my tips:
Improving accessibility & responsiveness: At full desktop size, you can notice that there is white space at the bottom of the page. This is because you have min viewport height as 100, meaning at a minimum it will take up the whole height, but also more. It's better to set it as h-screen which takes up the whole viewport height, at least at larger size.
Enhancing the user experience: For error handling, the same error gets shown on each component. It shows "please fields can't be empty" even if you complete a field and submit it, all fields must not be empty for this to disappear. This is because you have just one error state stored as a single string, but I believe it would be better to store it as an object and update the object on each submission. For example, instead of
const [error, setError] = useState("");
you could useconst [errors, setErrors] = useState( {avatar: "", fullName:"", email: "", github: ""});
And in the error handling
const validateForm = () => { let newErrors = {}; if (!formData.avatar) { newErrors.avatar = "Please upload a photo."; } if (!formData.fullName.trim()) { newErrors.fullName = "Full name is required."; } // and so on... setErrors(newErrors); return Object.keys(newErrors).length === 0;} // Returns true if no errors
Currently, you don't have any error handling for an email or github username: however with this strategy, you could verify if they are in the valid format (e.g contain an @) by using regex. Then check if there's any errors on submission
const handleSubmit = () => { e.preventDefault(); if (validateForm()) { onSubmit(formData); } };
Hope this helps!
Marked as helpful - @Shaimaa01
I wanted to share a helpful resource for creating a background image with a dashed effect. You can use this website: Dashed Border Generator. It allows you to customize the dashed effect and use it as a background image instead of a border, which can look even better. It's highly customizable and might add a nice touch to your design!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord