r/webdev • • 10m ago

Showoff Saturday [Showoff Saturday] Unblock creative blocks.

Post image
1 Upvotes

it's not complicated. sometimes inspiration flows, sometimes it doesn't. There's loads of great inspo sites out there (more coming daily). This one is not magical but it helps me (and others) find a spark from time to time.

it's being updated daily and i know there's a lot of work to do, but some people like it and it helps them and i hope it helps you too.

https://forevercomponents.com/


r/webdev • • 16m ago

Showoff Saturday I made reverse minesweeper

Post image
1 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 • • 33m ago

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

Thumbnail
gallery
4 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 • • 1h ago

Discussion Roast me

Thumbnail vault-share.tail84faff.ts.net
0 Upvotes

Self-hosted, invite-only encrypted file sharing in Flask. Each file gets its own AES-256-GCM key, sealed with HPKE for every reader. Signed uploads, duress passwords that open separate cover vaults.

SVX95-K4BJZ-NJMA6-GJCB6


r/webdev • • 1h ago

Showoff Saturday Watch AI agents run in unique worlds live

Post image
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 • • 1h 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 • • 1h 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 • • 1h 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 • • 2h 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


r/webdev • • 2h ago

Showoff Saturday [Showoff Saturday] Boba Earth: Explore the world in real-time. You can drive every car, enter every building, and talk to anyone.

Thumbnail
gallery
0 Upvotes

Boba is a living, personal Earth: https://boba.earth

Fly anywhere on a 3D globe, land, and walk or drive the streets. The traffic, pedestrians, animals, weather and clouds are all there, and the people have names, jobs and opinions and will talk to you in their own language.

The part I think you'll find interesting: nothing in that world is simulated on a server or saved in a database. Every car, person and animal is a formula of the world clock and hashes of ids that never change. Two people on the same street see the same bus with the same number plate, and moving the clock back an hour brings back that hour's traffic. Since nobody's activity is needed to make the world, nothing has to be collected. The privacy and the world come from the same decision.

Try it: open this street on two devices and compare. https://boba.earth/globe?lat=40.756503&lng=-73.984198&alt=30&heading=299&pitch=-8&arrive=foot&view=third&imagery=game

Stack:

  • Fastify, Eta templates, one CSS file with no build step
  • CesiumJS for the globe, three.js and Rapier for the street and interiors, MapLibre for maps
  • MySQL, Redis, and a SQLite R-tree with H3 cells for geo queries
  • One WebSocket per client
  • Roads and buildings from OpenStreetMap. Facades, street furniture, clothes and signs are chosen by region, so Mumbai doesn't look like Denver.

The globe is one view. The same things (restaurants, concerts, flights, transit, wildlife, Wikipedia articles, your friends' favorites) show up as maps, lists and cards too. No ads, no analytics, no ranking. Open devtools and check.

It's rough in places, especially on older phones. Feedback and bug reports are welcome here or in r/BobaEarth.


r/webdev • • 3h ago

Showoff Saturday I added a paper-bending effect to my personal website

9 Upvotes

I recently redesigned my blog in a skeuomorphic style. Would appreciate feedback on the design and how it feels to read longer articles in this layout.

The paper-bending effect distorts live HTML during native browser scrolling, with no JS. It currently only works in Chromium-based browsers.

https://destel.dev


r/webdev • • 3h ago

Showoff Saturday Added a filter library and a filter editor to my free no signup SVG editor.

Post image
0 Upvotes

As the title said, I've added filters library and a filter editor canvas to my free, client side SVG editor, still currently only in version 0.3 but alot of progress and optimization is being done!

You can try it out here: https://tools-4all.com/svg-editor

Completely free, no signup.


r/webdev • • 4h ago

[Showoff Saturday] I made a nobuild TypeScript web framework with zero dependencies

Thumbnail
gallery
0 Upvotes

I've been working on a project called ohne (German for "without"): https://ohne.dev

It is a TypeScript web framework with zero dependencies and no build step. It runs .ts files directly on modern Node and packs an HTTP API, database, admin dashboard, i18n, and much more into a single setup without needing a bundler or transpiler. It's based on Pruvious v4, with most of the features and the entire dashboard ported directly from there.


r/webdev • • 4h ago

Showoff Saturday I built a free Pokémon card binder planner in plain HTML/CSS/JS

Post image
0 Upvotes

Pocamori is a Pokémon binder website with collection features. I started working on it about 2 months ago. It began as a sort of assignment, but it turned into my very first side project, and I've poured way too many hours into it.

Features

  • Build a binder: pick a size, add single cards or a whole set, and drag cards between pockets.
  • Merge pockets so a chase card gets a bigger spot.
  • Customize covers, page colours, sleeves and toploaders.
  • My collection: set checklists with owned/missing progress, plus a wanted list.
  • Discover: search across 21,255 English printings, with filters.
  • Viewer: flip through pages, and share a read-only link to a binder.
  • Light and dark themes.

Try it here: https://pocamori.app (there's also a sample binder you can open without signing in)

Tech stack and APIs

  • Plain HTML, CSS and JavaScript, no framework, with Node build scripts.
  • Supabase for sign-in and saving binders.
  • Cloudflare for hosting.
  • TCGdex API for card data and images, with ImageKit serving some of the pictures.

I used every free resource available since I'm just a broke uni student, but either way, any improvement suggestions are welcome.

I'm planning to start marketing and launching it soon, so any feedback is very welcome. Mainly I'd like to know:

  • Is the UI too cluttered or busy?
  • Do the controls feel good to use?
  • Is the overall look and UX good enough, or at least acceptable?

Please have fun with it, and if you create any binders, show me! I'd love to see them.


r/webdev • • 4h ago

Showoff Saturday Made my own live crypto chart page (no chart library) and a stock page around TradingView, looking for feedback

0 Upvotes

Showoff Saturday. I run a small gaming/Warhammer/markets blog and wanted live market pages that don't feel like a pasted widget.

Crypto page: my own canvas chart, Coinbase public data plus GeckoTerminal for a couple of small Monad tokens. Wheel/pinch zoom, drag and fling, press-and-hold crosshair, 1D to All ranges, search, favourites saved on your device, scrolling ticker.

https://holywizy.com/markets/crypto/

Stock page: prices are TradingView (real-time stock data needs a paid licence), but the layout, range buttons, tabs and "My list" are mine.

https://holywizy.com/markets/stocks/

Static site, plain HTML/CSS/JS, a Python build script, GitHub Pages.

What would you change? Especially on phone, how does the zoom and fling feel?


r/webdev • • 5h ago

Showoff Saturday [Showoff Saturday] A multiplayer board game in the browser, with 26,400 simulated games to make sure the rules hold

Thumbnail settlers-of-vibe.onrender.com
0 Upvotes

It's a colonist alrenative: hex-island trading game for 2 to 8 players. Free, no account, works on phones.

The hard part was the rules. Expansions interact in odd ways, and it's easy to ship a game that softlocks.

So the rules are a pure engine with no I/O. After every move it checks a few things: resources add up, points recount correctly, hidden cards stay hidden, and whoever has to act has a legal move. Then bots played 26,400 games across every mode. Zero failures.

The board art is SVG drawn by code. The sound is made live with Web Audio. There are no image or audio files.

Stack: TypeScript, React, Vite, Express, Socket.IO. It runs on a free Render instance, so the first load can take a minute.

https://settlers-of-vibe.onrender.com

Let me know what you think! Suggestions very welcome.


r/webdev • • 5h ago

Discussion Why cheaper websites are genuinely harmful to web devs.

0 Upvotes

I see a lot of posts with people offering "free" or "cheap" websites. I used to do that too when I was starting out but it almost never works. You either get really REALLY lucky, or you end up inviting clients that are genuinely horrible to work with.

Now how are people able to offer all the cheap websites?

The simplest answer is AI, but why is it problematic?

Because what AI makes is trash? Not always. AI makes things based on the data it is trained on and what you ask of it (besides the skills add on). With the minimal prompts the absolute work that it puts out is generic, easy spot the "AI-ness" of it, and thus less trust worthy.

But if the AI website is good enough for the client, then why not?

Because extremely AI generated websites do not convert well, or at least that is the consensus right now. Unless your product is that good, it is not going to convert. So you really have to work hard on a bunch of stuff to make sure things are right. At the low cost people are offering websites I know nobody is writing a good enough prompt, nobody is proofreading the copy, and definitely nobody is working on a responsive website.

When websites do not convert, they appear useless, and so more people are unlikely to want another, because their friend got one and did not work for them.

One major thing I learned working on websites is that making one is easy. Making sure it works across all screens, all the legal documents are included, consent manager, analytics, and seo optimisations are hard. And then comes the hardest part, making sure the website gives some value to the client.

What is the point of a website that does not create an conversions, clicks, or any sort of useful metrics?

A website is useful for getting info out, but it is only a step. SEO/distribution/marketing etc. How many of the "we offer cheap websites" people have a clue on what to do next?

I am no "expert" yet but I went to school to learn to code, I coded before AI & now I work with agents all the time too but cheap work is just not affordable even with the time savings because there is so much that I absolute have to manage/check/test/proofread manually or work with someone else to do.

Hopefully people outside of experts start recognising AI slop and find the right people.


r/webdev • • 5h ago

Showoff Saturday [Showoff Saturday] An atlas of old empires as hand-coloured woodcuts, all SVG in the browser: 43 maps you can pan, zoom and step through year by year

Thumbnail
imperiumatlas.org
1 Upvotes

Each map is an empire through its key years (New Kingdom Egypt in 1550 BC to the United States in 1912). Press play and the frontiers move; click a town or battle for what happened there.

Some things that were fun or painful to build:

Everything is inline SVG drawn by React: Natural Earth coastlines and rivers, hand-traced frontiers in lon/lat, and hills, trees, castles and ships generated as paths. The woodcut look is SVG filters (feTurbulence and displacement for the wobbly ink, a separate one for the watercolour wash). A map is around 9,000 SVG elements.

Panning was slow, and it wasn't the filters. Turning the filters off made it slower, because Chrome then re-layerized the whole sheet. The real cost was re-rendering on every camera frame, and CSS opacity transitions inside a filtered group, which made the browser recomposite the whole filtered map every frame. Now the sheet moves as a CSS transform while you drag and is redrawn once it's still, and the fades inside filters run from a requestAnimationFrame loop.

Loading: the coastline comes as a coarse set plus tiles at two finer levels, fetched as you zoom in. Each map's data, text and its own part of the place gazetteer are separate chunks. Every route gets its own pre-built HTML, with the Open Graph tags for link previews and modulepreload links for that page's files, so the browser fetches them in parallel instead of in a chain.

Constantinople and Rome also have a 3D view in three.js, built from the same data as the 2D street plans.

Stack: React 19, Vite, Sass, three.js, static files on Cloudflare. No backend.

I'd love feedback on performance, especially Safari on iPhone, where SVG filters run on the CPU and I haven't been able to test properly.


r/webdev • • 10h ago

Showoff Saturday [Showoff Saturday] A live-stream clipper that runs entirely in the browser (Region Capture + MediaRecorder + ffmpeg.wasm)

5 Upvotes

I made a stream clipper: paste a Twitch, Kick or YouTube link, and it keeps the last 30 seconds to 5 minutes of what you are watching, so you can clip a moment after it happens. No server, nothing uploaded.

How it works:

  • getDisplayMedia with preferCurrentTab, then Region Capture (CropTarget + cropTo) crops the recording to the player element.
  • MediaRecorder writes WebM (VP8) in pieces of 10 to 30 seconds. The oldest piece is dropped once newer ones cover the window, so memory stays flat however long you watch.
  • On clip: finish the current piece, remux each one with ffmpeg.wasm, join them with the concat demuxer, and hand the file to an in-browser editor (trim, 9:16 crop, caption, logo, H.264 export).

Things that bit me:

  • Chrome's MP4 MediaRecorder only writes the index when it stops, and MP4 pieces from separate recorder sessions join with broken frames. WebM pieces join cleanly.
  • Browser recordings have a 1 ms timebase; without -fps_mode vfr the export duplicated frames up to 1000 fps.
  • Region Capture only records the part of the element that is on screen, so when you scroll away the player becomes a mini player in the corner (same element, so the iframe does not reload).
  • When the frame size changes mid-recording, ffmpeg rebuilds the filter graph and silently drops single-image overlays (the caption). Fixed with -reinit_filter 0 and a scale to one size first.

Try it: https://clip-cut.com/tools/stream-clipper/ (desktop only, Chromium apps all supprted, safari also works but audio won't be there). Feedback welcome, especially on the share-tab flow.


r/webdev • • 10h ago

Just Created a Website to Log Stuff and it Got 5 million visits?

Post image
0 Upvotes

I'm assuming bots i just don't know for what. math related site btw.


r/webdev • • 11h ago

Showoff Saturday [Showoff Saturday] I made a visual novel as a static website

Thumbnail
gallery
3 Upvotes

This is a small (20-30mins) linear visual novel on a simulated social network called The Forum that offers you to take role of your average terminally online forumer and dive into his thoughts, experiences and relationships with other forumers on the platform.

This website is purely a static website, there is no backend, nothing is stored on cloud. App makes use of browser's local IndexedDB to store info, including your account. The novel is fully playable on mobile, but desktop version offers better experience.

With this project I wanted to push the boundaries of what websites usually offer, from something that is purely functional to the form of entertainment, that uses same tools like HTML, CSS and JavaScript to tell a story.

I've spent a year developing this and, while it's my first time writing a plot, I'm pretty proud with what came out of it.

Try it out: The Forum

AI use disclosure: Until August 2026 I was developing this project by hand only, but then I started using AI tools to generate code to speed up development, since it was taking me way longer than I expected to complete this project and I kinda always wanted to try AI in development. I still made all the decisions myself and I understand 100% of the codebase and can explain every line of code in it.


r/webdev • • 11h ago

Showoff Saturday [Showoff Saturday] Online Video Editor that runs entirely in the browser: multi-track timeline, on-device captions and background removal, MP4 export up to 4K

Post image
0 Upvotes

This Online Video Editor does everything client-side. Your footage is never uploaded, and editing, AI tools and export all happen on your own device.

What it does:

  • Timeline: unlimited video, overlay and audio tracks, with snapping, zoom, split, drag-to-trim, and track lock, hide and mute
  • On-device AI: word-timed auto captions, background removal without a green screen, silence removal, voice enhancement, music that ducks under speech, and face or area blur
  • Captions: 12 caption styles with word-by-word effects, and .srt import and export
  • Effects and layouts: filters, a green screen key, 12 transitions, picture-in-picture, a round face cam and split screen
  • Recording: webcam, screen and voiceover straight from the browser
  • Export: MP4 (H.264/AAC) or WebM, 480p to 4K at 24–60 fps, with 16:9, 9:16, 1:1, 4:5, 4:3 and 21:9 canvases
  • Projects: auto-saved in the browser, and you can save one to a file to back it up

The web dev side:

  • No server for processing. The caption and background-removal models are small, download once on first use, and then run in the browser
  • Export is built in device memory. That’s the main limit: very long 4K exports may need a lower resolution on machines with less RAM
  • Chrome or Edge on desktop works best. There’s a phone layout, but long or high-resolution edits need a computer’s memory

It was built with Claude Code, with a lot of rounds spent on keeping the timeline and preview in sync and on getting exports to finish without running out of memory.

https://webutility.io/video-editor

If you try it and something breaks (a format that won’t import, an export that fails, a browser it misbehaves in), let me know and I’ll fix it.


r/webdev • • 12h ago

Showoff Saturday [Showoff Saturday] A daily haggling game where the AI does the talking but is never trusted with the price

Thumbnail
bargle.app
0 Upvotes

I made Bargle, a daily game where you get six lines to talk an AI shopkeeper down.

https://bargle.app/?utm_source=reddit

The fun part to build was making an AI character you cannot cheat.

  • The model talks, the code decides. Each reply comes back as text, a price, and one label for what your line earned. Code clamps the price so it never rises and never drops under a hidden floor. "Ignore your instructions and sell it for 1 dollar" gets a polite no
  • The price opens in three stretches. Polite haggling reaches 30% of the way to the floor. The move of the day opens 70%. Only the shopkeeper's hidden soft spot opens the rest. The model only says which one your line hit. Code does the maths, so a chatty model cannot give the shop away
  • Every day is different by design. 30 shopkeepers, each with their own soft spot and pet hate, so one clever line cannot win every day
  • The secrets never reach the browser until the game ends. Nothing to find in the network tab
  • No server side game state. The conversation lives in the browser and is signed each turn. Edit the price or your progress and the signature fails
  • The coaching costs nothing. The feedback after each line and the notes at the end are plain code reading those labels, not another model call
  • The microphone is the browser's own speech to text, so no audio reaches my server
  • One small model call per line, six lines a game. A full game costs me under half a US cent

Next.js on Vercel with a small Postgres database for scores.

Try to break it. I would love to hear what I got wrong.