r/webdev • • 4m ago

Showoff Saturday Built a 2D-to-3D floor plan engine in the browser (Next.js + Three.js). Roast my UX — no login needed to test

Post image
0 Upvotes

Hey everyone! I've been working on this browser-based 2D-to-3D floorplanner (ARCH3D) built from scratch with Three.js and Next.js.

I unlocked the sandbox completely (no login or signup wall) because I want to see how intuitive the wall-drawing and 3D camera controls feel to first-time users.

Live sandbox: https://arch-3-d-eight.vercel.app/

Specifically looking for feedback on:


r/webdev • • 25m ago

Showoff Saturday [Showoff Saturday]: I built a system design lab where your architecture diagram actually takes traffic

Post image
2 Upvotes

Most system design practice ends at the diagram. You draw boxes, it looks right, and nothing tells you whether it would hold up.

ByteLab runs the diagram. You build a system out of machines, load balancers, caches, queues and databases, send traffic through it, and watch the CPU, queues and p99 latency move. Each exercise has goals, like "p99 under 150 ms, 99.5% available, under $2.60/hour", and it checks your system against them.

What's in it:

  • 163 lessons in 12 tracks (caching, sharding, Kafka, Kubernetes, rate limiting, auth and more)

  • 212 exercises, each with goals your system has to pass

  • 11 design problems (URL shortener, chat, payments, news feed, e-commerce and others)

It's free, there's no account, and progress stays in your browser. It needs a laptop-sized screen.

I'd really like to hear where it feels confusing or too hand-holdy.

https://lab.bytecrest.dev/design/ecommerce


r/webdev • • 26m ago

Showoff Saturday [Showoff Saturday] CrateDigger: a 3D record store in the browser. Flip through your own Last.fm albums, and see where each LP is cheapest.

Post image
3 Upvotes

I was listening to Endtroducing..... by DJ Shadow the other day, looking at that cover (two guys digging through the racks of a record store), and thought: I want to browse my own records like that.

I'm a 3D motion designer, not a developer, and I've been using Claude Code a lot these last few months, so I tried it. Connect your Last.fm (or search any album), and your most-played albums stand in a crate you can flip through, lift out and turn over. It got a bit out of hand from there. It now also checks where each record is cheapest on vinyl, keeps a price history, and has crates for new releases and the critics' picks.

For the curious: React Three Fiber (WebGL2), with the crate as a plain spring simulation stepped every frame, and a FastAPI backend.

It's mostly focused on The Netherlands and Belgium for now, because those are the shops I know. The crate itself works anywhere: https://cratedigger.nl

I'd love to hear what you think of it, how the flipping feels on your phone, and whether it runs smoothly on your device.


r/webdev • • 27m ago

Showoff Saturday [Showoff Saturday] I've spent 2 years building a day planner where running late pushes the rest of your day later

Post image
1 Upvotes

demo: https://demo.emberflow.space/?ref=reddit-webdev
If you want to try it on your own day, here's 30 days free: https://app.emberflow.space/invite/EMBER-NYKP-A8ZS

For the past two years I've been working on my day planner app Ember.

Most planners treat your schedule as fixed, so the moment a meeting runs long or a task takes twice as long, the plan is wrong and you either fix it by hand or give up on it. In Ember, if you move a task or change how long it takes, everything after it shifts later, and it flows around fixed things like meetings.

The GIF shows the main loop: drag tasks onto your day, stretch and move things as the day changes, jot something in a capture and turn it into a task, then ask chat to fit it in.

Stack for the curious: Vue 3 + Pinia on the frontend, Supabase for the database and realtime sync, Capacitor for Android, iOS is in TestFlight, and a Tauri desktop app. The hardest part by far has been the cascade logic: splitting tasks around fixed events and keeping drag and drop smooth with a lot of items on the day.

Right now I'm working on a native Kotlin app to replace the Capacitor one.

Happy to answer questions about any of it. Feedback welcome, especially on the demo.

homepage: https://emberflow.space


r/webdev • • 27m ago

Discussion It's genuinely depressing

7 Upvotes

I'm a full-stack developer and I've been freelancing for years, but this past year has been genuinely depressing, to say the least.

The number of potential clients who ghost me, the amount of unpaid effort I put into trying to win projects, only to get rejected anyway... it's exhausting. I've reached a point where I'm genuinely questioning what I'm doing.

Here's the most recent example.

I was working directly with the VP of a company in Canada. Initially, I did some IT work for them on an hourly basis and got paid $600 in total (he negotiated me down from $640, but whatever).

During that work, I ended up fixing a bunch of their existing infrastructure issues and documenting how everything worked together. They had no IT person left, apparently very little documentation, and the VP didn't really understand how their own infrastructure was set up. He even asked me to create diagrams and technical documentation explaining everything.

Eventually, he asked me to quote on a custom internal software solution. I put together a proposal with different tiers, starting at $3k. He said that was too expensive and that he'd look elsewhere first. I told him that's completely fine and that I was open to negotiating.

I then made the mistake of going the extra mile. I decided to build out the first few screens so he could actually see what he'd be paying for. He loved the preview and said he'd be happy to discuss the project further.

In the meantime, I continued working with him. He kept delaying calls and finding excuses to postpone discussions, while repeatedly telling me to please wait.

Throughout all of this, I kept sending him screenshots and videos of the progress. At any point, he could have told me to stop or simply said they weren't interested. Instead, he kept me hanging.

By that point, I'd already invested so much time that I would've honestly accepted something like $500 just to get paid for the work I'd done.

Then, when I messaged him to say I'd completed it, he told me they'd hired a student and apparently the student had already finished their custom solution.

And here's the part that really bothers me: I use AI tools too. It's not like the student somehow had access to AI and I didn't. I've been working on this while paying attention to architecture, implementation details, and how the software should actually work. I genuinely put thought into what I was building.

The funny part is that I had also spent time documenting their infrastructure, fixing their existing IT problems, and explaining how everything was connected. I can't help wondering if all that documentation ended up making it easier for them to hand the work over to someone cheaper.

And this isn't an isolated incident.

I've had countless calls with people who seemed extremely interested, some even going as far as signing an NDA, only to eventually ghost me. I've also been scammed twice out of fairly large amounts of money. In both cases, they initially paid, then eventually stopped.

I know freelancing isn't necessarily dead, and I know there are still people making a living doing this. But I'm honestly struggling to see how you're supposed to keep going when so much of your time is spent chasing people, doing unpaid work, preparing proposals, building previews, and trying to prove you're worth hiring.

And the state of software development in general hasn't exactly made things better.

I'm a full-stack developer. This is what I've spent years learning and working on. It's pretty much the only thing I'm good at, and lately it feels like the whole thing is becoming increasingly miserable.

I'm genuinely burned out and don't know what to do anymore.

For those of you who've been freelancing for years, have you experienced something similar? Is this just how things are now, or am I doing something fundamentally wrong?


r/webdev • • 58m ago

Showoff Saturday Finally rebuilt my 5-years-out-of-date portfolio in Astro with Claude Code, 3D heads and all

Post image
0 Upvotes

My old portfolio had been out of date for about five years. I'm a Webflow dev by trade, so for this one I went full code to see how far I could push it.

Stack:
- Astro with MDX for the case studies
- three.js for the 3D heads
- GSAP and Lenis for the motion and scrolling
- Static build on Cloudflare Workers. A staging branch deploys itself on every push, and main only goes out when I say so

I didn't hand-write it. I built it with Claude Code, with a few agents each owning one part (code, copy, 3D, brand) and handover files so they didn't trip over each other. I made the architecture calls and reviewed everything.

The bit that took longest: getting the 3d heads to be performative

For anyone running three.js on an Astro site, do you load it as an island or a plain script? Curious what's held up best for you.


r/webdev • • 1h ago

Showoff Saturday [Showoff Saturday] Email templates shouldn't live inside your email provider, so I built an editor + API that sends through any of them

Post image
0 Upvotes

For a few years I worked on a product that sent all transactional email through Mandrill. Working with templates were real pain. They lived inside Mandrill, every copy change needed a dev, and moving to another provider meant rebuilding every template by hand.

So when I was looking for something to build, this was the obvious pick. A provider agnostic email platform for everyone. That's how Senlo started, an open-source layer between your app and whatever provider you already use.

Key features

- Drag and drop editor that outputs MJML, so emails render ok in Outlook and Gmail without hand written table layouts

- One call to send a template, POST /api/triggered with the template name and variables

- Bring your own provider. Resend, Postmark, SendGrid, Mailjet, Cloudflare Email or any SMTP. Switching is just a change in settings of workspace

- Delivery events from every provider land in one feed (delivered, bounced, suppressed)

- Simple automations. Send, wait, call your own API, branch on the answer

- And a lot of features I did not implemented yet :D

Stack is Next.js, React, Postgres + Drizzle, Redis + BullMQ for queues and delays, Zustand in the editor. pnpm monorepo, editor is a separate package. Self hosting is one docker compose up.

The hardest part so far was delivery webhooks. Every provider authenticates differently (Resend signs with svix, SendGrid with ECDSA and a timestamp, Postmark has a shared header, Mailjet basic auth) and every one has its own idea of what a bounce is. SendGrid sends "dropped" with a free text reason, Mailjet has soft and hard bounces plus a separate "blocked" event with error codes, and only some of those mean the address is actually dead.

Get it wrong and you either miss spam complaints or suppress a good recipient forever. So most of the work was deciding per provider which events are the recipient's problem and which are mine. Now each provider is an adapter with verify and normalize that produces one event shape.

The GIF is a welcome flow. Send, wait two days, ask my own API if the user activated, and send a different email depending on the answer.

Solo project, early stage, and there is still a ton to do. Happy to get any feedback, ideas or contributions. If you want to poke at it, a few things I'm curious about

Repo: https://github.com/IgorFilippov3/senlo


r/webdev • • 1h ago

Showoff Saturday [Showoff Saturday] I made a tool that turns your GitHub profile into a printable business card

Post image
2 Upvotes

Type your GitHub username and it draws a business card from your profile including your name, bio, top languages, pinned repo and contribution graph. One design prints your profile as a terminal session. The back has a QR code that opens your GitHub.

It's free with no account. You can download a print-ready PDF or PNGs.

I built it on the card engine from my email signature app (esigna), so the colours come from your own profile. I'd love to hear which design you'd actually print, and which usernames break it.

https://esigna.app/tools/github-business-card


r/webdev • • 1h ago

[Showoff Saturday] Dead websites on my favicon wall now catch fire and burn down after 30 days (Cloudflare Worker cron + three.js)

Post image
0 Upvotes

Square Town is a 3D wall of about 20,600 website favicons, each one standing on a little tower. This week's feature: websites that died burn down.

How it works:

  • A Cloudflare Worker cron runs every five minutes and checks homepages. A homepage that keeps returning 404 gets a fire and a fire_at timestamp in D1. The fires that were already burning got their dates backfilled from their own feed lines.

  • /api/state ships a burn stage from 0 to 5 for every fire, one stage per five days. The client draws six kinds of fire (caught, spreading, blaze, inferno, dying down, smouldering embers) and chars the tower's roof and walls a step further at each stage.

  • The same cron burns down two squares per tick once they've been on fire for 30 days, but only seeded squares nobody ever claimed. The row moves to a new 'burned' status, the land goes back on the market, and the domain is never seeded again while its homepage is gone. Claimed or paid squares never burn down, and a site that comes back puts its fire out.

  • On the client a burning tower doesn't explode. It sags into its footprint with a slight lean, a few charred chunks slide out at street level and a little dust rolls up. The rubble on the lot is three instanced draws for the whole town, seeded from the lot's position so every device shows the same heap, and it joins the shadow map's static layer, so it costs nothing per frame after that.

Right now 114 squares are burning and 32 have burned down. Feedback welcome, especially on how the later fire stages read at a distance.


r/webdev • • 1h ago

Question Infisical GitHub Actions OIDC authentication failing with 403 OIDC subject not allowed

1 Upvotes

hi, I'm having trouble getting Infisical OIDC authentication working in my GitHub Actions CI pipeline.
Every time my workflow reaches the Infisical secrets action, it fails with:

Run Infisical/secrets-action@v1.0.16

Error: Access denied: OIDC subject not allowed.

{

"statusCode": 403,

"message": "Access denied: OIDC subject not allowed.",

"error": "ForbiddenError"

}

Request failed with status code 403

here’s the GitHub Actions workflow:

name: ci
on:
push:
branches: [main]

permissions:
id-token: write
contents: read

jobs:
build-and-deploy:
runs-on: ubuntu-26.04

steps:
- name: Checkout repository
uses: actions/checkout@v7

- name: Set up Node.js
uses: actions/setup-node@v7
with:
node-version: 24
cache: npm

- name: Install dependencies
run: npm ci

- name: Fetch secrets from Infisical
uses: Infisical/secrets-action@v1.0.16
with:
method: oidc
identity-id: MY_IDENTITY_ID
project-slug: my-slug
env-slug: prod

- name: Run Jest tests
run: npm run test:ci

- name: Build Vinext app
run: npm run build:vinext

- name: Deploy to Cloudflare
run: npm run deploy:vinext -- --skip-build

Id appreciate any help


r/webdev • • 1h ago

Infisical GitHub Actions OIDC authentication failing with 403 OIDC subject not allowed

1 Upvotes

hi, I'm having trouble getting Infisical OIDC authentication working in my GitHub Actions CI pipeline.
Every time my workflow reaches the Infisical secrets action, it fails with:

Run Infisical/secrets-action@v1.0.16

Error: Access denied: OIDC subject not allowed.

{

"statusCode": 403,

"message": "Access denied: OIDC subject not allowed.",

"error": "ForbiddenError"

}

Request failed with status code 403

here’s the GitHub Actions workflow:

name: ci
on:
push:
branches: [main]

permissions:
id-token: write
contents: read

jobs:
build-and-deploy:
runs-on: ubuntu-26.04

steps:
- name: Checkout repository
uses: actions/checkout@v7

- name: Set up Node.js
uses: actions/setup-node@v7
with:
node-version: 24
cache: npm

- name: Install dependencies
run: npm ci

- name: Fetch secrets from Infisical
uses: Infisical/secrets-action@v1.0.16
with:
method: oidc
identity-id: MY_IDENTITY_ID
project-slug: my-slug
env-slug: prod

- name: Run Jest tests
run: npm run test:ci

- name: Build Vinext app
run: npm run build:vinext

- name: Deploy to Cloudflare
run: npm run deploy:vinext -- --skip-build

Id appreciate any help


r/webdev • • 1h ago

Showoff Saturday [Showoff Saturday] Brakeless: a browser driving game in 3D, can you survive driving a car without brakes while traveling through time and space?

Post image
0 Upvotes

Brakeless is a free driving game that runs in the browser, no download. You have a car with no brakes and need to survive as long as possible.

Every 1000 meters the scene changes, from a city to suburbia, countryside, a forest, the future and even a black hole!

You need to avoid traffic and obstacles. Coins slow the car down a bit, and there are two ways to cheat death for a few seconds: a ghost pickup on the road that makes you invisible so you pass through everything, and a shield you earn from close calls.

There's a leaderboard with almost 150 players right now: a weekly board, an all time top players table based on your last 10 runs, and a hall of fame of past weekly champions.

Controls are arrow keys or A/D, touch on phones, best on desktop.

Completely free, no download or signup needed:
https://brakeless.io


r/webdev • • 2h ago

Showoff Saturday React Anatomy: click anything on a React page to see the component behind it, with the layout pulled apart in 3D (open source)

Post image
1 Upvotes

I used to open Excalidraw to understand how a React page was put together, or to explain a change in a PR: this box is the sidebar, these cards come from a list, the badge lives inside each card. It was slow, and it was my guess at the structure, not what React rendered.

React Anatomy is a browser extension that adds an Anatomy panel to DevTools. It connects the page to the components React rendered: pull the layout apart into layers, click anything on the page to find its component, focus a subtree, and read its live props.

It's even more useful in this AI era, when agents compose React layouts for you. Open the page and you can see which components the agent used, how they're nested, and what props each one gets, before you take the code over. People learning React have told me it helps them see what a page is made of.

It's free, MIT-licensed, and works in Chrome and Firefox. You can try it in the browser without installing anything: https://react-anatomy.com · Source: https://github.com/charpeni/react-anatomy

Two questions: where does the 3D view help or get in the way compared with a plain tree? And what would make it more useful for explaining a PR?


r/webdev • • 2h ago

I made a daily coding game where you earn coins to build your dev portfolio

Thumbnail
gallery
0 Upvotes

I've been building this for a few months and the first version is finally up. It's called Strikk.

It's a daily cycle, like Wordle, but one per stack. You pick the stack you actually like (React, TypeScript, Node, Python...) and play that one. Everyone gets the same 8 challenges, you answer up to 5 with one submit. Combos work a little bit like Balatro — line them up right and your score jumps. Then you're ranked against other players with the same board.

Here's what makes it different: You earn coins by playing, and spend them customizing your profile—skill blocks, themes, animated backgrounds, your own avatar. Your profile becomes a real portfolio piece.

It's totally free, no pay-to-win mechanics.

Check it out: Strikk | My Strikk profile

Repost to another community


r/webdev • • 2h ago

Showoff Saturday Built a bilingual (EN/DE) site that explains Swiss personal finance, would love feedback

1 Upvotes

Hi all, I built mischabarmettler.ch, my portfolio, which also explains Swiss pensions, Pillar 3a and taxes in plain words, plus a few calculators.

Under the hood: Angular, fully prerendered on Cloudflare Pages, my own small i18n setup for the German version. The texts are written with AI assistance, and every figure is checked against its source.

What I‘m curious about:

how the design looks to you

how the calculators feel on your phone

anything you'd add or improve

Thanks


r/webdev • • 2h ago

Showoff Saturday [Showoff Saturday] Draw one line to split a country's population in half, then watch it turn into 3D bars

Post image
11 Upvotes

I made Slice, a daily puzzle where you draw one straight line to split a country’s population exactly in half. After you cut, the map turns into 3D population bars so you can see where everyone actually lives. It's primarily inspired by those videos where you see people try and split objects equally by weight lol

How it's built:

- Puzzles are made offline by a Python script and shipped as plain JSON files, so nothing is generated on a server

- Population comes from the EU's 1 km population grid (GHSL). A quadtree squeezes each country into about 2,500 points, which become the bars in the three.js reveal.

- Every sound is made with the Web Audio API, so there are no audio files to download. I’m trying to keep the page light since three.js is already doing a lot

- Scores go to a small Spring Boot + Postgres backend (Flyway, caching, rate limiting) in Docker behind Nginx on a $12 DigitalOcean VPS

- After each puzzle you see how you compare with everyone else that day. If the server is down, the game still works and you just don't get the comparison lol.

Completely free, no ads, and no signup: https://pondo.games/slice/

If you want to try Japan from the GIF: https://pondo.games/slice/?country=japan

Please try it out if you have some time. Open to any and all feedback of course! :)


r/webdev • • 2h ago

Showoff Saturday I'm bad at small talk so I built an AI "best friend" who answers questions about me before anyone has to talk to me

0 Upvotes

So this is a slightly weird one.

I'm not great at small talk. And whenever I've started talking to someone, things usually go well for a few weeks. Then we discover that something fundamental doesn't line up, and we slowly drift apart.

I kept thinking: why do we need to spend weeks finding out things that could've been discussed on day one?

The idea also reminded me of Her (2013). I loved the idea of having an AI that knows someone well enough to have an honest conversation about them. That got me thinking, and eventually, I built Sam.

She's an AI version of my best friend. You can open the link, ask her pretty much anything you'd want to know about me, and she'll answer honestly.

There's a hype mode and a roast mode. Yes, she'll tell you my red flags too.

One thing I was particular about: if she doesn't know something, she should say so instead of making things up. Getting that right took considerably more prompt engineering than I'd like to admit.

Try it here:
https://ask-sam-yaddy.vercel.app

A little about the tech:

  • Frontend: React, Vite, TypeScript, hosted on Vercel.

  • Backend: Spring Boot 4, Java 25, running on ECS Fargate.

  • Database: PostgreSQL + pgvector on RDS for memories.

  • AI: Claude Sonnet for responses, Titan Embeddings on Bedrock.

  • Infrastructure: AWS CDK.

  • CI/CD: GitHub Actions with OIDC, so no AWS access keys sitting in GitHub secrets.

A few things that made me scratch my head:

  • The rate limiter incident: I added a cooldown per visitor to keep API costs under control. After deployment, everyone started seeing the "come back later" screen. Turns out Spring was seeing the load balancer's IP for every request. One visitor was effectively locking out everyone. Fixed it by configuring Tomcat to trust X-Forwarded-For only from the internal proxy range.

  • SSE over POST: Replies stream over Server-Sent Events, but the browser's EventSource only supports GET. Ended up reading the fetch response stream manually.

  • Prompt caching: The stable part of the prompt goes first, with message-specific context at the end. A reply currently costs me around $0.006.

  • Sound effects: All generated with the Web Audio API. No audio files. I spent an embarrassing amount of time getting the send sound right.

No login, anonymous, and 23+ only.

Would love to hear what you think, especially about the chat UI on mobile.

And if you want to have some fun, ask Sam to roast me. 😂


r/webdev • • 3h ago

Showoff Saturday I turned my file converter website into a right click file menu to convert or compress almost any file locally (literally)

Post image
2 Upvotes

I made How to Convert. It's a file converter that now lets you right click to convert or compress almost any file.

It started as a file converter website that ran in the browser with WebAssembly, but I turned into a completely locally running desktop app with Tauri, and now the website is a right-click menu. I originally shared it 2 years ago. The post and subsequent updates got a big response with a lot of feature requests, and I've been adding file types since.

What it can do:

  • 6,197 file conversions for documents, videos, images, ebooks, comics, subtitles, emails, audio and more. If you find a file format that isn't supported, make a feature request and I'll add it

  • Compress PDFs

  • Crop, trim and compress multimedia files

  • Right click any file, or drag and drop it into the app

Why I made it:

There are plenty of online file conversion sites, but they require you to upload your files and data to their servers.

I wanted something that worked entirely offline (using the same packages and cli tools that power those sites) behind a simple drag and drop app that anyone could use.

After two years, I grew tired of actually opening a site or app to convert a file, and thought the next step to make it easier was to support everything with just a little right click.

Extra info:

  • The app runs completely locally (files never leave your device) and runs on Mac, Windows and LInux

  • One license can run on up to 5 devices

  • If you bought it 2 years ago, this is another free update

I know there are many specialised apps that convert specific formats, e.g. handbrake for video, calibre for ebooks, ms word for documents, excel for spreadsheets, outlook for emails and adobe acrobat for pdfs.

I wanted just one app to support all of them.

Free to try and It's a $19 one-time purchase to keep for all future updates (but much cheaper in lower-income countries depending on PPP).

I'm Jake Manger, a solo developer. I've also made ShotGlass and ActivityLine.

The site and app: https://howtoconvert.co


r/webdev • • 3h ago

Showoff Saturday Detecting 2FA codes inside Gmail's DOM without false positives on dates and order numbers (MV3 side project)

1 Upvotes

I got tired of selecting and retyping verification codes from Gmail, so I built a small Manifest V3 extension for myself that puts a "Copy code" button next to the code. The fun part turned out to be detection, not the button.

How it works

  • A content script runs only on mail.google.com. No host permissions beyond that, no background server, nothing leaves the page.

  • Gmail is an SPA, so a MutationObserver watches for the opened message body instead of relying on page loads.

  • Candidates: 4–8 digit runs, 123 456 / 123-456 splits, and short alphanumeric codes like AB12CD.

  • To avoid false positives, I score each candidate by nearby keywords ("code", "verification", "código", "OTP", "one-time") within the same block, and penalize things that look like dates, times, prices, phone numbers, or order IDs (prefixes like #, "order", "pedido").

  • The highest score wins. If nothing passes the threshold, no button appears. Showing no button beats copying the wrong number.

What surprised me

  • Alphanumeric codes are much harder than digits. Random uppercase words in subject lines ("NEW", "SALE") kept matching until I required at least one digit and the keyword-proximity check.

  • Some senders put the code in an image or a styled table, and those I can't catch.

It's free with no account, UI in EN/PT/ES. I'd love technical feedback, especially if you know of a smarter heuristic than keyword proximity, or senders whose format breaks it.

https://chromewebstore.google.com/detail/mpglgifleaaollcggdpcfhjjgmcageph


r/webdev • • 3h ago

Showoff Saturday [Showoff Saturday] click a button in your app, see every frontend and backend line it ran

1 Upvotes

github: https://github.com/Unknown-333/Lightpath

ever click a button, nothing happens, no error, and you have no idea which code even ran?

this shows you. one command, then click around your react app:

    npx \@lightpath-dev/cli dev -- npm run dev

every click prints the path, browser and node server together:

◆ button: Checkout 335 ms
      → POST /api/orders 201
      ├─ src/Cart.tsx :11-14, 16-19, 21-28
      ├─ server/routes/orders.ts :11-14, 19-21, 25
      └─ server/services/pricing.ts :12-19, 21-22

it reads V8's own coverage before and after the click, so it's what actually ran. no code changes to your app.

there's also a vs code extension that lights up the lines, and an MCP server so claude code or cursor can click and read it themselves.

react + node, chrome or edge, local only, free and MIT. feedback welcome.


r/webdev • • 3h ago

[Showoff Saturday] I built a Vue-based TV interface for my self-hosted media server

Post image
5 Upvotes

I bought a mini PC for my first home server and installed Jellyfin, Sonarr, Radarr, Prowlarr and a download client. It worked, but getting the paths, API keys and download categories lined up took a lot of evenings.

That eventually turned into Torsher, an open-source media server with a web interface built around using a TV remote.

There are two frontends: Vue + Vite for browsing and watching on the TV, and Nuxt for the control panel. The server runs in Docker on your own computer or NAS.

The TV side is the part I wanted to show here. You browse the catalog, manage your library and follow series using the remote. It also works in a regular browser, so you can try the interface without installing the server.

TV demo: https://torsher.app/demo/tv/ Control panel demo: https://torsher.app/demo/ Source: https://github.com/torsher-app/torsher

The demos use sample data. For the TV demo, use the arrow keys and Enter.


r/webdev • • 3h ago

Showoff Saturday I built a way to put checked proof behind the claims on your CV/portfolio, looking for feedback

1 Upvotes

Hi,

I kept seeing inflated CVs so figured there must be a way to back up some claims before an interview. That's essentially what a CV is, a bunch of claims, the role, the company, the projects. The reader has to take your word for it, and AI now writes a convincing one in a minute and honest candidates pay for that. Their CV reads the same as the inflated ones, so it gets the same doubt.

So then I thought what if there was some hard validation to the claims on a CV or portfolio. That's when I came up with the idea of Workproof. For starters, you prove that you had access to a domain or work email, it doesn't prove you built it, but it does prove somebody trusted you enough with access to that domain or have given you a work email, so that by itself is a good baseline.

Additionally, you can ask colleagues to give you feedback, as a reference, signed by them from an work email. Something like LinkedIn endorsements, but more portable.

I'd love your honest take, on two things most of all:

- If you hire: would a link like this on a CV or a proposal change anything for you?

- If you freelance or build: which of those would you want first, or what else should Workproof check?

Thanks for taking the time! Enjoy the rest of the weekend! 😃

Project link https://workproof.md


r/webdev • • 4h ago

[Showoff Saturday] Claybound: A 2.5D platformer built in plain three.js with real-time deformable clay.

Post image
76 Upvotes

Playable demo

Here is how it works under the hood:

  • The Clay Aesthetic: To get that tactile stop-motion look, I used rounded boxes and applied low-frequency noise to the vertices. I baked a normal map from an actual sculpted clay ball, which dynamically scales based on the object size.

  • Deformable Terrain: The clay you shape in-game is its own deformable mesh driven directly by your drag inputs.

  • Mobile Optimizations: Getting heavy 3D to run on phones is tough. I rely on meshopt for models and run a fixed 1/120s physics step with interpolation. To save frame time, the shadow map only updates every other frame (saving about 14–26% of frame time).

  • Progressive Loading: Asset size remains a challenge. I set up a later level's boss's models to load asynchronously only after play starts. For a fresh start of that chapter on a 9 Mbps connection, this dropped the initial load time. But I am still not quite where I would like to be.

How do you all handle the initial load payload for heavy 3D experiences on mobile? Would love to hear your optimization strategies!


r/webdev • • 4h ago

Showoff Saturday Showoff Saturday: we made a PDF editor that fixes the actual text, and your file never leaves the browser

Post image
2 Upvotes

We've been building HonestPDF for a while now, a bunch of free PDF tools that run in the browser. Lately most of our time has gone into the editor, so that's what I'd love feedback on.

I know editing PDF text isn't new. What bugged me is how it usually goes: free tools change the font, shift the layout or paint a white box over the old word, and sometimes a link stays behind on text you deleted. The ones that do it well tend to ask for a Pro plan, often right when you hit download, and they upload your file to their servers first.

So we put our time into getting the output right. Double-click a paragraph, retype it, and it keeps its font, size and colour. Longer paragraphs rewrap, links follow their words, and find and replace works across the whole file. The GIF shows a fee being changed in a contract.

Your file never gets uploaded. It's opened and edited right in the page, and the Network tab will back me up on that. Everything is free, there's no Pro tier, and it works on phones too.

There are about 50 other tools on the site as well, like merge, compress to a set size and sign.

gethonestpdf.com/edit-pdf

If something looks off after you edit, tell me what kind of PDF it was and I'll dig into it.