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

coding-conf

react
MOHAMMAD YASIR NIKOZAI•20
@yasirnikozai
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?

. What Are You Most Proud Of? Technical Achievement: If you built something complex or learned new technologies, you might be proud of how you incorporated React’s features to create a responsive, user-friendly form. Problem Solving: You might be proud of how you tackled issues like responsiveness, form validation, or handling state in React. The ability to make the app work seamlessly across different devices is a big accomplishment! Personal Growth: If this project was a learning experience, you might be proud of how you improved your skills in React, CSS, and web development in general. 2. What Would You Do Differently Next Time? Refine Code Structure: As you gain more experience, you might consider optimizing or organizing your code better, possibly through advanced state management techniques or reusable components. Add More Features: If the project is complete but could be expanded, you might add more complex features, like API integration or a more robust form validation system. Improve Performance: Future projects can benefit from performance optimizations, like lazy loading, reducing bundle size, or improving loading speed. Focus on Testing: Testing (unit tests, integration tests, etc.) is often something that is overlooked in the initial phase. Next time, you might include more thorough testing to catch potential bugs before launch.

What challenges did you encounter, and how did you overcome them?
  1. Challenge: Making the App Responsive What Happened: Ensuring that your app worked seamlessly across multiple devices and screen sizes can be challenging. How You Overcame It: Used CSS media queries to create a responsive layout that adjusts based on the device's width. Employed flexbox or CSS grid to build a flexible layout that adapts to different screen sizes. Tested the app on various devices or using browser tools to simulate different screen sizes.
  2. Challenge: Handling Form Validation What Happened: Ensuring that the form fields were validated properly (e.g., checking if fields are filled or the correct format is entered) could be tricky. How You Overcame It: Used JavaScript functions to validate form inputs in real-time or upon submission. Used a validation library like Yup in combination with Formik to simplify and centralize the form validation logic. Implemented error messages to guide users when data is incorrect or missing.
  3. Challenge: Managing State in React What Happened: Keeping track of form data and ensuring it was updated correctly during user interactions might have been complex. How You Overcame It: Utilized React’s useState hook to manage the state of the form fields. Managed complex state with useReducer or Context API if needed for larger or more dynamic forms. Ensured that state was updated correctly using controlled components, linking form inputs to state variables.
  4. Challenge: Cross-Browser Compatibility What Happened: The app might have displayed differently or not worked as expected on some browsers. How You Overcame It: Used CSS prefixes for properties that needed to be compatible with different browsers (e.g., for flexbox, grid, etc.). Tested the app in multiple browsers (Chrome, Firefox, Safari, etc.) and made necessary adjustments. Used CSS resets to ensure consistent styling across browsers.
  5. Challenge: Deploying the App What Happened: Deploying the app to a live server can sometimes lead to unexpected issues. How You Overcame It: Used GitHub Pages, Netlify, or Vercel for simple deployment solutions. Followed deployment documentation to ensure assets and routing worked correctly after deployment.
  6. Challenge: Time Management and Prioritizing Features What Happened: Balancing between implementing new features, testing, and debugging can be overwhelming. How You Overcame It: Prioritized tasks by importance and broke down complex tasks into smaller, manageable pieces. Used Git for version control to keep track of changes and revert back when needed. Set realistic deadlines and tracked progress to ensure a smooth workflow.
What specific areas of your project would you like help with?
  1. Improving Form Validation: If your form validation is not quite working as expected, I can help you refine it, or suggest libraries like Formik and Yup to make it easier.
  2. Optimizing for Performance: If you're looking to improve the performance of your app (faster load times, better rendering performance), I can help you optimize your React app by focusing on code splitting, lazy loading, or image optimization.
  3. Cross-Browser Compatibility: If your app doesn't look consistent across different browsers or devices, I can provide guidance on how to ensure cross-browser compatibility using CSS prefixes, polyfills, or responsive design techniques.
  4. State Management: If you're finding it difficult to manage state across multiple components, I can suggest best practices for state management or help you set up tools like Redux, React Context API, or useReducer for better state handling.
  5. Deploying the App: If you're facing any issues with deployment, I can help you troubleshoot deployment on platforms like GitHub Pages, Netlify, or Vercel.
  6. Adding New Features or Enhancements: If you're looking to add extra functionality (like form submission to a backend, integrating an API, or adding animations), I can help you implement those features.
  7. Styling and UI/UX Improvements: If you feel your app could use some design or styling improvements, I can help you with better CSS practices or suggest libraries like styled-components, Sass, or Material UI to make your app look more polished.
Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on MOHAMMAD YASIR NIKOZAI's solution.

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
Frontend Mentor logo

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.