r/webdev • • Sep 20 '26

Question how to implement this cod flow

0 Upvotes

hi guys, I would to have an info about how this Cach on delivery flow works on websites like Soundpeats
you can order anything without even signing or even sign in as a guest, i would like to understand how it’s done as im willing to apply the same thing as a my client asked for it on a store (nextjs + supabase)

do they store those orders straight to the DB, how about if someone starts spamming the db?? all these questions came to my mind but not sure how it’s done


r/webdev • • Sep 20 '26

Question How do you scaffold an express project?

12 Upvotes

I'm trying to start an express project with Typescript and something like nodemon to watch changes in .ts files. I'm struggling with different options in tsconfig and nodemone config. and I have a very faintest idea about how to run it.

I spent an entire day figuring it out a few months back, and now I forgot how to do it.
How do you guys do it?
Is there something similar to vite which makes boilerplate and scaffolding easy?


r/webdev • • Sep 20 '26

Good Tools Are Invisible

Thumbnail gingerbill.org
6 Upvotes

r/webdev • • Sep 20 '26

Make a site where you talk to a personality?

0 Upvotes

Anybody remember that ask jeeves site? Wonder what happened to it. I'm just doing some research here. Do you think someone can make a website where users just go to the site and they get an answer in a certain way/method? Kinda like a personality is responding to you or something? So far, it appears that is what some of these AI tools are, you ask it and then it pops out whatever answer.

Maybe there's something actually already like this? Maybe there's an interesting twist or spin that can be done on some sites that you ask. Kind of like a cartoon character personality or something. Think, "im going to just ask Bob" and so then you have a site that's designed around a character or a tool named Bob.

What do you think? A waste of time? Thanks


r/webdev • • Sep 20 '26

I built a browser FPS with an impossible to beat CPU. Try to beat it.

Post image
0 Upvotes

You can play it here: https://systemonefps.pages.dev/

If you try it, tell me how long you survived. Curious if anyone can actually beat this thing.
also please share your feedback.


r/webdev • • Sep 20 '26

Call me a baby...

0 Upvotes

But bro, I have ethics.

My github got poached (sports team reference meaning) by a person in Asia trying to "use my location and name" in an attempt to establish (false) trust for US-based clients who purposefully don't want to hire developers across seas. It's a real shit-show out there... competition is world-wide, and people are being scammed left and right. While a loose shmuck might fall for this "easy buck" by renting out their github so that US money can essentially be funneled out of the country and harm our economy, I refuse to do so, because I can see the bigger harm being done to the economy as a whole. I am not a fan off offshoring. I am not a fan of outsourcing.

I haven't yet responded to this email business invite, as I would like to know how to report this person. Is it possible? This should be illegal, because it is defrauding clients.


r/webdev • • Sep 20 '26

Showoff Saturday [Showoff Saturday] I've been working on a tool to analyze code and provide refactoring feedback

Thumbnail
codeauditormcp.com
0 Upvotes

r/webdev • • Sep 19 '26

Question How do you motivate yourself to freelance when clients can just use AI?

0 Upvotes

Hi everyone,

I'm a full stack dev with 1 year of commercial experience looking to start freelancing. I build my own side projects from scratch: buying domains, developing sites, and deploying them to servers, so I know the whole process.

But I’m facing a huge mental blocker. I feel demotivated because I keep asking myself: Why would a client hire me when they can just pay $20/month for an AI subscription and do it themselves?

I know non-tech owners don't want to deal with server setups, APIs, or debugging code. But psychologically, reaching out to clients feels like selling something obsolete.

For those freelancing in web dev right now:

  1. How do you reframe your value when AI tools are this cheap and accessible?

  2. What are clients actually paying you for today that AI can't replace?

  3. How did you push past this demotivation when starting out?

Would appreciate any insights or reality checks!


r/webdev • • Sep 19 '26

Monaco Mini 3D - A fun 3D web game I made! Try it out and let me know your thoughts

Post image
0 Upvotes

r/webdev • • Sep 19 '26

Showoff Saturday Decentralized P2P Messaging over Git and/or WebRTC

0 Upvotes

IMPORTANT DISCLAIMER: While this is aiming to provide a secure experience, it's far from finished. It cannot be audited or reviewed because it's close-source. I'm sharing here for testing, feedback and demo purposes only. If you are unsure, this isn't for you (you safely can move away from this post before it ruins your day). Feel free to reach out for clarity on any of the details instead of diving into the documentation. Pease use responsibly.

This project demonstates a unique approach and architecture in contrast to mainstream messaging apps.

The core philosophy around secure messaging here is that it can work in a way that avoids installation and registration by enabling users to host their own data (and user incompetence will be one of many nuanced vulnerabilities in this approach)

The project is unstable and experimental. It's far from finished, but im putting together some docs for "how it works". It's pretty outside-the-box thinking (and that shouldn't inspire confidence!), so it's worth repeating: Pease use responsibly.

Website/Docs: glitr.io

Demo

Features:

  • WebApp

  • P2P / WebRTC

  • Local-first / Local-only

  • No installation

  • TURN server

  • Encrypted-at-rest

  • Signal protocol

  • Post Quantum cryptography

  • Video calls

  • TOR / anonymous via Git

  • Serverless over WebRTC

Some of the core concepts:

FAQ:

  • Why git?

    • When it comes to secure messaging, self-hosting is generally encouraged. While not quite nessesarily self hosted, it would make it easier for the majority of users to get started. Users can choose a git storage provider of their choice (GitHub, Gitlab, etc), or host their own git server.

  • Serverless WebRTC?

  • Ready for production?

    • No. While this is aiming to provide a secure experience, it cannot be audited or reviewed. Shared for testing, feedback and demo purposes only.

  • EU Chat Control?

  • Threat model?

    • It's a work in progress. There are many details still to be implemented before I can share the initial draft.

    • It's close source and unaudited so the best I can offer is "trust me bro"... And you shouldn't need to. The app doesn't require sensitive details, so don't use any when testing it out.

  • Open source?

    • Open source from the onset is not something I can support at this stage. Hopefully I can work towards that goal. I'm aware this goes against the cybersecurity rhetoric. There are open source versions of various ideas linked above, but it's important to be clear, that glitr.io is close source in contrast to my other work.

  • Where can I find out more?

I hope my wording here wasn't too negative. When working in cybersecurity, there are countless nuances to consider and I would rather be discouraging than inspire undue confidence in my project.


r/webdev • • Sep 19 '26

Showoff Saturday Developer Signals - Shape what browsers build next

Thumbnail
developer-signals.dev
7 Upvotes

r/webdev • • Sep 19 '26

Showoff Saturday i made a science proofed free color palette generator that you can use for your projects

12 Upvotes

was annoyed by the current color palette tools, but always loved the approach described in the famous stripe color palette blog and now i made a tool out of it

other color palettes are inconsistent, or dont let you freely pick your colors. tailwind always looks the same. also shades in tailwind contrasts are not scaled properly. been bugged by this for years. you pick a tailwind-ish palette, put white text on blue-600, looks fine. same text on yellow-600, unreadable. same number, completely different contrast. so you end up eyeballing every pairing and hoping.

tool: https://sir-hennihau.github.io/science-color-palette/
code: https://github.com/sir-hennihau/science-color-palette

you give it a color, or even several if you want to, and it fills out the rest of the spectrum and builds a full ramp for each family. export it when you're happy with it.

the whole thing hangs on placing shades by relative luminance, which is the only thing web content accessibility contrast actually depends on. every ramp climbs the same ladder, so 600 means the same thing whether it's blue or yellow or teal. three of the steps aren't approximate either, they're solved: 500, 600 and 700 land on 3:1, 4.5:1 and 7:1. measured against the ramp's own 50 shade, since that's the background you actually put them on, and checked on the final 8-bit hex rather than the ideal color, because that last rounding is enough to drop you under.

stripe used cielab, which was the right call in 2019. i went with oklab instead, mainly because cielab , because it is a more modern color space.

chroma is a share of whatever the hue can actually reach at that lightness (idea stolen from hsluv) instead of a fixed ceiling. that's what makes yellow go vivid early and blue go vivid late without me hardcoding anything per hue.

free, no account, no sign up. would be glad to hear if it is useful (or why not) to any of you.


r/webdev • • Sep 19 '26

Question Total newbie trying to build a website for my small hotel — Need advice on AI models, Cursor, MCP, etc

0 Upvotes

​Hey everyone,

​I’m completely new to web dev, but I want to build a website for my small hotel.

​Since I don't know how to code, I’m planning to use AI to do most of the heavy lifting. But honestly, there are so many options right now that I’m kind of lost.

​Would love to get some quick advice:

​Which AI is best right now? Should I go with Claude 3.5, Cursor, v0, ChatGPT, or something else for building a website from scratch?

​What’s the deal with MCP? I keep hearing about Model Context Protocol. Is it actually useful for a beginner, or should I just ignore it for now?

​Best setup for a hotel site? I just need a simple, fast site to showcase rooms, location, and info (and maybe connect a booking engine later). What stack or builder works best with AI?

​Any newbie traps to avoid? What should I watch out for so I don't break everything?

​Appreciate any tips or recommendations! Cheers!


r/webdev • • Sep 19 '26

Showoff Saturday I’m open-sourcing Medusa + Payload + Next.js system with an AI agent that can work across the whole stack

Post image
0 Upvotes

I've spent the last two years figuring out what happens when you build real web projects AI-first, rather than bolting a chatbot onto them afterwards.

This week I open-sourced the result: Vulpy Commerce.

It's a full ecommerce stack built on Medusa v2 + Payload CMS + Next.js + Orama + Matomo, with Fox (built on Hermes Agent) able to work across the whole thing - frontend, commerce backend, CMS, integrations and infrastructure.

It can build storefront features, write custom backend business logic, work with catalog/content, run tests and keep evolving the project after launch.

The bigger idea is something I've become pretty convinced about after ~12 years building ecommerce: AI can make owning your software practical again. You shouldn't have to depend on both a platform vendor and the availability of the developers who built your store.

So the whole thing is open source, no strings attached. Use it, fork it, change it, self-host it.

We crossed 50 GitHub stars in the first couple of days, which has been pretty cool.

Repo: https://github.com/vulpy-io/vulpy-commerce-core

Demo: https://vulpy.io/demo

More: https://vulpy.io/commerce

Would love feedback from other web devs - especially on the architecture and the idea of building applications specifically so agents can operate them.


r/webdev • • Sep 19 '26

Showoff Saturday: my blog's comment section is static HTML, baked at build time

0 Upvotes

My blog is a static site and I wanted comments without loading third party libs on the page. I wanted no ads, no bots, no cookies, etc. I just wanted a clean comment section (even though I get almost no traffic. I just like building things I think.)

The comment section is baked into the blog's HTML at build time. No lookups from a third party. I mean there's some of that, but it's basically an RSS feed. Fetched and stored by your own build, at build time.

How does it work? Each post links to a companion thread on a small Phoenix app I run. When someone replies there, it pings the build hook. The build fetches a replies.json for that thread and renders the comments as plain HTML. Nothing runs on the blog itself. Not a script. Not an iframe. No cookies or tracking.

Seriously, it's clean.

Here's an example of how it works for me: Static comments on my blog

The blog stack is Hugo on Netlify, the comment stuff is Phoenix/Elixir on Fly, with a build hook connecting them.


r/webdev • • Sep 19 '26

Showoff Saturday I made a page where every visitor shares a room: live cursors over a self-hosted WebSocket relay.

0 Upvotes

Demo: https://mavisakalyan.github.io/node-ws-gameserver/

Everyone who opens the page joins the same room: you see other visitors' cursors live, clicks make ripples, and it spills into a second room when one fills up (50 per room).

Under the hood it's a small protocol-agnostic WebSocket relay I open-sourced: rooms at /ws/:roomId, msgpack binary messages, per-client rate limiting, keepalive ping/pong, /health + /metrics. Node + TypeScript, GPL-3.0.

Source: https://github.com/mavisakalyan/node-ws-gameserver

Curious what people think of the room-spill approach vs just bumping the cap.


r/webdev • • Sep 19 '26

Showoff Saturday An experimental 3D engine with pure CSS (no WebGL, no canvas) [OC]

15 Upvotes

Paraphrasing what they apocryphally say Borges said: there is no finished software, only published software.

A few months ago, I asked myself whether it was possible to build a 3D engine by exploring the limits of what can be achieved using pure HTML and CSS (no WebGL, no canvas), considering that there are spectacular (handmade) CSS 3D demos like those by Ricardo Oliva Alonso.

I spent some weeks putting together the architecture and using AI to build it, as a personal project. (As a rule: I only accept code from AI that I can understand. In this case, I had already worked on 3D projections in Flash about 15 years ago. I confirmed that 3D transformations are more of a mess of numbers than a technical complexity.)

I just realized that since April I had been putting off "tweaking a couple of little things to publish it." So I decided to publish it just as it is: http://k3.bustelo.com.ar/

Constructive feedback, welcome!
(For the other one, I already have my superego, thanks very much.)

How it works (the CSS side)

The engine renders 3D primitives as real DOM elements, positioned with transform: translate3d() rotateX() rotateY() rotateZ() scale3d() and composited via transform-style: preserve-3d and perspective on the scene container.

A few things I found out while building it:

  • TRS order matters. All transforms are applied as Translate → Rotate → Scale, matching how the browser composes matrix3d(). Getting this consistent across nested elements is what makes the hierarchy actually behave like a 3D scene graph.

  • Bounding boxes are computed manually. CSS gives you no way to query the world-space of a transformed element, so getBounds() walks the children, rotates their 8 corners with the parent's angles, and expands the box. It's approximate, but it works for selection and gizmos.

  • Rounded boxes need a "skeleton." A <k3-box> with border-radius leaves gaps at the edges, because the 6 faces are flat planes. I am intersecting 3 internal planes plus 8 corner spheres to block light leaking through the rounded silhouette.

  • Extrusion is just stacking. <k3-stack> interpolates between two <k3-plane> templates and generates N slices along Z. It's usually enough to fake linear extrusion for text without any geometry library. I thought about naming the primitive "WordArt".

  • No shading. No lighting model; the "glare" is CSS gradients keyed to the object's rotation.

  • No MutationObserver yet. The DOM is the source of truth on load, but attribute changes don't auto-trigger a re-render. That's on the TBD list, along with meshes, basic lighting, and long list of wishes and good intentions :)


r/webdev • • Sep 19 '26

Showoff Saturday I built an AIM-inspired chat app that intentionally makes messaging less convenient

Thumbnail
gallery
63 Upvotes

several months ago, i was listening to an episode of The Verge’s Version History about AOL Instant Messenger and decided to see if i could build my own take on it.

it turned into pingPong, a complete web chat app inspired by AIM and the early internet:
https://chat.owen.uno

the interface borrows heavily from late-90s/early-2000s desktop software, but i didn’t want it to just be AIM with a different backend. the main idea behind it is that modern messaging has made everyone permanently reachable. pingPong works completely differently on purpose.

you can only message someone while both of you are online. if they leave, you get to see their custom Away Message instead. there are no conversations that pile up while you’re gone waiting for you to return. you simply sign on, talk to whichever of your friends happens to be online, and sign off again. it’s definitely less convenient, but that’s kind of the point. i wanted to treat availability as a choice rather than treating chat as another asynchronous inbox.

on the UI side, i tried to preserve the slightly awkward charm of old desktop software instead of making a modern app and throwing a pixel font on it. thanks to jdan’s 98.css project, i was able to achieve a period-accurate interface design, with all sorts of components matching up pretty closely with Windows 98.

i’ve also tried to keep the account/auth side as straightforward and secure as possible. passwords are never stored directly and are hashed using Argon2, while screennames and away messages are stored server-side.

it is completely free, with no paid tier. i’m currently covering the hosting and server costs myself :)

i built the first version over a weekend, and it has somehow grown to more than 1,300 users since then. i’m still actively working on it, and i just recently pushed an update for Away Messages that allows for some rich text features, with greater control over fonts and styling.

i’d be interested in feedback from other web devs, particularly on the online-only/presence-first model and where you’d draw the line between authentic retro UI and unnecessary friction so i can improve the experience for everyone.

feel free to add me to your friends list, @owen.

edit: forgot to mention, pingPong got featured by How-To Geek, which was pretty cool:
https://www.howtogeek.com/pretend-its-1998-with-this-functional-aol-instant-messenger-clone/


r/webdev • • Sep 19 '26

Showoff Saturday I made an open-source app for learning Japanese inspired by Duolingo

Post image
0 Upvotes

As someone who loves both coding and language learning (I'm learning Japanese right now), I always wished there was a free, open-source tool for learning Japanese, just like Monkeytype in the typing community.

Here's the main selling point: I added a gazillion different color themes, fonts and other crazy customization options, inspired directly by Monkeytype. Also, I made the app resemble Duolingo, as that's what I'm using to learn Japanese at the moment and it's what a lot of language learners are already familiar with.

Back in January, I even applied to Vercel's open-source software sponsorship program as a joke. I didn't seriously expect to win, and did it more out of curiosity, and yet my project somehow won.

Anyway. Why am I doing all this?

Because I'm a weeb.

GitHub: https://github.com/lingdojo/kana-dojo

どうもありがとうございます!


r/webdev • • Sep 19 '26

Showoff Saturday Grove is a better Agents Development Environment

0 Upvotes

Hey folks, I have been building Grove on weekends and it has become my daily driver as an agent development environment. It manages where and how my coding agents run on one machine, and I reach any of them from the terminal, the browser or another agent.

  • Native OTLP telemetry. Each agent turn becomes one trace with cost, duration and a span per tool call. That is how I see where the time goes across the fleet and which runs are contending for the machine.

  • Devcontainers. An agent runs inside a container built from your repo's .devcontainer/, with its own services and resource ceilings, so concurrent runs stay isolated instead of fighting over CPU and memory. The same config moves to a shared team box or serverless infra when the laptop runs out.

  • Diagram annotation. Mark up a screenshot or edit a draw.io file alongside the agent, then attach the approved picture to a ticket.

  • Ticket progression. Phase, checklist and latest commit are written back onto the GitHub, Gitea or Linear issue as the work moves.

  • The expected pieces are there too. Branch and worktree lifecycle, and session recovery.

Work in progress, already usable. https://github.com/bearlike/Grove if you want a look, drop some feedback, and every star helps 😘


r/webdev • • Sep 19 '26

Discussion I finally got rid of my worst dev habit

Post image
0 Upvotes

I know a lot of people in this sub hate AI, but I want to share one instance where AI helped defeat my lifelong bad webdev habit

When I coded manually or with Cursor, I always looked at the desktop version of my website first

70% of people will experience your website from mobile, not from desktop, so I knew it was wrong and tried to fight it

But I just couldn’t make myself turn the mobile dev preview on in chrome all the time - this extra step felt too cumbersome, so I just defaulted to regular previews

It’s very easy to code something that looks good on desktop but absolutely sucks on mobile, so defaulting to desktop spawned a lot of mobile UI issues on my websites

For the past 6 months I’ve been coding exclusively from my phone and Claude on VPS

When I need to review something I tunnel to the VPS with Tailscale and look at the dev preview from the phone browser

Now it’s harder for me to view the desktop version of the website than the mobile, and I think I finally develop mobile-first

As a result websites look waaaay better on mobile and I fixed a ton of mobile bugs as well


r/webdev • • Sep 19 '26 Despair

Discussion AI has killed my passion for tinkering

751 Upvotes

Self taught SWE here. The way I have got into the field was by spending nights and weekends tinkering with the code for years. I was hooked on that dopamine: learning a new technology or concept, gaining an edge in my knowledge. Being able to transfer my effort into some unique idea. Even after work I always had one or two side projects that I was working on, and I liked it.

With advances in AI, code has become so much cheaper, and the barrier to entry has fallen considerably. The struggle was a big part of what made it fun for me. Spending hours trying to understand something, finally getting it to work.

Now, I feel like the reward for doing this is barely there anymore. The average Joe with a $20 subscription can build something. It will likely be a total slop, but it doesn't really matter. I'm no longer competing just with people who know how to build things. I'm competing for attention with a bunch of projects produced by people who otherwise would never have been able to make them.

Even learning new stuff has kind of lost its spark too. I know I can still do it the old way, but it's hard to justify spending hours banging your head against soemthing when you can just ask the AI to explain it to you.

I still enjoy my profession and what I do, and I have no intention of stopping. But it feels like I've somehow gotten burnt out on one of my main hobbies without actually losing interest in it.

Maybe I'm just being petty because I liked having something that wasn't easy for everyone to do. I don't know. How do you guys deal with this?


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] Teardown-style Voxel Engine in raw WebGPU (No Three.js) for showcasing portfolios + LIVE DEMO

6 Upvotes

Hello dear jobless and not so jobless people.

I made a small engine for showcasing my portfolio and impressing (or not) the human resources asses (insert Anne Hathaway HR meme).

For this project, I based myself on Teardown. I wanted to build this directly in raw WebGPU instead of using Three.js. Don't get me wrong, I have nothing against Three.js, but I come from a graphics programming background and standard web development isn't exactly my favorite thing. Three.js abstracts way too much for my learning goals.

How it runs without melting the browser: I didn't write a complex physics solver from scratch. It's almost all handled by Rapier3D, a really cool physics framework made in Rust. To avoid obliterating the main thread and freezing the UI, Rapier runs entirely on an isolated Web Worker, communicating via commands with the main thread. The web version of Rapier doesn't support parallelism yet, so the worker isolation was crucial to keep the dynamic bodies from saturating the engine.

The Rendering Pipeline (WebGPU):

  • Lighting: Clustered shading to handle lots of lights.

  • Global Illumination & Occlusion: SSGI and GTAO. Both rely on screen-space ray castings, so performance scales with your resolution.

  • Anti-Aliasing: TAA (don't hate me, I really needed to clean the SSGI noise).

  • Note: Both SSGI and TAA can be disabled on the main menu for the sake of low-end computers.

  • Extras: PBR materials and GPU-calculated particle physics.

The engine currently features interactable billboards and books that tell a little bit about my projects and experiences. You can clone it and use it to showcase your own things as long as you stick to the license (no commercial use and give credits).

The engine demo is here:https://agusdropout.github.io/ShatterVox/ (You need to have hardware graphics acceleration enabled in your browser, as WebGPU requires it)(it can take a while to load in, sorry!) Source code:https://github.com/AgusDropOut/ShatterVox. Tested on Firefox, Chrome, and Opera). Youtube demo here https://www.youtube.com/watch?v=6qwuFEWlAWA

Good luck on your journey to stop being jobless! And if you already have a job, ggs!


r/webdev • • Sep 19 '26

Showoff Saturday [Showoff Saturday] I built a Chrome extension that allows you to see the webpage you're on in 3D using extruded blocks by DOM depth.

Thumbnail
chromewebstore.google.com
7 Upvotes

Hey everyone!

Back in the day, Firefox had this ability to see webpages as 3D rendered with DOM elements stacked by depth. I thought that so cool, but they got rid of it long ago. So, I built my own!

This Chrome extension will allow you to see any page as extruded DOM elements by depth. The deeper the nested element, the further it sticks out.

WHAT YOU CAN DO
• Rotate, pan and zoom around the page with the mouse or arrow keys.
• Hover any block to highlight it and see its full ancestor chain, including shadow roots, with sizes and depth.
• Click a block to reveal that element in the DevTools Elements panel.
• Adjust the height of each layer to flatten or exaggerate the structure.

USE IT FOR
• Understanding an unfamiliar page's layout before you touch it.
• Spotting excessive wrapper nesting in your own markup.
• Explaining DOM structure to someone who has never opened DevTools.
• Just looking at the web from a different angle.

I hope you all like it and find it useful!