Event Information

Join developer Jonathan Farrell for another look at vibe coding. In this webinar, Jonathan will explore vibe coding applications using RunSignup’s public API for races, as well as incorporating additional API’s into a single project. Trouble-shoot along with Jonathan as he vibe codes in real time.

View Slides

Summary of Webinar 

Overview

The third Vibe Coding session shifts from live building to a guided debrief and mindset reset. Developer Jonathan Frell recaps prior sessions, clarifies what “vibe coding” is (and isn’t), shows how to talk to AI effectively, and demonstrates why thoughtful prompting dramatically improves results. The goal: leave attendees confident to experiment, prototype quickly, and keep learning.

Agenda Highlights

• Quick recap of Projects 1–2 and what attendees learned
• What vibe coding is vs. isn’t
• How to talk to AI and why prompt quality matters
• Prompt engineering basics with practical examples
• Tools to explore beyond the earlier sessions
• Where to go next and upcoming topics
• Q&A

Recap of Projects 1–2

• Explored Vercel + V0 (v0) for rapid prototyping and hosting.
• Vibe coded a race pace calculator, then a race calendar/search with weather.
• Learned to duplicate/remix existing projects, brand them, and improve UI/mobile.
• Introduced APIs: RunSignup for race data; third-party APIs (e.g., weather).
• Practiced troubleshooting and incremental improvement.

What Vibe Coding Is (and Isn’t)

• Is: A fast, fun way to turn ideas into working prototypes/MVPs; an assistant that extends your capabilities; a democratized path for non-devs; a productivity boost for devs.
• Isn’t: A replacement for a software developer, a magic wand, or a push-button path to complex, production apps. It still needs direction, iteration, and project management.

How to Talk to AI

• Treat it like an intern who has read everything but lacks job experience. You must give clear goals, context, and constraints.
• Have a conversation before building: discuss the problem, desired outputs, constraints, data sources, and UX expectations.
• Start small, iterate, and let the model “learn” your preferences while you learn how to guide it.

Prompt Engineering: Why It Matters (Live Demo Summary)

• Weak prompt (“Create a race calendar”) produced generic/incorrect scope (e.g., motorsports) and thin features.
• Improved prompt with user story, scope, fields, UX expectations, and mobile requirement produced a much better race-finder UI with useful filters and structure.
• Always specify data sources. Without explicit sources, the model fabricates sample data (e.g., “ratings”) or uses stale/placeholder content.
• Example refinement:
  • Ask “Where are ratings from?” to expose placeholders.
  • Direct it to real APIs (e.g., RunSignup races endpoint, Google/Yelp reviews) and provide docs/keys to fetch live data.
  • Be explicit about time windows (e.g., “only future races”), fields to display (logo, date, elevation), and link behavior (e.g., “View Details” goes to registration URL).

Tools Mentioned

• Foundation models: ChatGPT, Gemini, Claude (often powering other tools).
• Builders/IDEs:
  • V0 + Vercel: Great for non-devs, quick hosted prototypes.
  • Cursor: AI-assisted coding IDE; excellent for learning and writing real code across languages; guides setup, explains code, and suggests commands.
  • Kira (requirements/ideation), Warp (AI-assisted terminal).
• APIs: RunSignup API for race data; public APIs for weather, reviews, etc.

Practical Tips

• Optimize for fun, fast experimentation, and rapid prototyping.
• Don’t start with a complex, integrated system. Build something small to learn the conversation loop with the AI.
• Write rich, specific prompts (problem, audience, scope, data, UX, constraints). More clarity in yields more quality out.
• Use real data sources as soon as possible; provide docs and keys.
• Iterate: prompt, test, ask why, refine. Treat it like managing a junior teammate.
• Save and reuse working prompts and requirement briefs.

What’s Next

• Upcoming webinar (mentioned): deeper dive on prompt engineering (Oct 22) with Bruce and Matt Brady.
• The team welcomes suggestions for future topics (beginner to advanced), including OAuth/login, alternative tools, and MCP vs. APIs.

Q&A Notes

• Cursor training for early learners: Cursor is recommended; it explains code, honors your chosen language, and guides environment setup. It accelerates learning via conversation.
• Using V0 and Cursor together: Don’t mix them on the same project; pick based on comfort. V0 is simpler for non-devs; Cursor is better when you want code control.
• Custom GPTs/Gems integration: Not specifically covered; possible with added complexity, but no direct guidance was provided.
• Call for examples: Attendees are encouraged to share projects they build.

Quick Start Checklist

1. Pick a small, fun idea to reduce scope risk.
2. Write a detailed prompt: user story, features, data sources, UX, constraints.
3. Build in V0 (no-/low-code) or Cursor (code-first), depending on comfort.
4. Connect real APIs early (e.g., RunSignup) and verify outputs.
5. Iterate in short loops: ask why, refine prompts, and improve UX.
6. Save what works (prompts/templates) and remix for new ideas.