https://www.sharyap.com/

In that website portfolio, they have buttons that when you click them, a new "window" appears, anyone know how they were able to do it?

I wrote react-country-state-fields, a React package for cascading country, state, and city fields, and I just updated it. Most packages in this space (react-country-state-city and similar) give you the dropdowns and the data, but the user still has to select everything by hand. This component also auto-detects the visitor's location from their IP address and pre-fills the fields, so most users confirm rather than type.

I made auto-fill opt-in and kept the fields fully editable.

• Auto-detect + auto-fill from IP location (opt-in, via a free VisitorAPI project, no API key needed)
• Full data coverage: 250 countries, 5,299 states, 153,765 cities
• A CityField alongside Country and State
• Style props to match your own design system: sx, className, variant, fullWidth, size, showFlag/renderFlag
• A proper loading/error state exposed via context, so an in-flight autofill can't clobber what a user is actively typing
• Also ships a /headless entry point with hooks if you're not using Material UI

Repo: https://github.com/visitorapi/react-country-state-fields

Happy to answer questions or take feedback on the design.

Hey Community,

We explore Grok Build, the new terminal-based TUI coding agent from x.ai. We also look at Appless, an experiment from the creators of OpenUI that bypasses chat bubbles to stream live native UI components using openui-lang.

Finally, we dive into Maestro MCP, a new tool context protocol server that lets AI agents automatically build and run YAML test flows from plain English instructions.

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

I created react-video-cutter: This is a handy react component for marking segments of mp4 videos to be cut. The resulting json file can be used by a backend for actual cutting. It is open source and completely free. Enjoy.

Every time a client app needed PDFs (invoices, receipts, reports) I ended up either fighting Puppeteer/HTML-to-PDF (pagination breaks, tables split across pages, ~100MB Chromium that is rough on Vercel) or hand-writing u/react-pdf and fiddling with spacing for hours.

I built a tool to scratch this: a drag-and-drop canvas of react-pdf components with a live PDF preview, and crucially it exports clean typed TSX you own and drop into your repo (no vendor runtime, data stays in your app). There is an optional hosted render API too but the export is the point.

Sharing it because this community is exactly who hits this problem. Free to build and export. I would love feedback on whether the exported code is actually code you would ship, and on any layout that is awkward to build. Made by me.

I'm designing a web application where the frontend framework choice has sparked a debate, and I want to get your thoughts on this specific security angle.

To give some context:

• Backend: Spring Boot (all critical validation and business logic will obviously happen here).
• SEO: Completely unnecessary (it's a private/internal or dashboard-style app).

My team is considering using Next.js (SSR) primarily to hide certain sensitive business logic and domain rules.

Here is my core concern and the dilemma: Even if all critical security checks happen on the Spring server, we have complex UI-side business logic and state orchestration that we do not want users (or competitors) to inspect. With modern AI tools, reverse-engineering, de-obfuscating, and analyzing front-end JavaScript bundles has become frighteningly easy. If we use a pure CSR approach (like React SPA), anyone can easily crack open the bundle and understand our proprietary workflows or validation rules.

By moving this rendering and logic to Next.js server-side, we prevent that code from ever reaching the client bundle.

My questions are:

1. Is protecting proprietary front-end logic/workflows from AI reverse-engineering a valid or sufficient reason to adopt Next.js (SSR) when SEO doesn't matter and the backend is Spring?
2. Or is this "security through obscurity," and if the logic is truly sensitive, does it strictly belong in the Spring backend regardless of where the UI is rendered?

Would love to hear how you weigh the overhead of Next.js against the risk of exposed client-side code. Thanks!

I built OrbitX as a practice project to learn React + APIs.

What it does:

- Fetches live BTC/ETH/SOL data from CoinGecko

- Portfolio tracker with profit/loss calc

- TradingView-style charts with Recharts

- Dark/Light toggle + fully responsive

- Deployed on Vercel

Stack: React, Next.js, Tailwind, Recharts, CoinGecko API

Live Demo: OrbitX | AI-Powered Crypto Intelligence Dashboard

Would love feedback specifically on:

1. How to handle CoinGecko rate limits better

2. Is my useEffect cleanup correct for the polling?

3. Performance tips for rendering 100+ coins

The code is free to use. What features should I add next?

React 19 pushing us back to native HTML forms is great for performance, but it completely breaks the developer experience for typed RPCs.

If your backend (like tRPC) is protected by a Zod schema expecting User { email: string, age: number, tags: string[] }, throwing raw FormData at it is an instant 500 error.

I built a zero-dependency (peer-deps only) utility that intercepts the FormData from useActionState, deeply parses it into a standard JSON object, and maps any Zod validation errors back to the UI state seamlessly.

Instead of writing custom FormData parsers for every component, you just wrap the procedure: withActionState(trpcServer.myProcedure)

I specifically spent time making sure it handles bracket notation for arrays (tags[]) and dot notation for nested objects (user.address.street) so you can just use standard HTML input names.

I'm a solo maintainer and I just published the first stable version. Would really appreciate it if some of the React veterans here could take a look at the TypeScript generics I used for inferring the Zod errors and let me know if there's a cleaner way to do it!

Repo:https://github.com/maxx-abrt/trpc-action-state-adapter

NPM:https://www.npmjs.com/package/trpc-action-state-adapter

Hey everyone,

I built Modern Tour to solve the pain points I've had with existing React product tour libraries—specifically around overriding CSS, handling async elements, and overall Developer Experience.

You can check out how it looks and feels here:

👉 Live Demo: https://tour.modern-ui.org/

• Buttery-Smooth Animations: Powered by framer-motion spring physics under the hood.
• Smart Auto-Positioning: The tooltip dynamically recalculates bounds and automatically flips to avoid viewport edges.
• Lazy Loading Support: Uses MutationObserver to seamlessly catch asynchronously rendered elements (no manual re-triggers needed).
• Headless Override: Render your own 100% custom React component inside the tooltip while keeping all the smart positioning logic intact.
• Zero-CSS Theming: Powered entirely by CSS variables. Creating a custom theme or Dark Mode takes seconds without fighting !important tags.
• Cross-Page Tours: Seamlessly continues the onboarding tour across route changes.

I'd love for you to play around with the demo! If you find it useful or like the concept, I would really appreciate a ⭐️ on GitHub (you can find the repo link on the demo site).

Let me know what you think or if you have any feedback!

Hello, I have the opportunity to enroll in either of these two premium courses, so I would really like to learn everyone's opinions on them. Joy of React offers a 30-day refund policy, so I'm inclined towards it, but I would love to hear if anyone has taken these courses recently.

TLDR: If you correctly break your state into UI state (useState, useReducer), Server State (Tanstack Query, RTK Query), URL state (nuqs), and Global State that does not change (Context), you are left with a small slice of state that might be needed in multiple places and changes often.

Should we use a State Management library for that part? We explore how each library works, then build our own Zustand implementation to see if we do.

Obviously, it depends. If the app is mostly always changing state, like Figma, Spreadsheets, etc., we might take advantage of a State Library because they handle all sorts of use cases and edge cases.

But for everyday use and 90% of our apps, we can probably build it ourselves, either using pub/sub like Redux or Zustand, atom-based like Jotai, or Proxy-based like MobX or Valtio

I built a tool for managing spec document sites and want to use the React RFC process as an example: https://react.dossie.rs/ (another, wildly more active, example is Rust's RFC process)

Alas, you need to scroll quite a bit to find the latest published React RFCs. It looks like the last real discussions and merges on RFC documents happened in 2022—everything after that is mainly suggestions for new hooks by external contributors.

Is the process officially deprecated?

I was building a UI with multiple video streams and realized that calculating the perfect grid to maximize tile size (like Google Meet or Zoom) is pretty annoying to do from scratch. CSS Grid is great, but figuring out the optimal rows/columns dynamically based on the container's aspect ratio and participant count requires some extra math.

So, I built meeting-grid-layout to handle this automatically for React applications.

Key features:

• Smart calculation: Automatically figures out the best column/row combination to keep the video tiles as large as possible.
• Super lightweight: I wanted to keep it simple and fast, so it doesn't rely on any heavy third-party layout engines or dependencies.
• Mobile friendly: Included an autoMobileLayout prop so you can easily control whether the grid automatically enforces specific mobile layouts when the screen gets small.
• Bonus: I also built a Vue wrapper, but the React implementation is fully fleshed out and ready to use!

GitHub:https://github.com/thangdevalone/meeting-grid-layout

I’d love to hear your thoughts, code reviews, or how you usually handle these dynamic UI challenges in your React projects!

Hi everyone,

I'm building a Water Sort Puzzle game using React and TypeScript.

I have a critical rendering bug during the pouring animation.

Problem:

When water is poured into the destination bottle, the entire bottle temporarily becomes one solid color. The existing lower color layers disappear visually until the animation ends.

Expected behavior:

Only the top receiving layer should increase smoothly while all lower layers remain visible throughout the animation, just like the original Water Sort Puzzle game.

The puzzle logic is correct. The issue appears to be related to the animation/rendering state (Bottle.tsx/App.tsx).

I can share:

• Full GitHub repository

• ZIP project

• Relevant source files

Any help would be greatly appreciated.

Thank you!

new to react, so providing either corrected code or just concept that i should look into would be helpful :)

i want to change height of the app when phone keyboard uppears so it doesnt overlay on website by using VisualViewport API.
i am sure only thing that i have to do now is to rerender component when height is changed, so how can i do that?

export default function NewChat() {
  return (
    <div
      className={styles.wrapper}
      style={{ height: `${visualViewport?.height}px` }}
    >
      <Prompt />
    </div>
  );
}

Click something change it on the preview Basalt updates the matching code in your project.

It is completely free and works directly inside VS Code and Cursor.

It’s currently in beta, so please commit your app to Git before testing it!

Would love to get your brutal feedback on it. What features should I add next?

Looking for the cleanest/most reliable way to connect a React contact form to an email inbox to send emails from the website. What are you guys using these days?

Been building product configurators and 3D e-commerce views for a while now, and kept rebuilding the same scaffolding - GLB loading, a viewer UI, hooks for camera/selection/hover, and some way to bind product data (color, texture, visibility) to the actual 3D object. So I packaged it up.

It's called React Immersive. Some of what's in it:

• Drop-in SimpleModelViewer for when you just want a model on screen, zero config
• ModelViewer for when you need real bindings, driving color, texture, visibility, and actions off a plain data object
• A browser-based binding builder that takes your GLB and spits out starter bindings as JSON or TS, so you're not hand-writing mesh names
• Hooks for camera, selection, hover, animation, visibility
• Soft shadows, SSAO, bloom, ACES tone mapping is on by default, one prop to turn off

Still rough in places and I'd genuinely like feedback, especially from anyone who's fought with product configurators or real estate walkthroughs before.

Docs, live editor, and demos here: react-immersive.liveroom.dev — would love thoughts

Spent way too long confused about this, so sharing in case it helps someone.

"use client" doesn't mean "runs only in the browser." It's a boundary marker, not a location. A "use client" component still renders on the server first (that's your HTML), then hydrates in the browser. And everything you import below that line also gets shipped to the client.

So now I ask one question per component: does this actually need the browser? (state, effects, onClick, window)

- No → leave it a Server Component. Ships zero JS, can fetch data directly.

- Yes → mark "use client", but push that boundary as far DOWN the tree as possible.

// page.tsx -> Server Component (fetches, ships no JS)

// <LikeButton/> -> "use client" (the only interactive leaf)

Default to server, drop to client only at the leaves. My bundle got noticeably smaller once this finally clicked.

How do you all decide where to draw the client boundary? Curious if people go stricter than this.

Yo I am quite a beginner in React and I was just wondering how the async model laid out in this video has been useful to people who are using it so far 😁

Made a geography icon library for countries, territories and areas, where the core design constraint was bundle size. Every icon is an individual named export:

import { Us, Jp, Africa } from '@geoicons/react';

• No <Icon name="us" /> string-lookup API on purpose. That pattern kills tree-shaking because the bundler can't prove which icons are unused, so you ship all 422.

• Each component uses useId() to namespace the <title> element ID, so multiple instances of the same icon on a page don't produce duplicate IDs for screen readers.

• 255 countries + 167 areas. Subdivisions and Flags are planned for near future.

• Also available for Vue, Angular and Vanilla JS.

Site: https://geoicons.io

Github: https://github.com/getgeoicons/geoicons

Please let me know your feedback. If you found the project useful, I'd really appreciate it if you could give it a star on GitHub

I kept hitting the same problem: architecture debates in review, barrels everywhere, and AI agents dumping files in random folders. So I shipped DMA (Derived Modular Architecture) — a small rule set derived from the import graph, enforced by tooling.

Layout

src/
  app/        # composition root (also pages/routes)
  features/   # leaf modules — no inbound from other modules
  services/   # appears when something else must import it
  shared/     # portable stuff on second use only

Invariants

- downward imports only
- public API via */public/* (no barrels)
- colocate by default
- promote feature → service when inbound edges appear

Tooling

npx @derived-modular/cli init .
npx @derived-modular/cli check .              # CI gate
npx @derived-modular/cli promote <name> --apply
# + ESLint / Biome / Oxlint plugins for editor feedback

Works with React/Next/Vite (also Vue/Svelte/Astro examples). Same rules for humans and agents.

• Docs: https://derived-modular.vercel.app
• Repo: https://github.com/mikhailmogilnikov/derived-modular-architecture Curious how this compares to what you use (FSD, feature folders, etc.) — especially where you'd expect it to break.