r/reactjs

Phone view

Hi I hope you all are doing great ❤️

I´m starting as a react developer, and my only question to this moment is that if there is a way for the web to adjust when it is on a phone, like make it dynamic without going line by line adjusting when on a phone

reddit.com
u/ElectricalGrocery839 — 4 hours ago
▲ 9 r/reactjs+2 crossposts

Rendezvous: a serverless, Zoom-like video conferencing web app

Hey folks,

Been hacking on a side project called Rendezvous for a while and figured this sub would be the right place to share it. It's a small Zoom-like video conferencing web app built with React + PeerJS, and the whole thing runs without an app server (it's just a static site on GitHub Pages).

https://preview.redd.it/ke1yehmqi72h1.png?width=3164&format=png&auto=webp&s=721b4382f9ebc6a1fa738d7139bcc7293e6b16b5

The idea is pretty simple: instead of doing a full mesh between every participant, the meeting host acts as a relay hub for both chat and media streams. So each client only keeps connections to the host, not to everyone else. Trades off some host bandwidth for avoiding the O(N²) mesh. PeerJS's public broker handles the initial signaling and that's about it.

Honestly I mostly built it because I wanted to see how far we can push WebRTC without any backend, and it turned out more usable than I expected.

Code available at: https://github.com/predatorray/rendezvous
Try it at: https://predatorray.github.io/rendezvous/

Curious if anyone here has tried similar host-as-relay setups for video conferencing, or if there are obvious things I'm missing. Also open to hearing about better ways to handle the media forwarding part.

reddit.com
u/zetaplusae — 4 hours ago
▲ 230 r/reactjs+7 crossposts

Built a React data grid that can save you hours of time and money.

Hello everyone,

Wanted to share a super cool project (IMO) we have been working on. It’s a zero-dependency React data grid, called LyteNyte Grid. Check it out, and hopefully, you will find it useful and save yourself a ton of time.

Some of the reasons to use LyteNyte Grid.

  • Crazy Performance: LyteNyte Grid is super light at only 40kb (gzipped) and is extremely fast. It can handle millions of rows and 10,000+ updates/sec. Based on our internal benchmarks, it is one of the fastest grids available on the market.

  • Feature-rich: Brings 150+ features, most of which are free and open source. Features such as cell range selection, row master-detail, and row grouping are included for free with LyteNyte Grid. This is something we are quite proud of. There are paid libraries (I won't name them) that offer less.

  • No Styling Tradeoffs: With LyteNyte Grid, you can choose whether to go headless or styled. There is basically no tradeoff when considering styling choices.

  • Full Prop Driven: You can configure it declaratively from your state, whether it’s URL params, server state, Redux, or whatever else you can imagine, meaning zero sync headaches.

  • Unique DX Experience: Our grid is built in React for React and has a clean declarative API, which eliminates awkward configuration workarounds.

We also recently dropped LyteNyte Grid AI Skills. This is a really nice feature if you’re using AI coding agents. It lets you describe an advanced data grid solution, and your AI agent codes it for you. We have been testing this with increasingly complex grid instances, and the results have been awesome.

All our code is publicly available on GitHub. Happy to answer any questions you may have.

If you find this helpful and like what we’re building, GitHub stars help. Feature suggestions and code contributions are always welcome.

1771technologies.com
u/Vis_et_Honor — 17 hours ago
▲ 87 r/reactjs

Why are people moving from Next.js to TanStack Start?

I’ve been seeing a lot of YouTube videos lately about developers moving from Next.js to TanStack Start. As someone still relatively new to the JS ecosystem, it’s hard for me to tell what’s real technical improvement versus YouTube hype/content monetization.

I’d love to hear from people who actually use these frameworks in production or have serious experience with them.

  • What problems with Next.js are pushing people away?
  • What does TanStack Start do better in practice?
  • Is this mainly a DX trend, performance thing, architecture preference, or just “new shiny tool” energy?
  • Would you recommend a beginner/indie developer learn TanStack Start today, or is Next.js still the safer/default choice?

Looking for honest opinions from experienced devs rather than influencer takes.

reddit.com
u/derdak — 20 hours ago
▲ 10 r/reactjs

Cladd - opinionated React UI kit for editors, dashboards, and dense application UIs

Hey r/reactjs - I just open-sourced cladd, a React UI kit I've been building for two years. Posting here because I think it'll be useful for devs building actual apps, not just landing pages.

Quick context: I've been making UI libraries for a decade - Swiper, Framework7, Konsta UI. cladd is different from those: it's specifically for information-dense React applications. The kind of UI where you have 40 controls on one screen and they all need to stay clean and readable.

It started as the internal UI for t0ggles (my project management tool), then I kept improving it. Today it powers Swiper Studio, t0ggles, PaneFlow, and Start Page HQ in production.

Why I built it instead of using existing options

  • Most UI kits give you the same surface color at every nesting level. Put a card inside a card inside a popover and you're writing one-off CSS to fake depth.
  • Headless primitives (Radix, Base UI) hand you behavior and ask you to do everything else. Great for design systems, exhausting for shipping a product.
  • Overlay APIs usually need Root/Portal/Content scaffolding in your component tree, even when you just want to fire a dialog from a hook.

What cladd ships

  • A surface system with 5 depth levels that nest contextually - drop a Surface inside a Surface and the next one auto-bumps.
  • A single sizing scale (2xs → 2xl) that every interactive control respects. Drop a Chip inside a Button at the same size - the Chip auto-shrinks 8px so the row stays clean.
  • 11 accent colors × 5 variants. One className re-tints a region.
  • Every overlay is controllable from anywhere - useDialog() from any handler, no JSX scaffolding.
  • An MCP server at cladd.io/mcp so coding agents (Claude Code, Cursor) can pull docs with inline screenshots before generating layout.

Stack: React 19, Tailwind v4, MIT.

What it's NOT for: marketing sites, headless-primitives use cases, Vue/Svelte, or anyone who wants to skin everything themselves.

Links

Will appreciate any feedback - especially: which components are missing, what feels weird in your projects, where the API trips you up. Happy to answer questions in the comments.

u/nolimits4web — 13 hours ago
▲ 0 r/reactjs+1 crossposts

I built an experimental TypeScript SDK that uses Gmail threads as a lightweight persistence layer

Originally started as a joke, but it turned into an interesting engineering experiment around:
Basically I’m trying to use Gmail like a digital storage box 😭

Normally apps need lots of separate services:

  • one for database
  • one for file uploads
  • one for storage

My experiment is:
“What if Gmail could handle all of that?”

So:

  • the app secretly stores data inside emails
  • folders/labels organize the data
  • attached files/images work like cloud storage

Meaning apps could theoretically run using just a Google account + Gmail API.

It’s mostly a fun engineering experiment, not meant to replace real databases 😭
But it’s been surprisingly interesting to build. And soon it will be ready for production based level too.

Curious what scaling/security problems people would expect from this kind of architecture.
Here’s the repo if you want to check it out yourself:
https://github.com/naitik2004/GmailDB

u/noick-22 — 17 hours ago
▲ 12 r/reactjs+12 crossposts

Building “Figma + DevTools + AI” as a Chrome extension

Been building a Chrome extension called Tweaklify because I honestly got tired of how annoying website editing workflows are 😭

The goal is to make editing websites feel visual instead of technical.

Right now you can:

  • click any element and tweak styles visually
  • edit spacing, colors, typography, shadows, borders etc through proper UX inputs instead of raw CSS
  • double click text to edit content instantly
  • open a live HTML editor and modify sections directly
  • use AI to edit existing sections
  • generate completely new sections with AI
  • convert sections/components into React, Vue, Angular or Shopify Liquid
  • preview changes live on the page
  • experiment with layouts without constantly opening DevTools
  • copy/export the generated section code directly into your project

The AI part is what I’m most excited about.

You can do stuff like:
“make this hero section look more modern”
“turn this into a Shopify section”
“convert this card component to React”
“add a pricing section below this”

and it generates/edit things directly on the page.

I’m trying to make it feel like Figma + DevTools + AI had a baby.

Still early but would genuinely love feedback:
What feature would make something like this actually useful for you?

You can check it out at --> Tweaklify.xyz

u/Business-Ad6390 — 18 hours ago
▲ 10 r/reactjs

Why is Picture-in-Picture only for <video>? I built pip-it-up to pop any React component into a native floating window

Hey r/reactjs,

Video PiP floats a player over your desktop. But why should video be the only thing that gets that?

I wanted to tear away small, interactive parts of a web app, a code editor, a checklist, a chat widget and keep them floating on top of my IDE while I work. Single-screen focus, no tab juggling.

The browser's Document PiP API makes this possible, but using it raw in React is a mess:

  • Tailwind/CSS-in-JS styles vanish instantly (new document context)
  • Moving DOM nodes wipes React state, focus, and cursor positions
  • Safari and Firefox don't support it at all

So I built pip-it-up https://pip-it-up.vercel.app/ to handle all of this:

  • Real-time style syncing (Tailwind, Emotion, CSS Modules)
  • Portal Mode preserves React state, cursor, and focus perfectly
  • Auto-sizing via ResizeObserver (no hardcoded dimensions)
  • Graceful fallbacks for Firefox/Safari

Live demos include a floating Monaco editor that keeps your cursor focus while you switch to your IDE.

GitHub (MIT): https://github.com/Shakya47/pip-it-up
npm: https://www.npmjs.com/package/@pip-it-up/react

Browser API: https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API

Would love feedbacks.

u/shakya47 — 15 hours ago
▲ 16 r/reactjs+1 crossposts

What kind of projects that will get you hired as a Full Stack Web Developer in 2026 (im graduating in 2026)

I'm a fresher and have finished my exams. My placements are in the last stage, but I've lost hope in my college placements, so I'm trying off-campus.

My Tech Stack is : MERN

I have been building projects only by watching YouTube tutorials. I feel like I am just copying and pasting the code while watching the video. I understand the code and logic at that moment, but after a few days, I forget everything when I open the project again. I also cannot write code from scratch. It feels really bad to spend hours on a project and feel like I did not learn anything. So, I tried watching a short section of the tutorial and then tried to replicate it using active recall without looking at the video.

but i feel like the project is not enough to this job market, i need project ideas which will make me stand out of the crowd

I have read some reddit threads , they say to "build projects that solves real world problems and can be used by real users ".

But i have no project ideas to build projects like that , I need some solid project ideas that i can do and stand out (3 to 4 project ideas)

also i tried chatgpt to generate some ideas but its providing like:

"AI resume Analyzer"
"Expense Tracker with AI integrated"

so i need Guidance in this help me out

reddit.com
u/Hungry-Cheek2622 — 22 hours ago
▲ 87 r/reactjs

We've GOT to talk about TanStack Form...

I decided to finally give TanStack Form a try. All of their other libraries by them that I've used have been great, and I've heard nothing but good things about it. And a decent amount of people seem to be using in production.

But I immediately hit what I would think would be a HUGE problem with ANY form library: if you submit your form to your server, and it returns an error - how do you surface that in the form library.

Apparently the answer is: you don't?

There is an onSubmit function you pass to useForm. This is where you make your network request or whatever. But what happens if that fails? There appears to be no way to deal with that! You can manually set errors, apparently, but the form's isSubmitSuccessful property is going to still be true. And the user won't be able to resubmit unless they change a field (so, for example, if the network request fails for an unrelated reason, you can't just resubmit).

It's all very bizarre to me. How is anyone using this in production? I'm just completely baffled by this. Who is realistically using this? And who are these people saying it's ready for production use?

Here's a bunch of issues/discussions around it:

reddit.com
u/ItsAllInYourHead — 1 day ago

WHY IS IT SO DIFFICULT TO BUILD AN ADVANCED TABLE EXACTLY LIKE THIS USING REACT JS

See, i was trying to build a table on my own. So, I have decided column and field and want to build exactly like this <-

so, what steps shall i take? can i build it in 5 to 6 hours?

reddit.com
u/Economy_Lion_6188 — 1 day ago
▲ 2 r/reactjs+1 crossposts

I tried explaining React design patterns using LEGO analogies

I've been writing React for about 8 years and one thing that always bugged me is how patterns like compound components, render props, and HOCs are taught. Most resources just throw code at you without giving you a mental model for when to actually reach for each one.

So I tried a different approach. I mapped each pattern to a LEGO connection type:

- Compound components = hinge pieces (two parts sharing one mechanism)

- Render props = Technic pins (one connection point, anything can plug in)

- HOCs = baseplates (invisible foundation, every structure benefits)

- Custom hooks = instruction manuals (same bricks, different build)

- Container/presentational = display stands (model and base built separately)

Each one has code examples, when to use it, and more importantly when NOT to use it. Also covered how they layer together in a real codebase.

Would love feedback from this sub. Especially curious if the analogy approach makes things clearer or if it just adds noise.

https://www.sethi.io/blog/react-component-design-patterns-the-building-blocks-lego

u/DependerSethi — 23 hours ago
▲ 1 r/reactjs+1 crossposts

I got tired of clunky, bloated whiteboard apps, so I built a minimalist drawing tool with a developer-first aesthetic.

Hey everyone,

I'm a CS student and I've been spending a lot of time building web apps. One thing that always bugged me was how cluttered most online drawing and wireframing tools are. I really love the crisp, high-contrast, professional design of tools like Vercel and GitHub, so I decided to build a drawing tool that matches that aesthetic.

It’s called Quickdraw. The goal was zero friction—just open the link and start sketching out system designs, logic flows, or UI ideas immediately without navigating a maze of menus.

🚀 Try it live here: https://quick-draw-io.vercel.app/

I just launched it on Peerlist today as well! If you have an account and like the tool, an upvote or some feedback there would mean the world to me: https://peerlist.io/kapil564/project/quickdrawio

I’d love to know what you think of the UI and if there are any keyboard shortcuts or essential features you feel are missing. I'll be hanging out in the comments to answer any questions!

reddit.com
u/DotRepresentative396 — 22 hours ago

Building family tree visualization

I'm building a family tree visualization app in React and I've hit a wall on the rendering/layout side.

The data structure itself is fine, but visualizing the relationships cleanly is becoming way harder than I expected.

Current stack:

  • React & React Flow
  • experimenting with dagre / ELK.js

Main problems:

  • handling marriages cleanly
  • centering children under couples
  • avoiding edge crossings multiple marriages
  • keeping generations aligned
  • preventing layout from becoming chaotic with larger datasets

I realized family trees are not really "trees" but more like graphs with special relationship rules.

Right now I'm considering using invisible "marriage nodes" like:

Father -> MarriageNode <- Mother MarriageNode -> Child

instead of directly connecting parents to children.

Questions:

  • Is React Flow + ELK.js the right direction here?
  • Are there better graph/layout libraries specifically for genealogy-style visualization?
  • How would you structure the layout pipeline?
  • Should I fully rely on auto-layout or allow manual positioning?
  • Any recommendations for handling complex relationships without the graph turning into spaghetti?

Would really appreciate advice from anyone who's built graph editors, org charts, genealogy apps, or complex node-based UIs before.

Thanks 🙏

reddit.com
▲ 2 r/reactjs+1 crossposts

Is it a good idea to use Next.js API routes for authentication or is it better to have a separate backend for it?

Using Better Auth as an example, I didn't find a direct recommendation on this in their docs. They have integration guides for both Next.js API routes and Fastify/Express backends.

I assume the separate-backend option might scale better and is preferable when you have more than one client (like web + mobile). I haven't really had the chance to use Next.js API routes for auth, since I've always done it separately - either in a monorepo or without one. Maybe someone who's used that setup could share more about their experience?

I'm not asking because I'm building a specific app - I have an open-source project that's a dashboard starter, and I'm wondering whether I picked the right architectural approach for it. In case anyone's curious, here's the link >https://github.com/nellavio/nellavio!< The repo link is inside a spoiler, in hopes that this post won't be taken as an ad for the GitHub project - that's not my goal here. I've pretty much decided to migrate this project from GraphQL to REST, and now I'm also wondering whether I should ditch the separate backend repo entirely and move everything into Next.js as a single app.

u/Armauer — 1 day ago

Fetching api in Next.js compared to React

Is it better to fetch data on the Next.js server for initial page loads, compared to the traditional React approach of using useEffect with an empty dependency array? My main concern with Next.js is that pages are generated at build time — so how do you handle data that changes frequently

Also I'm talking about Pages Router

reddit.com
▲ 0 r/reactjs+1 crossposts

AI Slop, obvious marketing, web forums and you.

So I've been noticing a pattern recently in multiple reddits. Some worse than others. Someone will post something that is either an AI generated post or a semi obvious or imbedded self promotion. Discussion starts and some of it is legitimately good even though the original post isn't or tangently breaks the rules. Mods do what they're supposed to and nuke the thread. Now any discussion or useful information from the thread is gone.

Now I'm not asking for a specific solution and I'm not sure there is one(the only thing I can think of is lock instead of delete for a specific threshold of discussion) but its open to gaming. The thing is ALL of this is open to gaming and online communities need a way to retain their useful content while still protecting themselves. I'm a bit of a sucker and a lot of the deletions I didn't catch it and that's a feel bad but its still the same problem and because of the nature of how good AI is getting more and more of the useful discussions will be in the kind of posts that I'm talking about it.

I guess what do y'all think?

reddit.com
u/frogic — 1 day ago

I built a workflow editor on React Flow and extracted the foundation into a reusable kit

I've been building Formity UI (a React Flow-powered form builder, now in the official showcase) and kept hitting the same wall: React Flow gives you a canvas, but turning it into a real workflow editor means building auto-layout, undo/redo, drag-and-drop, validation, and MVVC architecture yourself. Each one is a rabbit hole.

Once I had it working for Formity, I pulled the editor foundation out into its own codebase so it could be reused — Workflow Kit. You own the code, not a dependency.

Reduced open-source version to poke at the structure: https://github.com/martiserra99/workflow-kit-reduced

Full version: https://www.workflowkit.app/

Happy to talk through the architecture, especially the auto-layout and drag-and-drop parts — those were the most complex things to do.

reddit.com
u/martiserra99 — 1 day ago
▲ 2 r/reactjs+1 crossposts

Is learning .Net for web api still worth in 2026?

Currently I'm in a company project with around 2 years of experience, where I was working on Frontend using React, now my team wants me to do the backend for the same but with .net. But I'm little under confident with the future of .Net.

Any suggestions or anything?

reddit.com
u/__MarshL_ — 2 days ago

Which one should I use useCallback() or move the component outside the function?

React - TSX
I have an component that makes multiple api calls one for getting a stuff A then another for getting stuff related to that stuff A and another for getting some other things related to A.

Right now i am not using callbackhook or moving the component outside I am ignoring the warning [exhaustive deps]

the functions that are declared inside the components update the state of the component like putting multiple kinds of data into various states. the options I have are:

Option 1: Move the function outside the component (at the top) and pass all the setState functions as callbacks which make function signature messy.

Option 2: useCallback hook which kind of cache the function but if i use option 1 I can avoid this completely. By using Option 2 i can kind of keep the function signature clean.

I have read the other post where they asked the same question but the answer didn't clarify my doubts.

If my states are tightly integrated with the functions then should I move it outside the component? or should I use the usecallback hook?

reddit.com
u/chosenoneisme — 1 day ago