Our Startup's New Design System! w/ Designer & Dev

Today we’re sharing our first impressions of GitHub’s Copilot code review! Oskar and Tomasz are both senior devs on the Jam team, and share what we’ve found while building with it these past weeks.Let’s get into it!0:00 Intro1:46 A real example from our codebase3:13 Oskar & Tomasz share why the feature is valuable for them5:03 Why Copilot’s ability to catch every typo is actually a big deal6:52 Besides naming variables & catching typos, where is Copilot Code Review useful? Real Jam example w/ permissions!8:08 Imagining what’s possible for Copilot w/ JamSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts.

Today we’re diving deep into our first automated testing suite with Playwright! There’s 180k+ people Jamming in 75+ countries, which is so awesome! But it also brings up a variety of web compatibility edge cases that can be tricky to identify with manual QA testing. So to keep shipping fast, we’re making our automated testing more robust. Today, Jam Eng, Aidan, is sharing all the details with you all!On today’s episode:(00:00) Intro(00:25) Why we added automated testing on top of manual QA(02:10) Walkthrough of Jam’s Playwright testing suite(03:27) The biggest challenge of setting up our tests(05:04) Demo of our fetch requests testing page(10:37) How the new testing suite fits into our dev cyclesSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts.New episodes drop every other Friday at 10AM ET. See you there!Join 175k+ happy users at https://jam.dev/ for 1-click bug reports that engineers love.

In this episode, we’re sharing behind the scenes of how we use Figma at Jam! Our designer Martin gets into the details behind how we organize Figma files, handle developer handoffs, and build out our files over the course of the product development lifecycle.Ready to see our Figma? Let’s go!(00:00) Intro(00:38) Real questions from Twitter & Reddit about Figma organization(01:52) Making Figma files part of the design process (we like double diamond!)(05:05) Page hierarchy: collaboration, discovery, exploration, review & development(07:06) What should be a new file vs. a page?(14:07) Figma playgrounds, drafts & tips for exploration(15:50) How to organize & document your files for design reviews with developers(23:27) Figma tour of our settings page & steps we take for design + dev alignmentSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts. New episodes drop every other Friday at 10AM ET. See you there!

We just launched AI that writes your bug reports and today, we’re sharing the story with the team that built it! We’ll get into why we use Smaller Language Models instead of the larger LLMs, moved to an opt-in user experience, and all the user feedback that shaped what the feature is today.Let's get into it! (00:00) Intro(01:14) Why we changed the UX from opt-out to opt-in(02:35) How early access helped us fine-tune AI (not everything people Jam is a bug!)(03:53) Setting our quality bar to ship AI & how to measure it(06:02) Our biggest early access breakthroughs: auto-generated repro steps & short titles(08:55) Decisions we made to prioritize AI speed & accuracy(12:15) The story of how Jam AI was engineered from a van, Greece & sunny beachesCheck out Jam AI at: https://jam.dev/aiSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts.New episodes drop every Friday at 10AM ET. See you there!

We just launched AI that writes bug reports for you! It’s our biggest launch yet, and we’re really excited to show you all behind the scenes of designing AI. We spent 4 months iterating, testing feedback mechanisms and how to deal with AI latency, while making it still feel like Jam. So today, we’re sharing all of the UX that didn’t make the cut.Ready to see our design graveyard? Let’s go!(0:00) Intro(1:07) Demoing Jam AI(2:58) Initial Concept Storyboards(8:44) AI-Generated Titles(11:04) Opt-in vs. Opt-out(12:09) Getting feedback(16:09) Summarizing States & Animation Concepts(21:29) The Final Animation(23:47) Reproduction stepsSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts. New episodes drop every other Friday at 10AM ET. See you there!

Today we’re showing you our new component library! Jam designer, Martin & developer Petar share how we implemented a design system w/ Radix UI. And walk through how it works from Figma to React by building a nav bar, live on the pod!Hope you enjoy (you can watch everything on YouTube!) 🍿(1:10) Why we decided to implement a new component library(11:18) Why we chose Radix UI + demo of how we use it in Figma(16:18) And a demo of implementing Radix components in React(25:36) Why this initiative was worth itRelated Links:Radix UI open source component library: https://www.radix-ui.com/How we built Jam’s new onboarding flow: https://youtu.be/ERfpt1HplOo?si=z9IS4yiLbc_i8YjGBehind the scenes: Jam’s new dashboard UX: https://youtu.be/dv95erC8mUs?si=49WTsa8Uhti_XitmSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts.New episodes drop every Friday at 10AM ET. See you there!

We built video annotations with tldraw! It’s a new feature we’re launching next week, and we’re really excited for all you Jamming to try it. So today, Jam engineers: Max, Aidan, and Rui get into the technical details of implementing the tldraw library - so you can draw stuff while recording your screen.Excited to show you what we built!(00:37) Why implementing annotations was so different than the blur tool(02:55) How Max discovered we already had a tldraw license(04:25) Why we love tldraw: React-SVG dual architecture & more details(08:55) Demo of video annotations & why it’s different than Jam’s screenshot feature(11:29) Why we ultimately decided to use tldraw for video too (it looks so nice!)(12:52) Our biggest takeaway for building w/ 3rd party librariesSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts. New episodes drop every Friday at 10AM ET. See you there!

We’re getting ready to release Jam’s newest feature, the blur tool! We can’t wait for you all to try it, so this week on Building Jam we’re showing you everything. Figma walkthrough, staging demo, and all the unexpected twists and turns of blurring what’s in your browser — as you’re recording!(1:08) A lil blur tool demo(2:26) Figuring out an extra setting w/o cluttering our extension(5:27) Selecting, clicking + more design details in Figma(6:35) Why not make the selector a strawberry?(8:30) Why we decided against per-team access (more free blur)(13:14) The biggest eng challenge? Everything but the core feature!Subscribe to Building Jam on YouTube, Spotify, and Apple Podcasts. New episodes drop every Friday at 10AM ET. See you there!

Our startup is changing! This year we went from 11 to 20 people, launched a new product (+30 features!), and learned a lot along the way. So for this episode, all of us recorded our biggest lessons of the year. We’re excited to share them with you all, hope you enjoy!What we learned:(00:21) Irtefa, co-founder(01:29) Chris, designer(04:50) Cyrus, engineer(06:54) Tomasz, engineer(07:48) Aidan, engineer(10:05) Ivanha, marketer(11:32) Ian, creator(13:20) Rui, engineer(15:10) Oskar, engineer(16:21) Dani, co-founderSubscribe to Building Jam on YouTube, Spotify, and Apple Podcasts.New episodes drop every Friday at 10AM ET. See you there!

We just had our first company hackathon! It was so much fun to get together & build stuff IRL! From AI agents to help you fix bugs & test fixes to silly buttons that break websites, we’re excited to show you what it was like. This episode is different than usual, tune in on YouTube to see it all. We hope you enjoy!Subscribe to Building Jam on YouTube, Spotify, and Apple Podcasts.New episodes drop every Friday at 10AM ET. See you there!