Two weeks ago, I completed Stage 2 of the HNG Internship. The task was to build a Conference Ticket Generator using React. Here’s a breakdown of the journey.
Task Overview
What We Were Asked to Build:
- A form with fields for full name, email, and avatar upload (via Cloudinary or image URL).
- Form validation for required fields, email format, and image URL.
- State persistence using local storage or IndexedDB.
- Accessible design (keyboard navigation, screen-reader compatibility).
- Ticket generation upon valid submission, displaying user details.
- Pixel-perfect, responsive UI across all devices.
Live Demo:
https://conference-ticket-generator-steel.vercel.app/
Challenges I Faced
- Starting Late: I underestimated the time needed and began coding too close to the deadline.
- State Persistence: Syncing form data with local storage without causing re-render issues took time.
- Accessibility Hurdles: Ensuring keyboard navigation and screen-reader compatibility was trickier than expected.
- Validation Logic: Handling real-time error messages for Cloudinary URLs while keeping the form performant.
The Outcome
I submitted the task on time, but it’s not as polished as I wanted. For example:
- The UI isn’t fully pixel-perfect.
- Some edge cases (like specific image URL formats) aren’t fully handled.
I plan to refine it later, but for now, meeting the deadline was critical.
Links to My Work
GitHub Repo:
https://github.com/toptech5419/myHNGInternship-journey.git
LinkedIn:
https://www.linkedin.com/in/toptech5419/
X (Twitter):
https://x.com/Toptech5419
Medium:
https://medium.com/@alabitemitope51
Final Thoughts
This task pushed my React skills, especially in form management and accessibility. If you’re learning, start early—procrastination is a silent killer!
Top comments (0)