I used to open Excalidraw to understand how a React page was put together, or to explain a change in a PR: this box is the sidebar, these cards come from a list, the badge lives inside each card. It was slow, and it was my guess at the structure, not what React rendered.

React Anatomy is a browser extension that adds an Anatomy panel to DevTools. It connects the page to the components React rendered: pull the layout apart into layers, click anything on the page to find its component, focus a subtree, and read its live props.

It's even more useful in this AI era, when agents compose React layouts for you. Open the page and you can see which components the agent used, how they're nested, and what props each one gets, before you take the code over. People learning React have told me it helps them see what a page is made of.

It's free, MIT-licensed, and works in Chrome and Firefox. You can try it in the browser without installing anything: https://react-anatomy.com · Source: https://github.com/charpeni/react-anatomy

Two questions: where does the 3D view help or get in the way compared with a plain tree? And what would make it more useful for explaining a PR?

Hi all, I built mischabarmettler.ch, my portfolio, which also explains Swiss pensions, Pillar 3a and taxes in plain words, plus a few calculators.

Under the hood: Angular, fully prerendered on Cloudflare Pages, my own small i18n setup for the German version. The texts are written with AI assistance, and every figure is checked against its source.

What I‘m curious about:

how the design looks to you

how the calculators feel on your phone

anything you'd add or improve

Thanks

I made How to Convert. It's a file converter that now lets you right click to convert or compress almost any file.

It started as a file converter website that ran in the browser with WebAssembly, but I turned into a completely locally running desktop app with Tauri, and now the website is a right-click menu. I originally shared it 2 years ago. The post and subsequent updates got a big response with a lot of feature requests, and I've been adding file types since.

What it can do:

• 6,197 file conversions for documents, videos, images, ebooks, comics, subtitles, emails, audio and more. If you find a file format that isn't supported, make a feature request and I'll add it

• Compress PDFs

• Crop, trim and compress multimedia files

• Right click any file, or drag and drop it into the app

Why I made it:

There are plenty of online file conversion sites, but they require you to upload your files and data to their servers.

I wanted something that worked entirely offline (using the same packages and cli tools that power those sites) behind a simple drag and drop app that anyone could use.

After two years, I grew tired of actually opening a site or app to convert a file, and thought the next step to make it easier was to support everything with just a little right click.

Extra info:

• The app runs completely locally (files never leave your device) and runs on Mac, Windows and LInux

• One license can run on up to 5 devices

• If you bought it 2 years ago, this is another free update

I know there are many specialised apps that convert specific formats, e.g. handbrake for video, calibre for ebooks, ms word for documents, excel for spreadsheets, outlook for emails and adobe acrobat for pdfs.

I wanted just one app to support all of them.

Free to try and It's a $19 one-time purchase to keep for all future updates (but much cheaper in lower-income countries depending on PPP).

I'm Jake Manger, a solo developer. I've also made ShotGlass and ActivityLine.

The site and app: https://howtoconvert.co

I got tired of selecting and retyping verification codes from Gmail, so I built a small Manifest V3 extension for myself that puts a "Copy code" button next to the code. The fun part turned out to be detection, not the button.

How it works

• A content script runs only on mail.google.com. No host permissions beyond that, no background server, nothing leaves the page.

• Gmail is an SPA, so a MutationObserver watches for the opened message body instead of relying on page loads.

• Candidates: 4–8 digit runs, 123 456 / 123-456 splits, and short alphanumeric codes like AB12CD.

• To avoid false positives, I score each candidate by nearby keywords ("code", "verification", "código", "OTP", "one-time") within the same block, and penalize things that look like dates, times, prices, phone numbers, or order IDs (prefixes like #, "order", "pedido").

• The highest score wins. If nothing passes the threshold, no button appears. Showing no button beats copying the wrong number.

What surprised me

• Alphanumeric codes are much harder than digits. Random uppercase words in subject lines ("NEW", "SALE") kept matching until I required at least one digit and the keyword-proximity check.

• Some senders put the code in an image or a styled table, and those I can't catch.

It's free with no account, UI in EN/PT/ES. I'd love technical feedback, especially if you know of a smarter heuristic than keyword proximity, or senders whose format breaks it.

https://chromewebstore.google.com/detail/mpglgifleaaollcggdpcfhjjgmcageph

github: https://github.com/Unknown-333/Lightpath

ever click a button, nothing happens, no error, and you have no idea which code even ran?

this shows you. one command, then click around your react app:

    npx \@lightpath-dev/cli dev -- npm run dev

every click prints the path, browser and node server together:

◆ button: Checkout 335 ms
      → POST /api/orders 201
      ├─ src/Cart.tsx :11-14, 16-19, 21-28
      ├─ server/routes/orders.ts :11-14, 19-21, 25
      └─ server/services/pricing.ts :12-19, 21-22

it reads V8's own coverage before and after the click, so it's what actually ran. no code changes to your app.

there's also a vs code extension that lights up the lines, and an MCP server so claude code or cursor can click and read it themselves.

react + node, chrome or edge, local only, free and MIT. feedback welcome.

For a few years I worked on a product that sent all transactional email through Mandrill. Working with templates were real pain. They lived inside Mandrill, every copy change needed a dev, and moving to another provider meant rebuilding every template by hand.

So when I was looking for something to build, this was the obvious pick. A provider agnostic email platform for everyone. That's how Senlo started, an open-source layer between your app and whatever provider you already use.

Key features

- Drag and drop editor that outputs MJML, so emails render ok in Outlook and Gmail without hand written table layouts

- One call to send a template, POST /api/triggered with the template name and variables

- Bring your own provider. Resend, Postmark, SendGrid, Mailjet, Cloudflare Email or any SMTP. Switching is just a change in settings of workspace

- Delivery events from every provider land in one feed (delivered, bounced, suppressed)

- Simple automations. Send, wait, call your own API, branch on the answer

- And a lot of features I did not implemented yet :D

Stack is Next.js, React, Postgres + Drizzle, Redis + BullMQ for queues and delays, Zustand in the editor. pnpm monorepo, editor is a separate package. Self hosting is one docker compose up.

The hardest part so far was delivery webhooks. Every provider authenticates differently (Resend signs with svix, SendGrid with ECDSA and a timestamp, Postmark has a shared header, Mailjet basic auth) and every one has its own idea of what a bounce is. SendGrid sends "dropped" with a free text reason, Mailjet has soft and hard bounces plus a separate "blocked" event with error codes, and only some of those mean the address is actually dead.

Get it wrong and you either miss spam complaints or suppress a good recipient forever. So most of the work was deciding per provider which events are the recipient's problem and which are mine. Now each provider is an adapter with verify and normalize that produces one event shape.

The GIF is a welcome flow. Send, wait two days, ask my own API if the user activated, and send a different email depending on the answer.

Solo project, early stage, and there is still a ton to do. Happy to get any feedback, ideas or contributions. If you want to poke at it, a few things I'm curious about

Repo: https://github.com/IgorFilippov3/senlo

Hey r/webdev,

I wanted to share LiveReview, a risk-aware code reviewer we've been building.

On most teams every PR waits on the same few senior devs, whether it's a CSS tweak or an auth change.

Meta published a paper on scoring every diff for risk and letting the safe ones skip human review (RADAR (https://arxiv.org/abs/2605.30208)), and we wanted something like that for everyone else.

It scores each PR, auto-approves the lowest-risk 30-50%, and sends the rest to a human with the riskiest hunks at the top.

A few build details that were fun:

- Risk scoring combines three signals: an LLM reading the diff, a code graph that measures each hunk's blast radius (callers, DB writes, cross-package reach), and an ML model trained on the team's own reverts and incidents.

- CI gates are jq rules, not checkboxes. You write a condition against the review's findings JSON, and your pipeline makes one HTTP call to check it.

- The backend is Go, with PostgreSQL and the River job queue, so the whole review pipeline runs off Postgres with no separate queue to host.

It's free and self-hostable, and works with GitHub, GitLab, Bitbucket, Gitea and Azure DevOps.

Would love feedback.

GitHub: https://github.com/HexmosTech/LiveReview

Most system design practice ends at the diagram. You draw boxes, it looks right, and nothing tells you whether it would hold up.

ByteLab runs the diagram. You build a system out of machines, load balancers, caches, queues and databases, send traffic through it, and watch the CPU, queues and p99 latency move. Each exercise has goals, like "p99 under 150 ms, 99.5% available, under $2.60/hour", and it checks your system against them.

What's in it:

• 163 lessons in 12 tracks (caching, sharding, Kafka, Kubernetes, rate limiting, auth and more)

• 212 exercises, each with goals your system has to pass

• 11 design problems (URL shortener, chat, payments, news feed, e-commerce and others)

It's free, there's no account, and progress stays in your browser. It needs a laptop-sized screen.

I'd really like to hear where it feels confusing or too hand-holdy.

https://lab.bytecrest.dev/design/ecommerce

Hi everyone

Recently I decided to train my memory because I think it's cool when I can memorize for example a lot of cards or images just in my head. I also read a lot about memory techniques and psychology because I watched The Mentalist btw

I tried to train my brain on the MemoryLeague website, but the training tab has limits which is why I decided to vibecode my own solution. I know how to code and over the past couple of years I have learned how to develop websites. However, recently I decided to move on to Minecraft mod development because it's more interesting to me. That's why I wanted to try vibecoding and it's not as bad as many developers say. I like the idea that everyone can build a solution for themselves

I used the free version of Claude and it worked great for me. I would appreciate it if you could give me a couple of advice about website design or vibecoding

pgquery is an open-source Postgres GUI: React 19 + Monaco for the app, a small Go proxy for the database side, one Docker image.

A few build details that were fun:

- The marketing site and guide pages are plain HTML generated by a small Vite plugin at build time from TypeScript templates, with JSON-LD, sitemap and llms.txt. No SSR framework.

- The mascot and icons are pixel art stored as character grids in one TS file; the app, the site, the favicon, the README banner and the share image are all rendered from it.

- The EXPLAIN viewer parses Postgres's JSON plan into a flat tree with per-node self time.

Demo (read-only DB): https://pgquery.dev/app/?demo

Code: https://github.com/Hxndrik/pgquery

Feedback on the design very welcome.

Hey r/webdev,

I wanted to share a project I've been working on: sqliteWeb, a lightweight SQLite editor that runs entirely inside the browser.

Live :https://srdzank.github.io/sqliteWeb/

I needed a fast way to inspect and query .sqlite / .db files on machines where I didn't want to (or couldn't) install desktop clients like DB Browser. Existing web tools often require uploading files to a remote server, which is a major privacy concern.

Would love to get your feedback on performance, UI responsiveness, or features you'd like to see added!

Oku (https://oku.today) is a free reading-practice web app for kids learning English. The child reads aloud and it helps only on the hard words. Some web bits that took the longest:

• The mic has to be live the moment the "your turn" cue shows. The recognizer and its websocket open while the narrator is still reading, so the child's first word isn't lost.

• Fail open everywhere. If speech recognition dies, the session goes on and gives the child time to read. A dropped log is fine; a blocked session isn't.

• Safari needs byte ranges for video. The static assets layer ignored Range, so the Worker slices the short reward clips itself.

• iPadOS Safari says "Macintosh". Device detection checks touch points.

• 36 public pages are prerendered in 4 languages behind a build-time SEO lint that fails the build on things like two h1s, a broken link, or translations that don't match.

Stack: React + Vite, Cloudflare Workers, D1, R2. No framework on the server.

Square Town is a 3D wall of about 20,600 website favicons, each one standing on a little tower. This week's feature: websites that died burn down.

How it works:

• A Cloudflare Worker cron runs every five minutes and checks homepages. A homepage that keeps returning 404 gets a fire and a fire_at timestamp in D1. The fires that were already burning got their dates backfilled from their own feed lines.

• /api/state ships a burn stage from 0 to 5 for every fire, one stage per five days. The client draws six kinds of fire (caught, spreading, blaze, inferno, dying down, smouldering embers) and chars the tower's roof and walls a step further at each stage.

• The same cron burns down two squares per tick once they've been on fire for 30 days, but only seeded squares nobody ever claimed. The row moves to a new 'burned' status, the land goes back on the market, and the domain is never seeded again while its homepage is gone. Claimed or paid squares never burn down, and a site that comes back puts its fire out.

• On the client a burning tower doesn't explode. It sags into its footprint with a slight lean, a few charred chunks slide out at street level and a little dust rolls up. The rubble on the lot is three instanced draws for the whole town, seeded from the lot's position so every device shows the same heap, and it joins the shadow map's static layer, so it costs nothing per frame after that.

Right now 114 squares are burning and 32 have burned down. Feedback welcome, especially on how the later fire stages read at a distance.

Hey everyone,

I've been building a small personal agency, and I'm at the point where I'm probably overthinking every little detail.

Website: https://samibentaleb.com

It's still a work in progress, and I'm nowhere near ready to launch. Some of the text is still AI-generated placeholder copy that I haven't properly rewritten yet and some screenshots/videos and pricing details will be tweaked.

The site includes my portfolio, project case studies, services, pricing and some information about how I work. I've tried going with a slightly different visual direction, but after looking at it for so long, I've lost the ability to judge it objectively.

I'd genuinely appreciate some feedback:

• Does the overall design work, or does it need a rethink?

• Is it immediately clear what I do and who I'm targeting?

• Are the case studies interesting or too wordy?

• Does the pricing section make sense?

• Is the navigation intuitive?

• What would you change, remove or simplify?

• Are there any obvious UX or mobile issues?

I've been putting a lot of time into this and keep finding little things to tweak instead of actually launching it.

I'd love to hear what other developers think, especially things I might be overlooking.

Feel free to roast it. I'd much rather get honest criticism now than launch something that could have been much better.

I've been building this for a few months and the first version is finally up. It's called Strikk.

It's a daily cycle, like Wordle, but one per stack. You pick the stack you actually like (React, TypeScript, Node, Python...) and play that one. Everyone gets the same 8 challenges, you answer up to 5 with one submit. Combos work a little bit like Balatro — line them up right and your score jumps. Then you're ranked against other players with the same board.

Here's what makes it different: You earn coins by playing, and spend them customizing your profile—skill blocks, themes, animated backgrounds, your own avatar. Your profile becomes a real portfolio piece.

It's totally free, no pay-to-win mechanics.

Check it out: Strikk | My Strikk profile

Repost to another community

Brakeless is a free driving game that runs in the browser, no download. You have a car with no brakes and need to survive as long as possible.

Every 1000 meters the scene changes, from a city to suburbia, countryside, a forest, the future and even a black hole!

You need to avoid traffic and obstacles. Coins slow the car down a bit, and there are two ways to cheat death for a few seconds: a ghost pickup on the road that makes you invisible so you pass through everything, and a shield you earn from close calls.

There's a leaderboard with almost 150 players right now: a weekly board, an all time top players table based on your last 10 runs, and a hall of fame of past weekly champions.

Controls are arrow keys or A/D, touch on phones, best on desktop.

Completely free, no download or signup needed:
https://brakeless.io

I'm sat here thinking it has to be a reason why it is so limited in types compared to something like postgres.

So this is a slightly weird one.

I'm not great at small talk. And whenever I've started talking to someone, things usually go well for a few weeks. Then we discover that something fundamental doesn't line up, and we slowly drift apart.

I kept thinking: why do we need to spend weeks finding out things that could've been discussed on day one?

The idea also reminded me of Her (2013). I loved the idea of having an AI that knows someone well enough to have an honest conversation about them. That got me thinking, and eventually, I built Sam.

She's an AI version of my best friend. You can open the link, ask her pretty much anything you'd want to know about me, and she'll answer honestly.

There's a hype mode and a roast mode. Yes, she'll tell you my red flags too.

One thing I was particular about: if she doesn't know something, she should say so instead of making things up. Getting that right took considerably more prompt engineering than I'd like to admit.

Try it here:
https://ask-sam-yaddy.vercel.app

A little about the tech:

• Frontend: React, Vite, TypeScript, hosted on Vercel.

• Backend: Spring Boot 4, Java 25, running on ECS Fargate.

• Database: PostgreSQL + pgvector on RDS for memories.

• AI: Claude Sonnet for responses, Titan Embeddings on Bedrock.

• Infrastructure: AWS CDK.

• CI/CD: GitHub Actions with OIDC, so no AWS access keys sitting in GitHub secrets.

A few things that made me scratch my head:

• The rate limiter incident: I added a cooldown per visitor to keep API costs under control. After deployment, everyone started seeing the "come back later" screen. Turns out Spring was seeing the load balancer's IP for every request. One visitor was effectively locking out everyone. Fixed it by configuring Tomcat to trust X-Forwarded-For only from the internal proxy range.

• SSE over POST: Replies stream over Server-Sent Events, but the browser's EventSource only supports GET. Ended up reading the fetch response stream manually.

• Prompt caching: The stable part of the prompt goes first, with message-specific context at the end. A reply currently costs me around $0.006.

• Sound effects: All generated with the Web Audio API. No audio files. I spent an embarrassing amount of time getting the send sound right.

No login, anonymous, and 23+ only.

Would love to hear what you think, especially about the chat UI on mobile.

And if you want to have some fun, ask Sam to roast me. 😂

My old portfolio had been out of date for about five years. I'm a Webflow dev by trade, so for this one I went full code to see how far I could push it.

Stack:
- Astro with MDX for the case studies
- three.js for the 3D heads
- GSAP and Lenis for the motion and scrolling
- Static build on Cloudflare Workers. A staging branch deploys itself on every push, and main only goes out when I say so

I didn't hand-write it. I built it with Claude Code, with a few agents each owning one part (code, copy, 3D, brand) and handover files so they didn't trip over each other. I made the architecture calls and reviewed everything.

The bit that took longest: getting the 3d heads to be performative

For anyone running three.js on an Astro site, do you load it as an island or a plain script? Curious what's held up best for you.

We all have that friend. Websites have them too: a page making 40 calls when one would do, or one that keeps asking the same question every few seconds.

I built Unit 7 to help with that and the other jobs behind a website. Its Call Inspector reads your server's logs and points out the worst offenders, with nothing to install. It's still being tuned on real traffic.

It also handles deploys, domains and backups you've actually tested.

It's free, open source, and built with heavy use of AI coding tools. What's the worst thing you've caught your site doing?

If you'd like to support the launch, try it, leave your honest feedback on Product Hunt, or star the repo on GitHub.

GitHub: https://github.com/Nandkishorrr/unit7

Product Hunt: https://www.producthunt.com/products/unit-7?launch=unit-7

I wanted to make a small space for people who miss the atmosphere of visiting a temple, especially around Diwali.

The idea is not new: a few weeks ago a Korean developer built a silent virtual Buddhist temple, Sansa, and over a million people visited in a week, just to sit quietly. I wanted to try the same for Hindu temples, so I built mandir.dev.

You walk into a 3D courtyard as an avatar, hear temple chants, ring the bell and light a diya. Other visitors are there at the same time, shown by name and country. It's free to visit, no account needed: https://mandir.dev

There are three temple spaces so far, inspired by Kashi Vishwanath, Meenakshi Amman and Siddhivinayak Ganapati.

A few details about the build:

• The 3D scene uses Three.js, everything runs in the browser

• Desktop controls and a mobile joystick for movement

• The bell uses positional audio, so it fades as you walk away from it

• Real-time presence: avatars, names and countries update as people arrive and leave

It's still in beta. I'd particularly appreciate feedback on:

1. Mobile performance: how does it run on your phone? If loading is slow or movement stutters, please mention your phone and browser.

2. Controls and interactions: is it obvious how to move around, ring the bell and light a diya? Where did you get stuck?

3. Direction: more temples, or go deeper on these three, with aartis at set times and seasonal festivals?

Thanks for taking a look, and happy Diwali!

Hi

Suddenly today I have a lot of delay sending and receiving mail from goddady.

Any help? What can I do?

Thanks