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
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).
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.
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.
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.
Looking for honest opinions from experienced devs rather than influencer takes.
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.
useDialog() from any handler, no JSX scaffolding.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.
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.
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:
My experiment is:
“What if Gmail could handle all of that?”
So:
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
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:
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
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:
So I built pip-it-up https://pip-it-up.vercel.app/ to handle all of this:
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.
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
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:
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?
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
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!
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:
Main problems:
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:
Would really appreciate advice from anyone who's built graph editors, org charts, genealogy apps, or complex node-based UIs before.
Thanks 🙏
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 >!< 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.
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
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?
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.
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?
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?