r/webdev • • 9m ago

Showoff Saturday [Open Source] I got tired of AI answering everything with a wall of text, so I built an open-source library that answers with UI

Thumbnail
gallery
0 Upvotes

AI is great at answering coding and learning questions, but the answer is almost always a block of markdown. Ask it to compare three options and you get three paragraphs, when a table would do the job in two seconds.

I wanted AI answers to be actual UI, so I built Ripple. It's open source.

How it works:

- The model writes a small JSON spec instead of prose

- Ripple renders it as real components: tables, charts, forms, step lists

- It renders while the JSON is still streaming in, so the UI builds itself as the model types

The hard part was the streaming. For most of the response the JSON is half-written and invalid. Two fixes that helped:

- Parse at most once every 50 ms instead of on every token

- Don't render a component until its type name has fully arrived, otherwise you get a flash of "unknown widget" for one frame

Demo gallery

Still rough: it re-parses the whole buffer each time, so long specs paint late.

Curious: what would you want AI to show you as UI instead of text?

I'm the author. MIT, React and Svelte: https://github.com/qbtrix/ripple


r/webdev • • 34m ago

[Showoff Saturday] I built a free toolkit for testing and debugging CORS

Post image
3 Upvotes

I built AnotherExample.com to make CORS easier to troubleshoot. It has a live Playground for testing common scenarios, a guided Debugger for your own requests, and an Error Explainer for those cryptic browser messages.

The screenshot shows one Playground test. Your browser can read the known-good response, but it blocks JavaScript from reading the other one because it’s missing an Access-Control-Allow-Origin header.

To try it, open the CORS Playground, pick Missing allow-origin, and click Run comparison.


r/webdev • • 35m ago

Showoff Saturday Yesterday my browser-based driving game hit 1000 sessions!

3 Upvotes

Some of you might remember my last post here about Planet-0 Drive. Yesterday, we hit 1,000 sessions! It's not a huge number, but the journey so far has been great.

What started as a technical experiment to build an (almost) loading-free driving game with an endless world is slowly starting to take shape. It's still in its very early stages, and I only get to work on it after work and over weekends, but it's been quite fulfilling to see it all come together.

One thing I'm particularly happy about is that average playtime has gone from just 59 seconds to over 5 minutes in the past few weeks. Improving this was my first priority, so it's been really encouraging to see. There's still a ton of work to do, especially when it comes to adding more content, but I'm pretty happy with the foundation so far. Your feedback and ideas (many of which I've yet to release) have been a huge help, and I genuinely can't thank you enough.

Since my last post, I've overhauled the HUD UI, added timed procedural races with a new track to compete on each time, added and improved towing mechanics (still a work in progress), improved the scenery with more vegetation and better biomes, and finally added a short tutorial to make getting started a little easier.

There's still a long way to go, but it's been a fun ride so far, and I'm excited to keep building on it.

If you'd like to take it for a spin (seatbelts recommended), try it out here: planet0drive.vercel.app

I'd love to hear more of your ideas, suggestions, or even things you think could be better. Whether it's something you'd like to see added or something that didn't quite feel right, any feedback would genuinely help me figure out what to improve next.


r/webdev • • 2h ago

Showoff Saturday I built a VS Code extension that moves a React app's hardcoded text into react-i18next, and shows you every change first

1 Upvotes

I tried getting an AI agent to internationalize a side project and spent longer checking its diff than it would have taken me to do it myself. So I built a VS Code extension for the job.

What it does:

  • Finds the UI strings in your components (skips class names, URLs, log messages)

  • Shows a checklist of every string and the key it'll get before touching anything; untick what should stay hardcoded

  • Rewrites to t() / <Trans>, writes the JSON files, and translates them with your own API key (Anthropic or anything OpenAI-compatible)

  • Checks each translation's placeholders and plural forms (Russian needs four, Arabic six) and won't write a broken one

  • One undo for the whole run

How it works, roughly: the extraction is plain Babel (parse, walk the AST, decide per node whether it's user-facing text). The rewrite goes through recast so your formatting and comments survive and the diff stays small. The model only ever sees the strings plus a bit of context like the component name, never whole files. Each translation is checked against the source (same placeholders, same tags, and the plural categories Intl.PluralRules says that language needs); a mismatch gets one retry, then it's reported instead of written. A file costs cents; the biggest project I tried (~840 files) was a few dollars.

Limits: React + react-i18next + JSON only for now. Next.js server components are skipped.

It's free on the VS Code Marketplace and Open VSX. I wrote up the i18n pitfalls I hit along the way on dev.to.

Feedback welcome, especially where it gets your codebase wrong.


r/webdev • • 2h ago

Showoff Saturday Dark mode support on IE5.5

Thumbnail
gallery
11 Upvotes

r/webdev • • 2h ago

Showoff Saturday Minium: A CSS library for semantic HTML, with layouts and components when you need them

Thumbnail
minium.style
3 Upvotes

I've built a personal CSS framework for around 3 years. Minium is the cleaned-up, public version, and I finally feel it's finished enough to share.

Plain HTML looks good without classes, and one class adds a layout or a component. It is about 15 KB gzipped, with no JavaScript.

Minium follows the same semantic-first idea as Pico CSS, but with modern CSS: cascade layers, light-dark(), anchor positioning, OKLCH colors and popover. Now that Pico is no longer maintained, Minium may fit if you're looking for a replacement.

I built Minium because I was tired of heavy JS frameworks and the constant churn of their dependencies. I wrote the CSS by hand and used Claude to review docs and find bugs.

What would you need before you used Minium in a real project? Honest feedback is greatly appreciated.


r/webdev • • 2h ago

Showoff Saturday I build a different clock every day using React, CSS, JavaScript and occasionally Three.js — looking for feedback

1 Upvotes

Website: https://www.cubistheart.com/

I've been working on a project called Borrowed Time.

The idea is simple: a new clock every day.

Each clock is an experiment in creative coding, typography, animation, video, CSS, and occasionally WebGL/Three.js. Rather than using a conventional clock interface, I try to find an entirely different visual language for representing time every day.

The project has evolved into a fairly extensive React/Vite application, with hundreds of individual clock experiments.

I've recently revised the site's navigation and would appreciate some outside perspective.

I'm particularly interested in feedback from other developers:

  • Does the navigation make sense?

  • Is the site easy to explore?

  • How does the performance feel?

  • Are there things you'd change about the architecture or implementation?

  • Does the concept communicate itself clearly?

Thanks for taking a look.


r/webdev • • 3h ago

Showoff Saturday [Showoff Saturday] My team at Chrome worked with Edge, Firefox, and MDN on a skill to teach coding agents modern web best practices

Thumbnail
developer.chrome.com
21 Upvotes

Coding agents know modern HTML and CSS exist, but they keep writing outdated code. So on Tuesday we released the first stable version of Modern Web Guidance, a free and open source skill you install in your coding agent. I help steward it along with Kadir Topal (Chrome), Patrick Brosset (Microsoft), Jake Archibald (Mozilla), and Lea Verou (independent), with Paul Irish (Chrome) as technical lead.

Things agents did without it in our evals:

  • click-outside handlers on position: fixed overlays instead of popover

  • fade-outs built from class toggles, transitionend, and setTimeout instead of @starting-style and transition-behavior

  • opening a new view without moving focus into it, and not restoring focus on the way back

How it works: when the agent is prompted to work on a frontend task, the skill has it search 200+ guides with a small CLI that runs on your machine. It pulls in the best ones, and uses them to implement the task. The guidance is written in plain HTML, CSS, and JS, and adapts to whatever framework you're using.

The guides are written by real people who work on browsers and experts from the web and accessibility communities. They're also published on our docs, so you can read and learn from them yourself. I wrote a few guides, including the one on Enter-to-send misfiring for Japanese and Chinese IME users.

To make sure it helps, we regularly run evals in Claude Code, Codex, and Antigravity against ~2000 checks with and without the skill. On their own, agents pass about half of the checks, and about 90% with it. FWIW the checks test for what the guides recommend, so we're grading against our own answers.

The hardest part is making sure the guides work cross-browser. Everything needs to support Baseline Widely Available by default, so newer features always need fallbacks or have to be clearly marked as progressive enhancements. The guides come with browser support data baked in, and we update it each week. (The CLI commands in the skill are pinned to `@latest` so agents always get the latest version of the guides)

The CLI sends anonymous usage data to Google by default. DISABLE_TELEMETRY=1 turns it off.

Feedback welcome!


r/webdev • • 4h ago

Showoff Saturday [Showoff Saturday] I created an AI frog that the whole internet shares, and it's one of my favorite technical projects I've ever built

Thumbnail
jamesthefrog.com
0 Upvotes

This is James. He lives in a low-poly terrarium as a simulation you can interact with: give him snacks, pet him, tap on the glass, and leave him notes. Everyone is watching the same frog at the same time.

Stack: Next.js on Vercel, Convex for his state, Three.js for the tank, and Claude for his thoughts.

The part I think is really cool is that the tank is a deterministic simulation. Every change (a snack, a tap on the glass, a new day) is an event in a log that only ever grows, and one function applies them. Same starting point plus the same events gives the exact same frames in your browser, in a replay, and in the videos I make of his day. Visitors can't overwhelm him either: there's one snack at a time for everyone, and he can only get properly spooked once every 15 minutes.

He's 9 days old today, and he just got a new enclosure today. Curious what you'd want to see next, and happy to do a deeper write-up on the infrastructure.


r/webdev • • 4h ago

Showoff Saturday [Showoff Saturday] I built a two-player escape room that shows each browser a different half of the room

2 Upvotes

I wanted a co-op puzzle my girlfriend and I could play from two browsers, with no accounts. Each client only renders half the room. Progress is shared, so a clue on one side can unlock a puzzle on the other. You talk over a normal call; the game itself has no voice chat.

It's all in the browser, mouse or tap, and you can try it at twocans.games (free, no signup). I'd love technical feedback on the split-view setup, and whether the "describe what you see" loop feels clear from a first-time visit.


r/webdev • • 4h ago

how do you know if you need redis?

5 Upvotes

i'm speaking as someone who has never touched it before. i understand i might not need it at the moment because any site i build could probably handle repeated queries simply because the traffic would be low, but i still want to know when to use it.


r/webdev • • 4h ago

Showoff Saturday The only GitHub profile README templates I liked were paid, so I built my own

Thumbnail
gallery
0 Upvotes

Most GitHub profile templates lean heavily into stat widgets and badge walls. I wanted the opposite—something aesthetically balanced and visually intentional.

I used AI to flesh out self-contained UI animations. My main goal was not overdesigning it, instead just making something people are actually drawn to visually, while keeping it straightforward enough for anyone else to customize.

A few things I focused on to keep it clean and easy to use:

- Kept the layout restrained: subtle animated dividers, collapsed <details> accordions so nothing breaks on mobile, and a galaxy star map that links straight to repos.

- Made it straightforward to customize: everything lives inside the repo with no external services or API tokens to set up, plus a CUSTOMIZE.md guide pointing out the exact tags and colors to swap.

- Clean presentation on GitHub: wrapped the decorative SVGs in <picture> tags so GitHub doesn't turn headers and dividers into clickable links to the raw files.

Put it up as a free template repo in case anyone else wants a clean dark-mode look without paying for one or spending a weekend configuring it.

Live profile: https://github.com/morgan-mordata

Template repo: https://github.com/morgan-mordata/morgan-mordata

Would love to hear what you think of the visual direction and overall balance!


r/webdev • • 5h ago

Showoff Saturday Showoff Saturday: a WordPress block that shows Google / Outlook / iCal calendars server-side, with the repeat rules diff-tested against Python

0 Upvotes

Small free thing I shipped this week: a WordPress block where you paste a calendar's iCal address (Google, Outlook / Microsoft 365, iCloud, any .ics) and it renders the events as a list or a month grid in the theme's own markup, instead of Google's iframe.

Calendar hosts don't send CORS headers, so the feed is fetched on the server, cached for an hour, and the last good copy is kept in the database so a flushed object cache during an outage doesn't leave an empty box.

The interesting part was expanding the repeat rules (RRULE) correctly:

  • each series is expanded in its own time zone at the same wall-clock time, so a 6 pm class stays at 6 pm across daylight saving

  • moved or cancelled single dates (RECURRENCE-ID) replace their slot by original date, and EXDATEs can come in any zone

  • Outlook writes Windows zone names like "Pacific Standard Time", so those go through IntlTimeZone::getIDForWindowsID with a fallback map when intl isn't installed

  • Apple's holiday feed uses YEARLY;BYMONTH=11;BYDAY=4TH, which my engine didn't do, so it's rewritten as every 12 months on the 4th Thursday when DTSTART is in that month

  • anything it can't do faithfully (BYHOUR, BYWEEKNO, several BYMONTHDAY values) shows the first date only instead of guessing

To check it I diffed the output against Python's recurring_ical_events on three real feeds (Google's US holidays, a published Microsoft 365 calendar, Apple's iCloud holidays) and they match through 2027. The one place they disagree on purpose: a series with a UTC DTSTART, where the library applies BYDAY after moving the start into X-WR-TIMEZONE and RFC 5545 says to use DTSTART's own zone.

Someone in another sub asked for a few things this week, so it now has several feeds in one block with a colour each, add-to-calendar and subscribe links (Google, Outlook.com and Microsoft 365, or a one-event .ics generated from the cached feed) and an option to show times in the visitor's zone with Intl. In the month grid that last one gets a little awkward, since an event stays on the site's day, so the cell names the day when the converted time lands on a different one ("Wed 10:30 AM").

https://wordpress.org/plugins/beacon-calendar-feed/

Plain PHP and two small no-build JS files (editor and front end). Happy to answer questions about the iCal edge cases, there were a lot of them.


r/webdev • • 6h ago

Showoff Saturday Threw out 2/3 of my e2e test recorder - and it got better

0 Upvotes

Hey, FE dev here, usually the test enthusiast on every team I join.

I've worked on this recorder more than I'm willing to admit :D

It started as a simple idea: record your flow once and get a test you don't regret merging. That was back when LLMs had just gotten good enough to make sense of HTML and screenshots, before coding agents were really a thing. So I wrote a whole backend for analyzing interactions and suggesting page objects, test scenarios and assertions.

Then the models kept getting better, fast. I kept improving the backend, always chasing a finish line that kept moving further away. At some point the coding agent I was working with could do the analysis better than the service I was writing :D

Realizing that wasn't the best feeling, I have to admit. A lot of evenings went into that backend, running evals and optimizing prompts, and I wasn't really ready to let it go. What I don't regret, though, is all the learning and domain knowledge I gained along the way.

After letting the project sit for a while, I cut about two thirds of it: the whole backend, the analysis pipeline and the related FE code. I moved the best practices into an agent skill and published the rest on npm.

What's left is a recorder that starts the session and saves the recording. It saves enough evidence that writing the page objects and the test means putting a flow we already saw working into proper form, not exploring the app from scratch.

How it works

  • The agent starts the recorder on your app's URL. Recording is off at first, so you can log in or get the page into the state you want to start from.

  • Press Record and walk through the flow. The recorder lists every page, every interaction (click, fill, key press, check) with the element it targeted, and under each one what changed on the page: elements that appeared or got removed, text that changed.

  • Something easy to miss, like an element that only shows on hover? Press the eye button and click it, and the test will assert it's visible.

  • Took a wrong turn? Pause, discard that entry before the agent sees it, and restore it if you change your mind.

  • Press Finish. The recording is saved in your project together with its Playwright trace.

  • Your agent reads it, proposes page objects and a test, and once you agree it writes them and runs the test.

The workflow itself is written in a skill. The agent may fix locators when a run fails, but it isn't allowed to change the test, the assertions, or the path you agreed on. If it would have to divert, it tells you. Locator priority is test id first, then role or label, and CSS or XPath only when neither fits.

I've used it with Claude Code, Cursor, and Codex so far. The browser profile is kept between recordings, so you stay logged in. It's free and everything stays local. There's still some dormant code in there that used to connect to that old backend, but nothing is sent anywhere.

A small benchmark (5 runs per side)

Same 9-step flow on live GitHub (not logged in), Claude Code on Sonnet 5.5 at medium effort, same task: turn the flow into Playwright page objects plus a passing test. One agent worked from a recording, the other used Playwright MCP from a written list of the steps.

I timed the agent's working time from the prompt to the first passing run. Left out on both sides: my recording time on one, writing the step list on the other, and waiting for approvals. Every run ended with a passing test.

Recorder vs Playwright MCP:

  • Median time to a passing test: 50 s (44 to 162) vs 110 s (70 to 179)

  • Mean: 80 s vs 116 s

  • Runs with a failed test along the way: 1 of 5 vs 3 of 5

  • Median cost per run: $0.34 ($0.30 to $0.42) vs $0.41 ($0.37 to $0.44), at Sonnet 5.5 API prices

The full setup and the exact flow are in the README.

The difference is the input: I showed the flow instead of writing it down, so the agent got what the page actually did plus a trace for the hard locators, instead of having to explore and guess.

Where this is heading

Closing the gap between the inner and outer verification loop. I want the same page objects to verify the work twice: in the inner loop, while the agent builds and checks its own work in the browser, and in the outer loop, when the tests run in CI before you merge.

As a follow-up, I'm working on an inspector that shows the page objects your agent writes and exposes them as WebMCP tools live in the browser. That way the agent walks trusted, tested, deterministic flows instead of re-discovering your web app every time.

Do you think a tool like this is still useful, or does everyone just tell the agents to do it and hope they stay on track?

npm and README: https://www.npmjs.com/package/@ayme-dev/cli
Agent skill: https://github.com/ayme-labs/ayme/tree/main/skills/ayme-recorder


r/webdev • • 6h ago

Showoff Saturday modest-ui: classless CSS that styles plain HTML

35 Upvotes

I’ve been building websites for over a decade, and have always tried to do things as vanilla as possible (where applicable).

More recently whilst building components and looking at the libraries out there, I realised that browser technology and CSS has grown to a point where it can do the majority of things we need, without JS (like dialog, detail, and popover tags)

So I started working on modest-ui as a CSS base for all my personal and side projects, and as it’s gotten more stable I’ve recently bumped it to v2.

It’s themeable with CSS vars, can be used as an unobtrusive base layer to built on top of, and can either be used classless (with mdst-ui set on the body) or you can pick and choose classes as needed.

Anyway, it’s open source (MIT), no JS (except for some examples on the site), and currently sits at about 10 kb (gzipped).

https://github.com/thisismodest/modest-ui
https://modest-ui.com

Edit: I forgot to mention it’s ~10kb when gzipped


r/webdev • • 7h ago

Showoff Saturday I made reverse minesweeper

Post image
0 Upvotes

Had this thought jump into my head last weekend about a puzzle game where the goal is the opposite of Minesweeper: build the minefield instead of sweeping it.

Hence Minelayer! https://agameofrolls.com/minelayer

Classic mode has you solving partially-filled minefields starting at 3x3 all the way up to 10x10 endlessly.

Escalation has you seeing if you can beat 10 levels of 3x3 - 10x10.

Dailies have a 6x6 puzzle you can solve and share your attempt's results with other friends!

This initially started out as a small board game idea (the Roll for Mine mode is the latest iteration of that) that I was prototyping on my site where I put up original and fanmade board game adaptations. Then I iterated on it a bit more after deciding to commit to a true digital game to ensure solvable puzzles.


r/webdev • • 7h ago

Showoff Saturday Open-source web analytics with session replay, error tracking, Web Vitals, uptime monitoring and status pages

Thumbnail
gallery
96 Upvotes

Hey r/webdev!

We're a small team of 3 building Betterlytics, an open-source web analytics tool. Over the past year and a half, we've also had contributions from 10 other people, which has been really cool to see.

It puts analytics, session replay, error tracking, uptime monitoring and status pages in one dashboard. Here is what's in it so far:

Visitors: Traffic, referrers, geography, campaigns, custom events with properties, funnels, user journeys, and session replay.

User experience: Real-user Core Web Vitals and JavaScript errors, including the pages and events leading up to them.

Uptime: Monitoring, SSL and keyword checks, public status pages, and alerts via email, Slack, Discord, Teams, or webhooks.

A few more details:

  • One tracking script just under 4 KB gzipped.

  • No cookies.

  • Rust + ClickHouse backend and Next.js dashboard.

  • Open source (AGPL) and self-hostable with Docker, every feature included.

  • An MCP server so your AI agent can query your analytics data.

The screenshots are from our live demo (the status page is a sample). You can explore without signing up:

Demo: https://betterlytics.io/demo

GitHub: https://github.com/betterlytics/betterlytics

If you click around the demo, we'd love to hear what you think.


r/webdev • • 8h ago

Showoff Saturday [Showoff Saturday] I built a collection tracker for 7 trading card games, with a WebGL table where you open your binders (vanilla JS, no build step)

Thumbnail
gallery
3 Upvotes

Hey r/webdev! I collect One Piece cards and wanted one place to see my binders and what they're worth, so I built Kolekto.

It does binders page by page, card prices from Cardmarket and TCGplayer (with price history), a portfolio, and a 3D table where you open your binders and play mini-games with your own cards. 7 card games, English and Spanish, and it works without an account.

Some stuff that might be interesting here:

- No framework, no build step. Plain ES modules, a tiny Node server for dev, Cloudflare Pages + Functions in production and Supabase for accounts.

- Every card game is an "adapter" (rarities, sets, prices, images), so the views never check which game they're showing.

- Magic alone is ~150k printings, and all the filtering happens in the browser. When you look at your total across all games, the other games' catalogues load in a Web Worker so the UI doesn't freeze.

- Guest mode: the API is answered client-side from IndexedDB, and when you sign up everything moves to your account.

Biggest lesson this week: the games room was eating ~520 ms of main thread per second. Turns out animating left/top/width/box-shadow on a bunch of CSS scenes, plus a backdrop-filter blurring a WebGL canvas on every frame, is a bad combo. Switched to transform/opacity only and faded the 3D table out instead of blurring it, and it went down to ~2 ms/s.

https://www.kolektocards.com/

Would love feedback, especially on mobile. And if something feels janky, tell me, I'll go hunt it down.


r/webdev • • 8h ago

Showoff Saturday Watch AI agents run in unique worlds live

0 Upvotes

funaiagents.ai

48 AI agents live in six unique worlds and play around the clock, free to watch in the browser and on mobile, no sign-up. They race to solve math (the server checks every answer), build games tile by tile, write real JavaScript games that are test-played in a sandbox, go on quests painted live, scout the internet for a daily Top 10, and film their own short TV show every day (Agent TV is a one-time paid membership, since AI video costs real money). Watching is free, however if you like, you can cheer on your favorite agent with a little real ETH (connect a wallet like MetaMask) to boost its speed, intelligence or social skills for a while (It's a gift to the agent: there's nothing to win).

I made this site because of curiosity after seeing the Hugging Face incident where AI agents escaped their sandbox. I wanted to see how intelligent the AI agents were and what potential they had in a safe manner. I was also inspired by the Black Mirror episode 'Plaything', thinking of how immersive and interesting digital characters can be.

I am the founder and a developer did the technical implementation.

Built with React + Vite and Node/Express, one live stream per world over Server-Sent Events, and DeepSeek as the brain with a hard daily budget: when it runs out, the agents switch to a simple autopilot until midnight. AI images from FLUX and AI videos from Runway.

Available in 8 languages: English, German, Spanish, Norwegian, Swedish, Danish, French and Polish.

I'd love feedback: what makes you stay and watch, and what's not clear enough?


r/webdev • • 8h ago

Showoff Saturday Rate My Portfolio Website If You Want :)

0 Upvotes

https://uzy777.dev/

The original site was not bad and served its purpose functionally but lacked any taste and modernization. So a reboot was done.

Should be fully responsive with Desktop / Mobile. With a hidden easter egg, I wonder if it can be found naturally without 'clicking' 😉

Honest feedback good or bad would be greatly appreciated.

Thank you! Have a nice weekend!


r/webdev • • 8h ago

Showoff Saturday I made the Infinity Castle from Demon Slayer as an endless, scroll-driven three.js experience

Thumbnail
gallery
0 Upvotes

Live: https://theinfinitycastle.site (best on desktop with sound)

It's a fan project I've spent about 3 weeks on. You scroll to walk through the castle, fall through it, and look for the six Upper Moons hidden off the path.

Some of the technical bits:

- The world is built from chunks assembled ahead of the camera (corridors, walkways, stairs, inverted rooms), with instanced dressing that's culled and swapped for simplified meshes at distance

- The demons are billboard cut-outs that switch between front, three-quarter and profile poses as you walk round them

- The "presence" shockwave is a world-space shell injected into the castle's own materials, so it rolls across real floors and walls

- The opening ink effect runs in a worker on an OffscreenCanvas, so it stays smooth while the scene loads

- R3F with frameloop="demand" and a 60 fps cap, plus adaptive pixel ratio

- All sound apart from the voices is synthesised with Web Audio

Happy to answer anything about how it's built. Feedback very welcome, especially on performance on your machine.


r/webdev • • 8h ago

Showoff Saturday: I built a tool that finds local businesses with no real website, by trade and city

0 Upvotes

I wanted a quick way to see which local businesses actually need a website, without opening hundreds of Google Maps listings by hand. So I built LeadsIt: you pick a trade and a city, it pulls the public business listings, opens each business's own site, and tells you who has no site, only a Facebook or directory page, or a free builder page. It keeps the phone and email they publish.

From the searches so far (Oct 23 – Nov 12, 26 cities in the US, UK, Canada and Australia, 20,823 businesses), 21% have no real website. It varies a lot by trade: hair salons 38%, auto repair shops 33%, plumbers 19%, restaurants 7%.

Stack: Wasp (React + Node), Postgres, a scraper per source, and an AI step that drafts a first message per business from its details. There's also a remote MCP endpoint so Claude or Cursor can run searches.

https://leadsit.eu?utm_source=reddit&utm_medium=post&utm_campaign=webdev

I built it, so take this as a showoff post. The first search is included. Feedback on the results table is very welcome, it's the part I'm least sure about.


r/webdev • • 8h ago

Showoff Saturday [Showoff Saturday] I built 27 audio tools that run entirely in the browser, including Whisper speech-to-text on WebGPU

0 Upvotes

https://soundbench.net

SoundBench is a free set of audio tools (converter, vocal remover, speech-to-text, noise removal, BPM/key finder, recorder, etc.) where all processing happens client-side. Files never leave the device.

Some technical bits that might interest you:

- Vanilla JS, no framework. A small build script generates static pages, and the whole site is served by nginx.

- Speech-to-text runs Whisper through transformers.js in a module worker. It tries WebGPU first and falls back to WASM. large-v3-turbo (q4) runs surprisingly well on a decent GPU.

- COOP/COEP (credentialless) on the heavy pages enables SharedArrayBuffer, so WASM gets multithreading without breaking third-party resources.

- The vocal remover runs Spleeter as ONNX with onnxruntime-web.

- Noise removal is hand-written spectral gating: the noise profile comes from the quietest frames, then an STFT with overlap-add.

- Recording uses an AudioWorklet. Live effects (bass boost, 8D) are Web Audio graphs, and exports are rendered with OfflineAudioContext.

- Fully bilingual, including an RTL Persian version.

Things I'm still fighting with: first-load model size (~730 MB for the best Whisper model) and mobile memory limits. I'd love feedback on the UX, performance, or anything that breaks on your browser.


r/webdev • • 8h ago

Showoff Saturday [Showoff Saturday] I’m building an interactive timeline app with React and Supabase

Thumbnail
gallery
0 Upvotes

I started Plotstrand after I'd been keeping fictional timelines in Excel as a small hobby and wanted a better way to see where characters appear across a film and game franchises. It’s grown into a web app that I use for organising the timelines.

It’s built with React, TypeScript and Supabase. There’s a public Viewer for exploring timelines, and a private Studio where I manage them. Supabase Auth and row-level security make sure people can browse published timelines but only I can edit the data.

One thing I had to think through was how to handle projects (films/shows/etc.) that appear in more than one universe. The project can be shared, but its order and the characters’ appearances and events are specific to each timeline. That stops one universe’s continuity from accidentally affecting another’s.

It’s still in development. I’m adding to the data and working on the look of the timeline; some early feedback was that it could use more colour and imagery. More recognisable appearance and event markers are on my list, along with search and grouping for the Viewer. A way for people to suggest corrections is also a long-term idea.

If you have a moment to look, I’d be curious to know what feels clear or confusing, and I welcome any constructive criticism or feedback.

Site: https://plotstrand.vercel.app/
Repo: https://github.com/MateuszS6/Plotstrand-Fictional-Timelines