OVERVIEW
Meet PUNCH IT!
PUNCH IT! is a digital business card that rewards networking. When you share your card via QR code or share link, other users can save your info to their phone or leave a punch with their own contact information for later coffee chats. You can also collect the cards that you've punched and add them to your personal card collection. Each punch represents a real connection made. PUNCH IT reframes networking from something you have to survive into something that actually feels like progress.
CONTEXT
#JobByJuly
In June 2026, I was getting frustrated with the job search process and decided to create and run and series called Job By July. In this series, I produced weekly videos where I showcased my experience, projects, and thoughts on job hunting all with the end goal of receiving a full time offer at the end of the month.
Config x Contra Makeathon
When I found out Figma was running a Makeathon for Config, I knew I had to bring it to my series. Not only was I looking for a design challenge to show in my videos, but I was heading to Config at the end of the month! I had about 2 weeks to submit a project and the winners would be announced at Config on June 23rd.
The Prompt
Using Figma Make, build and ship an app or website that solves a problem, improves your life, or improves a community.
My Thought Process
Since Config would be my first ever conference, I was nervous to network with other designers. This anxiety inspired me to create an app that would take the stress out of networking. PUNCH IT! was then born as an icebreaker and way to share my information with others in a fun way.
SOLUTION
The final submission
The final product was a functioning web app built in Figma Make with a backend powered by Supabase. Users can create their own card to share and collect others to build their network library.
PROCESS
Brainstorming the ambiguity
"Solve a problem" is a task that could be solved in a million different ways. In order to make something purposeful, I needed to figure out a solution that would be genuinely helpful to not only myself, but others as well.
Eventually, I thought "How do I want to frame this project to others when it's finished?" and that was the driving force in deciding the most compelling solution. I wanted to be able to tell people "I built an app that helped me survive my first experience as an anxious new grad".
126 versions on Figma Make
I built the entire app in Figma Make. To make things easier, I gave Make some visual inspiration as well as a guidelines to ensure visual consistency. After getting the main functionality working in Make, I brought the design layers into the canvas and made changes to the layout as well as designed the stamp assets.
Supabase as the backend
I connected Supabase to the Figma Make file to use as the backend for real time storage and updates. Supabase stores the sign in data for each user as well as all of the images that are uploaded to use as stamps.
This was my first time using any kind of backend for a project so it was a bit of a learning curve to set up!
Roadblock!
Originally, I wanted to avoid passwords and allow users to sign in via a Magic link sent to their email. I thought this would be more approachable as a way for people to create their own PUNCH IT cards without having to remember a password. This approach would also eliminate the ability to sign up with a fake email (e.g. test@gmail.com).
However, Magic links require a configured SMTP/email provider in the Supabase project settings (e.g. Resend, SendGrid, Postmark). Without one, Supabase can't actually send the email. In development and in the Figma Make environment, that external email provider setup isn't wired up, so the emails were never delivered, making the entire auth flow non-functional.
The solution was to use email + password for authentication, which could be stored solely in Supabase.
Building in public
While designing, I documented my progress on Instagram, Contra and LinkedIn in my Job By July series. Doing this, I was able to share my design process including the highs and lows! It was also a chance to get feedback from real people before submitting anything.
Inspiration from Feedback!
After sharing my progress, I got a lot of suggestions to add more gamification to the app. This inspired me to commit to the card collection capability! Adding the card collection flow was the final touch in making PUNCH IT! the best it could be!
OUTCOME
Outreach and Config!
Unfortunately, I didn't win any of the Makeathon awards. But more importantly, I shipped my first web app! And I reached a few other milestones….
3x Featured on Contra
PUNCH IT! was featured 3 times on the Contra x Figma Makeathon page as well as in a promotional video
Shipped for Config!
I actually brought PUNCH IT! to Config and used it to make connections. It was a great icebreaker!
Growing my Network
The process of sharing my work publicly both during my Job By July series and my PUNCH IT! progress updates resulted in my network exploding with new connections!