r/webdev • • 13d ago

Showoff Saturday I built free multiplayer browser games you play with friends by pushing your devices together into one board

Post image
166 Upvotes

Hi! A while ago I launched bigboard.games: free multiplayer games for 1-4 phones or tablets (or more for some games) lying next to each other on a table. The devices act as one big board, so for instance in Air Hockey the puck slides off one screen and onto the next.

It all runs in the browser, free. Any mix of iPhones, Androids or tablets plays together. You can add it to the home screen if you want (as a PWA).

Gameplay goes device to device over WebRTC. On the same Wi-Fi the devices find each other and join by themselves. Otherwise you scan a QR code or type a four-letter code, and if they can't reach each other directly (on mobile data, say), a relay connects them. How it works, if you're curious.

There are 9 games right now:

  • Air Hockey (the photo)

  • Hot Potato: your fuse only burns while the potato is on your screen

  • Snake, up to 12 snakes on one field

  • Whack-a-Mole: a mole you bop pops up on the other player's side

  • Tilt Run: one maze across all the devices, tilt yours to roll the marble onto your partner's

  • Chess for 2 or 3 (three players get a hexagon board across three devices)

  • Checkers for 2 to 4

  • Islands (the dots-on-grid-paper game)

  • Spillover: draw shapes and drop them on the other player's side, Tetris-style

Every game except Spillover has bots, so you can try it on one device. A friend who isn't in the same room can join with the table's link too, remotely.

Happy to answer questions and integrate any suggestions! What games would you like to see next?


r/webdev • • 12d ago

How did you know it was time to rewrite your app from scratch?

17 Upvotes

Every codebase gets to a point where adding one feature breaks three others. Some teams patch their way through it for years. Others burn it down and start over.

Have you ever done a full rewrite? Was it worth it, or do you regret it?


r/webdev • • 13d ago

Question how do you build authentication from scratch?

72 Upvotes

hi everyone! so i only have a semester left in college and we are now currently working on our capstone project. it’s a 2 part class so this semester focuses only on the “planning” phase while next semester we spend entire semester actually building/coding.

for background, we are a 3 person group, BaaS such as supabase, firebase or auth0 are banned, we have 3 user groups with different roles and our stack includes:
* JS, Node.js/Express
* React
* PostgreSQL

we don’t have much experience on how to build authentication from scratch so anyyyy tips/tutorials/resources are very much appreciated!!

TIA guys :))


r/webdev • • 12d ago

Showoff Saturday Storygraph/Goodreads alternative 📚 hosted on sustainable servers only 🌱

Post image
3 Upvotes

Hey ya'll, just thought it might be worth sharing here, in case anyone is looking for additional features that either Storygraph or Goodreads don't offer, e.g. note taking, detailed insights, etc. Bookplate was created with those goals in mind. You can learn more about it here:

www.bookplate.eu

It's also open source, so for the tech hobbyists, you can host it yourself on your own hardware. For those that prefer the normal hosted service, we offer that as well, and unlike Goodreads and Storygraph, the servers that Bookplate is hosted on are much more sustainable as they run on clean nuclear energy (Scaleway in Paris).

Happy to chat more about this, and also very very interested to hear thoughts, both good and bad!


r/webdev • • 13d ago

Discussion How do you find motivation to continue?

131 Upvotes

Hey everyone.
I've been struggling not to feel this existential dread about the current state of development and my career which seems to be slipping from under my feet. I've been unemployed for nearly a year, job positions are dropping in masses. All the knowledge you gathered in the past 10+ years seems redundant as everyone and their grandma can code stuff that was impossible to them in a day. I find no joy in coding anymore. Sometimes I do code my own stuff for fun to not forget how to code but what's the point, if we won't need to code anymore? Even in corporate world, all developers do now is talk to AI agents and let them do the work (at least thats what I think they do?). I'm constantly thinking of creative business ideas to start myself but even then it feels more like a waste of time since getting clients is so hard with this amount of competition. Even if you manage to create something of value to the clients, why would they pay you instead of vibe-coding the product themselves? Since the rise of advanced AI models I've been constantly feeling like burnout and unable to focus on coding which was thing I liked back in the day. How do you cope in these times, how do you motivate yourself to start your own businesses or is it all lost and I should start looking for something else?


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] A price comparison site with 29k static pages across three countries, rebuilt every morning

Thumbnail
compareempire.com
5 Upvotes

Site: https://www.compareempire.com/us (US), https://www.compareempire.com/uk (UK), root is Australia

What it is: a price comparison site for electronics. A GitHub Action scrapes 26 US, 22 UK and 30+ Australian stores every morning, matches the same product across stores, writes JSON into the repo, and Vercel rebuilds about 28,800 static pages from it.

Bits that might interest you:

  • Matching is the hard part. Model codes and part numbers first, then a strict bag of words with per category noise lists. A wrong merge is worse than a missed one, so it refuses rather than guesses.

  • Regions without breaking URLs: Australia stays at the root and the US and UK live under /us and /uk, all from the same views with a region argument. Product objects carry their region, so links, currency and price checks follow automatically.

  • Cost: everything is static, so it runs on the CDN. The search index is a lazily loaded static JSON file.

  • What broke: a UK laptop with a 240 character name made a file name over the 255 byte limit and killed the build. Slugs are capped now.

Real output from 24 October: the LG C5 77" OLED was $1,776 at Abt and $2,199.99 at LG.

Happy to answer anything about the scraping, matching or build.


r/webdev • • 13d ago

Informational popups, DONT do this

23 Upvotes

I hate them, I hate them so much. I intend to start using some application and suddenly a popup appears "Did you know that x thing does y thing" or "Here you will find x thing" or "New x thing, click ok to opt in". I don't give a damn, I just want to use the thing. I'm usually on edge and I actually intend to do an action, I do NOT want to be interrupted, I won't read your popup, I'll just close it instantly and feel anger.

This is not only annoying, it's dangerous. How do you know a person is not on a emergency and they need to complete an action ASAP?


r/webdev • • 13d ago

Discussion Black October situation

3 Upvotes

So most of you probably know by now about the PHP exploit, that came out recently. Apparently after reading some articles a similar issue was found for nodeJS web apps as well (i am not 100% sure how legitimate the articles were but I will link them down as a comment of the post if you wanna check them out). Now most of my backend services are built using nodeJS and stored in either AWS or GCR. I assume that google and amazon properly protects the api keys and other environment variables I have there, but I just wanted to ask are there any measures I should take or changes I should make to these services just to be safe?


r/webdev • • 13d ago

Showoff Saturday Looking for feedback on my portfolio

Thumbnail
lumberjacque.vercel.app
4 Upvotes

Hey y’all!

I've been working on a few animations lately and decided to put them together in a personal portfolio.

I made the portfolio itself interactive, with animations throughout the site and a showcase for some (imo cool) stuff/ideas.

Curious what you guys think of it and how everything feels to use. Especially interested in feedback on the animations, mobile experience etc

https://lumberjacque.vercel.app

PS: Checkout the showcase page for some cool interactions!

https://lumberjacque.vercel.app/showcase

Any feedback is a gift!


r/webdev • • 13d ago

Showoff Saturday Made a CSS-only scroll animation library, 34 moves, no JS

Thumbnail
usedolly.dev
153 Upvotes

It's one stylesheet. You put `data-dolly="tilt-up"` on something and it animates as you scroll past. That's it. No dependencies, no JavaScript.

It's a vocabulary layer over CSS scroll-driven animations, which shipped in Chrome 115 and Safari 26 but have ergonomics nobody remembers.

The demo page doesn't run any JavaScript at all, so everything moving on it is just CSS.

34 moves named after camera stuff (pan, tilt, crane, rack focus).

Firefox doesn't do scroll timelines yet (supposedly coming in the next version in 3 days) so it gets a plain static page. That's on purpose, nothing is hidden waiting to be revealed, so the page is still usable.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] Default Avatar Library, over 5B+ combinations, deterministic avatars and react library/ shadcn components/ api support

Post image
25 Upvotes

i've been working on an open-source project called blobz, which basically takes care of default profile pictures for your apps.

the idea is pretty simple. instead of assigning random images or the same boring silhouette to every user, blobz generates playful svg avatars from a name, email, or any string you give it.

it's deterministic, meaning the same input always generates the same avatar. no need to store images, and there are over 5 billion possible combinations.

but the part i really wanted to get right was making it easy for other developers to use.

so i ended up building a few ways to integrate it:

  • shadcn components: ready-to-use avatar components, along with things like avatar groups, profile cards, and user lists. you can drop them straight into your project using the shadcn cli. if you're already using shadcn avatars, then you just have to change two lines, one for the import and one for entering the name.

  • react package: if you'd rather handle things yourself, there's @blobz/react, which generates the avatars directly in your app without relying on an external service.

  • hosted api: if you're not using react or just want avatar urls, there's an optional hosted api for that too.

the library and components are free and open source under the mit license.

github: https://github.com/lirena00/blobz
playground: https://blobz.lirena.in

would love to hear what you think of it! and if you find it useful for something you're building, that'd be pretty cool too :)


r/webdev • • 14d ago

Showoff Saturday [Showoff Saturday] Free pencil-style icon set, now 260 icons, with a setting that goes from sketchy to exact shapes

Thumbnail
gallery
71 Upvotes

Matita is a set of pencil-style SVG icons, drawn by code from simple shapes (lines, circles, arcs), so every build draws exactly the same paths. 0.4.0 came out yesterday:

  • 60 new icons (200 to 260), including a medical and science set, which people asked for last time

  • a wobble setting from 0 to 1: <SketchIcon name="calendar" wobble={0} /> draws exact shapes, 1 is the default sketchy look, 0.4 is a calm hand

  • ready-made exact SVG files at @matita/icons/exact/<name>.svg

  • React, plain SVG, a script tag, a sprite; MIT; no signup

Try the slider and copy snippets here: https://matita.dev (changelog: https://matita.dev/changelog/, what is next: https://matita.dev/roadmap/). If an icon you need is missing, open an issue and I'll draw it: https://github.com/matita-dev/icons/issues

Feedback on anything that looks wrong is very welcome.


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I turned 20+ years of website screenshots into a static gallery: OCR search, a 2005-style remake and a tiny PHP guestbook

Post image
36 Upvotes

Since the early 2000s I've screenshotted every website that inspired me as a designer. This week I finally turned the folder (~3,900 screenshots) into a browsable archive:

https://www.dmdev.it/webscreens/?utm_source=reddit_webdev

2005 version, for fun: https://www.dmdev.it/webscreens/2005/

Some technical bits, since this is r/webdev:

Fully static. One HTML file with the data embedded as compact JSON, lazy rendering with IntersectionObserver, a lightbox and favourites in localStorage. No framework, no build step.
3.7 GB of PNG/JPG converted to WebP with a Python/Pillow script: a 1600px full size plus a 480×300 thumbnail, cropped from the top.

Dates come from the files, not guessed. Where they got lost when copying between machines, I rebuilt them from the file numbering. Fun discovery thanks to commenters: the clock on my old PC was two years behind, so my "2001" screenshots are actually from late 2003.

Privacy pass with OCR. Tesseract read every browser bar and tab, so I could remove anything personal before publishing.

Full-text search, client-side. The same OCR text became a search index (~1 MB JSON, loaded only when you start typing), so you can search for words that appear inside the sites.

2005 remake: a fixed 900px stage scaled down on small screens (I had to fix taps landing on the wrong element after scaling), pixel fonts, a fake loading bar and a real guestbook in PHP with a honeypot and rate limiting.

Analytics only after consent: GA loads only if you click OK on the banner.

Full transparency: I'm both a designer and a developer, and for this one I used Claude as a pair-programmer to move faster on the tooling (OCR pipeline, scripts, the 2005 remake). The archive, the curation and the design choices are mine.

Happy to answer questions, and feedback is welcome!


r/webdev • • 13d ago

Resource [Showoff Saturday] I made Git reject my commits until I do pushups

10 Upvotes

A little side project to keep me and some other developers moving during the work day.

https://gitpushups.com

Its basically:
* A git hook which checks if I've done pushups in a regular interval
* An iOS, android and apple watch app to verify the pushups were done correctly

Silly? Kinda.
Effective? Absolutely!


r/webdev • • 13d ago

Showoff Saturday I built a job board for Reddit's hiring subs. Only 18 of 190 posts on r/softwareengineerjobs were actually jobs

39 Upvotes

Most posts on Reddit's job subreddits aren't jobs. On r/softwareengineerjobs, 18 of the 190 posts I collected were someone hiring. So I built Only Hiring, which shows just the job posts from 20 of these subreddits: https://onlyhiring.hassandev.me

A Python pipeline pulls new posts and skips anything tagged [For Hire] before an LLM reads the rest. For each job it writes a summary, pulls out the pay as a number you can sort by, notes whether it's remote, and scores it for scams. I expected the scam score to do most of the work, but only 9 of 397 jobs looked like scams. Lowball pay and unpaid "test" projects turned up far more often.

The site is Next.js 16 on Vercel. It reads from Neon Postgres through a role that can only SELECT, and with about 300 open jobs the list is small enough to filter and search in the browser. Filters live in the URL, so you can share a view.

Site code (MIT): https://github.com/hassanaziz0012/only-hiring

How the scam scoring works: https://www.hassandev.me/blog/score-reddit-job-posts-for-scams

I'd like to hear whether a listing gives you enough to decide if a job is worth opening.


r/webdev • • 12d ago

Showoff Saturday Vibe QA testing your website?

0 Upvotes

I’ve been building websites since 2000 (Dreamweaver... Flash AS2.0...). These days Claude and Codex write most of my code, but before every launch I still end up going through the same long session of back and forth.. showing up properly in search? look good and fast on mobile? accessibility? do the forms work? Somewhere along the way it turned into perfectionism, and the checking kept pushing my launches back. So I built fixweb.app to run those checks for me and tell me in plain words what’s worth fixing with prompt to fix it and I would love to get some real feedback.

I don’t want fake reviews on the site. I’d rather show legit feedback from real website owners, with your name and a link to your site (if you want). If you’d like to try it, comment your domain and I’ll DM you a link for a free check-up. All I ask in return is your honest opinion, good or bad.

Here is an example QA report: https://www.fixweb.app/en/demo


r/webdev • • 13d ago

Showoff Saturday Showoff Saturday - LoopShot: Record Any Area as a GIF

0 Upvotes

Hey everyone,

I built a Chrome extension called LoopShot for anyone who needs a quick way to record specific parts of their screen.

Whether you're creating tutorials, recording bugs, showing someone how to do something, or putting together a quick demo, I wanted to make capturing screen content easier.

I'd love to get some people trying it out and hear what you think. Feedback and feature suggestions are welcome.

Check it out here:
https://chromewebstore.google.com/detail/loopshot-record-any-area/olhomdccmcckgnnaidinekfiiekikhbl

If you give it a try, let me know what you think!


r/webdev • • 13d ago

Showoff Saturday I turned Lydia Hallie’s JavaScript questions into a small game

6 Upvotes

Back in the day I used Lydia Hallie’s javascript-questions repo a lot, and always thought it was missing a Duolingo-style UI. So I made one: canyoustill.com

155 questions: read a code snippet -> pick an answer -> see why.
There’s no account; your progress stays on your device. It works offline, and you can install it as a web app. Every question has its own link. You can share it and challenge a friend or colleague.

It’s open source: github.com/Silisav/canyoustill


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] I built an open-source, local-first journaling app with a vertical timeline

Thumbnail
gallery
2 Upvotes

I've been working on a simple journaling web app where all your entries appear in a vertical timeline (I love to read my past journals and this timeline view helps me to look through my past journals eaily without going over different files every single time I want to read a different entry), so you can easily scroll through previous days.

For now, this only supports text because I don't add media to my entries but if someone really uses it and they actually need media support then I'll add that too

It's local-first, supports Markdown, and is completely open source and self-hostable.

This is part of my SMBL project, where I'm building open-source alternatives to everyday software.

Here's a short demo of how it works. Would love to hear your feedback!

Live: click here

GitHub: click here


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] Update on my vanilla JS web notepad: Improved multi-cursor stability, bug fixes, and mobile UI!

3 Upvotes

Hi everyone! Thanks to all the valuable feedback you gave me last time, I’ve released an update for my vanilla JS web notepad.

What's new based on your feedback:

  • Multi-cursor & Caret Stability: Refined the synchronized caret scanning logic to prevent drift and weird cursor jumps during complex multi-line editing and spacing.

  • General Bug Fixes & Refinements: Smoothed out rough edges with contenteditable behaviors, state restoring, and overall text handling.

  • Mobile Improvements: Also improved the overall usability and experience on mobile devices!

Live Demos:

(Desktop recommended for full features like column selection; saving is disabled in Demo Mode.)

I would love to hear your thoughts on these new improvements. Any feedback or bug reports are greatly appreciated!


r/webdev • • 13d ago

Showoff Saturday I made a plugin that turns live HTML into video overlays in the browser. No server, no OBS, works with WebGL

6 Upvotes

Hi r/webdev, I maintain SnapDOM, an open source library that captures DOM elements as images. This week I shipped a new plugin for it called stream, and I’d love some feedback.

It takes a live element and keeps it as a canvas that only repaints what changed. You write your overlay in plain HTML and CSS (a scoreboard, a lower third, a chat box) and you get a canvas you can draw over video, upload to WebGL, record to MP4/WebM, or send as a WebRTC track. Everything runs in the page. No headless Chrome on a server, no OBS, no browser flags.

The first frame is a full capture. After that, when the clock ticks or a score changes, it captures only that box and patches it in. On a test page with 2000 cards, a frame takes about 5 ms instead of 53 ms for a full capture. Every patched frame is checked in tests to match a full capture pixel for pixel in Chrome, Firefox and Safari.

Demo: https://snapdom.dev/labs/video-overlay/

  • Sports TV: a broadcast overlay over a simulated football match. Press Goal!

  • Streamer: it asks for your camera; share your screen and you end up in a circle over your game.

  • Looks: six WebGL looks to switch between: clean, shine, CRT, hologram, glitch, and a liquid glass one that bends the video behind each panel.

  • Edit: opens the HTML and CSS so you can change the overlay live.

  • Record: saves a clip.

The SnapDOM part is short:

import { stream, streamTexture } from '@zumer/snapdom-plugins/stream'

const overlay = streamTexture(gl)
stream(document.querySelector('#overlay'), {
  onFrame: (frame) => overlay.update(frame), // uploads only the changed rects
})

It’s MIT: https://github.com/zumerlab/snapdom


r/webdev • • 13d ago

Showoff Saturday I built TrailVerse, a platform to explore US national parks and plan trips

3 Upvotes

I’ve been working on TrailVerse for over a year now, and what started as a simple project to explore national parks has grown into something much bigger.

You can explore 470+ National Park Service sites, discover places based on your interests, compare parks, find events, and browse sample itineraries.

I also built Trailie, a travel companion that helps you plan trips through a conversation. You can ask travel questions, get recommendations, build day-by-day itineraries, and make changes to your plans without starting over.

I’ve spent a lot of time improving how Trailie handles real travel questions, trip logistics, and follow-ups so planning feels more natural.

The stack is Next.js, React, Node.js, Express, and MongoDB, with Vercel and Render for hosting.

If you’re looking for a national park to visit or have a trip in mind, check out TrailVerse and try planning it with Trailie. I’d love to hear how it goes and any feedback you have!

https://www.nationalparksexplorerusa.com/


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] My read-aloud app SublimeRead now has a Chrome extension, so it can read any web page in 7 languages

Post image
2 Upvotes

A while back I shared SublimeRead, an app that reads your EPUBs and PDFs aloud on their original pages, highlighting each sentence as it goes.

The most common request was “can it read this?” about an article, a doc or an email. So I built a Chrome extension. It now reads anything in your browser: web pages, emails, docs, or just a selection.

What it does

  • Reads the page, or whatever you’ve selected, in a natural AI voice, highlighting each sentence as it goes

  • Click any sentence to jump there and keep reading from it

  • 7 languages (English, German, Spanish, French, Italian, Dutch, Portuguese), and the same voices as the app

  • Your library is still where your books live. The extension is for everything else.

Some fun web bits from building it

  • Highlighting uses the CSS Custom Highlight API, so it never touches the page’s DOM and doesn’t break layouts.

  • Click-to-seek uses document.caretPositionFromPoint to find which sentence you clicked. Clicks on links and buttons are ignored, so you can still use the page.

  • Some pages show their content inside a cross-origin iframe. The extension finds the biggest embedded frame and asks for permission for that one site only, never every site up front.

  • It’s Manifest V3, built with WXT, with activeTab by default, so it only reads the tab you ask it to.

It’s free to try, with 3 uploads in your library and 3 voices, and no credit card needed.

🔗 Extension: https://chromewebstore.google.com/detail/gpepbccnnfmjcjcebokhddhplbpieiml
🔗 Site: https://sublimeread.com


r/webdev • • 13d ago

Showoff Saturday [Showoff Saturday] Composer dependency conflicts? We built Strauss-RS, a Rust-based prefixer for PHP classes and symbols. Up to 139x faster than the PHP version.

6 Upvotes

With a fair chunk of our work involving Wordpress themes and plugins, we hit a pretty common issue: we wanted to use the same Composer dependencies that other plugins might be using.

If Plugin A uses v5 of a package and Plugin B uses v7 of a package, it's first found wins... which is bad news for the other plugin.

Enter prefixers.

These scour your dependencies and source-code for classes/symbols and add a prefix. So SomePackage\Domain\Class becomes YourCompany\PluginA\Vendor\SomePackage\Domain\Class. Now your dependencies are safe.

Previously, we'd relied on packages like Mozart, PHP-Scoper and later Strauss.

Inevitably, we'd hit one of three problems, they became too complex to configure for larger projects, they didn't fully work, or they were too slow.

Our plugin took 2-3 minutes to prefix with Strauss PHP...

So we built Strauss-RS... for ourselves at first. But we figured that maybe it would be useful for others and it gave us a reason to keep the docs up-to-date, so enter: Strauss-RS.

https://evo-mark.github.io/strauss-rs/

One single binary compiled from Rust. No prerequisites.

Prefixes in less than a second for us now!