Desktop Mode
Responsive Friendly
Some Social Notes

Inspiration

The idea sparked when I received the official hackathon badge in a Google Drive. I thought, “There has to be a better way to handle this for everyone.” Every project in the hackathon needs to display this mandatory badge, and I saw an opportunity to create a tool that makes this process seamless and enjoyable. My goal was to build an intuitive platform where participants could customize, preview, and generate badge code effortlessly, turning a basic requirement into a polished, user-friendly experience.

What it does

The Bolt.new World's Largest Hackathon Badge Generator is a web-based tool designed to streamline badge creation and integration for participants.

Its key features include:

Built 100% with Bolt.new: The whole site and configuration was completed in Bolt.new
Customization Options: Users can personalize their badge by choosing its position (e.g., top-right, bottom-left), style (white circle, black circle, text-only), and size.
Dynamic Animations: It offers a variety of intro animations (e.g., scale, slide, flip) and hover effects (e.g., pulse, bounce) to add flair to the badge.
Code Generation: The platform instantly produces ready-to-use code snippets in either Tailwind CSS or pure CSS, which users can copy and paste into their projects.
Compliance Guidance: It provides clear technical implementation instructions and outlines the official hackathon badge requirements to ensure adherence.

This combination of functionality and guidance makes it an essential resource for participants looking to meet the hackathon's standards with ease.

How I built it

I developed the badge generator as a modern, responsive web application using a robust tech stack:

React and TypeScript: These provided a strong foundation for building a scalable and type-safe frontend.
Vite: This fast build tool accelerated our development process and optimized the production build.
Tailwind CSS: I used it for efficient, consistent styling, enabling a customizable and visually appealing design.
Framer Motion: This library powered the smooth animations for badge intros, hover effects, and page transitions.
Lucide React: I incorporated crisp, scalable icons to enhance the interface.
Custom JavaScript Logic: This dynamically generated badge code based on user inputs, supporting both Tailwind and pure CSS outputs.

The result is a sleek, interactive platform that balances functionality with an exceptional user experience, saving them frustration and time.

Challenges I ran into

Building the badge generator came with its share of hurdles. One major challenge was ensuring the generated code was versatile and easy to integrate across diverse project setups. This required me to carefully design the CSS generation logic to translate Tailwind classes into equivalent pure CSS while maintaining animation accuracy and responsive sizing. Another difficulty was optimizing Framer Motion animations for performance across devices, ensuring the live preview mirrored the final output seamlessly. Overcoming these obstacles demanded meticulous testing and refinement.

Accomplishments that I am proud of

I take pride in several aspects of this project:

Intuitive Configurator: The interactive badge builder simplifies a potentially tedious task, making it accessible to all participants.
Flexible Code Output: Offering both Tailwind CSS and pure CSS snippets caters to a broad range of developer preferences.
Polished Experience: The site's clean design, fluid animations, and clear guidelines create a professional and user-friendly tool.
Responsive Design: Both the badge and the site itself adapt beautifully to any screen size, enhancing accessibility.
Custom Styling: The design was meticulously updated to ensure an unique UI experience.

These achievements reflect my commitment to delivering a high-quality solution tailored to the hackathon's needs.

What I learned

This project deepened my expertise in several areas. I honed our skills in dynamic UI generation, gaining a better grasp of CSS-in-JS versus traditional CSS approaches. Working with Framer Motion taught me how to optimize animations for performance while maintaining visual appeal. I also learned the value of creating reusable React components and the critical role of clear documentation when providing code for others to integrate.

These lessons will inform my future projects and I'm forever grateful for the Bolt.new Hackathon experience.