I built a reading game for my son. It's called Dino Words.
He's four, and he's obsessed with dinosaurs. He's also just starting to read. So I made him something where those two things become the same thing.
You see a picture. You say the word out loud. A dinosaur is chasing you, and your voice is the only thing keeping it back. Say it right and it falls behind.
Get stuck and it creeps closer.
Phonics is usually taught with drills and flashcards, things kids endure. But my son doesn't endure this. He doesn't know he's learning at all.
He thinks he's outrunning a dinosaur, and somewhere in the running, the words are becoming his.
The whole thing is built around what he already loves, so the learning never feels like learning. A gentle voice teaches each word first, then it's his turn to remember it alone. And because every child is different, anyone can paste in their own words, in any language, and watch them become a level.
I built it in Figma Make with help from Figma and assets from GPT, Seedance etc. What I love about it is that it let me spend my time on how this should feel for a four-year-old, not on how to ship it.
Made for the @contra x Figma Config Makeathon.
Try it yourself! /link below/
#ConfigMakeathon @figma
2
1
5
186
I love designing interfaces and I love building products.
Snapshot of a Crowd9-EVMS component for CVS importation ~ Error State.
Crowd9-EVMS [Crowd9 for short] is an event management and ticketing system.
A product I'm currently building for the @figma x @contra #configmakeathon
I've been building in public for more than a week now.
You can view my public updates on my profile, you can follow quote after quote.
@miggi @_radnolan @thedesignely #buildinpublic #makeathon
1
1
48
I just created a pixelated image and an animation sprite of my cat entirely in @figmaweave, put it in Figma Make and just made it as an interactive character in a platform I'm building for the @Figma and @contra #makeathon.
This feels illegal.
1
34
Still thinking about entering?
This is your sign.
@figma Makeathon entries close at midnight PST on June 18.
The winner will be announced LIVE at Config.
Register below to watch it happen π
config.figma.com/san-francisβ¦
1
4
905
Check out FrameOrbit πΈπ by Alhasan on @figma:
figma.com/community/file/164β¦
#Makeathon #Figmamake
1
26
Lets go for the makeathon!πͺ
Who else is joining the Figma Config Makeathon?
1
100
I fixed the QR Code scanner issue we were having.
Created a new event to test with.
#configmakeathon
The scanner no longer verifies an already verified guest and stops updateing the row with the same data over and over again.
Here's how every scan outcome now behaves:
1. Success β green modal with the guest's name, email, tier, quantity and Crowd9 ID. Ledger row is added. Dismisses after 2 seconds.
2. Already checked in β amber/yellow modal saying "ALREADY CHECKED IN" with the guest's name and a note that they've been admitted. Ledger is not updated (no duplicate row). Dismisses after 2 seconds.
3.Invalid QR (bad JSON, wrong event, not found) β red modal with "INVALID QR CODE" and a specific reason. Ledger gets a rejected row only for structural failures (not duplicates). Dismisses after 2 seconds.
The server now blocks duplicates at the source β a second scan of the same registration_id returns a 409 with code: "ALREADY_CHECKED_IN" before any write happens.
@figma @miggi @contra #buildinpublic #makeathon @tranmautritam @_radnolan @thedesignely @janm_uiux #figmamakeathon
Oh!! My heard hurts.
Major #configmakeathon update!!!!
Firstly, I want to appreciate the people that have been with me since I started, even if it's just @contra and 1 other person.
Anyways...
The QR code scanner now works ALMOST perfectly fine, I just encountered a little bit of a problem.
So I finally got the Check-In HUD to update data upon successful verification of a guest.
Goodnews is, it works.
Badnews is, it keeps verifying an already verified guest and even updates the row with the same data over and over again.
WRONG!!
I'll fix that.
But I also finished up the event registration flow, but that will be the next post. Please stay tuned.
@figma @contra #makeathon #buildinpublic @_radnolan @rogie @thedesignely @janm_uiux
2
185
Jun 14
β¨ Week 10 #FramerChallenge update:
Affiliate sales from @framer Γ @dubdotco: $84
Working on Config Makeathon project
Total: $1203 / $5,000
15
Oh!! My heard hurts.
Major #configmakeathon update!!!!
Firstly, I want to appreciate the people that have been with me since I started, even if it's just @contra and 1 other person.
Anyways...
The QR code scanner now works ALMOST perfectly fine, I just encountered a little bit of a problem.
So I finally got the Check-In HUD to update data upon successful verification of a guest.
Goodnews is, it works.
Badnews is, it keeps verifying an already verified guest and even updates the row with the same data over and over again.
WRONG!!
I'll fix that.
But I also finished up the event registration flow, but that will be the next post. Please stay tuned.
@figma @contra #makeathon #buildinpublic @_radnolan @rogie @thedesignely @janm_uiux
#configmakeathon build update!!
I'm now done working on giving the creator/planner of an event the ability to generate a unique Event ID or link for guests/people who want to register and attend an event.
And for that to work, I need to make the button at the top right corner on an event-card-onTap (I wrote it this way for better understanding and just cause I wanted toπ
)... I needed to make the button alive and interactable.
Tapping on the component displays:
Event title, date, and venue details in a preview card
The Event ID with a copy button.
The full registration link (crowd9.app/e/{event_id}) with a copy button.
An informational note explaining how guests can use the ID/link to register.
Used AnimatePresence for smooth modal animations (fade in/out with scale effect).
i'm still working on the 'register for event' flow, but I'll be tweaking and refining the QR Code scanner and testing it out. I can only test it out once I get a successful registeration which should be built to produce a QR Code with important details embedded for the system to detect.
So 'register for event' flow is next. Stay tuned.
@figma @contra #makeathon #config #buildinpublic @tranmautritam @_radnolan @thedesignely
1
258
Jun 13
Today I met @figma design agent for the first time π Felt a lot like Figma Make. Meanwhile, I'm still working through the logic of Design Crit (for @contra Makeathon). Quick clip of the agent thinking π #ConfigMakeathon #FigmaMake
89
Design matters now more than ever.
The Config Makeathon starts now.
253
461
5,887
25,429,933
Join the Config Makeathon now: c87.to/jun26-figma-x
2
437
1
60
#ConfigMakeathon Update: I couldn't make a video to showcase the journey.
however i'm sharing glimpse of whatever i made so far.
i narrowed down the idea and currently building a RSVP System for the makeathon.
Picture 1 : The Dashboard (see more in threads)
1
25
#configmakeathon build update!!
I'm now done working on giving the creator/planner of an event the ability to generate a unique Event ID or link for guests/people who want to register and attend an event.
And for that to work, I need to make the button at the top right corner on an event-card-onTap (I wrote it this way for better understanding and just cause I wanted toπ
)... I needed to make the button alive and interactable.
Tapping on the component displays:
Event title, date, and venue details in a preview card
The Event ID with a copy button.
The full registration link (crowd9.app/e/{event_id}) with a copy button.
An informational note explaining how guests can use the ID/link to register.
Used AnimatePresence for smooth modal animations (fade in/out with scale effect).
i'm still working on the 'register for event' flow, but I'll be tweaking and refining the QR Code scanner and testing it out. I can only test it out once I get a successful registeration which should be built to produce a QR Code with important details embedded for the system to detect.
So 'register for event' flow is next. Stay tuned.
@figma @contra #makeathon #config #buildinpublic @tranmautritam @_radnolan @thedesignely
@figma x @contra #configmakeathon
Minor update: I finally got the QR Code scanner in the Check-In HUD tab to be fed live data from the current device's camera and the canvas needs to be alive.
Faced a few difficulties implimenting this, but I finally got it right.
The QR scanner had a critical bug: the scan function was wrapped in useCallback with [onScan] as dependency. The useEffect depended on [scan]. This created a situation where:
1. Every time onScan prop changed reference (which happens on every render since onScan is an inline arrow function), scan got recreated.
2. useEffect then re-ran, stopping and restarting the camera/scan loop.
3. This caused an infinite restart loop.
But more critically, the scan function was used as a useCallback but useEffect also depended on scan.
When the parent component passed a new onScan reference on each render, it triggered scan to be recreated, which then caused the effect to re-run and start a fresh camera stream every time. This created multiple overlapping streams and breaks the scanner functionality.
The solution was to move scan directly into the useEffect so it's not a separate dependency, and use a ref to store the onScan callback to prevent unnecessary recreations.
The root bug: scan was in useCallback([onScan]) and useEffect([scan]).
Next? I'll be fixing the register for event process (from the landing) and also the copy event link button at the top right corner of the event card modal, to display a link and ID needed by a user so they can be ale to find and register for an event.
@_radnolan #ConfigMakeathon #buildinpublic @tranmautritam @janm_uiux @thedesignely @zoink
2
395