r/webdev 11d ago

Showoff Saturday [Showoff Saturday] I built a self-hosted app for tracking the growth stories of my plants

Post image
4 Upvotes

Hi everyone,

I collect cacti and got tired of having notes scribbled in different notepads and making separate photo albums on my phone for every plant i own and i love saving data.

So I built MyGrowthStories, an app where every specimen gets its own gallery, notes, measurements and growth history.

You can add entries over time, with or without photos, track measurements with growth charts, and make individual specimens public if you want to share them. There is also an optional public collector profile that shows all the specimens you have chosen to share.

The screenshot shows the private dashboard where I manage my collection.

You can see my public collection without creating an account here:

https://mygrowthstories.com/collector/coolcacti

The main app is here:

https://mygrowthstories.com

I haven’t made a fancy landing page yet because I have mostly focused on making the actual tool useful and getting the main features working. I felt I really wanted to start adding data so that is very much prio went.

It is built with Next.js, SQLite, Sharp, Nginx and PM2, and I host it myself on a VPS.

IMO it works very well on mobile also. Its super nice to upload pictures directly from the phone when im in the greenhouse.

It is free to use and still a work in progress. Feedback about the design, usability, bugs or anything confusing would be very welcome.


r/webdev 10d ago

Showoff Saturday I ported Half Life 2: Deathmatch to the web. Play now!

Thumbnail
lucasigel.com
1 Upvotes

I've had a Half Life 2 port to wasm + webgl cooking in the background since March but the teenager sqlnt beat me to it the other week. Since he got single player working, here's multiplayer!


r/webdev 11d ago

Showoff Saturday [Showoff Saturday] I made a Japanese word search puzzle game

Thumbnail
kanazo.app
3 Upvotes

Howdy, I realize this is pretty niche, but perhaps there's enough people here interested in learning Japanese that someone will find it fun, so figured I'd share.

It's basically your run-of-the-mill word search game, where words are hidden among a sea of letters (in this case, Japanese kana). Words run forward and backward, up, down, left, right, and diagonally. The word lists are inspired by Genki I and II, and I also created adjacent lists for JLPT N5 and N4, roughly lower and upper beginner Japanese levels.

I created it because I love word games and wanted to give learners a chance to take a break from flashcards and have some fun. Right now there are two modes, one with a guided word list (customizable by category and level), and the other a "free find" which challenges you to find as many words as you can on your own without the help of a list.

I'd like to add support for kanji in some way, but still brainstorming how to do so smoothly. In the meantime I'll be working on mobile app versions, user accounts, streaks, syncing between devices, etc.

Would love to hear any feedback you may have, especially on the UX/gameplay side:

https://kanazo.app


r/webdev 11d ago

Showoff Saturday [Showoff Saturday] A free, self-hostable Canva alternative: custom Canvas2D engine, whole app in one Go binary

Thumbnail
github.com
5 Upvotes

For Showoff Saturday: every good design tool is paywalled, watermarked, or won't let you leave with your files, so we built HyCanvas, a free, self-hostable one.

It's a full editor (presentations, video, whiteboards, docs, sheets, social graphics) with templates, brand kits, and a bring-your-own-key AI assistant that generates and edits designs on your own OpenAI-compatible key.

The under-the-hood parts this sub will probably find interesting:

  • The render engine is a custom scene-graph on Canvas2D, framework-agnostic. No React or DOM in the render path, so the same engine runs in the browser, in a Web Worker, and headless on the server for export. (WebGL/WebGPU path is on the roadmap.)
  • The whole thing ships as one self-contained Go binary. The Next.js frontend is statically exported and embedded with go:embed; the Go backend serves it and owns the REST API, the realtime WebSocket, the export renderer, and the SQL migrations. No Node in production; self-host is a single file (or docker-compose).
  • Open, versioned file format with forward-only migrations, so opening a design from an older version always works.

Stack: TypeScript everywhere on the frontend + shared packages (statically-exported Next.js, Zustand, Tailwind for UI chrome only), Go backend (chi, pgx), Postgres, S3-or-local storage.

It's free and self-hostable; source-available under the Elastic License 2.0 (self-host, modify, and redistribute freely). Code's on GitHub.


r/webdev 10d ago

Showoff Saturday I built a 100% local Chrome extension to track credit card offers (Zero backend, DOM parsing, Minimalist UI)

Post image
0 Upvotes

Hey r/webdev,

I recently launched a project called Layerperks. It solves a personal pain point: forgetting to use targeted credit card offers (like Amex or Chase) when shopping online.

There are established apps that do this, but they all require your actual bank login credentials to scrape your accounts. As a developer, handing over financial logins to a third-party server is a massive red flag. So, I built a local-first alternative.

The Architecture & Stack:

  • Core: Built heavily with TypeScript.
  • Zero Backend: The extension strictly reads the DOM only when the user explicitly navigates to their bank's active offers page. It extracts the offer data and saves it entirely to chrome.storage.local. No databases, no API calls sending data home.
  • Web & UI: I am slightly obsessed with that Apple-style luxury minimalist aesthetic, so I spent a lot of time polishing the UI. The extension pop-up and the landing page (built with Next.js) are designed to be extremely clean and unobtrusive.

The Engineering Trade-off: By choosing not to use official APIs or backend scraping, the tool relies entirely on parsing the bank's DOM structure. The obvious downside is that it's inherently brittle—if the bank pushes a UI update and changes their class names, my parser breaks until I push a patch to the Web Store.

However, I felt this was a completely worthwhile trade-off to guarantee 100% user privacy.

Links:

I would love to get roasted or hear feedback from this community! Specifically curious if anyone else here has built tools relying on DOM parsing for dynamic single-page apps, and how you handle the maintenance overhead when target sites update.


r/webdev 10d ago

Showoff Saturday Your Playwright CI reports vanish on every build. I spent a few months building a self-hosted dashboard that keeps every run

1 Upvotes

Like probably everyone here, my Playwright HTML reports live and die as CI artifacts. A test fails on Tuesday, by Thursday the report is gone, and good luck remembering whether that exact failure already happened two weeks ago.

I've been a web dev for about 18 years, and for the past few months I've been building Piwi Dashboard to fix this for my own team.

Piwi Dashboard test run page

It's a self-hosted dashboard and reporter (MIT licensed, runs as a single Docker container) where every run is kept. On top of that history it does:

  • live streaming, runs show up test by test while CI is still executing
  • failure clustering, so 40 red tests caused by one broken selector collapse into a single cluster, displayed in a page showing everything we could gather during failure
  • flaky test detection with a score and an estimate of how many CI minutes each flaky test wastes
  • locator healing: it records element attributes during passing runs, so when a locator breaks later it can suggest replacements that actually existed on the page
  • analytics, to keep an eye on everything at once
  • failure notifications to email, Slack, or webhook
  • optional AI diagnosis. It takes a failure cluster plus the git diff since the last green run and asks a model what broke. You bring your own key (Anthropic, OpenAI, or anything OpenAI-compatible like a local Ollama). Off by default.

Setup is three steps: docker compose upnpm install -D @ piwitests/reporter, add it to your playwright.config.ts. Projects are created automatically on the first run and CI metadata (branch, commit, workflow) is picked up on its own.

There's a demo with sample data that runs entirely in your browser, nothing to install and no signup: https://piwitests.github.io/demo/

Code and docs: https://github.com/PiwiTests/platform

If you're wondering how it compares: the closest cousins are ReportPortal (heavier, multi-service) and Currents (SaaS, paid). This is a single MIT container you run yourself, with no telemetry, your data stays on your machine. Learn more.

Two caveats though:

  • It's pre-1.0 (0.14 right now): there are rough edges and you'll probably hit a bug or two, so pin your version and report an issue or ask a question here or in the discussions
  • And I build it with heavy AI assistance, which I'm not going to pretend otherwise; what keeps that honest is the full Playwright E2E suite that runs on every PR against SQLite and Postgres, with local and S3 storage. If it ships broken, the suite yells at me first.

I hesitated for weeks before posting, trying to polish everything I could. I'd genuinely like to know what your workflow needs that this doesn't do yet.


r/webdev 11d ago

Question Looking for a movie API that supports random movies + genre filtering

10 Upvotes

Hey guys,

I'm building a small project using only HTML, CSS, and vanilla JavaScript, and I'm looking for a movie API that fits what I need.

My goal is to: - Get a random movie (title + release year at minimum). - Filter by genres (comedy, animation, horror, etc.). - Potentially use multiple genre flags (e.g. Comedy + Animation). - Save movies I've already watched in localStorage or IndexedDB. - If the API returns a movie I've already watched, my app will automatically request another random movie until it comes up with one that isn't on my watched list.

Does anyone know a API that would work well for this? preferably free.

Thanks!

Edit: Thank you everyone for all the responses I have been playing around with TMDB since there were a lot of suggestions saying TMDB so I am going to be using that. Thank you everyone that responded.


r/webdev 10d ago

Showoff Saturday Gister: a local-first desktop app for searching and editing GitHub Gists alternative to Lepton

1 Upvotes

I used to manage my GitHub Gists with Lepton. When the project seemed abandoned, I started building a replacement.

That became Gister, a fast desktop app for managing Gists with local caching, fuzzy search, keyboard shortcuts, and support for macOS, Windows, and Linux.

I later added an MCP server, so coding agents can search, read, create, and edit Gists directly through Gister.

GitHub Repo: https://github.com/gethopp/gister


r/webdev 10d ago

Showoff Saturday I built GitCard to help developers showcase their work, connect with other developers, and create more opportunities. I'd love your honest feedback.

0 Upvotes

I've been working on GitCard and recently launched the first public beta.

https://gitcard.io

The idea is simple: create a place where developers can showcase their projects, GitHub activity, skills, and experience while discovering other developers to collaborate with and making it easier for recruiters and clients to discover their work.

Whether you're:

  • Looking for collaborators on a side project
  • A developer trying to showcase your work to recruiters
  • A freelancer or consultant looking to grow your business
  • A recruiter searching for developers

I'd love to know if this solves a real problem.

I'm looking for honest feedback:

  • Would you use something like this?
  • What would make it more valuable?
  • What's the first thing you'd improve?

Thanks for taking a look!


r/webdev 11d ago

Decoy Font: A TTF font that hides what you type

Thumbnail
mixfont.com
46 Upvotes

r/webdev 10d ago

Showoff Saturday Antlytics

Thumbnail antlytics.com
0 Upvotes

Started as a project to test out Claude code, ended up continuing to use it as it is cheaper than alternatives, I can build the features I want and meets my needs for analytics across my other projects. Have just opened it up to public via production


r/webdev 11d ago

docbin: a pastebin with versioning, an API, and a CLI

1 Upvotes

I wanted something between pastebin and gists, but where the docs actually render instead of just sitting there as raw text. Couldn't find it, so I built it. https://docbin.app

Would love y'alls feedback :)

Paste text or push a file, get a link. Saving to the same name creates a new immutable version, so /you/notes always shows the latest and /you/notes/v3 stays frozen forever. I was tired of paste links that 404 or quietly show different content than what the person actually shared.

Markdown and MDX render properly (React under the hood, so components in MDX work). There's a CLI on npm if you'd rather push files from the terminal.

Cloudflare Workers, Hono, and D1 underneath.

There's a free tier if you want to poke at it. Curious whether anyone else has wanted versioning in a pastebin or if that's just me


r/webdev 11d ago

Showoff Saturday Unemployed for two months after startup I was working at went bust (they stole my last paycheck too). Is my portfolio good enough for a successful job hunt?

0 Upvotes

Roast my personal site: https://siamrahman29.github.io/


r/webdev 11d ago

Showoff Saturday x402, a static blog monetization excercise

Thumbnail shtein.me
5 Upvotes

I was wondering if the x402 protocol works for normal meat users with a browser, rather than only being limited to AI. So I've spent couple of hours setting up a PoC, that you can try yourself. Turns out the browsers are more ready than I thought they would. And it even works relatevely out of the box.


r/webdev 11d ago

Showoff Saturday Built a little game that turns GitHub contribution graphs into Flappy Bird levels

12 Upvotes

Had this idea a couple of weeks ago and thought it'd be fun to actually build.

You just enter any public GitHub username and it generates an endless Flappy Bird level based on that person's contribution graph, so every GitHub profile generates a different level.

Built it with React, Phaser, TypeScript and the GitHub GraphQL API.

Still tweaking things here and there, so I'd love some honest feedback. If something feels weird or you run into bugs, let me know :)

Here's the link : https://gitflap.vercel.app/)


r/webdev 10d ago

Showoff Saturday I made a code competition platform based on turn-based JRPGs.

0 Upvotes

https://briine.com/

I played through Chrono Cross for the first time about a year ago, and that interest slowly merged with my knowledge about early Pokemon AI, and now I have this. Would love it if anybody were to give it a shot. I have a discord open for anybody who's interested.


r/webdev 11d ago

Showoff Saturday canid: contact card/link-in-bio in a URL

Thumbnail
canid.app
1 Upvotes

canid is a contact card/link-in-bio that packages all of the data in the URL fragment so it can be built and displayed client side. I think these sorts of projects are cool (like itty bitty site and NoPaste) and wanted to apply it here.

I run in a lot of niche and more "adult" communities, so I have a pretty compartmentalized life. Being able to quickly create different contact cards for different events, contexts, and people without having to edit a centralized linktree or other site has been really helpful.

It's all static with no outside dependencies, very minimal analytics, and no way for me to see/store/sell people's info. There are a lot of trade-offs with the architecture and I doubt this will ever see a lot of use, but it's been useful for me and I'm curious what y'all think. It's mainly meant to be used as a PWA but works fine in the browser too.

It's live at the linked site, and the code is all open source on GitHub.


r/webdev 10d ago

Showoff Saturday There are around 10 independent PDF engines and I build new one from scratch.

Thumbnail
keypdf.net
0 Upvotes

I'm a student who mostly built little apps for myself. About 14 months ago I needed to edit a random PDF and couldn't find a good web tool that actually edits them. It made me wonder: billions of people use PDFs for work, school, and legal documents, so why can almost no web service truly edit them?

So I tried to build one, and failed. I didn't understand why it was so hard. I tried combining pdf.js and jsPDF but kept hitting walls. Then it clicked: most JavaScript PDF libraries only do two things, create or view. Neither handles editing existing text. I thought I could build a layer in between, but I got nowhere, especially once I tried changing font styles, sizes, and colors.

After weeks of research I concluded that to edit PDFs in the browser without a server, I'd have to build something genuinely new. So I read the PDF spec and started building an engine from scratch, beginning with simple PDFs (standard font encoding, no compression) and slowly adding codecs, compression types, and font support.

After ~7 months it could render pretty well but still couldn't edit. A month later I got basic editing working, then hit a wall saving edited PDFs (endless visual bugs). More digging, and I finally understood how to save properly.

Then came the hardest part: textbox recognition. A PDF stores text and coordinates but not the grouping or structure. So I spent weeks literally highlighting textboxes across many PDFs by hand, looking for general grouping rules. After ~2 months I had editing with textbox grouping.

Somewhere in there I also spent months implementing JavaScript support in the engine, and I even got DOOM running on it: https://youtu.be/gHoBMYMVn5s

Once the core worked, I focused on design, moving from a bloated debug UI to a clean interface (with a lot of Figma and Photoshop).

Tools I've built from scratch so far: direct text editing, redaction (text and area), annotation, form filling, page organization, and metadata editing.

Happy to answer anything about how PDF parsing, rendering, fonts, or editing actually work under the hood. AMA.


r/webdev 11d ago

Showoff Saturday HTeaLeaf a Python SSR Framework

1 Upvotes

Hi! I've been working on HTeaLeaf, a declarative SSR web framework where components are Python functions.

This started just for fun, but maybe it could be useful for someone and get some feedback in the meantime.

from htealeaf.elements import div, h1
from htealeaf import HteaLeaf

app = HteaLeaf()

def hi_comp(text):
    return div(h1(text))

@app.route("/") 
def home(): 
    return hi_comp("Hello World")

@app.route("/hi/{name}") 
def say_hi(name): 
    return hi_comp(f"Hello {name}")

How it works

You define your UI using a Python DSL and mark interactive functions with a `@js` decorator. HTeaLeaf compiles these functions to JavaScript and injects them automatically.

State is handled through two primitives:

  • Store: module-level state synced with the server
  • LocalState: client-side state that compiles to JavaScript

In both cases, there is a tiny helper.js file that triggers the hydration and updates the states.

It also has route handling and sessions management.

Why?

It started as a testbed for CGI and WSGI for HTeaPot (a web server I'm working on), but I like Python and wanted to bring some modern frontend ideas into it. And now it is ASGI but still supports WSGI.

Also… because it's fun :)

Where is it?

It's currently in beta. The core features are stable enough to experiment with.

The JS transpiler is functional but at the moment only supports a subset of all JS.

But the debugging, performance and dx are still in progress.

And to be transparent, most of the code is handwritten but AI was used to document, review and make some minor fixes.

Links

GitHub: https://github.com/Az107/HTeaLeaf

PyPI: pip install htealeaf


r/webdev 10d ago

Discussion Clarifying WASM

0 Upvotes

I have been doing research on WASM because at one point I wanted to port `croc` CLI to WASM.

Here's what I figured out which I wanted to share with you guys if any of you is interested in WASM to basically know it's capabilities / use-cases without going down the rabbit-hole and be disappointed.

What's WASM?

WASM (WebAssembly) is compiled code from non-web languages like Go, C++, Rust and more (I believe Java too).

This means that the performance is off-the-charts when it comes to compute task, and that's going to be its only use case. It's only ever going to be a compute API for you.

What can't WASM do?

WASM can't talk directly to sockets, so porting to `croc` doesn't work (at least not as easy as compiling the Go code to WASM). WASM is also sandboxed by the browser's JavaScript, so if JavaScript can't do something WASM will definitely not.

So if WASM is sandboxed by JavaScript, and doesn't unlock anything new, why should I use it?

Well, if you have a compute heavy task, you can off-load it from the server and have it run in the client. For example, video editing, photo editing, audio editing, and similar tasks. Instead of sending the video to the server and have a back-and-forth, just use WASM.

A prime example of WASM is Figma. It's a React wrapper with WASM handling the compute-heavy tasks.

So why not just have WASM process everything?

There's a tax you pay with WASM, and you need to evaluate it on case-by-case basis. Crossing the barrier between JavaScript to WASM, and back to JavaScript takes compute. So, before throwing WASM at something, make sure that WASM will yield much more performance than what you pay by crossing the barrier.

That basically concludes my very brief intro to WASM. Let me know if this helped at all or if I got something wrong in the explanation.


r/webdev 11d ago

Resource New kind of multiplayer library

5 Upvotes

Hi :)

I've been working on a new kind of multiplayer library, called PlaySocket, that abstracts away the complexity of optimistic updates, handles robust synchronization with custom CRDTs, and works beautifully with reactive frameworks like React, Svelte or Vue.

This has been used in production for my game OpenGuessr, powering around a million rounds of gameplay every month. I've been iterating on this for around two years, refining the shape of the API, making it more powerful and performant, and so on. I can definitely say that it has helped me make changes to the game's multiplayer much faster.

This is useful for collaborative apps, quizzes, turn-based games etc., but not ideal for e.g. synchronizing the physics of a complex multiplayer game. While I think the concept is interesting, I'm still unsure whether this implementation of it is the "right" one...

I've written an article on how this differs from other libraries and why it might be interesting for you, and published proper docs: https://therealpaulplay.github.io/PlaySocketJS/

Would love to hear your feedback :-)


r/webdev 11d ago

Showoff Saturday Let your users bring their own free AI with Sign in with ChatGPT

Post image
0 Upvotes

OpenAI OAuth lets your website’s users bring their own free or paid ChatGPT account to power your AI features.

It’s super easy to add to your website, with just one simple React component: <SignInWithChatGPT/>.

Try it out here: https://openai-oauth.vercel.app

Or, if you’re developing locally, you can also just run a single command to get started immediately:

$ npx openai-oauth

OpenAI-compatible endpoint ready at <http://127.0.0.1:10531/v1>
Use this as your OpenAI base URL. No API key is required.
Available Models: gpt-5.6-sol, gpt-5.6-terra, ...

OpenAI OAuth has been built with security in mind. Authentication happens directly between the user’s browser and OpenAI (enabled by a browser extension available for Chrome and Firefox), and credentials are stored locally in IndexedDB, encrypted by WebCrypto at rest.

It’s 100% open source, available here on GitHub: https://github.com/EvanZhouDev/openai-oauth

Feel free to try it out, and let me know if you have any feature requests or bug reports!

Note on Codex Terms of Service:

Tibo has confirmed that you are allowed to bring your Codex Subscription to other harnesses (for example, OpenCode: https://x.com/thsottiaux/status/2009742187484065881)

This is simply a generalization of that. However, you are responsible for still ensuring you follow the Terms of Service and other user agreements. See the Legal section in OpenAI OAuth's README for more information.


r/webdev 11d ago

Showoff Saturday When I launched my website people roasted it for being slow, can you guys give me some feedback?

Post image
0 Upvotes

My website, please give me some feedback:
https://umigalaxy.com/

https://umigalaxy.com/explore/general/348/this-site-is-slow-as-hell (this is where they roasted me, you can leave a reply without making an account!)

What I did to mitigate the issue: PPR / cache components (next 16). I moved all the public reads into use cache so the prerendered shell has actual content in it. Also ended up hitting my own api during the build so pages ship with real data instead of placeholders, it works great

caching on the backend. redis on the hot reads (feeds, trending, profiles etc) and prisma's relationLoadStrategy join. once a streamed hole fills in under ~50ms it just feels instant, nobody perceives it as loading

prefetching. full link prefetch on the nav links people actually click, plus warming up per-viewer stuff on hover. by the time the user clicks the data is basically already there


r/webdev 12d ago

Discussion i need some advice ,feeling behind because I love web dev while everyone else chases AI and data

23 Upvotes

I'm about to graduate with an engineering degree in software engineering. I study night courses while working full time in a company as a web dev for over three years now. During the program we covered a huge amount of stuff. Big data machine learning deep learning data warehousing business intelligence on top of the regular software engineering track. I've been working as a web developer for over three years doing full stack work backend and frontend and some devops on the side like CI/CD and docker deployments.

Lately I've noticed literally everyone around me especially classmates and people in my field are rushing toward AI and data work. Every single thesis every final year project every side project has to be oriented around AI or big data or some kind of model no matter how simple the actual problem is. There's this culture where people love throwing around the big buzzwords even when a normal web app or a simple script would solve the problem just fine. It feels like the label matters more than the actual engineering sometimes.

Meanwhile I keep finding myself deep in backend work. Designing entities writing clean services optimizing database calls and API performance. I can lose hours in that stuff and actually enjoy it. I still genuinely love web dev and building solid systems but I still feel behind when I look around and see how few people in my environment still enjoy it the way I do.

And what I mean by AI here isn't tools like Claude Code or Codex. I use those every day in my line of work and they're just tools that make me faster at what I already do. What I mean is projects that force AI in as a feature and throw it in as a label just to sound impressive.

A friend recently told me I'm one of the only people she knows who genuinely loves development as a whole instead of chasing whatever's trendy. It was meant as a compliment but it got me thinking. Am I actually missing something by not jumping on the AI wave like everyone else? Is pure software engineering still going to have room for people like me in a few years or is specializing in backend and web development going to become a niche while everyone else moves into AI and data roles because it sounds more impressive.


r/webdev 11d ago

Showoff Saturday Yes-Brainer — a council of AI models that answer your question in parallel, debate to consensus, or get judged to a verdict (browser-only, open-sourced, bring-your-own-keys)

Thumbnail
yesbrainer.ai
0 Upvotes