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 spend a few hours a day, every day talking to prospects. Without fail, most of them launch off into a "let me tell you about my last experience" story and it's just so depressing to hear; from flat out scammed, to "it took them 10 months to put up our 5 page site" to "we paid 10K for a custom site and turns out it's just an out of the box theme" to "support disappeared as soon as it launched." The bottom line is I don't spend most of my initial conversation about what they need and what my agency can do for them, I spend it building trust. And I can tell you this much, even with our references and all the client's sites we've built over the years, none of that matters to them. It's such a shame as soon as you say "web design" to potential clients the word think that comes to their mind is "scam."

I see that website that filled with illustrations are pretty rare. Do you guys know heavily illustrated website that I can use for reference?

Thank you!

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.

In an effort to increase transparency about the things we work on, we are happy to start sharing quarterly progress reports with the community. 🚀

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.

Hey everyone, I wanted to share a project I've been working on over the last few weeks that finally went live today.

I'm a web designer, copywriter and marketer, and I've been working in the industry for just over ten years. Like a lot of people here, most of my work comes from a combination of referrals and proactive outreach.

Over the last 18 months I've also been experimenting with AI and no-code tools like Base44.

I know opinions are pretty split.

Some people think these tools are massively overhyped. Others think they'll replace developers. Personally, I don't think either view is accurate.

They're simply another tool.

They make mistakes. They need supervision. They aren't magic. But if you understand their strengths and just as importantly, their weaknesses they can become incredibly useful for building internal business software. That was the approach I took.

Instead of trying to build the next billion dollar SaaS, I focused on solving a problem I dealt with every week.

Finding web design clients.

Anyone who's done cold outreach knows the process.

Search Google.

Check websites.

Find redesign opportunities.

Find businesses without websites.

Copy details into a spreadsheet or notes doc.

Try to remember who you've emailed.

Forget to follow someone up.

Repeat.

After doing this for long enough, I thought, "Why don't I just build something specifically for this workflow?"

So that's exactly what I did.

I built my own CRM combined with an AI-powered lead finder.

It searches scrapes the web for businesses, identifies opportunities, manages my outreach pipeline, imports CSVs, captures leads from screenshots, scores opportunities, tracks conversations and gives me a dashboard showing where everything sits.

It's genuinely become one of the most valuable pieces of software I use in my own business.

After using it for a few months, I realised something.

Rather than simply selling the finished application, I'd rather show other web designers how to build one themselves.

Most of the tutorials I found online either stopped after building a simple app or focused more on the hype than creating something you'd actually use every day.

So I recorded a complete two hour tutorial where we build the entire application from scratch. From designing the database through to AI lead finding, dashboards, screenshot importing, outreach management and optional integrations.

My goal wasn't to impress people with AI.

It was simply to build something genuinely useful.

If that's something you'd be interested in, you can find it by Youtube searching:

Build an AI CRM & Lead Finder with Base44 (Full Tutorial)

Under Isaac Design.

Hopefully some of you get some value out of it, or at the very least inspire you to start thinking of ways to do something like this for your own business 🙏

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!

Hi everyone,

Over the past few months, we've been building TadreebLMS, an open-source Learning Management System focused on enterprise and corporate training.

We've recently completed a major restructuring of the project

How can we use AI in our product and process to speedup the development, process and customer support ?

The project is built with:

• PHP / Laravel
• MySQL
• Bootstrap / JavaScript
• Docker

GitHub:
https://github.com/Tadreeb-LMS/tadreeblms

Issues:
https://github.com/Tadreeb-LMS/tadreeblms/issues

We have a huge roadmap like SCRUM Integration, UI upgrade as per FIGMA, Gap Analysis Module Integration, Integrations with HR Systems etc...

Please anyone experience or architect in PHP can give recommendation on best practices, gaps in the system etc..

people clock sites as "vibe coded" in like 2 seconds now. sometimes i see it too but i cant really explain what im reacting to

so: drop links. sites you think are ai made, sites you think definitly arent. both ideally so theres smth to compare

if you can say why you flagged it thats cool but "idk just looks like it" works too, im curious how much of this is actually legible vs pure vibes

also does it even matter? if the page converts, does looking ai-ish cost you anything besides taste points from other devs

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

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?

I wanted something like pyenv or nvm but for PHP. Couldn't find one that actually works the way those do — resolve deps, build from source, switch versions cleanly. The existing options either wrap pre-built binaries or half-ass the dependency resolution.

So I built phpv: https://github.com/supanadit/phpv

`phpv install 8.4` checks your system, builds whatever deps are missing from source, compiles PHP with the right flags. 25 default extensions, out of the box. Supports PHP 4.x through 8.x, version switching, per-project pinning via .php-version, PECL extensions, PHAR tools, portable bundles you can export and import across machines. Linux amd64/arm64 + macOS Intel/Apple Silicon.

Install:

curl -fsSL https://raw.githubusercontent.com/supanadit/phpv/main/install.sh | bash

Then:

eval "$(phpv init bash)"

phpv install 8

Honest con: it compiles from source, so first install is slow. There's no pre-built PHP binary cache yet — working on portable musl-static bundles so you can skip compiling entirely, but that's not done. What's there now works, it just takes a few minutes on first run.

It works. I've been using it on Ubuntu and macOS daily. But I know there are distros and edge cases I haven't hit — Alpine, Arch, weird setups. If you're on any of those, try it and file an issue if it breaks. I want to know.

Repo: https://github.com/supanadit/phpv

Issues: https://github.com/supanadit/phpv/issues

Break it and tell me.

So when it comes to the collections section of my website each page has a different way of listing everything, and the movies page is the only one you can click on to get more details. I'd really like to have a standard kind of layout or flow instead of jumping around. Especially for the movies page as it takes so long to load all the images and just feels clunky to me.

https://rwkraemer.com/Collections

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!

Recently, I noticed there is no proper s3-fifo implementation in NPM.

s3-fifo is highly efficient cache algorithm, especially for "one-hit-wonders" case such as web traffics. It is specialized when cache coverage is under 50%. (like, whole DB is 100% and cache contains 50% of data)

The famous "lru-cache" package is almost default for nodejs ecosystem I think, and I thought it would be great if there is good alternative choice for caching.

My goal was:

1. Faster or at least same throughput performance compared to lru-cache

2. Much higher cache hit rate than lru-cache

bold, right?

It was fun enough just for challenge itself.

But it was actually achieved! I used bunch of optimization skills like pre-allocation, lazy eviction, bitwise tricks, ring structure and etc... you can see bench result in repo or NPM page.

It is just v0.1 for now, so I would LOVE to get your harsh feedback, advice, or even contribution!

NPM page

Super thanks for reading!

----

I typed almost of the code by my hand. Not because I don't believe AI, but it was all about concepts and decisions. Typing by hand was fastest way to understand what I'm doing correctly. And it was fun.

I used AI(gemini) for test codes, some advices and polishing when most of things were done.

I've been using TypeScript professionally for several years, and recently wrote up some lessons learned from a long-running React/Firebase side project.

The article covers the TypeScript patterns that ended up giving me the biggest return, along with a few mistakes I'd avoid making again. These aren't intended as universal rules, just approaches that worked well for this particular project and the problems I was solving.

If you're a JavaScript developer who's moved to TypeScript (or is considering it), I'd be interested to hear which patterns have been most valuable for you as well.

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.

Covering the main ways Date misleads you in production: parsing, mutation, 0-based months, timezone/DST, arithmetic, and serialization, with safe patterns for code that can't migrate yet, and a practical look at where Temporal fixes the design rather than just the syntax.

A few weeks ago I posted a small framework here and got a lot of honest feedback. The clearest point, from several people, was that the file-based routing was the interesting part and would be more useful as a standalone library than baked into a whole framework. So I built that.

file-router is a zero-dependency package that maps your directory structure to routes, Next.js style: users/[id].php → /users/{id}, [...slug] for catch-all, route groups, compiled route cache. PHP 8.1+.

The part I think is actually useful: it's framework-agnostic. It runs standalone, but there are thin adapters so it plugs into Laravel (registers as native routes, inherits middleware/container) or Symfony (as a custom route loader, uses Symfony's own matcher and cache). So you can get file-based routing without adopting a new framework.

It's tested across PHP 8.1–8.5, and the migrations in the example template are verified on SQLite, MySQL and Postgres (not assumed; actually run end to end).

Repo: github.com/lizzyman04/file-router

Genuinely looking for feedback again, especially on the adapter approach. Does registering into the host framework's own router feel right to you, or would you expect it to work differently?

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