Inspiration
I wanted to create a simple, fun web app that brings a little joy and surprise to users every day. The idea of a button that reveals a new, random “daily surprise” seemed like a great way to engage people with minimal effort.
What it does
MagicButton displays a new random surprise every time the user clicks the button. Surprises can be jokes, quotes, animations, or fun little interactive elements that make the user smile or think.
How we built it
We built MagicButton using React and Vite for a fast development experience. The surprises are stored in an array and randomly selected on each click. To deploy, we configured Vite with the correct base path to host on GitHub Pages and used GitHub Actions to automate the deployment to the gh-pages branch.
Challenges we ran into
Setting up the app to correctly load assets and modules on GitHub Pages was tricky. We had to adjust the base path in the Vite config and fix relative URLs to prevent 404 errors and loading issues.
Accomplishments that we're proud of
We successfully built and deployed a fully working React app with a clean and responsive UI that loads quickly and works smoothly on mobile and desktop.
What we learned
We learned how to properly configure React and Vite projects for static hosting on GitHub Pages, including handling asset paths and deployment automation.
What's next for MagicButton
We plan to add more interactive surprises, personalization features, and maybe integrate user accounts so people can save their favorite surprises and share them with friends.
Log in or sign up for Devpost to join the conversation.