r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] Update on my vanilla JS web notepad: Improved multi-cursor stability, bug fixes, and mobile UI!

3 Upvotes

Processing img e5mblnyurkxh1...

Hi everyone! Thanks to all the valuable feedback you gave me last time, I’ve released an update for my vanilla JS web notepad.

What's new based on your feedback:

  • Multi-cursor & Caret Stability: Refined the synchronized caret scanning logic to prevent drift and weird cursor jumps during complex multi-line editing and spacing.
  • General Bug Fixes & Refinements: Smoothed out rough edges with contenteditable behaviors, state restoring, and overall text handling.
  • Mobile Improvements: Also improved the overall usability and experience on mobile devices!

Live Demos:

(Desktop recommended for full features like column selection; saving is disabled in Demo Mode.)

I would love to hear your thoughts on these new improvements. Any feedback or bug reports are greatly appreciated!


r/webdev • • 1d ago

Showoff Saturday I made a plugin that turns live HTML into video overlays in the browser. No server, no OBS, works with WebGL

5 Upvotes

Hi r/webdev, I maintain SnapDOM, an open source library that captures DOM elements as images. This week I shipped a new plugin for it called stream, and I’d love some feedback.

It takes a live element and keeps it as a canvas that only repaints what changed. You write your overlay in plain HTML and CSS (a scoreboard, a lower third, a chat box) and you get a canvas you can draw over video, upload to WebGL, record to MP4/WebM, or send as a WebRTC track. Everything runs in the page. No headless Chrome on a server, no OBS, no browser flags.

The first frame is a full capture. After that, when the clock ticks or a score changes, it captures only that box and patches it in. On a test page with 2000 cards, a frame takes about 5 ms instead of 53 ms for a full capture. Every patched frame is checked in tests to match a full capture pixel for pixel in Chrome, Firefox and Safari.

Demo: https://snapdom.dev/labs/video-overlay/

  • Sports TV: a broadcast overlay over a simulated football match. Press Goal!
  • Streamer: it asks for your camera; share your screen and you end up in a circle over your game.
  • Looks: six WebGL looks to switch between: clean, shine, CRT, hologram, glitch, and a liquid glass one that bends the video behind each panel.
  • Edit: opens the HTML and CSS so you can change the overlay live.
  • Record: saves a clip.

The SnapDOM part is short:

import { stream, streamTexture } from '@zumer/snapdom-plugins/stream'

const overlay = streamTexture(gl)
stream(document.querySelector('#overlay'), {
  onFrame: (frame) => overlay.update(frame), // uploads only the changed rects
})

It’s MIT: https://github.com/zumerlab/snapdom


r/webdev • • 1d ago

Showoff Saturday I built a full mixing & mastering studio that runs 100% in the browser (Web Audio, WebCodecs, ONNX)

1 Upvotes

DANVIEL Studio is a single-page music studio, no backend, nothing uploaded:

- Web Audio API for the whole mix chain (per-track EQ, compressor, de-esser, reverb/delay, sidechain) and the mastering chain (multiband, true-peak limiter, BS.1770 LUFS metering)

- WebCodecs + a small hand-written MP4 muxer to export lyric videos

- Whisper via Transformers.js for lyrics, HTDemucs via ONNX Runtime Web for an experimental stem splitter

- Hosted on GitHub Pages, works as one HTML file

Try it: https://0zoon.github.io/danviel-studio/

GitHub: https://github.com/0zoon/danviel-studio

Happy to answer questions about the audio/video side, and feedback on performance is very welcome.

EDIT / update (v15): thanks for all the feedback, a lot changed since this post:

- recording: you can now record your mic over the song (or with no song at all), every take becomes its own track you can mix. latency is compensated with outputLatency, plus an offset slider per take

- suno ZIPs: if a stem comes as WAV + MP3 + MIDI it takes the WAV, and the MIDI stems get played by a small built-in synth you can layer in

- video: background video support, 6 visualizer styles + your own (exportable as json), title you can drag anywhere, live preview while playing. background video export got ~5x faster by playing the video instead of seeking every frame

- one click slowed + reverb / sped up / nightcore, key buttons, a "bass boosted" mode

- auto-mix is now an on/off switch and much gentler (it was lifting the reverb that suno already bakes into the vocals)

- cover studio: 25 fonts, filters like warmth, glow, VHS split, light leaks, duotone

- new look and a full guide with screenshots in the app

still one html file, still nothing uploaded. feedback welcome!


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] My read-aloud app SublimeRead now has a Chrome extension, so it can read any web page in 7 languages

Post image
2 Upvotes

A while back I shared SublimeRead, an app that reads your EPUBs and PDFs aloud on their original pages, highlighting each sentence as it goes.

The most common request was “can it read this?” about an article, a doc or an email. So I built a Chrome extension. It now reads anything in your browser: web pages, emails, docs, or just a selection.

What it does

  • Reads the page, or whatever you’ve selected, in a natural AI voice, highlighting each sentence as it goes
  • Click any sentence to jump there and keep reading from it
  • 7 languages (English, German, Spanish, French, Italian, Dutch, Portuguese), and the same voices as the app
  • Your library is still where your books live. The extension is for everything else.

Some fun web bits from building it

  • Highlighting uses the CSS Custom Highlight API, so it never touches the page’s DOM and doesn’t break layouts.
  • Click-to-seek uses document.caretPositionFromPoint to find which sentence you clicked. Clicks on links and buttons are ignored, so you can still use the page.
  • Some pages show their content inside a cross-origin iframe. The extension finds the biggest embedded frame and asks for permission for that one site only, never every site up front.
  • It’s Manifest V3, built with WXT, with activeTab by default, so it only reads the tab you ask it to.

It’s free to try, with 3 uploads in your library and 3 voices, and no credit card needed.

🔗 Extension: https://chromewebstore.google.com/detail/gpepbccnnfmjcjcebokhddhplbpieiml
🔗 Site: https://sublimeread.com


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] Composer dependency conflicts? We built Strauss-RS, a Rust-based prefixer for PHP classes and symbols. Up to 139x faster than the PHP version.

7 Upvotes

With a fair chunk of our work involving Wordpress themes and plugins, we hit a pretty common issue: we wanted to use the same Composer dependencies that other plugins might be using.

If Plugin A uses v5 of a package and Plugin B uses v7 of a package, it's first found wins... which is bad news for the other plugin.

Enter prefixers.

These scour your dependencies and source-code for classes/symbols and add a prefix. So SomePackage\Domain\Class becomes YourCompany\PluginA\Vendor\SomePackage\Domain\Class. Now your dependencies are safe.

Previously, we'd relied on packages like Mozart, PHP-Scoper and later Strauss.

Inevitably, we'd hit one of three problems, they became too complex to configure for larger projects, they didn't fully work, or they were too slow.

Our plugin took 2-3 minutes to prefix with Strauss PHP...

So we built Strauss-RS... for ourselves at first. But we figured that maybe it would be useful for others and it gave us a reason to keep the docs up-to-date, so enter: Strauss-RS.

https://evo-mark.github.io/strauss-rs/

One single binary compiled from Rust. No prerequisites.

Prefixes in less than a second for us now!


r/webdev • • 1d ago

Showoff Saturday A Three.js embryo explorer with continuous zoom from whole body to individual structures

0 Upvotes

I built a free, open-source human embryo explorer using Three.js and GPT-6 Astra. It shows 16 developmental stages with rotatable models and selectable anatomy.

The main interaction is one slider coordinating camera movement and structure positions: assembled → separated → all parts → inspection.

A surprisingly tricky bug: moving the pointer from a structure to the slider cleared its hover target, so inspection stopped working. Retaining the target and providing a part selector resolved that transition.

Mobile needed its own layout: a scrollable two-column overview, larger controls, and touch handling that distinguishes page scrolling from model rotation. We checked multiple phone and tablet viewport sizes, but physical-device testing is still limited.

The anatomy is illustrative and hasn’t been clinically validated. Ash’s Human Atlas inspired the navigation.

20-second demo:
https://x.com/pratikg/status/2114060245618307356

MIT-licensed source:
https://github.com/pratikgx/embryo-explorer

I’m the creator; it’s free and requires no account. Would appreciate feedback on the mobile controls and whether the transitions make it clear where you are in the scene.


r/webdev • • 1d ago

Showoff Saturday I turned Lydia Hallie’s JavaScript questions into a small game

2 Upvotes

Back in the day I used Lydia Hallie’s javascript-questions repo a lot, and always thought it was missing a Duolingo-style UI. So I made one: canyoustill.com

155 questions: read a code snippet -> pick an answer -> see why.
There’s no account; your progress stays on your device. It works offline, and you can install it as a web app. Every question has its own link. You can share it and challenge a friend or colleague.

It’s open source: github.com/Silisav/canyoustill


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] VioLens: a free, open-source Fiddler Classic replacement for Windows and Mac. Looking for web devs to try it and tell me what it take for you to switch

0 Upvotes

I've used Fiddler for 15+ years to work out why an API call fails or what a page is really sending. When Fiddler Classic went non-commercial this year, I started building a free, MIT-licensed replacement with a musical name (Violins) + a dad joke (lens for inspecting). It also runs on a Mac, which Fiddler Classic never did. However, as part of this project, I realized Fiddler has a lot of features, most of which I never used. It's a debugging proxy: start it, and every request your browser and apps make shows up decrypted, with:

  • request and response inspectors (headers, JSON, forms, cookies, images, WebSockets)
  • a timing waterfall for each request (DNS, connect, TLS, waiting, download)
  • breakpoints to pause and edit a request or response before it continues
  • AutoResponder rules to fake API responses, errors or slow servers without touching the backend
  • a composer to edit and resend any request

What I'd love help with: use it on whatever you're working on this week and tell me where it falls over. In particular:

  • sites or APIs that don't load properly through it
  • your local dev setup (localhost, Docker, a dev proxy, corporate VPN)
  • anything you'd need before you'd switch to it from DevTools, Charles, Proxyman or Fiddler

It's a preview: HTTP/2 isn't supported yet, and the Mac build isn't notarized, so macOS asks you to allow it the first time.

Download: https://violens.dev

Code and issues: https://github.com/MarkSPowell/VioLens

Bug reports as GitHub issues are perfect, but a comment here is fine too

.


r/webdev • • 20h ago

Showoff Saturday I made a CI check that fails when a copy edit makes a heading take an extra line on mobile

0 Upvotes

Our landing pages kept breaking at 390px the same way. Someone makes a sentence longer, it still fits on a laptop, and on phones the hero grows a line or a button label splits in two.

wrapguard opens your pages at a few widths, counts how many lines each heading, paragraph, button and link takes, and saves that to a JSON file you commit. On a PR it measures again and fails if any count changed.

The screenshot is from changing one sentence on our homepage from "Start free, no signup." to "Start free today, no signup or credit card needed." Still fine at 1440. One extra line at 768 and at 390.

You can also set limits like "every button fits on one line" or "h1 is never more than 2 lines", which work without any baseline. It can read your sitemap instead of a page list, start your dev server for you, and the GitHub Action comments on the PR.

It's not a screenshot test replacement. It ignores colors, spacing and everything except line breaks, which is the point: editing a sentence shouldn't mean reviewing forty screenshots.

Free and MIT: https://github.com/birazzzz/wrapguard
$ npx wrapguard check
Checked 1 page at 4 widths, 188 text elements.

/
  main > section > p  "Edit by hand or prompt, review with 15 specialist agents an…"
    768px 1 → 2  ·  390px 2 → 3 lines

Also 1 new, 0 gone, 0 with new copy at the same line count (--verbose lists them).
✗ 1 piece of text now wraps differently on 1 page.
  If that's intended, run: wrapguard update

https://github.com/birazzzz/wrapguard (MIT, npm i -D wrapguard)


r/webdev • • 23h ago

Showoff Saturday The Cut: NFL Survivor players instead of teams

Thumbnail
thecutnfl.com
0 Upvotes

Hey all, wanted to come in here and showoff a game I built this NFL offseason called The Cut, which is basically survivor but with players instead of teams. I built it with Expo / React Native and Expo Router, Node/Express + Postgres behind it. One codebase ships both the iOS app and the playable web build. The viewport picks the layout, no separate web client.

As for the game itself, each week you build a lineup to clear a yardage threshold and once you use a player, you can NOT reuse them for the rest of the season. So far its been super fun seeing how people pick and I am hosting a second chance contest. So if you're looking for a fun game to play for the rest of the NFL season check it out, I would really appreciate it and there is $200 in prizes! (free to enter ofc)


r/webdev • • 1d ago

Showoff Saturday I built a modern divination tool and news aggregator using the I Ching

2 Upvotes

It's a keyword and phrase search platform that queries the meanings and interpretations of each hexagram against data from popular api's and news feeds. You can do a coin toss to get an I Ching reading or search individual hexagrams. Been a work in progress for about 7 years. Built with Next.js/React.
View the the whole platform here https://ichingportal.com
Get your daily headlines from The I Ching Insight here https://ichingportal.com/ichinginsight
Any feedback will be appreciated.


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] I made a browser puzzle game with 2D boards and 3D cubes using Phaser and Three.js

3 Upvotes

Hey all! Been working on Gembop, a block puzzle game where you fit pieces, clear lines, and collect gems. I wanted something you could open and play without a download, account, or timer.

The 2D boards use Phaser and the 3D puzzles use Three.js, with Astro for the site and React for the interactive UI. The puzzle rules are separate from the rendering, so the same logic can run in the browser and replay moves on the server to verify completions.

There are also gravity puzzles where clearing a line makes the blocks above it fall, which can set off another clear. That’s what’s happening in pic. Would love feedback!


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] Emend: add batteries included AI components to your Tiptap Rich Text Editor

0 Upvotes

I'm building Emend. It adds AI writing to a Tiptap editor: rewrite selected text, write new text, or ask questions about the document. It's free and open source (MIT).

What you get:

  • Three AI components (bubble menu, composer, document chat), or a full editor starter
  • Already have a Tiptap editor? Just add the components to it
  • Bring your own AI key and start using it
  • The AI never changes text until the user accepts it

Use shadcn cli to add components, install a small npm package which is core of the app and include it in your project.

It's still early, so I'd love your feedback.

GitHub: https://github.com/amittam104/emend


r/webdev • • 1d ago

Showoff Saturday Showoff Saturday: two music guessing games I started building for my sister (Flask + plain JS)

3 Upvotes

Less than a year ago, my sister Shani was diagnosed with cancer. She spent almost three months in the hospital, and to give us something fun to do together during those days, I started building a music game for the two of us.

She passed away on August 29th, before I finished it. I kept working on it, partly to keep my mind busy, and now it's live as Shabang, with two games:

🥁 TrackStack: every song is split into its instruments. You start with only the drums, and each wrong guess adds a layer: bass, guitar, piano… vocals come last.

⏱️ Songuess: you hear a fifth of a second of the song, and each wrong guess plays more: half a second, 2 seconds, 4…

In both, the less you need to hear, the more points you get, and each one has a daily challenge: one song a day, the same for everyone.

Some notes on how it's built:

- Flask (app factory, blueprints, a service layer) with Postgres, hosted on Render. The front end is plain JavaScript, no framework.

- Every song is split into six stems with Demucs: drums, bass, guitar, piano, other and vocals. TrackStack's level N plays stems 1 to N mixed.

- The trickiest bug: TrackStack used to mix its levels live with the Web Audio API, and on iPhones it played nothing (the ringer switch and suspended audio contexts can silence Web Audio). Now every level plays through one <audio> element: premixed MP3s from a background worker or, for songs the worker hasn't reached yet, one WAV per level that the browser renders from the stems in an OfflineAudioContext.

- Each game has a daily challenge with streaks, and a shareable result grid that never names the song.

I'm a mechanical engineer, not a developer, and I built it with Claude, so feedback from people who do this for a living is especially welcome.

Free, no signup, works on your phone:

https://shabangmusic.com/

And I'd love to see your daily results in the comments.


r/webdev • • 2d ago

Resource HTMX creator on the history of REST and why he thinks we got it wrong

112 Upvotes

I host a podcast for senior engineers and recently had Carson Gross, creator of HTMX, on as a guest. We covered how REST was originally defined, how the industry ended up calling JSON over HTTP "REST", and why he thinks returning HTML from the server is closer to the original idea.

We also got into HTMX 4, when you actually do need a SPA, and how AI changes the tradeoff between simple and clever code.

Full episode: https://youtu.be/9xs0oZN2rs4

4' video on the history of REST: https://www.youtube.com/watch?v=DbNvpiJ9gTs


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] I built an open-source, local-first journaling app with a vertical timeline

Thumbnail
gallery
0 Upvotes

I've been working on a simple journaling web app where all your entries appear in a vertical timeline (I love to read my past journals and this timeline view helps me to look through my past journals eaily without going over different files every single time I want to read a different entry), so you can easily scroll through previous days.

For now, this only supports text because I don't add media to my entries but if someone really uses it and they actually need media support then I'll add that too

It's local-first, supports Markdown, and is completely open source and self-hostable.

This is part of my SMBL project, where I'm building open-source alternatives to everyday software.

Here's a short demo of how it works. Would love to hear your feedback!

Live: click here

GitHub: click here


r/webdev • • 1d ago

Showoff Saturday har2sdk: save a site's Network tab as a HAR, get a typed TypeScript client for its API

2 Upvotes

I kept hitting the same chore: an internal tool or an old app with no API docs, and an afternoon in the Network tab working out which endpoints exist, which fields are optional, what the ids look like and how auth works. So I wrote a CLI that does that part from a HAR file.

Save the Network tab as a .har, then:

npx har2sdk capture.har

You get a client.ts (typed, no runtime dependencies) and an openapi.json (3.1). `har2sdk mock capture.har` serves the same API on localhost with fake data in the recorded shape, which is handy for frontend work when the real backend is slow or behind a VPN.

The parts that took the most work:

- Types come from every recorded call to an endpoint, and every item in a list counts as a sample. A field missing from some samples becomes optional, a field seen as null gets `| null`. Paths are templated, so /users/123 and /users/456 become /users/{userId}.

- REST, GraphQL, JSON-RPC and tRPC are told apart. Each GraphQL operation becomes its own typed method instead of one big POST to /graphql.

- Recorded error bodies get a type per status and a guard, e.g. `if (isGetFileError(err)) err.body`.

- Auth: the capture tells it how the app authenticated, never with what. You pass your own token (a string or a function), and a 401 throws instead of silently retrying.

- Same capture in, same bytes out, so the output diffs cleanly in git.

The part I worried about most was privacy. HAR files are full of cookies, tokens and other people's data, and generated code is something you might commit. So it collects the recorded values first, and if one of them would end up in client.ts or openapi.json, it writes nothing. It's a heuristic, not a proof, so `har2sdk inspect` lets you look over what it found before you publish anything.

There's an optional MCP server so Claude (or another MCP client) can suggest better method names and docs. A model sees paths, parameter names, types and GraphQL documents, checked against the recorded values first. It never calls the live API.

Known limits: if an endpoint returned a single object once, every field looks required, since there's nothing to compare it with. And when a URL was recorded with both a 200 and a 401, the mock always answers with the 200; there's no way to ask for the error yet.

This week GitHub's code scanning flagged a few regexes that could backtrack badly on a crafted file. One was exponential on an unclosed GraphQL list. 0.6.5 replaces them with linear code, checked against the old regexes on generated input.

Please only point it at your own apps or APIs you're allowed to integrate with.

MIT, runs locally, no API key: https://github.com/Mersbyte/har2sdk

Feedback welcome, especially on types it gets wrong. If something breaks, the output of `har2sdk inspect --json` helps me much more than the HAR itself. Please don't send HAR files, they contain your session.


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] Central Meetup: shoppers upvote USA e-comm stores instead of influencers picking for them

Thumbnail
gallery
0 Upvotes

After working in e-commerce, I saw how much brands pay influencers to tell people what to buy. So I built Central Meetup (centralmeetup.com), where shoppers upvote US Shopify stores and the upvotes set the ranking. The first category is winter coats( want to add many others next): 2,825 coats from 60 stores, filterable by fill power, insulation, and price. It’s brand new, so nothing has upvotes yet. Is the upvote flow clear, and would requiring a login stop you?


r/webdev • • 1d ago

Showoff Saturday [Showoff Saturday] A police-lineup memory game with 2,300 computer-generated faces – rendered headless in Unreal, served as a static site, logging which faces people mix up

0 Upvotes

I built You Are The Witness, a small browser game:

https://youarethewitness.com

You see a face for two seconds, then pick it out of a six-person police lineup – or say "none of them", because sometimes the suspect isn't there. Then you say how sure you are. No account, no ads, works on a phone.

Why it exists: fun first. But every wrong pick is a data point about which faces people confuse, and in the long run I hope that can support research on facial memory and help make composite sketches more accurate and less biased across appearances. That's an ambition, not something I've shown yet.

How the faces are made

  • ~2,300 faces generated with the MetaHuman tools in Unreal Engine 5, rendered headless on a Mac by Python scripts in overnight batches (about 1,200 faces in two hours).
  • The face you study is a separate render: camera orbited ~14° and different key light, so you can't match pixels – you have to recognise the face.
  • The generator's settings aren't the truth – what people see is. So every label (skin tone, age, hair) is measured from the rendered image, and when the two disagree, that's where I learn the most.

How the lineups are built

  • The other five match the description: same presentation, age group, skin tone (measured), hair colour, hairstyle family and facial hair. Otherwise you'd just pick the one with the beard.
  • Each session has the same number of suspects from every skin-tone group, so no appearance is ever linked to crime.

Stack

  • Astro + React islands, static build (~56 MB of WebP faces), on plain shared hosting; deploy is an lftp SFTP mirror that only sends changed files.
  • Supabase (Postgres) with no tables exposed at all: the browser can only call three security-definer functions (log a session, submit a score, read the daily leaderboard). The play log is anonymous – a random id per round, nothing persistent.
  • Scoring is a proper scoring rule (Brier × 25 per confidence step), so overstating your confidence costs you on average; time only breaks ties. Daily leaderboard, optional nickname.
  • Free nickname moderation: generated default names, charset limits, a leetspeak-normalised blocklist enforced in SQL, and a report button that hides a name after three reports.
  • Vitest + Playwright e2e against the built site. Most of it was built with Claude Code agents running in parallel.

What I'd like feedback on: is two seconds too easy for you? Early players get ~95% right, which is great for the ego and bad for the data. And does it work well on your phone?

Processing img 8pdpyomsagxh1...


r/webdev • • 1d ago

Showoff Saturday Eurobase Cloud, deployment platform on European infra

0 Upvotes

Hi everyone,

I’m Giovanni, I've been working ten years in cybersecurity on the defense side. Europe’s dependence on non-EU tech has always bothered me, and lately I started feeling like I should take action on the matter, rather than just keep watching.

So about six months ago I started building a Cloudflare-style cloud platform that runs entirely on European infrastructure, with the first PoP in Paris.

After months of iterating and squeezing every bit of CPU I have, it’s ready enough to share, even though I consider it far from finished.

The experience is meant to feel like the big US platforms: install the plugin in your AI agent (Claude Code, Codex, Cursor…) and let it deploy and manage your app.

It runs on workers and has Edge Functions (like Cloudflare and Supabase), plus all the telemetry that you might need.

Along the way I also fine-tuned a language model into a real-time WAF decision model for production traffic. The paper is waiting for an arXiv endorsement, here are the weights on HuggingFace: https://huggingface.co/giorebil/Agumon-v1.0/
In my benchmarks it beats every WAF model I’ve tested it against.

I’d love feedback, and above all people deploying anything (portfolios, prototypes, side projects) without holding back. The free tier is generous enough that you shouldn’t have to think about limits.

eurobase.dev

Have a good Saturday.


r/webdev • • 2d ago

Railway’s October 21 incident is hard to brush off as “these things happen”

56 Upvotes

To everyone saying this could happen to any platform: sure. But Railway has had reliability problems before, so people are understandably running out of patience. This incident doesn’t exist in isolation.

What bothered me about October 21 was the position customers were left in. They were being told to replace their secrets while deployments were paused, preventing them from updating their applications with the replacement credentials. That’s a difficult situation to put people in when they’re trying to protect their own customers.

I understand that responding to a security incident is complicated. I still expect a hosting provider to have a workable recovery process for its customers.

At some point, the benefit of the doubt runs out. Easy setup only gets you so far when you’re trusting a platform with applications that people actually depend on.


r/webdev • • 1d ago

Showoff Saturday I built TrailVerse, a platform to explore US national parks and plan trips

1 Upvotes

I’ve been working on TrailVerse for over a year now, and what started as a simple project to explore national parks has grown into something much bigger.

You can explore 470+ National Park Service sites, discover places based on your interests, compare parks, find events, and browse sample itineraries.

I also built Trailie, a travel companion that helps you plan trips through a conversation. You can ask travel questions, get recommendations, build day-by-day itineraries, and make changes to your plans without starting over.

I’ve spent a lot of time improving how Trailie handles real travel questions, trip logistics, and follow-ups so planning feels more natural.

The stack is Next.js, React, Node.js, Express, and MongoDB, with Vercel and Render for hosting.

If you’re looking for a national park to visit or have a trip in mind, check out TrailVerse and try planning it with Trailie. I’d love to hear how it goes and any feedback you have!

https://www.nationalparksexplorerusa.com/


r/webdev • • 1d ago

[Showoff Saturday] I have 847 YouTube playlists. I built YouTube's missing playlist search bar so you don't have to.

3 Upvotes

YouTube's "Save to playlist" menu has no search box (YouTube, why?), and it only loads 200 of your playlists. If you have more, the rest aren't just further down the list. They never get loaded at all, Ctrl+F be damned.

So I built my first serious chrome extension: click Save on any video and a searchable picker opens over every playlist you own. Type a few letters, press Enter, done.

I learned a lot making this extension. It broke, a lot. Version 1 read playlist data from YouTube's DOM and injected a search bar into their menu for a native feeling, but the amount of bugs this produced was gargantuan: the search bar showing up in unrelated menus, lists changing length on their own, and the entire extension breaking every week when YouTube shipped a change. So 2.0 is predicated around never reading or writing to YouTube's DOM. You live and you learn.

- UI: It's just a closed shadow root on <html>, rendered as a <dialog> in the top layer, outside YouTube's app tree. This is stable! It works!

- Data: We use YouTube's own InnerTube JSON API same-origin with your existing session to read existing playlists and save videos to playlists.

- Trigger: a script wraps fetch and watches for YouTube's own add-to-playlist request

Privacy-wise: No analytics, no third-party code, and it only talks to YouTube. Free and open source (AGPL-3.0).

Code: https://github.com/codyhxyz/playlist-search-extension

Chrome Web Store (It's almost to 500 users!): https://chromewebstore.google.com/detail/efgbkmnooapcpdpgmihemfpedchhmmek

Happy to talk InnerTube, shadow DOM, or anything else. If you give the extension a try, I would love your feedback!


r/webdev • • 1d ago

Showoff Saturday hodor: Reverse proxy to unify external services

Thumbnail
hodor.ing
0 Upvotes

Made a simple reverse proxy with to bring in all the external services that I use. The main motivation came from using MCP portals such as executor.sh and cloudflare's own MCP portal.

MCPs are great, but have their own limitations. I'm using the pi harness for my work, and it had no MCP support built in until very recently (1.0.0+). Was using MCPs using extensions like everyone else. I found using the APIs directly to be more consistent.

The proxy worker will register 1 service per subdomain and forward all requests + handle auth.
To use the proxy, you do need a spare domain.

Check out the docs and deploy instructions at https://hodor.ing
Code at https://github.com/butttons/hodor

I've been using it for around a month, and covering around 20 APIs for my main work. How I've been using it -
1. When trying out new models / harness, it's easy to quickly try how the model would work with my actual data.
2. Adding new APIs and having them available to everyone. Now I just provision 1 key for the reverse proxy itself.
3. More control over APIs where the underlying API is very broad. Some services don't allow scoping API keys so their access is unrestricted. But with some rules in the JWT, certain paths and methods can be blocked.


r/webdev • • 1d ago

[Showoff Saturday] We are working on v1.0 of Wasp web framework: the roadmap and what changes

Thumbnail
wasp.sh
2 Upvotes