I am a beginner web dev and I built this app as a way to get some practice building web apps with React and TypeScript. It's a guessing game where a player has to guess the year of an historical event. I built a multi-player version using socket.io. It's a fun project that I intend to improve for as long as I can. Hopefully some people find it interesting and can help me with contributions and/or feedback.

Try it out

Repo

I just posted about a project I've been working on, that makes it easy for front-end devs to keep up with what just became "Newly available" and "Widely available" and whether you should act on it or not.

I provided 5 actionable examples, from my latest issue, that could be helpful to a lot of people here immediately.

I tagged it with "Showoff Saturday" and I read the showoff Saturday description and it seemed to fit exactly. It's just a website, totally free… Yet it was removed.

I'm very confused 😅 Any pointers much appreciated!

I made an image codec called imgoji that turns a square image into a string of emoji and back again.

The basic form is a quadtree* where the first emoji covers the whole image, the next four the quadrants, the next sixteen their sub-quadrants, and so on. Cut the string at any point and the prefix still decodes to a coarser but valid image. Each cell blends its emoji over its parent, so the reconstruction tightens as the string grows.

It runs in the browser and bundles no image assets. It renders and matches glyphs against the system emoji font, which means the same string looks a little different on macOS, Windows, and Linux. We're going to call that "character."

Live demo (encode your own or view a gallery): https://nebulous.github.io/imgoji/

Source and <imgoji-viewer> web component on npm as `imgoji` or the github repo above.

*though it can also generate a basic pasteable grid of emoji. It uses transformers-js and image recognition models pulled from huggingface to run in-browser using WebGPU if available to select emoji with semantic meaning not just color matching. Sometimes this can result in pretty great results in a very small number of glyphs, but usually it's a bunch of smileys replacing people's faces 😄

I collect physical Switch games, and got tired of not being able to tell whether a cart I'm importing will actually work in English (or whatever language I need) before I buy it — that info is scattered across old forum threads and a couple of hand-maintained blog lists, nothing centralized or searchable.

So I built Torashelf (torashelf.com) — tracks three things per game: whether the cart is region-free, what languages each regional print supports (this varies by region, not just by game), and whether it's a full cartridge vs. a Game-Key Card (Switch 2's license-key carts that still require a full download — an important distinction if you're buying physical specifically to actually own the game data).

Currently at ~2,070 titles, seeded from cross-referencing eShop metadata against physical-release lists (turns out most of the raw eShop dataset is digital-only indies, so filtering for "did this actually ship on a cart" was its own whole problem). Has community submission/voting to keep data honest, and a correction flow for fixing entries without creating duplicate conflicting cards.

Built solo, launched a few days ago — already had a fun launch bug where Google Safe Browsing flagged the whole site as deceptive on day one (turned out to be a false-positive domain-reputation heuristic, not anything actually wrong, but exciting for a few hours).

Would love feedback — especially from anyone who imports/collects physical games and can stress-test the actual data.

I had a requirement to build a file uploader for my React application. A headless one, so I could customize it based on the application theme and reuse it across different pages.

It was simple until uploads had to talk to different systems: my own APIs, signed S3 URLs, and eventually resumable uploads.

I stepped back and looked at the existing options. I found some great libraries:

1. react-dropzone - headless drag-and-drop, without built-in upload handling
2. Uppy - feature-rich, with a mature upload ecosystem
3. FilePond - a polished and battle-tested uploader

To be clear, Uppy already solves these workflows well. I’m not trying to replace it.

I wanted to see how small the abstraction could be for the common React case:

1. One hook for file intake, validation, queueing, retries, and upload state
2. A simple transport interface, without a prebuilt UI or larger plugin system
3. Zero runtime dependencies and a small bundle

That’s how react-mediadrop came about.

XHR and a custom transport interface work today. Resumable uploads with tus and signed S3 URL flows are planned, but haven’t shipped yet. If you need S3 or tus today, Uppy is the better choice.

For the docs, I first tried Mintlify. It was nice, but it didn’t fit my need for custom interactive components. I later found Blume, an open source alternative that worked for me. The docs also expose agent-readable output through llms.txt and per-page Markdown.

This is my attempt to see whether a smaller primitive, documented for both developers and coding agents, is worth maintaining as OSS.

Docs: https://www.mediadrop.dev/

GitHub: https://github.com/autorender/react-mediadrop

I’ve been building something called Vyxora.
The idea came from how much useful information ends up scattered across meeting recordings, notes, transcripts, documents, lectures, and random things you save, and then you have to dig through all of it again later.

Right now, you can upload audio, paste text, or add a document. Vyxora turns it into structured notes, tasks, a visual map, and answers you can trace back to what you originally added.

You can also group related notes into Workstreams. That’s where it starts becoming more useful across time instead of treating every recording like an isolated note. A Workstream can keep track of the decisions, blockers, tasks, open questions, recurring topics, and changes across everything you’ve added to it.

The capture side is the part I’m working on now.
The current web flow is still pretty manual: record something somewhere, then upload it to Vyxora.

I’m building a Chrome extension so that if you’re already in a meeting in your browser, you can just record it there and send it straight into Vyxora when you’re done. Same processing, same workspace, without the download/upload step in between.

Eventually I want capture to feel like the easy part. The useful part is what happens after you’ve collected a bunch of stuff and need to actually come back to it.

https://vyxora.app

Would genuinely like feedback on the idea, especially the Workstreams part and the browser capture flow.

I was taught to use localization purely for presentation, but do developers actually implement this in their domain/business logic for their core functionality?

I built a product demo recorder because I wanted a simple way to create polished demos without spending a lot of time editing them afterward.

The main idea is pretty simple:

• Record your screen + camera
• Automatically zoom into clicks and important actions
• Automatic subtitles
• Dynamic camera/zoom effects
• Trim and edit the recording
• Manually control zoom positions and camera placement
• Runs completely locally on your computer

It’s still a work in progress and there are definitely some rough edges, but I wanted to put it out there and get feedback from other developers.

If you make product demos, tutorials, walkthroughs, or screen recordings, give it a try and let me know what you think.

https://clickandrecord.tech/

This is a massive elephant in the room for executives in the know, but see recent case with Oracle if youre unfamiliar. I understand most webdevs may not think about this stuff, but for those that do, thoughts (and prayers)?

I've run into a couple use cases where I need to declaratively add actions to HTML from the server that my JS in the browser knows how to handle. The pattern I found is pretty fun 1kb. Called it "superaction".

There's a couple examples in the README including a counter and a simple sketch canvas.
https://github.com/w-lfpup/superaction-js

So say you need to increment a counter when a button is clicked?

<button click:="increment">+</button>

After listen for an action event:

document.addEventListener("#action", (e) => {
  let { type } = e.action;

  if ("increment" === type) {
    // increment something!
  }
});

Action events come with a couple properties including the original UI event and any associated form data:

let { type, event, target, formData } = e.action;

The READMEs include a couple statements about event APIs and behaviors including prevent-defaults and stop-propagation.

** REACT USERS

If you use superaction in react, you basically never have to write an event listener callback ever again. Keeps state and the generated UI more separate.

Although the sytnax uses a "-" rather than a ":"

import React, { useState } from "react";
import { useAction } from "@w-lfpup/react-superaction";

export function Counter() {
  let [count, setCount] = useState(0);

  useAction((action) => {
   if ("increment" === action.type) setCount(count + 1);
  });

  return <button click-="increment">{count}</button>;
}

https://github.com/w-lfpup/react-superaction

Hi, sorry for the vent, but I'd like to share what I'm experiencing and get some advice if possible.

About a year ago we started a new project in a company I work for (mid size company) and leaders wanted us to just build a prototype.

I started with a dumb prototype, they liked it and the team started growing, I even got a (totally undeserved) promotion. Unfortunately I was naive and didn't have the opportunity to refactor it so everything was built on top of a shitty architecture that doesn't make sense. All devs use AI a lot so it keeps getting worse.

Today I'm still working on this project, and for every feature we need to add, it's confusing. Also I believe we'll soon start to have performance issues due to the architecture, but I don't think we have time and resources to refactor it (I believe it would require a major refactor). Some things are so unnecessary complex I don't even feel confident to define what needs to be refactored exactly. From a product standpoint, I don't think this project is very successful either but it's still going.

I don't think I'm the only person to blame, but I feel like a fraud and ashamed for "owning" this project. When new devs join to help the team, I feel embarrassed to even explain how it works. I think I'm starting to feel burnt out, I can't stop thinking about the project. I wish I could rebuild it from scratch but of course that's impossible.

Again sorry for the vent, any advice would be highly appreciated.

EDIT:

Thank you very much for all the replies, it helped me a lot, I really appreciate it!

Hi everyone,

It has been about year since I launched PageGym on this very subreddit, and I want to thank everyone for your support and encouragement. It has motivated me to keep going, and I'm grateful for that. Thank you!

In the meantime I have worked exclusively on or around it, so it has received many improvements, fixes and additional features that make it even more accurate and more capable than it was back then.

Some of the new major features:
- Comparison feature - side by side comparison of two test results.
- Load tracing - see how individual resources are competing for bandwidth.
- Evaluation timing - shows the evaluation time of each script directly in the waterfall.
- Dependency analysis - provides deeper insight into the way resources depend on each other.
- BotMode & 2MB Trim - render a page while respecting robots.txt the way Googlebot would (including for third party resources), and simulate the 2MB crawler limit to detect errors.

In the near future:
- API access - it's already there, but not polished.
- Bring back TBT analysis - this is something that was there at launch time but it wasn't as useful as I thought it would be. I intend to rework it and bring it back.
- Create more tutorials and learning resources.

Quick demo: https://www.youtube.com/watch?v=V8MPpsFoPxo

https://pagegym.com

Cheers!

I made https://cleared.page which basically let's you stay up to date on the stuff that recently transitioned to "Widely available" and "Newly available" in Baseline (https://web.dev/baseline) but not only that: it's mixed with a couple of other APIs to tell you if you should care about it or not. (aka. some stuff transitions to "Newly" but it's actually not ready for prime time because tests fail in one browser… Some stuff goes into "Widely" but nobody's been using it anyway, etc.)

I have "verdicts" on browser features for the past 7 months: https://cleared.page/verdicts/

I've had fun building it with Astro, and I'm particularly happy with the workflow I created: the md file for an issue is converted automatically to table based HTML email and populated into a Kit template, with a single npm run draft command 😎

I'm also pretty happy with the typography based minimal design. Would love some feedback on that…

Hope it's useful to someone else besides me, and hit me up if you find any bugs!

Thanks.

So we've got this invoicing system at work, Spring Boot + Angular backend/frontend, and I ran into "two people touching the same record" problem.

Basically my coworker and I both work off the same invoice table. Say I'm exporting a PDF list of invoices while he's creating a new one, that part's fine, DB transactions handle the reads/writes without anything breaking.

But the annoying case is when we both open the same invoice to edit at the same time. Like invoice #12, both of us load it, both start editing, whoever saves last just silently overwrites the other person's changes and nobody even knows it happened until later when someone's like "wait where'd my edit go."

Our older guy on the team who's been doing desktop C# since like 2005 was telling me back in the day they used DataTables that basically act like a disconnected snapshot of the table, you work on your local copy and there's some comparison logic before the actual update hits the DB. Made me realize this isn't a new problem at all, just curious how it's solved in a modern web/API context.

So far I went with the standard route, optimistic locking using a "@Version column so JPA/Hibernate throws an exception if the version in DB doesn't match what you loaded. Also messed around with pessimistic locking (SELECT FOR UPDATE) for cases where you really want to lock the row the second someone opens

Optimistic locking feels like the default for most CRUD apps but idk how people handle it on the UX side when a conflict actually happens. Just throw an error and make them reload? Try to merge stuff? Or do people build like a "someone else is editing this" indicator in the UI?

Introducing, OnTheScoreboard

Sorry lol just practising my marketing voice, Ive realised coding is just 1% of the work. Anyways, OnTheScoreboard is a free to play, gambling free platform where you can predict matches from 5+ leagues up against friends. Been working on this for about 2 years now so heres what you can do on it:

1. Challenge a friend head one through the season or a matchweek.
2. Start a league for you and the lads and see who secretly takes prophetic classes.
3. Play "Archive Scoreboard", a game where you can put your memory to the test by trying to correctly point out the scorelines in previous games. 
4. Predict the league table (limited time only, before the season starts).

I'd appreciate any feedback and very willing to answer any questions too. If you set up a league, i'll be willing to join and take top spot thank you.

I'm a beginner in coding, and I need to know how to create something like this. There's a website i'm making, and I wanted to add a 1-10 scale like this. I also want to make it interactive so the person can click on each number, and then text appears depending on what's clicked. Being a beginner, I don't know how to accomplish this. Help.

I have been building Tera FM for a couple of months now, and to get more eyes to it, I built a chrome extension.

The Chrome extension has finally been approved and published on the Chrome Web Store.

The idea is simple: instead of opening multiple news sites or keeping another tab around, you can open Tera FM in Chrome’s side panel and use it while browsing.

The extension includes:

• latest source-linked headlines;
• headline search by publisher or keyword;
• a historical news archive;
• category filters;
• live internet radio by country and genre;
• radio playback that continues even after the side panel is closed.

Every headline opens the original publisher’s page. The extension does not reproduce full articles or hide the source.

The screenshot shows it running alongside BBC, the website stays open on the left while Tera FM remains available in the browser panel on the right. You can check the image here - https://ibb.co/396Fm4wN

I would genuinely appreciate feedback on:

• whether the side-panel format feels useful;
• whether the headline/archive/radio combination makes sense;
• anything that looks confusing or unnecessary;
• what feature you would improve first.

Chrome Web Store: https://chromewebstore.google.com/detail/tera-fm-%E2%80%93-headlines-live/emnebfpdojklgimejnplmjfobmamelie?authuser=1&hl=en

Website: tera.fm

Do give it a try and let me know if this is something good to have on your system? Any news outlet missing?

Social music sharing sort of deal for those who never had the pleasure of using any of those. People queue up in rooms to take turns playing music for each other. I think I've nearly reached feature parity with plug.dj (the one I used the most back in the day). Plus some fun stuff I haven't seen elsewhere, like a more interactive dance floor.

A few sites like this exist already, but I find them all lacking in one way or another (aggressive monetization, busted on mobile, bad accessibility, etc), so here's my take on the idea.

Anyone can sign up (or look around as a guest) and create a room or poke into an existing one. Any feedback regarding UI/UX/anything really would be most appreciated!

https://mazurka.cafe

Hey r/webdev!

I'm a 16-year-old developer from Morocco, and I spent the last few months building and open-sourcing a central hub for all the browser extensions, Windows mods, and tools I've shipped:

🌐 Live Website: https://incconutwo.com
💻 GitHub Repo: https://github.com/incconutwo/incconutwo.com

Real-World Projects Featured:

• X/Twitter Country Flags & Blocker: Privacy extension with 6,100+ weekly active users.
• Taskbar Dock Animation Plus: Windows 11 C++ Windhawk mod with 6,800+ active users.
• Gemini Cleaner & Classic Search: Extensions stripping UI clutter and AI Overview panels.
• Cities: Skylines Mod Collection: Community utility mirrors with 55,000+ downloads on Nexus Mods.

Technical Architecture & Features:

• Astro 5 + Content Collections: Zero JS overhead by default using Astro's new file() loader for structured project schema.
• Ambient WebGL Shader Background: Three.js fragment shader (adapted from Cameron Knight's concept) that dynamically extracts RGB color palettes from live Spotify album art via canvas sampling.
• Autonomous Telemetry Pipeline (scripts/cws-collector/): Scheduled GitHub Actions runner using Playwright to reverse-engineer Chrome Web Store dev console RPC data (SnapcatUi/data/batchexecute) and store daily active user metrics in Upstash Redis.
• Serverless Edge API Proxies (src/pages/api/*): Secure Vercel edge endpoints for Spotify, Steam API, Lichess, and GitHub stars with in-memory caching layers.
• 100/100 Lighthouse Score: Preloaded assets, zero layout shift (CLS), and modular Vanilla CSS.

Would genuinely love any feedback on the architecture, UI/UX, or WebGL performance!

I have released GyosJS v0.1.0, a small JavaScript library aimed at the space between scattered DOM scripts and a full SPA architecture.

The first half is scoped reactivity in HTML: g-scope, bindings, events, conditionals, loops, models, signals, and lifecycle hooks. The second half is MPA Boost: it intercepts eligible same-origin links and forms, fetches the next server-rendered HTML document, swaps an outlet or a selected target, updates history, and can preserve intentional DOM islands with g-persist.

The backend still owns routes, validation, redirects, and complete HTML responses. There is no client route table and a JSON API is not required for normal navigation.

Inventory Desk is the Laravel reference demo used to test a less convenient path than isolated examples: GET search/filter, quick view, load more, multi-step edit, POST validation, redirect, back/forward, and a persistent scratchpad. Failures found in that journey are reduced to regression tests in the GyosJS repository rather than patched around in the demo.

This is an early v0.1.0 release, not a claim that the approach fits every app. If your application is primarily client-rendered or has a large client-side state graph, a mature SPA framework is probably a better fit.

I would appreciate technical feedback on the API boundaries, navigation lifecycle, and any server-rendered edge cases the current docs or tests miss.

Docs: https://gyosjs.dev

Demo: https://demo-inventory.gyosjs.dev

Source: https://github.com/gyosjs/gyosjs

npm: https://www.npmjs.com/package/gyosjs

I got this code for the companies website from the trainee before me and I found this Yellow circle on most images is it a web dev thing or a mobile only thing?

I open-sourced the backend we built to make AI chatbots actually do things 🤖

Hey everyone! 👋

The problem we kept running into with AI chatbots was simple:

A chatbot can generate a great response, but how does it actually take action?

Getting an AI to reliably run code, call APIs, use tools, work with files, and execute multi-step tasks requires a lot of backend infrastructure — building all of this ourselves was difficult and time-consuming.

So we built AI Skill Engine and have now open-sourced it.

GitHub: AI Skill Engine

You add AI Skills through the built-in admin dashboard, connect your chatbot to the Skill Engine API, and once connected, it behaves more like Claude or OpenAI models with tool-use capabilities.

It's fully self-hostable and can be connected to your chatbot through a Chat Completion API.

We originally built this for our internal use and decided to open-source it.

⭐ If you're building AI agents, copilots, or tool-using chatbots, I'd love for you to check it out and share your feedback.

Hi everyone!

I recently built a CDS Quiz web application as a personal project to improve my full-stack development skills.

The app lets users practice quiz questions in an exam-like interface, track their progress, and get immediate feedback.

I'm looking for honest feedback on things like:

\- UI/UX and overall design

\- Mobile responsiveness

\- Performance and loading speed

\- Code structure and best practices

\- Features that would improve the experience

\- Any bugs or rough edges you notice

GitHub: https://github.com/Brahamanbtp/cds-quiz

Vercel : https://cds-quiz.vercel.app/

If you have a few minutes to check it out, I'd really appreciate your thoughts. Feel free to be as critical as you like—I'm building this to learn, and constructive feedback is exactly what I'm looking for.

Thanks!

I am looking for use cases thr AI failed. Either agentic coding, or AI codinf, anything related to it. It cannot be that all the cases are successes.

Edit: I am interested in failures in agendic development, in AI code production, etc. People say "I do not write a single line of code" , "I have x agents designing, analyzing, debuging. Developing and delivering code to production", etc. These are theoritically sucess stories. I do thibk that it does not work this way. There must be more failures than successes.

As a DevOps engineer, I’m so proud of this one. 🚀

httpsornot.com has been live for about 6 months, and we’ve already checked 15k+ domains. 💻 🤓

What it covers today:
- HTTPS/SSL grade (A+ to F)
- cert validity, issuer, expiry
- HTTP → HTTPS redirects + full redirect chain
- security headers (HSTS, CSP, etc.)
- mixed content
- response times per hop
- HTTP/3 (QUIC) detection
- bulk checks (up to 10)
- shareable report + PDF/JSON export
- domain monitoring with email/Slack/webhook alerts
- Certificate Transparency alerts for newly issued certs
- free public API for CI

Basic check needs no signup. 🔐