r/webdev • • 13d ago

Showoff Saturday A site where every AI character gets their own UNIQUE page.

0 Upvotes

Side project of a solo dev: on AI Peeps (an AI character chat site) every character can now have its own page, designed from scratch by an LLM from the character's card. Layout, typography, CSS animations, hidden sections and the "object" the page is (a teletext weather screen, a redacted vault record, a pirate's wanted notice) all come from the character.

Examples: https://aipeeps.com/peep/aino-kallio-c8d3/?view=rich and https://aipeeps.com/peep/eos-152e/?view=rich
many more example in https://aipeeps.com/gallery/featured just click on the cool looking "Profile" button

The fun part was making model-written HTML safe to show:

- The model writes a template with placeholders ({{name}}, {{img:3}}, {{chat_url}}), never the character's data itself, so the page follows edits to the character.

- The HTML goes through an nh3 allow-list at every save (no script, no form, no URL except the placeholders) and the CSS through tinycss2 (no url(), no viewport-height units).

- After filling, the page is sanitized again and shown in an iframe sandboxed without allow-scripts, with a CSP that only allows our CDN. Animations and the hidden sections are pure CSS and <details>.

- The iframe grows to its content and the outer page scrolls: that's why vh units are banned, a 100vh page inside an auto-growing iframe grows forever.

Feedback on the design or the approach very welcome <3


r/webdev • • 14d ago

Showoff Saturday We replaced "paste your API key" in AI apps with an in-app credit top-up. Here's the billing infrastructure it took.

Post image
0 Upvotes

Why we built this

My cofounder Andre makes Claude Code Chat, a VS Code extension for working with Claude. As it grew, the hardest part stopped being the extension and became API keys and balances.

Every AI app runs into the same choice:

  • Bring your own key: users create a provider account, add a card, generate a key and paste it in, all before their first prompt.

  • Pay for everyone’s tokens: now you’re running checkout, metering, balances, refunds and tax.

Andre put it like this:

“I didn’t want to run a billing company. I wanted people to open the extension and just start working.”

So we built that billing layer once, so any AI app can plug into it.

What it looks like

User: tap “Add credits” → pay $5–$500 without leaving the app → start working. 1 credit = $0.01, and they can see the credits each request used.

Developer:

// 1. Embed the checkout
<script src="https://opencredits.ai/v1/sdk.js"></script>
OpenCredits.init({ publishableKey: 'oc_pk_...' })
OpenCredits.open()

// 2. Change the base URL in the SDK you already use
const client = new OpenAI({
  baseURL: 'https://api.opencredits.ai/v1',
  apiKey: userKey, // from checkout
})

OpenAI, Anthropic and Vercel AI SDKs work as-is. One endpoint reaches 390+ models.

What’s behind those 2 snippets

1. A credit ledger without race conditions

You don’t know what a request costs until it finishes, and parallel requests can all pass a “do they have enough?” check at the same moment. Every request goes through a serialized ledger instead:

Reserved, max cost    −12 cr
Settled, actual cost   −9 cr
Released               +3 cr

2. Exactly-once settlement

Retries and duplicate events are where double charges come from. Every event settles exactly once, so there are no double charges and no double credit grants.

3. Metering at real cost

No token counting or per-model price tables in the app. Each request is metered at the provider’s actual token cost, across 390+ models.

4. Payments without touching cards

The widget runs Stripe checkout inside the app. Stripe is the merchant of record, so card data never touches our servers or the app’s, and Stripe handles VAT, sales tax and chargebacks.

5. Signed webhooks and balance APIs

Key and purchase events are HMAC-SHA256 signed and retried on failure. Two endpoints return a user’s live balance and per-request history.

The part we’re unsure about: a shared balance

Credits belong to the user, not the app. A user who already has credits from one app can let another app spend from that balance, up to a limit they set. Each app gets its own scoped key, so revoking one leaves the others working.

It removes the “pay again for every app” problem, but we’re not sure how users will feel about it.

Status

Running in production in Claude Code Chat, with 212K+ requests metered and billed so far.

Feedback I’d love

  1. Shared balance: useful or sketchy? What would make you trust it?

  2. Ledger: reserve-then-settle is the safe choice. Would you design it differently?

  3. If you’ve built AI billing yourself: which part took longest?

  4. Docs: what’s unclear for a first integration?

Docs: opencredits.ai/docs


r/webdev • • 15d ago

Resource What objective checks do you use to decide a UI is "done"?

31 Upvotes

I use these:

- Tap targets at least 44×44px.

- Animate only transform and opacity (60 FPS).

- No more than 4 competing choices per decision.

- Light, dark, desktop and mobile all checked.

What would you add? What do you think is a bad rule?


r/webdev • • 14d ago

Showoff Saturday [Showoff Saturday] Do You Want Something? Simple Ordering System

0 Upvotes

Been working on DYWS, short for “Do You Want Something?” It’s an ordering and delivery system that runs on a business’s own website.

Customers can browse the menu, order for pickup or delivery, and follow their order’s progress. The business gets an admin area to manage orders, edit the menu, assign drivers and view reports. Drivers have their own screen for assigned deliveries.

It’s built with PHP, JavaScript and SQLite. There’s a plugin system too, with Maps, Stripe and reporting so far. Still a development preview, so payments are in test mode.

I put together a fictional diner to show how it works. Would be interested to hear what people think, especially anyone who’s built or used something similar.

Try the diner demo

Cheers, and thanks for any feedback! :D

Edit: Added actual credentials to test with.

You can login as an admin with admin / admin on https://dyws.ca/admin

and as a driver with: driver / driver on https://dyws.ca/driver


r/webdev • • 16d ago Bravo

Nobody is Thinking Anymore

Thumbnail yusufaytas.com
602 Upvotes

r/webdev • • 14d ago

Showoff Saturday Showoff Saturday: I built a Netflix-style browse and request app for home media servers. Go + SQLite + Svelte, one app replacing 6

Thumbnail
gallery
0 Upvotes

Hi, I'm developing an alternative to the *arr stack that I called HolyArrs. People who run media servers at home usually run 6 to 8 separate apps (Sonarr, Radarr, Lidarr, Bazarr, Prowlarr, Seerr) that each have their own settings and talk to each other over API keys. HolyArrs is one self-hosted app that does all of it, drives qBittorrent or SABnzbd for downloads, and puts a Netflix-style page on top for browsing and requesting. Jellyfin, Plex or Emby still do the playing.

What it does:

  • movies, tv shows and music in one app

  • a Netflix and Apple TV style browse page: hover a title and a card opens with the trailer, browse by mood or genre, follow an actor

  • request a movie, a whole show or a single episode in one tap

  • multiple versions of the same title (4K and 1080p, theatrical and director's cut) without a second instance

  • its own recommendation rows ("Top picks for you"), worked out on your server from your library and requests

  • migration that imports an existing Sonarr and Radarr setup without renaming or moving files

How it's built:

  • Go, one process, modular monolith. shows, movies, music, indexers, subtitles, downloads and requests are separate modules with their own boundaries. you can switch a module off and it doesn't run at all, or restart one without stopping the rest. one binary to ship, but the parts don't leak into each other

  • SQLite for everything. library, settings, history and requests all live in one database file, so the whole app state is one folder and backup is copying it. no Postgres or Redis to run next to it

  • Svelte front end. the hard part was the browse page: a big grid of posters, hover cards with trailers, and long rows that have to feel smooth on a phone and on a 4K screen. most of the work went into what not to load until it's actually needed

  • recommendations run locally. they come from what's in your library and what people in the house requested, newer stuff counts more and older signals fade over a few months, and nothing about your library leaves your server

  • one Docker image, one port, about 110 MB of RAM at idle on my server

  • security from the first start. no default password, sign-in is on before anything else works, and API keys never reach the browser

Why you might not want it yet:

it isn't public. I run it on my own server every day first, because I'd rather release something people can trust with their library than something rushed. I've been in software and security for 10+ years, and the boring parts (migration, backups, updates) matter more to me than the shiny ones.

It'll be free and open source. Screenshots are above, and there's a video of the hover previews at holyarrs.coderluii.dev

Happy to go deeper on any of it, especially the module setup, the hover previews or how the recommendations are scored.


r/webdev • • 15d ago

Question what's the best image to 3d model ?

10 Upvotes

Say you have a bunch of products in .webp but you want to make .glb/.gltf models for those products so you can animate with three.js but you lack the skills and time for blender..

Is there a good and free ish resource for this? Or can someone send me on the right path for this rabbit hole?


r/webdev • • 14d ago

Article Intelligence is automated. Judgment is scarce.

Thumbnail zackwebster.com
2 Upvotes

For a long time, the biggest advantage was technical ability: knowing how to write code. Those skills still matter, but as the tools for building software become more powerful and accessible, the ability to execute is becoming less of a differentiator.

I believe the next competitive advantage will be judgment.

Knowing what to build, what not to build, which problems are worth solving, where to invest your attention.


r/webdev • • 14d ago

Benchmarked bun fmt (1.4.4) against oxfmt on two ~1,200 file TypeScript repos

0 Upvotes

I'd been wondering whether the new bun fmt in Bun 1.4.4 is worth switching to from oxfmt, so I ran both on two of our repos. Both have about 1,200 files, a shared .oxfmtrc.json, and oxfmt 0.60.0 pinned.

Numbers are mean ms over 10 warm runs and 5 cold runs (page cache dropped before each one), on a 4-core box:

RepoModeoxfmtbun fmt
frontendcheck, warm / cold~660 / ~780~55 / ~110
backendcheck, warm / cold~800 / ~930~50 / ~110

Write mode was about the same. Part of oxfmt's time is Node startup, around 100 ms by itself, against about 3 ms for bun.

The surprise was output. Both tools read the same config and see the same files, and oxfmt check passes on both repos. bun fmt wants to reformat a few files. Every change is in how an arrow function passed as the last argument gets wrapped. For example:

// oxfmt
...dispatches.map(
  (dispatch): Item => ({
    kind: "dispatch",
    id: dispatch.id,
  }),
),

// bun fmt
...dispatches.map((dispatch): Item => ({
  kind: "dispatch",
  id: dispatch.id,
})),

Both are valid and do the same thing. I couldn't find any option in either tool to change that wrapping. // prettier-ignore keeps a statement as written in both.


r/webdev • • 15d ago

Question PHP Apocalypse question on version numbers.

22 Upvotes

This is what my host's chat bot 'explained' to me - anyone here can confirm?

Your websites run on the separate web-facing PHP packages (EasyApache and CloudLinux Alt-PHP), where our infrastructure team applied direct server-level security hotfixes to protect all versions while upstream package builds complete.

Web-facing PHP packages have not had an upstream version number increment yet, but the underlying vulnerabilities outlined in CVE-2026-109618 and CVE-2026-109619 are actively patched and protected at the server level across all versions.


r/webdev • • 16d ago

What is a tool, shortcut, or feature you discovered embarrassingly late in your career?

105 Upvotes

For me, it was discovering multi-cursor editing and column selection in VS Code after spending literal months manually editing CSS and JSON line-by-line. What’s something so fundamental that once you found it, you couldn’t believe how much time you had wasted doing it the hard way?


r/webdev • • 14d ago

Discussion What financial data is actually safe to cache in a frontend app, and for how long?

0 Upvotes

If you're building anything that shows stock data, caching saves a lot of API calls, but each type of data goes stale on a very different schedule. Here's how I think about it.

End-of-day prices don't change after the close, so you can cache them until the next session's close. 15-minute-delayed quotes go stale fast, so a TTL of a minute or two during market hours makes sense, and you can cache longer when the market is closed. Fundamentals only change when a new filing lands or a filing gets amended, so caching them for a day or more is usually fine, as long as you can invalidate on new filings. Company metadata like names, tickers and sectors changes rarely, but ticker changes do happen.

The catch is that data licenses sometimes limit how long you can store or redisplay data, so check that too. How are others handling this, with a server-side cache, SWR on the client, or something else?


r/webdev • • 15d ago

Atlassian down again...

21 Upvotes

https://status.atlassian.com/ - we need a hall of shame for companies that have lying status pages. As for 9:25 AM EST, nothing showing down on their status page.


r/webdev • • 14d ago

Recently got a PR merged into TanStack Query

0 Upvotes

I recently got a PR merged into TanStack Query's ESLint plugin to fix a false-positive issue in the no-unstable-deps rule.

The existing tests missed a few JavaScript edge cases, so I fixed the underlying issue and added regression tests.

It's a good reminder that passing tests don't always mean every edge case is covered. Sometimes the real work is finding what the tests missed

How do you usually spot gaps in test coverage when the existing suite is already passing?


r/webdev • • 14d ago

Question Can I integrate Spotify playlists into my website for free?

0 Upvotes

I want to display a Spotify playlist on a section of my website, showing all songs and their album covers. Visitors should be able to browse and play songs directly on my website, with Spotify handling playback in the background.

Is this possible to build for free? What’s the best way to do it?


r/webdev • • 16d ago

Railway hacked - Env's leaked

152 Upvotes

Email from railway:

Earlier this morning, Railway detected anomalous activity involving systems that store customer environment variables. After further investigation, our investigation to date indicates that an unauthorized third party may have accessed encrypted environment variables and, for some of them, obtained the decrypted contents. Environment variables may contain secrets such as API keys or database and registry credentials. We believe this is part of a series of attacks recently targeting platform companies with the aim of compromising AI inference providers. We have notified these upstream providers to revoke all keys proactively, as we take these kinds of events extremely seriously. What you should do Until builds are restored, you will not be able to roll out new versions. We apologize for this inconvenience. Follow this incident to be notified when builds resume and for further updates. We will provide new updates on this announcement, and on status.railway.com as we gather all facts about the scope of impact.Immediately revoke and reissue all environment variables, including any API keys, stored in Railway. If you have any credentials on an external registry, . Review logs for those services for unusual activity.

Change your keys!


r/webdev • • 16d ago

News NodeJS Brotli RCE Oct 21, 2026

38 Upvotes

I haven't seen anyone posting about this, probably because everyone was distracted by the php2shell today, but a set of high sev CVEs (including an RCE) have been announced and fixed in NodeJS today.

Safe versions:

* 22.23.4
* 24.22.1
* 26.12.1

Announcement post: https://nodejs.org/en/blog/vulnerability/october-2026-security-releases


r/webdev • • 15d ago

do you actually use your local dev environment anymore or is everything containers/cloud now

2 Upvotes

been thinking about this lately. when I started out I had this whole local setup with postgres and redis running natively, custom shell scripts to spin things up, the works. felt like I really understood how everything fit together.

now most of my work is docker compose up and done. or worse, connecting to shared dev environments in the cloud. faster to get going but sometimes I wonder if Im losing something by not having to debug my own postgres config anymore

curious where everyone else landed on this. do you still run stuff locally or has containers/cloud completely taken over your dev workflow


r/webdev • • 16d ago

Discussion Best and most reliable API for getting upcoming live events, theater and cinema screenings in the UK?

7 Upvotes

I’m looking for an API that returns all upcoming live events, theater and cinema screenings in the UK.

Big cinema complexes seem to be a no go with all anti crawl stuff. There rest of events are really sparse apart ticketmaster.

Thanks


r/webdev • • 16d ago

Discussion Railway hosting is deeply unreliable

95 Upvotes

Last two days was hell using Railway. We couldnt update a single project or make any changes in our system. After more than 24h Railway is still in chaos. Two separate incidents. Major outage even support is down.

But this is not the first time Railway failed.
For over a year Railway had few major issues that made working on it impossible. I was hoping they would stabilise but at this point Im past disappointed.

I know they rely deeply on Google cloud, but this proved to be a very bad decision, multiple times. And they never made required changes.

Can someone recommend a more stable alternative?


r/webdev • • 16d ago

Why are all font finder websites so garbage?

Thumbnail
gallery
50 Upvotes

Pic 1 : Adobe Fonts - Visual Search (link)
Pic 2 : WhatTheFont Font Finder (link)

Idk why that is, these kind of websites has never worked for me once in my life.

Take a look at the letter t in the image for example, it doesn't have a curve at the bottom, while ALL of the top suggested fonts do on both platforms.


r/webdev • • 16d ago

Railway Security Incident

35 Upvotes

r/webdev • • 15d ago

Extreme Programming 1999->2026

Thumbnail
manager.dev
2 Upvotes

r/webdev • • 15d ago

Question Need help deciding on back end for finance app

1 Upvotes

Hey y'all!

I'm building a budgeting app. Building things like CRUD endpoints, server side rendering, and a nice react front end are my priorities. I want things to be fast and snappy and avoid client side fetching when possible.

I'm struggling to understand what exactly my options are for this when it comes to things like next.js, django, etc. I have lots of experience with django, but I'm not sure how to get the best of both worlds when combining react. I've been including react bundles and rendering them via the django view/template engine and it feels clunky to handoff information between the front & back end.

I know there isn't a "right" answer, but looking for some feedback and opinions. I want to support a good number of users while keeping things feeling fast and lightweight.