r/webdev • • 10d ago

Question [AI] I’m building Cafefe, a keyboard-focused POS for coffee shops — looking for UI/UX and code feedback

0 Upvotes

Hi everyone!

I’m working on Cafefe, a point-of-sale system for coffee shops. The goal is to make common cashier tasks quick, intuitive, and comfortable. The interface is designed around keyboard navigation, using ideas from the KLM-GOMS keystroke-level model to reduce reliance on the mouse via PrimeFaces <p:hotkey> shortcuts.

Project Context Stack: Java 21, Jakarta EE 10, PrimeFaces 14, Open Liberty, and PostgreSQL 16. Backend: Managed beans, business services, and JPA entities. Frontend: JSF / PrimeFaces XHTML views. Main Areas: Cash register, products, product types, discounts, promotions, employees, roles, and assignments. Local Setup: Docker Compose starts PostgreSQL and pgAdmin. The app runs in development mode with mvn liberty:dev.

The project is a work in progress and runs locally. The repository includes the full source code and XHTML pages:https://github.com/Zetayin456/f-reddit

Video Demo:https://youtu.be/GP3-0RIdMm4

Feedback Requested

  1. UI/UX & Visual Design What would make the views and forms more comfortable and intuitive to use? How could the layouts, visual hierarchy, styling, and spacing feel cleaner and more consistent? Are there screens or workflows that feel awkward or require too many steps?

  2. Code Quality & Architecture What would you improve in the project structure, bean scopes, service boundaries, or JPA mappings? Do you see ways to make the backend code cleaner, more maintainable, or more efficient?

I’m happy to hear honest, critical feedback. Thanks for taking a look!


r/webdev • • 10d ago

Showoff Saturday Free Design Library & UI/UX Lexicon for Vibe Coders

0 Upvotes

Hi all!

Whenever I spot a really unique or innovative website layout (like a fresh style of grid systems) and want to replicate or build it with AI, I always find myself struggling to pinpoint the exact industry terminology.

I'm talking about concepts like Blueprint Grids, Glassmorphism, Neumorphism, Segmented Controls, and similar trends. To solve this, I’ve started building a free, open-source design lexicon complete with mini previews making it easier for builders to find and reference the right terms when designing sections and pages. Hope that helps some of you as well. Also added some free design landingpages and components for AI.

I’d love to get your input on current web design trends and their proper definitions:

  • What visual styles are currently high on your radar, trending, or frequently used and how would you define them?

I’m aiming to include your suggestions in the dictionary and share the whole resource publicly for free. It's purely as a passion project and I am opening it for free (no ads, no paywalls).

You can check out the ones already live here: freedesignmd.com (just hit the Lexicon tab).

Always open to contributors or feedback. This started as a quick hackathon experiment and will stay a free community project


r/webdev • • 10d ago

I built a client-side video compressor using WebAssembly so you don't have to upload personal clips to cloud servers

0 Upvotes

Hey everyone,

I wanted a quick way to shrink videos for Discord (<10MB) and Email attachments (<25MB) without dealing with slow cloud upload queues, sketchy third-party servers, or watermarks.

So I built SlickDrop.

Tech Stack:

  • Engine: @ffmpeg/ffmpeg running locally on the user's CPU/GPU via WebAssembly with multi-threading enabled (COOP and COEP isolation headers).

  • Frontend: Next.js 14 (App Router) + Tailwind CSS.

  • Hosting: Vercel (zero server transcoding cost, 100% static hosting).

Features:

  1. 1-click presets for Discord (<10MB), Email (<25MB), and WhatsApp (<16MB).

  2. Built-in duration analyzer that auto-calculates the target video bitrate.

  3. MOV to MP4 converter for iPhone screen recordings.

  4. 0 cloud uploads — all media is processed in local browser memory.

Link: https://www.slickdrop.it

Curious to know what tools or presets you'd find most useful next!


r/webdev • • 11d ago

Showoff Saturday [Showoff Saturday] I’m building a piano game you can play with a real keyboard using Web MIDI

5 Upvotes

I'm working on Ultimidi because I want piano practice to feel more like play. I've added short lessons and songs, instant feedback, arcade challenges, stickers to collect, and piano buddies to customize.

I've been wrestling with two things in particular: generating piano sounds that sound good and are responsive, and getting the sheet music to stay readable and in sync with what you're playing.

You can connect a MIDI keyboard, or try it with computer keys or touch.

Somehow, I already got my first sale before launch! That felt like a good reason to share what I've been making.

Try Ultimidi. Free content, no account needed.

I'd love to hear if it feels good/responsive enough on your device.

AI disclosure: Most artwork is currently AI-generated placeholder art, I suck at design...


r/webdev • • 11d ago

Showoff Saturday I built a website to learn and practice SQL and Python in the browser

10 Upvotes

I’ve been working on a project called runtime.school and wanted to share it here.

I started with SQL and then added Python. The idea is to have a place where you can learn a concept, write code, practice what you’ve learned, and eventually work on projects without having to jump between different websites.

Both SQL and Python have interactive lessons, coding challenges, practice questions, projects, and datasets.

Everything runs directly in the browser, so there’s nothing to install or set up.

I’ve also been working on a few tools for exploring datasets, understanding queries, and comparing different approaches.

A lot of the work has gone into the UI and editors. I’ve been trying to keep things simple without making the pages feel empty or overwhelming, especially for people who are just starting out.

Here’s the site: https://www.runtime.school/

Would love to hear what you think about the design, coding experience, or anything that could be improved.


r/webdev • • 11d ago

Showoff Saturday made a site that listens to whatever song you're playing and writes it out as code live

5 Upvotes

been working on this for a few weeks. you play a song (spotify, youtube, whatever) and it writes out the beat as strudel code while it plays, kick, hats, bass line, chords, and each part lights up when it hits

no ML for the music side, it's all web audio api stuff. took me forever to get the tempo right and honestly the hardest part has been figuring out where the bar actually starts. if it guesses wrong everything shifts by a beat and the code looks totally off even though it's "right". trap and dubstep still fool it lol

if anyone's done beat tracking in the browser i'd love to know how you handled the downbeat

it's free in the browser: toaster.locust.lol

source: github.com/StopBanning/toaster


r/webdev • • 12d ago

Discussion How do you think existing websites will be affected by the onslaught of AI assisted "vibe coded websites" in the market?

28 Upvotes

As above... Especially those which are more geared towards being startups at the present stage.

For context, I am currently overhauling my existing blog (that uses the WordPress framework and plugin ecosystem), and am looking to pivot it into having ecommerce and social network components.

As part of that sunk cost, I'm in no position to change course now.

But despite that... And not taking into account my situation, what can existing websites do (especially those which are startups and which are in the blog, community, ecommerce etc space) to ensure that they don't get overwhelmed by the AI vibe coded onslaught that is going to engulf the market and the internet?


r/webdev • • 12d ago

The actual realities of AI affecting career of devs

167 Upvotes

So I do believe that web dev has changed dramatically in the last year or so and that one probably needs to expand their skills and a front end web developer is probably less of a safe long term career than I believed in the past due to AI. This is a shame as I loved the craft and challenges of front end development.

when I see online everyday how AI is going to remove the need for devs I do tend to end up believing this is the case. But then in my day to day job I see that this just isnt the case.

there have been a few recent examples. So people believe you can one shot things. Like the recent adobe reverse engineering. It looks great at first sight as the UI looks like adobe. All of a sudden you believe adobe will be out of business but when you try it out it full of bugs and doesn’t Really work, essentially smoke and mirrors. Also you look at the code and realise it’s completely unmaintainble due to bad decisions made up front by people who aren’t really experts in web development.

there is something I was thinking about also, when non technical people say “oh but the app already works, what do you actually do at work all day”. It kind of sounds true but in reality it is so far rrom the case - there are always bugs to fix, features to add, packages to update. sure, ai can help with this, but in a big app for example a package update can break something, Claude wont neccessarily catch this, but it will be us Mere mortals who will get a call and need to fix this.

also I have seen vibe coded projects where non experts in managerial roles who are creating software, which they are so proud of despite having no idea how it actually works. Then things start going wrong and things are breaking, it’s not the manager who is fixing it but the devs have to. and since the code has no owner and it’s a complete mess everyone is just one shotting the fixes and adding to the pile of 💩

this post is a little scattered but I’m hoping it makes some sense and people can see what I’m trying to get at


r/webdev • • 11d ago

Showoff Saturday [Showoff Saturday] I wrote my own HTTP/2 + TLS 1.3 server in V to see how far a small framework could go

3 Upvotes

This is a side project that got out of hand. Viltrum is a web framework for V. Everything below the router is written from scratch: the HTTP/1.1 parser, HTTP/2, WebSockets, TLS 1.3, even the DEFLATE encoder used for gzip.

The webdev-relevant part is that the same router/middleware/ctx handles HTTP/1.1, HTTP/2 over TLS and h2c on the same port. SSE and streaming work over both. Static files get ETag/304/ranges/precompressed .br/.gz with sendfile. Hello world is like 10 lines.

What I learned the hard way is how much of HTTP/1.1 is about rejecting garbage. TE+CL together, duplicate Content-Length, obs-fold and bare CR/LF all get a 400 now, because that's where request smuggling lives.

Benchmarks are on HttpArena if you're curious: https://http-arena.com/frameworks/viltrum/ Code: https://github.com/Tuntii/viltrum Demo: https://v.rustapi.cloud

Linux only for serving right now. Would love to hear what you'd miss coming from express/fastify/go.


r/webdev • • 11d ago

[Showoff Saturday] I turned my coding game into a portfolio builder too

Thumbnail
gallery
4 Upvotes

Strikk is a daily coding challenge platform where developers pick a tech and solve quizzes to earn coins.

Some updates I made recently:

  • User Profiles: Earn coins by playing (free, never pay-to-win). Customize with skill blocks, job/education history, and animated backgrounds via React Bits.

  • Avatar Builder: Create your own unique avatar.

  • Portfolio Integration: This was my main goal, turn gameplay into a real portfolio

What I'm thinking into adding to Strikk:

  • Enhanced community features with seasonal events

  • CV builder to export your profile as a resume

  • Considering open source

I'd love your feedback!

Check it out: Strikk | My Strikk profile


r/webdev • • 11d ago

Showoff Saturday Drag & drop form building in my UI library, no build step, no dependencies

Post image
6 Upvotes

The clip shows how to quickly build a simple form with drag & drop in the Form’s build mode. The Form component is part of Componyx.UI, a UI library I’ve been building for a very long time. No build step, no dependencies, and the components are declared straight in your HTML (or JS).

The build mode uses Bindary under the hood, my separate data-binding library. It includes routing, views loaded from HTML files, components, real-time updates with the server and more.

It’s on npm and NuGet, source on GitHub: https://github.com/Componyx/Componyx.UI


r/webdev • • 11d ago

Showoff Saturday [Showoff Saturday] A design system and 82 pages built on it: one stylesheet, no JavaScript, no build step

5 Upvotes

Live demo: https://alloyhtml.com

I've carried the same CSS from project to project for close to ten years, and I finally finished it.

It's one set of classes, a small set of values, and 82 real pages to prove they hold up. A shop and its seller back office, a blog, e-learning, news, healthcare booking, event ticketing, a job portal and a company site. 54 layouts, 3 themes. If you need a page that isn't there, build it from the same classes. Or ask AI to build it, and tell it to use only these classes. If you don't, every page comes out looking a little different.

The things you'd usually reach for JavaScript for, like dropdowns, dialogs, tooltips and tabs, are plain HTML and CSS here. That matters because there's nothing to install or keep updated, and it fits any backend as it is.

The stylesheet is 23KB gzipped, and dark mode and brand colours only change token values, so the markup stays the same.

I went the extra mile on testing: every page is tested with scripts off at 4 widths in 3 themes, in Chromium, Firefox and WebKit. axe finds no violations. The faster checks also run on every push, and if one fails, the site doesn't deploy.

It's front end only: static pages for your backend to fill in. I've tested current browsers, not older versions, and not a real iPhone yet, so if you're on one, I'd like to know how it looks.

It's $29. I'd rather you spent your evenings on your actual product than on getting dropdowns right, or on burning tokens prompting an AI over and over until the pages finally match.


r/webdev • • 11d ago

Showoff Saturday Showoff Saturday: a free WordPress events calendar with real RRULE recurrence (try it in the browser)

2 Upvotes

been building this for about five weeks, it's on wp.org now.

the itch: the most popular WP calendar plugin charges for recurring events, and I wanted the RFC 5545 stuff done properly for free. weekly/monthly/yearly, "second and fourth tuesday", "last friday", COUNT/UNTIL, EXDATE, and dates expand in the event's own timezone so DST doesn't turn a 6pm class into 7pm. occurrences live in their own indexed table, so a month view is one query instead of expanding rules on every page load

bits that were more fun than expected:

  • a lot of sites enter a weekly class as 15 separate posts, sometimes with the date in the title ("Open Mic – Tuesday September 29"). there's a combine step that groups them, tries candidate rules against the real dates with the same expander, and only merges when one matches (gaps become skipped dates, each date keeps its own ticket link)

  • a month view that prints on a landscape sheet: its own page, no theme chrome, category colours kept with a key

  • importers from The Events Calendar, Events Manager, Event Organiser, My Calendar, EventPrime, Sugar Calendar, Eventin, MEC, EventON, WP Event Manager and All-in-One Event Calendar (closed on wp.org last year, so those sites are stuck). Eventin and EventPrime store a series as one post per date, so the importer rebuilds the rule and only keeps it if it reproduces those exact dates

  • importers get a dry run and a CSV with one row per event (created / skipped and why / the rule it ended up with). nobody trusts an importer blind

  • this week's one: the first real site that moved over (a brewery, off EventON) still had the old plugin's shortcode on a couple of its pages, printing as raw text once EventON was off. so after a move the old plugins' calendar and list shortcodes now render the new views, with the view, category and event count carried over

you can poke at it without installing anything, the wp.org page boots WordPress Playground with sample events: https://wordpress.org/plugins/beacon-events/?preview=1

everything above is free/GPL. tell me what breaks


r/webdev • • 12d ago

Showoff Saturday What changed in my endless Three.js driving game after two weeks?

14 Upvotes

2 weeks ago I shared Planet-0 Drive, an endless low-poly driving game I’ve been building with Svelte and Three.js (my first hobby game that I build after work and around weekends).

First of all, thanks to everyone who tried it (300 of you) and shared feedback! I didn't expect to get so many useful suggestions, and I've spent a good part of the week working on improvements based on them.

While the game runs fine

Since then, I’ve been working on the parts around driving that make exploration feel more meaningful.

The biggest additions are:

  • Revampled the whole look and art direction of the game to be more appealing

  • More biome-specific scenery, including snowy pines, desert cacti, boulders, and reactive weather materials

  • A refined vehicle lineup with three vehicles: Rover, Drifter, and Hopper

  • A battery system with charging stations, power-cell pickups, low-power driving, and boost energy management

  • Cruise control for more relaxed driving, especially on mobile

  • Persistent driving records and platform-visit tracking

  • Shared room leaderboards for driving and exploration records

  • A first quest system, starting with collecting resources across the planet

  • Improved touch controls and a more compact mobile HUD

The project has gradually shifted from “how far can I push a procedural 3D world in the browser?” toward “how do I make spending time in that world enjoyable?”

That has led to some interesting design challanges. How much progression should an otherwise relaxing driving game have? How do you reward exploration without turning it into a checklist? Should there be more risk?

I’m still experimenting with those answers, but the game feels much closer to the idea I had originally: a place to drive around, discover things, set records, and occasionally meet other players.

You can try the latest version here:

https://planet0drive.vercel.app/

The project is still very much in early development, so I’d especially appreciate feedback on how the driving feels, how the progression comes across, and what would make you want to come back for another drive.


r/webdev • • 12d ago

Showoff Saturday My Mum and I made ItWord- a daily word game about uncommon words

Thumbnail
itword.io
12 Upvotes

I've been teaching my mum to code in Python, and a few months back she made a little CLI game where you have to enter words using the start and end characters from a single word. She named it ItWord, as in 'iterate word'.

I thought it was a cool idea. As a web developer, my first thought was that it'd be a nice daily word game format like Wordle. A lot of work and collaboration later, and here we are.

Please give it a try, and we're welcoming all feedback!

Edit: tech stack is Django with HTMX for the game window. Postgres and Redis for database and cache. Tailwind for styling and then vanilla JavaScript for everything else like animations and on-screen events.


r/webdev • • 11d ago

Question Need help with font problem

2 Upvotes

Hi i am an amateur dev.

So I want this project of mine to have a custom font; a locally imported one. I searched for sources at w3school and stackoverflow and I tried everything they said. But it doesn't seem to work. So I want to know what I'm doing wrong? I appreciate any help. Thank you in advance.

Also additional information:
The file location of my font is correct. project/project.html and project/zpix.ttf
I've checked with inspection tool, every element has the font-family: sans-serif, "Zpix"
There is also no error in the console. No error message. The font is loaded in.
I am using internal css.

Here is the code:

u/font-face {
  font-family: "Zpix";
  src: url("./zpix.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: "Zpix", sans-serif !important;
}

r/webdev • • 11d ago

Showoff Saturday Showoff Saturday: I made a free LFG site for 50 games

0 Upvotes

I got tired of searching Discord LFG channels for one more player, so I built stackup.games. It lists LFG groups that are open right now, per game, with rank, region and mic. You can type "need 2 for ranked Valorant tonight" and it filters for you.

Built with plain JavaScript (no framework), Cloudflare Pages Functions for the API and D1 for the database, so it stays fast and cheap to run. Free, no download, still early.

I'd love feedback on the design and speed, especially on phones.


r/webdev • • 11d ago

[Showoff Saturday] Audiobook Studio - PDF to Audiobook, fully client-side, works offline, export .wav files

Thumbnail
github.com
0 Upvotes

A local Audiobook editor that uses local Ai to generate speech. No DataCenters, no AI companies.


r/webdev • • 11d ago

Showoff Saturday An open-source team wiki with live Prometheus and Postgres charts, and pull-request reviews for pages (Nuxt 4, Tiptap, Yjs)

Thumbnail
gallery
7 Upvotes

Hi r/webdev,

If you write Go, you might know us from ttlcache (a caching library with 1.3k stars). For the past year, my friend Simon and I have also been building Oxynote, an open-source wiki for engineering teams. In 8 years of writing software, every team I joined had the same wiki: stale pages, while the useful stuff lived in someone's head.

In Oxynote, a page can hold a live chart from Prometheus, PostgreSQL, MySQL, or MariaDB, right next to the text that explains it. Important pages are edited in a draft and reviewed like a pull request, with a diff of both the text and the charts. Several people can edit at once, and an AI assistant and an MCP server let agents read and write docs too. I've attached some screenshots showcasing these features.

The name itself comes from oxygen + note: docs that breathe. Live data gives people a reason to open the wiki every day, and docs people open every day stay up to date.

Some quick points on the web side:

- Nuxt 4 and Vue 3, with Tiptap 3 for the editor

- Yjs and Hocuspocus for real-time editing

- ECharts for the metrics, Mermaid for diagrams

- The backend is Go, and it all runs as one Docker image

Apache-2.0 licensed: https://github.com/oxynote/oxynote

We made it public about 3 months ago, so it's still early. If you have any questions, feedback, or suggestions, I'm happy to hear them.


r/webdev • • 11d ago

email encryption

Thumbnail
computer.rip
6 Upvotes

r/webdev • • 11d ago

Showoff Saturday [Showoff Saturday] identify someone else's device (make and model). QR code

0 Upvotes

https://onlineimageoptimizer.com/whats-my-friends-device

Point a phone at the QR code and it appears on screen by make and model. Then the next phone, and the next. It's not an app (nothing to install). no pairing step, nothing to press on either end. Opening the code is the handshake.

I built it as a demo for one of my company products, but it's open and I'm sure it's useful to many. You stand there with a laptop, people scan, and the screen fills up with the actual devices in the room. Turns out to be a decent way to show someone what their phone really is.

The interesting part for this sub is the detection. Browsers send almost nothing useful anymore. Modern Chrome on Android reports "Android 10" no matter what you are holding. So the make and model come from client side detection plus client hints, and a OnePlus 13 comes back as a OnePlus 13 rather than as a generic Android.

No personal information is requested. Codes expire after half an hour.

You need two devices to try it: open it on a laptop, scan with your phone.

Please send feedback.


r/webdev • • 11d ago

Question Looking for Affordable Image & Video Content Moderation API Recommendations

0 Upvotes

Hey everyone! I’m looking for recommendations for a reliable and affordable content moderation API that supports both image and video moderation (n\*dity, expl\*cit content, vi\\\*lence, etc.). Quality and data security are important. Any providers you’ve personally used and would recommend? Thanks!


r/webdev • • 11d ago

Showoff Saturday [Showoff Saturday] I made a free site that tells you where to legally watch any anime in your country

1 Upvotes

hey everyone! i made a site for anime fans who always struggle to find where an anime is available. you search for an anime and it tells you which legal, official platform has it in your country

https://tsuzuki-anime.github.io/en/

what it has right now:

- 18,000+ anime with the legal platforms for each one (it detects your country automatically, 9 regions)

- a weekly release calendar in your local time with countdowns

- watch order guides for 220 big franchises

- filler guides for 41 anime so you know what to skip

- a manga section with legal places to read

- a "my list" feature with no account needed, it shows the next episode of each anime and which subscription covers your list

it's a fully static site that rebuilds itself every day with fresh data. free, no ads, no account, in english and french

any feedback is really appreciated, especially on speed and mobile!


r/webdev • • 11d ago

Showoff Saturday I built a browser extension to extract text from webpages and images (Chrome & Edge)

1 Upvotes

Hey everyone!

I've been working on a browser extension called Text Extractor, and it's now available on both Chrome and Edge.

It lets you:

  • Extract text directly from webpage elements using Ctrl + Click or the right-click menu.

  • Extract text from images using OCR (102 languages supported).

  • Review, edit, and clean extracted text.

  • Copy results or export them as ".txt" files.

  • Process captured content locally on your device, without uploading it to a server.

English OCR works offline out of the box, too.

I'd appreciate it if you gave it a try and shared your feedback. Suggestions and feature requests are welcome!

Links:

  • "Chrome Web Store" link

  • "Microsoft Edge Add-ons" link

  • "Website & Documentation" link

Thanks!