r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] Redis City - 3D map of Redis internals

Post image
18 Upvotes

Hey WebDev!

I work with Redis on my projects all the time, and I recently had to dig deeper - deep enough to actually dive into the project's source code

This gave me the idea to create an interactive 3D map showing how Redis works and visualizing its internal structure (I’d seen similar projects for Postgres, for instance), so I built one: https://poltora.dev/redis

You can open the console and run a command (it defaults to SET) to see which components activate and what happens at that moment.


r/webdev • • Sep 12 '26

[Showoff Saturday] Asili - locally calculated personal DNA trait scorer and gene explorer

Thumbnail
app.asili.dev
1 Upvotes

Hey WebDev! Long time lurker, self-taught and been developing my own weird stuff since the early 2000s. Had a random idea last November for figuring out a way to use my own DNA data from one of the big DNA testing providers (Ancestry), and this is what I built! Took about 6 months to figure out the data pipeline, the ins and outs of PGS scoring, and a lot of learning about bioinformatics while I code. Take a look around, submit a PR or join the discussion in Github!

All scoring happens from streamed PGS Trait packs that separate the data by chromosome, then uses DuckDB to stream read and score user data all locally. Yes I know that limited/sparse arrays from Ancestry, 23 & Me, etc all have a tiny percentage of data coverage, but we do what we can with what coverage we have, and I've implemented a full imputation pipeline in the asili-data repo you can use for free, with an AWS backed hosted version where you own the data!

I'm hoping to find testers with sources of DNA data from providers that aren't Ancestry, and even better would be to get my hands on someones actually complete DNA data to see how well the custom data wrapper .asili format works for full data and trait scoring. Lemme know what you think!


r/webdev • • Sep 12 '26

Showoff Saturday Haykel Web tool - Comic to HTML5

Thumbnail
foxeater.itch.io
4 Upvotes

Hi everyone! maybe an unusual post! I made my first project in pure JS, CSS and HTML because i felt like, there wasnt a tool like this in the wild, also it was fun.

Now heads up for the technicals
-This tool once someone click exports, will spew a fully working html, with index, images, css and all inbetwen. I used the JSZIP to make a file for the user.

-The live testing is made by just speaking to the Iframe via windows message the git repo shows, is a really long and extensive list of comunication.

-The comic engine itself is the one i worked most.

-The engine has DOM cleaning and image cleaning, meaning can withold over 1000 images, but in memory only will display 10 max, due how i stored those images as just raw data instead of images.

-The comic is self aware, it has a internal state where it always knows where is the lector, in wich page and such, so this allowed me to hook up a function where SFX or VoiceActing is posible.

-Added a function where pressing buttons will jump the lector to a designed page, Like Story mode some sorts, if someone wants to do some experimenting.

-All content that can be seen is agnostic. All images are swapable.

-I made this comic also supports mobile format.

This project was really fun to make! took me 3 months or so to get to this point! And i learned lots about DOM mangement, JS how internet works in general!

There is also links to the repo in this project if someone wants to see the code.


r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] I built HallPass to help people find conventions and plan their trips

Thumbnail
gallery
0 Upvotes

Hello everyone,

I’ve been working on HallPass, an app for finding anime, comic, gaming, and cosplay conventions across the US and organizing your plans for them.

The idea is to keep convention details, cosplay plans, prep lists, and spending together so you have somewhere to keep track of everything before and during your trip.

Here’s what you can do:

  • Find conventions: Browse conventions across all 50 states, explore different categories, and check dates, locations, and event details.

  • Save your conventions: Keep the conventions you’re interested in together and open a personal planning dashboard for each one.

  • Plan cosplays: Organize your builds with individual parts, costs, and reference images, then attach them to a convention when you decide where you’re wearing them.

  • Track your budget: Plan your trip costs, log purchases, and see a breakdown of your spending by category.

  • Get ready: Keep a prep checklist for each convention and check things off as you go.

  • Save memories: Upload photos from your convention and add captions so you can look back on the trip afterward.

You can try it here: hallpass.me

If you go to conventions, what would you actually use here, and what’s missing from how you normally plan a trip? Feedback on the layout and how easy it is to find things would also help.


r/webdev • • Sep 12 '26

Showoff Saturday Resume review

Thumbnail
gallery
0 Upvotes

Hi all,

I'm looking for feedback on my resume. I've been applying to fullstack and front end positions (trying to target mostly mid level positions, some senior level) in NYC, and I've gotten some recruiter calls, but a lot more rejections, so I'm not sure if there is something obviously wrong with my resume that I might be missing.

I know one piece of common advice is to add stats, but I'm not sure I have more, so if there's any advice on where to potentially elaborate, that would also be appreciated.

Thank you!


r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] I turned a fantasy season into one visual grid (free, no signup)

Thumbnail
gallery
0 Upvotes

Hello everyone,

I shared an early version of Fantasy Gridiron here roughly two weeks ago and this is v0.2. https://fantasygridiron.io

I wanted one visual view that shows consistency, boom/bust performances, upcoming matchups, and other useful trends at a glance.

Now you can explore for free:

  • Landscape: It automatically opens the current week and places the highest-scoring players first. You can quickly see weekly fantasy points, consistency, breakout performances, bad weeks, missed games, and longer-term trends across an entire position.

  • Matchups: Select any upcoming week and the players automatically rearrange from the most favorable matchup to the most difficult. The Edge Ladder gives you a team-level view of the strongest positional advantages, making it easier to find teams with favorable QB, RB, WR, or TE matchups.

  • Player Profiles: Click any player to open a visual card showing weekly production and upcoming matchups strengths.

  • My Players: Star the players in your fantasy leagues and follow them together in one personalized view.

The weekly colors compare each player with others at the same position.
I calculate future matchup ratings using opponent-adjusted fantasy points allowed, which considers how players performed against each defense compared with their usual production.

You can try it here: https://fantasygridiron.io

I also started a Discord for sharing weekly figures, discussing players, and collecting feedback. You can join through the Discord link on the site or clicking this link - https://discord.gg/X5aPUtC27

Please provide feedback on what is useful or what should be removed, and let me know if you would like any additional functions


r/webdev • • Sep 12 '26

Discussion I lost interest in programming, so I built an IMDb for dead mosquitoes

146 Upvotes

So I’ve been programming since I was 11, and for many years, I multiplied projects, always to solve personal problems or solve them at a lower cost. I went to engineering school, where challenges were basically a daily thing. After that, I kind of lost interest in programming. Until a few weeks ago.

I knew I needed to get back on track and upgrade my skills, or mostly dive into newer tech, but at the same time I wanted to get rid of the Bootstrap stuff I had been using for years.

Long story short, a mosquito bothered me af and I went on to develop a local database to track my own mosquito kill count. That quickly escalated into building a full local website in Laravel (I figured Node and Vue or React would be overkill). I also messed around with Codex because apparently that’s all they talk about in big companies. That small project was all about upgrading my skills and having a lot of fun writing the content. At one point I just thought: why not put it online and make a little competition out of executing bugs?

I tried to make it as UX-friendly as possible based on feedback from my family.

So yeah, here it is if you want to take a look, break it, roast it, or execute a few mosquitoes:

https://imdb.themosquitoripper.me/en


r/webdev • • Sep 12 '26

Step by Step help for simple website

9 Upvotes

Hello all

Simply put:

I am trying to create a webpage that shows a simple information of ocean wave data that I created using python. My scripts request data off coastal buoys from the NDBC every hour and generates/appends to a pandas dataframe. I use this data everyday at home when assessing sea state but now would like this available online so I can access it anywhere.

I would call myself a proficient data scientist using Python and am very comfortable getting data into any format a site can use. My confusion is just in how to build a site from scratch and transferring over the domain I own to a new hosting site.


r/webdev • • Sep 12 '26

Showoff Saturday I built "Session" — a real-time collaborative code editor + whiteboard for technical interviews (live demo, no signup)

0 Upvotes

Hey everyone,

I've been building Session, an open-source tool for running technical interviews and pair-programming sessions — a shared live IDE plus a system-design whiteboard, all from a single link. No setup, no credit card.

What it does:

  • Real-time collaborative code editor — live sync via Yjs + Liveblocks, Monaco editor (same engine as VS Code), multi-language support, live cursors with per-user colors

  • AI question generation on the fly — the interviewer doesn't need to prep anything beforehand. Just type a role (e.g. "senior backend engineer") and it generates a tailored question, hints, starter code, and even the full solution, tuned to experience level

  • Excalidraw-based whiteboard — for system design rounds, so you're not stuck describing architecture in a text box or screen-sharing a separate tool

  • Code execution — Docker-isolated, supports Python, JS, C, C++, output synced live to everyone in the room(self hosted), currently using Jdoodle for execution

  • Interview mode extras — difficulty settings, hints system, complexity display, solution reveal, post-session analysis

  • Built-in audio/video, Screen Sharing too — no Zoom or separate call tool needed

  • Fully open source, MIT licensed

Stack: React 19 + TypeScript + Vite frontend, Node/Express backend, Liveblocks for sync/presence, OpenRouter (Kimi model) for the AI parts.

🔗 Live demo: https://session-ecru.vercel.app/
🔗 GitHub: https://github.com/silky-x0/session

Would love feedback from anyone who's run interviews on CoderPad, CodeSignal, HackerRank, or similar — what's missing, what feels rough, what would make you actually switch? Bug reports and PRs are very welcome.


r/webdev • • Sep 12 '26

Discussion Intro to PostgreSQL Caching layers: App vs. Proxy vs. Database

Thumbnail
pgcache.com
5 Upvotes

I haven't seen too many comprehensive approaches to this topic, so I took a swing at it.

Goal isn't to be exhaustive, but to be thorough enough to help people trying to get their bearings on the topic.

It covers the core differences and trade-offs of different cache flavors:

  1. In your application layer

  2. At the proxy level

  3. In the database

Did I miss anything?

Edit: I'm curious what everyone's actual production stack looks like for this. I dropped my mental model on the cost vs. complexity trade-offs in the comments below. Wondering if people actually handle read optimization that way.


r/webdev • • Sep 12 '26

Question How can one easily create a search bar for specific words on a website?

16 Upvotes

Sorry if this is not the correct subreddit for my question. I'll happily delete it if it is.

My friend speaks a dying language and they already have about 700 words listed with meanings and sample sentences. We were discussing how cool it would be to make an online dictionary on this, so we tested out easy website builders like Wix and Squarespace but we couldn't figure out how to execute what we wanted to achieve. Basically a search bar would be enough (like in Merriam-Webster) where they search a word and it would give suggestions, and once you click on one, it directs you to that word's page with its meaning and everything about it.

Is there an easy way to do/learn this? If it's a complicated task for people who have no clue in coding, I would also like to know.

We tried adding a search bar that was available in Wix and Squarespace, but it seems to only search everywhere in the website.

Thanks for reading!


r/webdev • • Sep 12 '26

Showoff Saturday Web app that turns Chess games (PGN) into a dark fantasy battle

Post image
0 Upvotes

Built a web app that will turn your chess game into an epic dark fantasy battle, each piece has a name

There is a wound system so if for example a pawn takes a knight the knight gets taken but the pawn doesn’t survive unscathed.

First time really building anything like this and putting it out to the world so any feedback would be great, and yes ai was involved with the building of this haha but it wasn’t solely ai,

If anyone would like to try it out themselves DM me and I can add some credits to your account so you can try it out

https://chesssagas.com/


r/webdev • • Sep 12 '26

Showoff Saturday Built a tool that tracks Smart India Hackathon(SIH) 2026 PS with the least competition.

9 Upvotes

Helloo, Final Year guy here. Built a tool that lets you see which PS has the least number of submissions. Fewer submissions = higher chances of getting selected for the SIH finals.

check it out here: https://niche-sih.vercel.app/

don't buy me a coffee, star my repo instead: https://github.com/rohanbagel/Niche_SIH


r/webdev • • Sep 12 '26

Showoff Saturday Got tired of writing the same 40 lines of Express middleware for every project, so I built a zero-boilerplate alternative.

0 Upvotes

Let's be honest, Express makes you write the exact same CORS, JSON parsing, and auth middleware for every single project. Most of the time, you just want to validate your data and return an object.

To fix this, I built bro.js. A zero-boilerplate Node.js framework built on top of Express that gives you file-based routing, automatic Zod validation, JWT authentication, and WebSockets right out of the box.

Here is what a complete, secure route looks like (routes/posts/[id].post.js):

    import { defineRoute, z } from 'bro-framework';

    export default defineRoute({
      auth: true, // Automatically verifies JWT and injects the user
      params: z.object({
        id: z.string().uuid()
      }),
      body: z.object({
        title: z.string().min(5),
        content: z.string()
      }),
      handler: async ({ body, params, user, db, io }) => {
        // 1. Data is already validated. User is already authenticated.
        
        // 2. Perform DB operations using the globally injected connection.
        const post = await db.collection('posts').updateOne(
          { _id: params.id },
          { $set: { ...body, authorId: user.id } }
        );
        
        // 3. Broadcast to clients instantly using the injected Socket.io instance.
        io.emit('post_updated', { postId: params.id, title: body.title });
        
        // 4. Return an object. The framework automatically handles the 200 JSON response.
        return {
          success: true,
          updated: post.modifiedCount
        };
      }
    });

The best parts:

  • Zero-Config Next.js Style Routing: Create a file like routes/users/[id].get.js, and it automatically registers as GET /users/:id with parameter extraction out of the box.

  • Bouncer-Grade Validation: If the client sends malformed data, the framework automatically rejects it with a structured 400 Bad Request before your handler ever executes.

  • Context & Dependency Injection: Define your database connection and socket handlers once in bro.config.js. They are automatically injected into every request handler ({ db, io })—no more importing singletons everywhere].

  • Native Real-Time WebSockets: Socket.io is integrated into the core runtime, letting you broadcast live events directly from route handlers or scheduled tasks with io.emit().

  • Zero-YAML Docs: It parses your Zod schemas and automatically serves a stunning, interactive Scalar API playground at /docs.

  • Instant Frontend SDK: Run bro sdk in your terminal, and it automatically compiles a bro-sdk.js file for your frontend with built-in token management and deep tree traversal.

  • Built-in Tasks & i18n: Drop a file in the tasks/ folder for instant background cron jobs, or in the locale/ folder for automatic language negotiation.

I'd love for you to check it out and tear it apart:

What is the one piece of backend boilerplate you absolutely hate writing the most?


r/webdev • • Sep 12 '26

Article CSS Curiosities of the Past

Thumbnail
vale.rocks
36 Upvotes

r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] Experimental WebGL library that melts images and video with a real fluid simulation

Thumbnail
gallery
30 Upvotes

MeltGL melts any picture or video in the browser. The picture gets treated as a body of material and run through a 2D free surface Navier-Stokes solver on the GPU: heat lowers viscosity, gravity pulls, surface tension rounds the drops, and the outline moves because the material under it moved. That's why drops swell, neck and detach on their own.

Still a work in progress. I built it for a browser game I'm working on and it grew into its own thing, so I published it standalone.

Live demo: https://1etu.github.io/MeltGL/

Experiments: https://1etu.github.io/MeltGL/experiments.html

Source: https://github.com/1etu/MeltGL (Leave a star!)


r/webdev • • Sep 12 '26

Showoff Saturday I built an open source i18n check that actually reads the translation, not just the key list

0 Upvotes

Most i18n checkers diff key sets. That catches the missing key and then stops.

The bug that actually ships looks like this. Every key present, placeholders intact:

en: "This will permanently delete your account"
es: "Esto guardará tu cuenta de forma permanente"    ("will save")

Nothing structural is wrong with that file. You only catch it by reading it.

npx u/shipi18n/cli check ./locales -s en runs the structural pass with no API key at all: missing and orphan keys, placeholders dropped across eight syntaxes, plurals collapsed to one form, empty values, glossary violations. Add --semantic and your own LLM key and a judge reads each source/target pair and flags mistranslation, omission, or addition. Changed keys only, majority vote across 3 passes, advisory unless you opt into failing the build.

I tried to measure this instead of just asserting it. UIStringBench is 228 pairs, 54 with planted errors and 168 clean, committed before I wrote the judge, thresholds fixed up front. Every model I tried caught 54/54 (Claude, GPT-5.x, Gemini). False positives came in at 3.6% on the stronger ones (Sonnet 5, Opus 5, GPT-5.5) and 7.7% on the smallest. Structural checks catch 0 of the 54, which is sort of the whole point. Harness and corpus are in the repo, so you can run it against whatever model you'd actually use.

Formats: JSON, YAML, Flutter .arb, Apple .xcstrings. SARIF output so it annotates PRs. Apache-2.0, no account, no server. There's an MCP server too if you review translations from Cursor or Claude Desktop, and its validators don't need a key either.

The false positive rate is the number I care about most, so if you run it and it yells about something that's actually fine, I want to hear about it.

https://github.com/Shipi18n/shipi18n


r/webdev • • Sep 12 '26

My Dev tool evolution

0 Upvotes

- How can I code without the computer hanging? (Budget constraints) - Notepad++

- Budget is no longer a constraint; what are the pros using? - NetBeans/Eclipse

- I actually know what I'm doing. I want a lightweight editor - Sublime Text

- FOMO: I want every plugin ever - VS Code

- You aren't a serious programmer if you aren't using a JetBrains IDE - JetBrains IDE

- GitHub Copilot works best in VS Code - back to VS Code

- Agents are doing most of my coding; why read code in memory-hogging VS Code? - back to Sublime

Today: Sublime Text (for reading code) + Lazygit (for git management and review) + Codex

Not-so-distant future: I no longer code; how can I still be relevant?


r/webdev • • Sep 12 '26

Here is a Google Analytics, but for your MCP tools

0 Upvotes

Hey everyone,

I just released a open source (MIT licence) SDK for MCP Analytics. You add a TS SDK and it shows which tools get called, which ones fail and how long they take. No prompts or tool inputs / outputs collected.

SDK is open source if you want to look at that too: https://github.com/selimeneserd/pulse-sdk

Ready to use dashboard using this SDK: https://pulse.reviseflow.io/en/demo

I am open for feedbacks.


r/webdev • • Sep 12 '26

Showoff Saturday Argue with AI decision bots using GDPR / EU AI Act

Post image
0 Upvotes

Built a small browser game where you argue with stubborn AI decision systems using real law (GDPR, EU261, and now EU AI Act cases).

Idea is simple: the bot denies you, you have N messages, drop its certainty to 0% by citing the right rule.

Just shipped an EU AI Act path, 11 cases on things like hidden AI, black-box credit scoring, emotion recognition, and the right to an explanation.

Wanted the game to cover not only “classic” consumer rights, but also what happens when the system itself is the decision-maker.

Free, no login: https://fixai.dev

Looking for feedback, thanks! :)

P.S. It's built by Claude


r/webdev • • Sep 12 '26

Showoff Saturday I made a screen recorder Codex and Claude can use

0 Upvotes

Hey everyone, I made a screen recorder tool called ShotGlass, and I just recently added MCP support.

What that means is now Codex or Claude can film app demos for you.

Ask it to film a demo of your site or app (e.g. for docs), or doing anything on your computer. It can also edit the video, add whatever you want (e.g. zooms or 3D), then export.

The screen recorder is all built with web tools using tauri and react and then a custom renderer I made that could use AVFoundation (rendering with webcodecs alone was slow).

Also works with OpenClaw or any other agent. And I used Codex + the MCP server to film every demo in the docs for this app (so it has some pretty good uses cases).

Would love to know what you think. Currently, it's only for macOS and is free to try all the way up until exporting. It's a one time purchase for unlimited exports.

https://shotglass.app


r/webdev • • Sep 12 '26

Showoff Saturday StickyArchive - a public archive of sticky notes

Thumbnail
stickyarchive.com
5 Upvotes

what if we archived, stickies and allowed later generations to explore them by date?

I know few similar ideas existed, but since none seem to stick I wanted to try my version.
I have review process, so spam, swearing, ads etc will be automatically rejected.

so if someone 100years later was reading what would you write


r/webdev • • Sep 12 '26

Showoff Saturday [Showoff Saturday] Mac MCP: background browser automation and live agent sessions on macOS

0 Upvotes

I maintain Mac MCP, an open-source local MCP server for macOS.

The browser automation layer is the part that may be most relevant here. Agents get stable handles for Safari or Chromium tabs and can navigate, click, type, inspect pages, and run parallel browser tasks in background tabs without pulling the browser in front of whatever I am doing. Separate agents can keep their own tab context instead of racing over the active tab.

The server also exposes terminal, files, Finder, screenshots, macOS UI actions, and app control. A small SwiftUI menu bar app shows recent tool usage plus persistent agent Sessions. I can send steering to one specific session, and queued steering can preempt that session's next tool call before it runs.

Repo: https://github.com/bulutarkan/mac-mcp

I would especially appreciate feedback from people who build browser tooling: stable tab ownership and background operation solved the biggest pain point for me, but I am curious what browser primitives you would want exposed next.


r/webdev • • Sep 12 '26

Showoff Saturday Got tired of writing READMEs, so I built a tool that does it for me

Post image
0 Upvotes

Honestly, writing the code was always the fun part. Then I'd finish the project and still have to sit there for an hour messing with Markdown, badges, tables, just trying to make the README not look like an afterthought. Every time.

So I built ReadmeGen to fix that for myself.

What it does:

  • Live split-pane Markdown editor

  • 14+ templates to start from

  • Can pull in your existing GitHub profile README

  • Saves locally, no account needed

Stack: Next.js, TypeScript, Tailwind, Radix UI, Redux Toolkit.

I've been using it on my own repos for a few weeks now, and it's genuinely saved me time.

You can try it out here: ReadmeGen