DEV Community: Yan Leong

Post-Hackathon Blue Is Real😔

Yan Leong — Fri, 25 Jul 2025 23:52:21 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: After the Hack.

Post-hackathon blue is real.
Comment below if you feel the same — and how you cope with it.

As a first-time vibe coder with zero technical background, I took a leap and tried my hand at Bolt. To my surprise, I created my very first web app: FriendCards.

Think of it as a lightweight personal CRM — like Salesforce, but for your relationships. It helps you keep track of the little things: what people like or dislike, what you last talked about, special dates or memories — so connections don’t fade just because life gets busy.

This was a deeply personal milestone for me. I still remember the rush of submitting my pitch, heart pounding with excitement. Every late-night debugging session was worth it.

As a one-woman team, I learned so much — from shaping a product idea, designing the front-end and user experience, figuring out how to stand out, and even imagining how to turn it into a sustainable, profitable tool. These were things I never thought about before — at least not as a user. It gave me new appreciation for the thoughtful details in apps that make people feel something.

One question I often get is: How did you come up with this idea?

In today’s AI-dominated, information-overloaded world, many people feel human connection has become weaker. But I’ve always believed that genuine relationships are irreplaceable. FriendCards is a product with heart — one that helps us maintain and deepen our bonds, in a simple and natural way.

You can call me old school — but I want my people to feel special. I want them to feel heard, remembered, and thought of. Because let’s be honest: in this overstimulated, AI-driven world, emotional connection is getting lost… and loneliness is on the rise. In the digital age, the average human attention span has reportedly dropped to around 8 seconds, making it easy to forget even the people we care about. That’s why I believe remembering the small stuff — a favorite snack, an inside joke, a hard day — matters more than ever.

What’s next?
I want to keep building.

My vision for FriendCards includes:

Enhanced privacy and security (your notes are for your eyes only — even we can’t see them)
Gift suggestions based on someone’s personality and the occasion (with affiliate links to keep it sustainable)
Nearby activity recommendations for quality time
A gentle "Friendship Health Score" to prompt reconnection
Mobile-friendly that can sync to your contacts and calendar

If you’re curious or believe in this idea, I’d love for you to try it out and share your feedback. It would mean a lot. And if you are interested in working on projects together, I already have my sleeves rolled up!

And who knows… maybe I’ll even add you to my FriendCards. :)

10 Lessons I Learned Vibecoding with Bolt as a Complete Beginner

Yan Leong — Thu, 24 Jul 2025 23:53:38 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: Building with Bolt.

As someone with zero technical background, I never imagined I could build something from scratch. But here I am, having created FriendCards (a CRM for your personal life and dating life) using Bolt. From it launched three weeks ago to now with 30+ users! I was also incredibly honored to be featured in a live demo with the organizer out of over nine thousand submissions. Today, I want to share the lessons to other fellow beginners out there who might be frustrated about how to start. I welcome your feedback on how we can make the vibe coding journey better as I am continuously learning! ❤️

1. Start Small and Personal
Don't dive into complex projects right away. Pick something you're genuinely passionate about. Your enthusiasm will carry you through the frustrating debugging sessions and late-night problem-solving marathons.

2. Use ChatGPT as Your Starting Coach
Before touching Bolt, tell ChatGPT you don't know how to code and describe what you want to build. They can help you draft a Product Requirements Document (PRD) and brainstorm ideas. Think of it as getting your game plan ready before stepping onto the field.

3. Break Free from Cookie-Cutter Designs
AI coding apps love giving you generic, templated designs. To make your project stand out, find components from design websites like 21st Dev, copy them, and ask Bolt to create something similar. You can source everything from buttons to navigation bars to entire sign-in pages. This simple hack transforms your app from "obviously AI-generated" to genuinely unique.

4. Build Your Landing Page First
Creating a beautiful landing page early will motivate you to tackle the harder backend work later. Visual aids also help Bolt understand your desired layout and features—I used Excalidraw to make a simple sketch for my dashboard and just told Bolt to build exactly like that for me.

and this is what Bolt built for me based on my sketch, which is very close to what I visioned and Bolt even modify it for me, isn't it amazing?

5. Utilize the Inspector Feature Strategically
Use Bolt's "Inspector" feature to pinpoint exactly what you want to fix or modify. Pro tip: You can't use inspection after creating an authentication page, so wait until the very end to create your auth page.

6. Leverage the Discussion Feature
Before implementing major changes, use Bolt's discussion feature to talk through your ideas. This saves tokens and leads to better communication, which results in more accurate implementation plans.

7. Debugging: Your Biggest Challenge (And How to Tackle It)
As a non-coder, debugging will be your toughest hurdle. AI tools are powerful collaborators, not magic wands. When you hit roadblocks, sometime Bolt can help you fix itself, sometime it cannot. When this happens, copy your problematic code and paste it into Claude or ChatGPT. Ask them what's wrong or to rewrite it entirely. Let the AIs fix problems among themselves! Don't be afraid to revert and try again—you won't hurt their feelings.

8. Embrace "Vibe Coding" and Ditch Perfectionism
Just like people interpret sentences differently, AI does too. You communicate the "vibe" of what you want, and AI generates the code. A slight change in words gives you different (and sometimes better) results than expected. Embrace this creative unpredictability. If you asked me to rebuild FriendCards today, I probably couldn't recreate it exactly—and that's perfectly fine. In vibe coding, you’re the artist with the brush in hand :)

9. Vibe Coding Doesn't Mean Zero Code Literacy
While vibe coding helps you build prototypes quickly to test ideas, improving requires some coding literacy. Active learning is essential—YouTube tutorials are goldmines. Eventually, you might need to take your prototype beyond Bolt and work in more technical environments.

10. Learn Bolt's Language (And Let It Teach You)
As someone with no technical background, terms like ".env file," "authentication," and "configuration" once sounded like foreign languages. I began by describing what I wanted in plain English (often use whisper flow to do voice to text to make it faster), then watched Bolt summarize implementation plans in precise, professional language. Now I can use those technical terms to communicate better with Bolt too!

My Biggest Takeaway
After all these lessons I learned, I felt so inspired—you don't need to be perfect to begin. You just need to care enough to try.
I never thought I could build something from scratch, but AI technology has made the impossible accessible. If someone with zero tech background can create a working app with Bolt, you can pursue whatever dream your heart is telling you to chase.
The barrier to entry has never been lower. The only question left is: What will you build?

Non coder building my first AI-powered web app at the world’s largest hackathon

Yan Leong — Fri, 04 Jul 2025 20:37:32 +0000

This is a submission for the World's Largest Hackathon Writing Challenge: Beyond the Code.

A month ago, while I was cooking in the kitchen, my boyfriend asked me,
"Do you want to sign up for a Hackathon?"

I was wide-eyed. I’ve never worked in tech. I didn’t know a single line of code.
To be honest, I didn’t even know what a Hackathon was.

Despite my doubts, I didn’t hesitate: "Yes!"
It felt like fate was nudging me forward.

I had always wanted to learn AI. And instead of watching YouTube tutorials or signing up for bootcamps, I thought—why not learn by actually building something?

I used Bolt, a no-code/AI-assisted tool. It was magical and powerful… and sometimes, it drove me absolutely crazy.

It could build full pages from a single prompt—beyond my expectations.
It could also take me an hour just to flip an icon from left to right.

While my boyfriend—who has been in tech for 8 years—effortlessly built cool features, I was still struggling to understand how components even worked.

I remember lying in bed late at night, using the corner of my blanket to wipe away tears, thinking:
"Maybe I’m just not smart enough for this."

But I didn’t give up. Slowly, things began to shift.

Through active learning, I started to understand basic code.
I learned to debug.
I learned how to prompt Bolt more effectively.

Honestly, working with Bolt also taught me all the dev lingo: favicon, .env files, authentication, API keys… and how to clearly express what I wanted the system to do.

Soon, I could figure out more and more on my own.

✅ Integrated OpenAI voice dictation
✅ Built an AI conversation generator
✅ Added Stripe payment processing
✅ Used Supabase for user data storage
✅ Assembled complete landing pages using components from 21st dev from scratch
✅ Deployed the web app with Netlify

These were all concepts that once felt impossibly distant—
But I figured them out, piece by piece.

💡 And finally: FriendCards was born.

A web app to help you remember the little things about the people you care about:

Whether it’s someone you just met at a party (so you don’t forget their name and feel awkward next time)
Someone you’re dating (it’s surprisingly easy to forget who you said what to… I know 😂)
Or your friends (wait, what is their cat's name again?)

FriendCards reminds you to check in if it’s been a while, and even helps you draft personalized messages based on each person’s profile.

It’s like Salesforce, but for your social life.

And beyond my expectations — my project was featured by the hackathon organizer, and is currently one of the top 5 most liked on the website! I’m so grateful. 🥹

I want to thank my boyfriend, who saw the potential in me before I could see it myself.
Thank you for being the one person who told me not to give up.
Thank you for being the most encouraging belayer in my first climb into the world of tech.

To anyone out there who's just starting, pivoting, or doubting yourself:

You don’t need to be perfect to begin. You just need to care enough to try.

If I—someone with zero tech background—can build something from scratch with Bolt,
you can pursue the dream your heart is whispering to you.

Let your curiosity lead you.
And let your heart be part of the build. 💛

With love, from FriendCards