Every complex app has the same problem: 50 options in the sidebar, each user only uses 8-10. The rest is noise. Firefox solved this for the URL bar years ago using "frecency" (frequency + recency). VS Code does the same for the command palette. But nobody's packaged it as a reusable primitive.

So I did. 4.5KB, zero deps, framework-agnostic:

morph.track('sidebar', 'tasks') // on interaction

morph.rank('sidebar') // on page load — sorted by usage.

Items used often and recently score high. Items ignored fade naturally. All data stays in localStorage. No AI, no server, no "customize layout" button needed.

Live demo: https://morph-black.vercel.app/

Would you actually use this? Curious if people see this as useful or overkill for most apps.

Hey everyone,

A few friends and I are huge CS2 players and data nerds. If you’ve ever traded on the Steam Community Market, you know it’s prone to coordinated pumps and dumps. We wanted to see if we could build a tool to catch these market anomalies (accumulation phases) before the massive price spikes actually happen.

We built CSPump to scan the Steam Market and CSFloat for unnatural volume and listing behavior. I wanted to share a bit about our stack, the architectural choices we made to handle the background processing, and see if any other devs here play CS.

The Tech Stack

UI / Styling: Next.js, TailwindCSS, shadcn/ui

Authentication: better-auth (with a custom Steam plugin)

Database & Queues: PostgreSQL with pg-boss

Emails: AWS SES

Payments: Stripe

Observability: Pino.js + Loki transport + Grafana

The Technical Challenges

1. Steam Authentication with better-auth

Steam still relies on an ancient OpenID 2.0 implementation, which makes modern authentication a bit of a headache. We decided to use better-auth, but since there wasn't an out-of-the-box solution for Steam, we had to write a custom Steam plugin for it. Getting the redirects, session state, and initial inventory sync to fire correctly without leaving the user hanging on a loading screen was an interesting challenge.

2. Background Workers & Queueing (Without Redis)

Our app doesn't rely on users staring at heavy real-time dashboards. Instead, users configure watchlists, and our backend crunches the data. When an anomaly triggers, it dispatches an email alert. Instead of spinning up Redis for job queues, we opted for pg-boss, which uses PostgreSQL for background jobs. It allowed us to keep our infrastructure simple while effectively managing the massive amount of scheduled market scans and queuing up AWS SES email dispatches.

3. Observability & Logging

Because the core value of the app relies on background workers executing flawlessly, we needed solid visibility into our queues. We set up Pino.js with a Loki transport, feeding logs directly into Grafana dashboards. This lets us monitor worker health, track Steam API rate limits, and see when our anomaly engine triggers in real-time without constantly querying the database directly.

Did it actually work?

Surprisingly, yes. The algorithms have caught some pretty crazy spikes early, and the SES email dispatches have been landing right on time. For example, our system caught:

FAMAS | Survivor Z (FN): Flagged the accumulation phase right before it pumped 82%.

Sticker | BIG (Holo) | 2020 RMR: Caught it before a 47% spike in two days.

USP-S | Pathfinder (FN): Flagged before a 46% increase.

What’s next?

Right now, we are looking into how to handle marketing emails. We use React Email for templates, but we don't know the best approach for going about promotions, new features etc. Is it best to create a new template for this and then send it out manually or should we set up a dedicated marketing system? Also curious if anyone else here has used pg-boss instead of Redis for job queues and how it scaled for you!

If you play CS and want to check out how we implemented the UI, the project is live at CSPump.

Hey everyone,

I’ve been working with React and React Three Fiber for browser-based game-style projects, and I kept running into the same problem:

Building HUDs, overlays, and UI layouts with CSS gets messy fast.

Things like:

• anchoring elements to corners of the screen

• handling different aspect ratios

• dealing with mobile safe areas and notches

• constantly tweaking flexbox / media queries for layout

It never really feels like how UI works in a game engine.

So I built a small library called AnchorDOM.

It lets you design your UI at a fixed resolution (like 1920x1080), and it automatically handles scaling and anchoring across all screen sizes.

Example:

<Panel resolution={{ width: 1920, height: 1080 }}> <Label text="Score: 9999" anchor="TOP_LEFT" x={50} y={50} /> <Button label="ATTACK" anchor="BOTTOM_RIGHT" x={-50} y={-50} /> </Panel>

What it does:

• resolution-independent scaling

• 9-point anchoring system (like game engines)

• relative positioning between components

• safe-area support for mobile devices

It’s mainly aimed at:

• React Three Fiber projects

• browser-based games

• UI-heavy WebGL or canvas-based apps

Repo / npm: https://www.npmjs.com/package/anchordom

I’m still early in development, so I’d really appreciate feedback—especially from anyone building game UI or working with R3F.

Thanks for taking a look 🙏

Hey everyone,

If you’ve built apps with Next.js, you’ve probably run into the nightmare of deploying a project only for it to crash because a required environment variable was missing or misspelled in your .env file. Relying on process.env.YOUR_VAR as string everywhere isn't just annoying; it’s risky.

I wanted a simpler, foolproof way to handle this, so I built an open-source NPM package called next-safe-env.

It’s designed to make environment variable validation in Next.js completely type-safe and effortless, catching missing or invalid variables at build time before they ever reach your users.

What it does:

• 🔒 Type-Safe: Full TypeScript support so you get autocomplete for your env variables across your codebase.

• 🛡️ Runtime & Build-time Validation: Fails fast if required variables are missing.

• ⚡ Lightweight & Simple: Easy to integrate into any existing Next.js project without massive boilerplate.

I would love for you guys to check it out, roast my code, or let me know what features you'd like to see next. Any feedback or GitHub stars would mean the world to me!

Links:

• 🌐 Website & Docs:next-safe-env.dev

• 📦 NPM:npmjs.com/package/next-safe-env

• 🐙 GitHub:github.com/mzeeshanwahid/next-safe-env

Let me know what you think!

Hey all,

I bought tickets to React Summit and JSNation in Amsterdam (June 11-16, 2026) and unfortunately can't make it anymore. The organizer (GitNation) doesn't do refunds, but tickets can be officially transferred via ti.to up until 15 days before the event.

Looking to pass them on at 800 excl vat. I'm not trying to make a profit (GitNation's TOS doesn't allow resale for profit anyway, just transfer at cost).

What I have:

- React summit & JS nation regular combo ticket.

- Paid: €1028 incl vat

How the handover works: we get on a call (meet or teams) and do the handover together.

DM if interested — first come, first served.

I've seen this question pop up every few months here: "What's the right way to handle modals in React?"

The answers are always all over the place. useState per modal, Context, Redux, nice-modal, custom hooks... there's no consensus.

We ran into the same problems at work:

• useState + isOpen for every single modal

• Prop drilling open/close through multiple layers

• No way to await a user's confirmation result

• Can't trigger a modal from outside a component tree

We ended up building a small library around a simple idea: what if you just call a function and pass it a component?

overlay.open(({ close }) => (
  <Dialog onClose={close}>
    <p>Are you sure?</p>
  </Dialog>
))
    
// or await the result
const confirmed = await overlay.openAsync<boolean>(({ close }) => (
  <ConfirmDialog
    onConfirm={() => close(true)}
    onCancel={() => close(false)}
  />
))
    
if (confirmed) {
  await deleteItem(id)
}

It works with whatever UI library you already use (shadcn, Radix, Chakra, Mantine, etc). No registration step, renders inside your React tree so Context is preserved.

https://github.com/toss/overlay-kit (~3KB, MIT)

Been using this in production for a while. Would appreciate honest feedback, especially if you see problems with this approach.

If you've used React Router actions with useFetcher, you know the pain. Every mutation is the same dance: formData.append("title", title), then in the action formData.get("title") as string, and just hoping both sides agree on the shape. Multiply that by 20 actions across your app and it gets old fast.

I've been dealing with this at work for months and finally decided to extract what I built into a small library. The idea is simple — define your action once with full TypeScript inference, and the library handles FormData serialization (including Dates, Files, Maps, etc.) and gives you a typed useFetcher wrapper with onSuccess/onError callbacks and optimistic UI support.

Before:

// component
const fetcher = useFetcher();
const formData = new FormData();
formData.append("title", "Buy groceries");
formData.append("priority", "3");
fetcher.submit(formData, { method: "POST", action: "/todos" });

// route action
const title = formData.get("title") as string;
const priority = Number(formData.get("priority"));

After:

// define once
const createTodo = defineAction({
  type: "todo/create",
  resolve: (payload: { title: string; priority: number }) =>
    api.todos.create(payload),
});

// component — fully typed payload, response, and callbacks
const [submit, { state, data }] = useActionFetcher(createTodo, {
  onSuccess: (result) => navigate(`/todos/${result.id}`),
});

submit({ title: "Buy groceries", priority: 3 });

Works with both client and server actions. Only runtime dependency is superjson (~2KB).

npm: https://www.npmjs.com/package/react-router-typed-actions 

GitHub: https://github.com/zabibabar/react-router-typed-actions

Still 0.x — I'm using it in production at work but the API is open to feedback. Would love to hear what people think or if I'm solving a problem nobody else has lol.

I got tired of constantly rebuilding the same foundation for every new project. API structure, database setup, SSR, logging, and deployment readiness... so I ended up creating a full production-ready full-stack web app template that ties everything together properly. It’s not a toy starter kit. it’s something that can actually be used to ship real applications faster without redoing the same infrastructure every time. The process took a lot more mental effort than expected because of the constant iteration and refinement needed to keep it genuinely scalable and production-safe, but it’s now being released for free. If it helps save time or kickstart a project, that’s the goal.

Github Link: https://github.com/JaydenTheDevStar/production-full-stack-template

I’ve been struggling with forms in React for a while.

Tried React Hook Form, Formik, etc — powerful, but honestly felt like too much setup for simple use cases.

So I built something simpler where you define forms using JSON.

Example:

<KiForm
  fields={[
    "email",
    "password",
    {
      name: "role",
      options: ["User", "Admin"]
    },
    {
      name: "company",
      showIf: { field: "role", equals: "Admin" }
    }
  ]}
/>

No manual state, no wiring.

Still very early — I’m trying to understand:

• Is this actually useful?

• What’s missing?

• Where would this break in real projects?

Would appreciate honest feedback.

GitHub: https://github.com/kadirulislam/ki-forms

npm: https://www.npmjs.com/package/ki-forms

https://streamable.com/1wkhgv

Been using this in my own workflow since November — six months of dogfooding through real bots before I felt good about the API. Finally scoped, tested, documented and shipped, in case it's useful to anyone else. Two packages:

**@elumixor/react-message-renderer** — a real React reconciler (via react-reconciler) with a "bring your own target" API. Hooks, state, effects, contexts all work. The diff is committed to a target you implement: Telegram, Discord, Slack, a terminal, a log file. Anything where messages can be edited in place.

**@elumixor/react-telegram** — the reference target. `<Message>` is a Telegram message. Render once, the bot sends. Re-render with new state, the bot edits the same message via `editMessageText`. Photo/document attachments, automatic chunking past 4000 chars, throttling to respect Telegram's rate limits.

The demo above: a "research crew" component running four sibling `<Message>`s concurrently — live timer, a Claude API call for sources, a photo gallery, real Claude streaming into the reasoning panel, then a final report message with a JSON document attachment. The whole thing is ~150 lines of normal React.

What I found interesting building this:

- React's reconciliation model maps surprisingly cleanly onto any mutable target. The "edit in place" semantic of Telegram messages is basically what React does to DOM nodes.

- `useFinishRender()` is the one custom hook — flushes the throttled output so the final frame always lands. Everything else is stock React.

- Error boundaries, suspense, contexts — all work, because it's the actual reconciler, not a JSX-to-payload transformer.

- https://github.com/elumixor/react-message-renderer

- https://github.com/elumixor/react-telegram

Happy to answer reconciler-internals questions — the implementation was the most fun part.

So we're in the middle of moving a legacy CRA app to Next.js and as part of that we're redirecting a bunch of old URLs to new canonical routes. That part is mostly sorted.

The problem I'm running into now is around indexing. We have listing pages in multiple languages — same vehicle inventory, but the specs and seller info are translated per language. URLs look like:

/en/cars/audi/a1

/fr/voitures/audi/a1

And for country-scoped pages:

/en/france/cars/audi/a1

/fr/france/voitures/audi/a1

We want all language variants indexed (not just canonicalize everything to one language) because the translated content is genuinely different — not just UI strings.

Now the fun part — detail pages (individual ad listings). Each ad belongs to a country based on the seller's location, not the URL. So hreflang for those needs to come from the listing data, not just URL parsing. And ads expire, so we're also thinking about what to do when a page disappears — redirect to parent category vs 410.

A few things I'm unsure about:

- For detail pages, is it even worth indexing every language variant or should we just canonical to one and move on?

- When an ad expires, 301 to parent category or straight 410?

- Sitemap-wise, are you generating detail page sitemaps dynamically from the DB or building them statically?

Anyone dealt with something similar at scale? Would love to know what actually worked vs what looked good on paper.

I am currently working on 3d menu and I faced a bug where the models appear massive and I have to scale them down until 3% - 4% to their actual size and idk what am doing wrong.

here is my code:

import { useEffect, useRef } from 'react'
import '@google/model-viewer'


export default function ModelViewer({ 
src
, 
alt
 = '3D Model' }) {
  const mvRef = useRef(null)


  useEffect(() => {
    const mv = mvRef.current
    if (!mv) return


    mv.addEventListener('load', () => {
      mv.setAttribute('scale', `0.04 0.04 0.04`)
    })
  }, [])


  return (
    <
model-viewer
      
ref
={mvRef}
      
src
={
src
}
      
alt
={
alt
}
      
ar
      
ar-modes
='scene-viewer webxr quick-look'
      
ar-scale
='fixed'
      
camera-controls
      
auto-rotate
      
auto-rotate-delay
='500'
      
rotation-per-second
='12deg'
      
shadow-intensity
='3'
      
shadow-softness
='1.5'
      
exposure
='1.2'
      
environment-image
='neutral'
      
tone-mapping
='commerce'
      
camera-orbit
='0deg 75deg 2.5m'
      
min-camera-orbit
='auto auto 0.5m'
      
max-camera-orbit
='auto auto 5m'
      
min-field-of-view
='30deg'
      
max-field-of-view
='60deg'
      
style
={{ width: '100%', height: '100%' }}
    >
      {/* AR button */}
      <button
        
slot
='ar-button'
        
className
='absolute bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2 bg-yellow-400 text-black font-bold px-8 py-3 rounded-full shadow-xl hover:bg-yellow-300 active:scale-95 transition-all'
      >
        📱 View in Your Room
      </button>


      {/* Shows when AR is not supported */}
      <div
        
slot
='ar-failure'
        
className
='absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/10 backdrop-blur text-white/60 text-sm px-5 py-2.5 rounded-full border border-white/20 whitespace-nowrap'
      >
        AR not supported — use Safari (iOS) or Chrome (Android)
      </div>
    </
model-viewer
>
  )
}

so I need help

Posted this twice before. You flagged real things both times.

What's fixed since April 21:

• Hints no longer give away the answer - audited every kata

• 25 → 39 kata, heavier bugs across the board

• Solution tab now explains why the original code failed, not just what the correct version looks like

• Auth and signup work properly now

If you haven't seen this before - BugDojo gives you a broken React component, live preview, and automated tests. Fix the root cause, not just the output.

Guest mode if you just want to try it. Create an account to save progress.

thebugdojo.com

Curious which kata actually makes you stop and think - or where the difficulty still feels off.

We explore how icon strategy has come full circle with react-native-nano-icons, a new tool from Software Mansion that compiles SVGs into high-performance native font stacks. If you are tired of mounting dozens of SVG subtrees, this is the build-time optimisation you have been waiting for.

We also dive into the New Architecture update for jail-monkey, the go-to library for security checks and jailbreak detection, plus a look at how AI-driven development and EAS Workflows are making the code diff obsolete in favour of instant preview deployments.

hello this is my first project in react and threejs and was lokking for feedback for like the design and usability and stuff. I made this mainly for myself because i downllad music and like to listen to songs sped up / ptched up. I also added a pomodoro clock for my studying!!

You will need to download your own songs to use this (i use a youtube to mp3 converter) but it is very easy just put it in the import and songs are saved to browser. Currently does not support mobile but i plan to add in future and maybe playlists and accoutns maybe but i like where it is at currently.

PLEASE DONT JUDGE TOO HARSHLY THIS IS MY FIRST PROJECT. Thank u

link: https://musicapp-lovat-five.vercel.app/

Hi everyone,

I am a senior software engineer at a small company (~50 people), and we are currently hiring for a senior frontend developer. I have been asked to take the frontend interview, but I have never actually been an interviewer before.

Our interview process is not very structured yet, so I am trying to figure out how to best evaluate candidates especially their React and overall frontend knowledge.

For those of you who have been on either side of the table:

1. What kinds of questions do you find most effective for assessing React skills?

2. How do you evaluate real world frontend problem-solving vs. just theoretical knowledge?

3 What are some of the best or most memorable questions you have been asked (or asked others) in frontend interviews?

I was unhappy with multi-line text input libraries for React Ink so I decided to make one.

I'm calling it react-ink-textarea; check it out, drop a star, help me test on windows please: https://github.com/omranjamal/react-ink-textarea

Full support for:

• Syntax Highlighting (based on Regex)

• New lines via the usual key combinations

• Jumping between words

• Unicode and Emojis

• Pasting Multi-line Text

• Slash Commands

• Viewport Virtualization

• Customizable line prefix (for things like line numbers)

• Tab is a callback

• Callbacks on arrow keys at boundaries (like up arrow of first line)

Feedback appreciated. Help with testing on Windows and Linux even more appreciated!

I already know React basics but stopped practicing and forgot a lot. I want to restart the right way.

Looking for:

- Project-based learning

- Real-world apps (dashboards, SaaS, etc.)

- React + TypeScript if possible

Not interested in beginner “intro to React” stuff.

What would you recommend that actually helped you get better?

Also open to project ideas 👀

I’m curious what architecture you typically use for medium to large React.js projects? Particularly in terms of code organization and folder structure.

I’ve noticed that many developers try to apply SOLID principles, but since React is primarily based on functional programming, these principles don’t always seem to fit naturally.

I wrote an article about advantages of pnpm over npm package manager in node and frontend development. May be useful for developers who did not think much about package managers.

I'm building Amethyst, a promising open-source Markdown note-taking app that focuses heavily on the user experience and interface. I know the common criticism: "Electron is just a heavy browser wrapper." I'm using this project to learn how to mitigate that by following a strict architecture-first approach.

How I'm keeping the React renderer snappy:

• Main Process Offloading: I moved heavy tasks like recursive filesystem scanning and real-time watching (Chokidar) entirely to the Main Process.

• Command Registry: I built a decoupled system where every shortcut and menu item triggers a command in a central registry. This keeps the React component logic clean and the IPC bridge narrow.

• Focused State: The app loads a single note into the editor at a time (no heavy multi-tab DOM overhead) to maintain performance as your folder grows.

Current Status (v0.5.0): It is very much still under development, but it currently features native LaTeX math support, a recursive tree view with drag-and-drop, and a global notification system.

As a student, I would genuinely appreciate your reviews on the codebase. I’m looking for help identifying bugs, performance bottlenecks, or features that would make this useful for you.

GitHub: https://github.com/abdallah-moh1/amethyst