Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 6 months ago

Ticket - Generator

react, react-router, tailwind-css, vite, post-css
joe joe ntekim•310
@0147ntekim
A solution to the Conference ticket generator challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

  1. 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?

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Sophie•430
    @ippotheboxer
    Posted 6 months ago

    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 use

    const [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•220
    @Shaimaa01
    Posted 5 months ago

    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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub