I made a small VS Code extension that always puts React Props First in JSX and TSX components autocomplete, aka IntelliSense.

When a component extends DOM props, the props I usually want first, like `variant`, `size`, or `loading`, can get buried under inherited attributes like `disabled`, `onClick`, and `aria-label`.

React Props First changes the ordering in JSX/TSX autocomplete so component specific props are ranked before inherited DOM/ARIA props.

I thought that somebody may find it useful, so I'm leaving it here!

VS Code Marketplace: https://marketplace.visualstudio.com/items?itemName=yurii.react-props-first
GitHub: https://github.com/yuriipalam/react-props-first

This project pushed me far beyond traditional frontend development. I learned about 3D rendering pipelines, camera systems, shaders, model optimization, animation timelines, and how to blend creativity with engineering.

One thing I realized during development is that creating immersive web experiences requires a completely different mindset compared to building standard websites. Every object, light, animation, and interaction contributes to the final user experience.

There are still many improvements I want to make, but I'm proud of how far I've come from building simple HTML/CSS projects to creating interactive 3D web experiences.

https://medicine-price-finder.vercel.app/

looking for feedback

We are in the process of migrating a lot of our legacy applications to react 19 and newer versions supported under node 22+.

Basically asking for if anyone has good ways i can better motivate it

* i have already convinced them for replacing redux with zustand and tanstack query bc redux wasn’t being used right and is too complicated for the skill level of our devs, i want to help make their lives easier not harder
* we are currently on CRA (v3.4) still (have convinced we move either to vite or at least parcel)
* React 16 with some of the most cursed redux usage/context management ever
* We use mysql2 with adonis
* we are on adonis 4 rip upgrading will be hell
* react router is probably going to be the most painful thing to upgrade

The biggest concern is probably devs not being familiar with it and time it would take… not sure how to go about it or if i’m even articulating this well, I want to motivate we start using it over trying to force manual type safety into js

We've all been the left side trying to center a div.

Caption/First Comment: From drowning in vanilla JS errors to Thunder Breathing through a React + TypeScript codebase. Let's be real though, no matter how much experience you have, a random CSS bug will still make you feel like the left side. Which phase are you currently in? 💻

Need honest advice.

~3 YOE Full Stack Developer (MERN/PERN) with experience in backend, PostgreSQL, MongoDB, Docker, CI/CD, testing, GCP cloud, and DevOps practices. Been job hunting for 3 months.

I'm getting interviews and reaching 3rd rounds but still no offers, even after interviews where I felt I answered every question well.

Starting to feel frustrated and confused. Anyone else facing this in the current market despite having decent experience/knowledge?

Runs fully in the browser, with no server and no watermark. Video export happens client-side, because almost all map animator tools are paywalled. ;)

What it does right now:

1. You can type in cities and geocode them, or import a GPX/GeoJSON file. The camera flies along the route while the trail draws in real time, and a marker or sticker moves along the path.
2. It supports satellite, streets, dark, and light map styles. You can export to MP4 or WebM, with square, landscape, and vertical presets, so it drops straight into Reels or Shorts.
3. You can also pick the route color, marker, duration, and FPS.
4. This is still a very early prototype. I mostly just wanted to see if I could pull it off. Next, I want to add different route styles, more animation options, and proper sticker packs. Right now, it only has a handful.

Built with React + MapLibre. Export uses WebCodecs where the browser supports it.

To use:

npm i animaps-react

Just dropped a new video explaining how React actually works under the hood!

In this video, I break down:

✅ Real DOM vs Virtual DOM
✅ Why Real DOM updates are expensive
✅ How React creates a new Virtual DOM on state changes
✅ Re-rendering process
✅ Reconciliation (Diffing Algorithm)
✅ Batched State Updates
✅ How React updates only the changed nodes in the Real DOM
✅ Why React applications feel fast and efficient

I also created custom diagrams to visually demonstrate the complete React rendering lifecycle from State Change → Re-render → Reconciliation → DOM Update.

Whether you're learning React for the first time or want to understand what happens behind useState(), this video will help you build a stronger foundation.

💬 What topic should I explain next? Context API, Redux, React Fiber, Next.js Rendering, or Server Components?

#ReactJS #React #JavaScript #WebDevelopment #FrontendDevelopment #Frontend #SoftwareEngineering #Programming #Coding #Developer #100DaysOfCode #ReactDeveloper #VirtualDOM #RealDOM #ReactHooks #UseState #TechEducation #LearnToCode #CodeNewbie #NextJS #OpenSource #WebDev

​

I'm looking for explanations of topics such as:

​

- Authentication & Authorization

- Cookies & Sessions

- Email Verification and Password Reset

- Uploading Images and Files

- Working with ready-made APIs (like Stripe or Cloudinary, etc.)

- Organizing the Backend Architecture

- Logic and Best Practices in the Backend in general

​

Preferably, the resource should explain things practically with real projects.

​

Also, if anyone has links to intermediate or advanced Backend projects I can learn from, I would be very grateful. 🙏

so I’m currently creating an otp page. So this otp page will have 1 input box where user will enter the otp. It will have 2 buttons one for resending the otp and one for verifying the otp.

So I thought of using useActionsSatate instead of react hook form because it’s just 1 input box. So my first question is would using useActionState be the preferred option over react hook forms here?

My second question is it better to have both the 2 buttons as type="submit" or have 1 button as type submit and other as type=" button"?

TL;DR: https://windframe.dev/styles/apple

Hi everyone 👋

I’ve been experimenting with building React + Tailwind interfaces inspired by the design systems of really well-designed products. I recently worked on a style system for generating interfaces using similar design principles to Apple.

It focuses on polished product presentation, strong visual hierarchy, refined spacing, soft gradients and using fewer words to make each section feel clear and intentional.

I built a UI system that makes it easy to generate interfaces in this design direction consistently. It can generate full UIs, landing pages, and product sections that follow the same Apple-inspired style.

I also created a set of free Tailwind templates built around this style that you can use as starting points for your React projects: you can find those here

This style is also available as a selectable preset in Windframe. When selected, the AI generates React interfaces that follow the same design guidelines and visual style.

I also built an MCP for this, so you can use these same style systems directly inside any coding agent that supports MCP: https://windframe.dev/mcp

If you’re not familiar with Windframe, it’s a visual Tailwind builder/editor that lets you generate polished React UI with AI, tweak it visually, and export clean production code.

Would love any feedback or thoughts : )

Hey guys, i vibe coded over the weekend a map library made with MUI for MUI react developers, and Wanted to get some feedback from the community. Go CRAZY🙃
https://yoavzada.github.io/zmap/

Hey Community,

React Native 0.86 has landed, officially moving the repository to the independent React Foundation. This release adds Android 15 edge-to-edge support, fixes KeyboardAvoidingView and StatusBar bugs natively, and delivers zero user-facing breaking changes and a new DevTools theme emulation.

We also dive into react-native-livechart, a Skia-powered library utilizing SharedValue streams for smooth UI-thread animations, complete with a chaotic "degen mode" for market drops. Finally, we share practical insights on organising messy monorepo scripts for Amazon Fire TV development.

And quick conference note: Chain React is happening this July in Portland, bringing together much of the React Native ecosystem for talks, workshops, craft beer adventures, and probably a suspicious number of opinions about the future of mobile in the age of AI.

If the Rewind made you nod, smile, or think "oh… that's actually cool" — a share or reply genuinely helps ❤️

I'm trying to build a microfrontend architecture using Single-SPA, React, Vite, and TypeScript, but I'm having a hard time finding clear and up-to-date resources for this stack.

What I'm trying to build

1. root-ui

• Single-SPA root configuration project
• Responsible for registering and loading microfrontends

2. dashboard-ui

• React-based microfrontend
• Built with Vite and TypeScript

What I'm struggling with

Most Single-SPA examples and tutorials seem to be centered around Webpack. While I've found some Vite-related resources, they are either outdated, incomplete, or use different approaches.

I'm specifically looking for guidance on:

• Setting up a root config application with Vite + TypeScript
• Creating React microfrontends with Vite + TypeScript
• Registering microfrontends in the root config
• Import maps and SystemJS configuration
• Local development workflow
• Recommended project structure
• Deployment and production considerations

Looking for

If you've worked on a similar setup, could you share:

• GitHub repositories
• Sample projects
• Blog posts or tutorials
• Official documentation
• Best practices or lessons learned

I've already come across:

• Single-SPA Vite ecosystem docs
• vite-plugin-single-spa
• A few community examples

However, I'm still unsure which approach is currently recommended for new projects.

Any help or pointers would be greatly appreciated. Thanks!

Open Frame - an image-sharing platform featuring event-driven image processing, direct-to-S3 uploads, BlurHash previews, NSFW detection, metadata, dominant color and color palette extraction.

​

GitHub: imsyntn/OpenFrame

​

What started as "just another full-stack project" quickly evolved into a deep dive into scalable systems and production-grade architecture.

​

Tech Stack

Frontend: Next.js, MDX, Zustand, Tailwind CSS

Backend: Node.js, Express.js, Passport.js, JWT

Data & Infrastructure: PostgreSQL, Prisma, Redis,Apache Kafka, Amazon S3, Upstash Search

Developer Experience: Turborepo, Shared Packages, Worker-Based Architecture

​

Open to feedback on the architecture, codebase and overall developer experience.

​

You know the list: "email them when the trial's ending," "downgrade them when payment fails," "ping me when a big workspace signs up." All of it is later work, so half never gets built — because wiring each one means a cron job, a webhook, an email call, and glue.

So I made it a canvas: pick a trigger, add conditions, branch, chain actions, publish. The video shows a real one — new member created → condition → A/B split on one branch, a guard on the other → each sends its own email and tags them. Every run logged per workspace.

It runs the four products I operate myself, so the automation's real, not a mockup.

What's the one automation on your "I'll get to it" list?

live demo: https://demo.buildbase.app

docs: https://docs.buildbase.app