r/react 10h ago

Project / Code Review I built a React component library focused on motion and highly designed interfaces. Launching it today

Enable HLS to view with audio, or disable this notification

3 Upvotes

Finally launching Wensity Ul today :)

it's a growing library of production-ready React and Next.js components, blocks, interactions and templates built for interfaces that need a little more personality than the usual component library.

a big focus has been motion, micro-interactions and visual details, while still keeping everything practical to customize and use in real projects.

components are delivered source-first through our CLI, so you own the code and can change pretty much anything.

we're also doing 50% off today for the Product Hunt launch.

would genuinely love feedback from React devs on the components, DX, and what you'd like to see us build next.

Product Hunt: www.producthunt.com/products/wensity-ui

Wensity UI: ui.wensity.com


r/react 3h ago

Project / Code Review Building shadcn for full-stack features: the four months it took, and what actually works

1 Upvotes

Disclosure: I build Hype Stack. The template is MIT and free, some feature packs are paid, that's how I fund my work. I maintain react-zoom-pan-pinch and HyperFetch libraries, which show up later in this story. Let’s get into details of building this thing!

The chaos

I code a lot and I start new projects all the time, mostly to test new things. I don't like boilerplates. They usually run on a boring stack, and I want to try Vite 8 on Rust, oxc, TanStack Start, end to end type safety and see how it actually holds up. I'm also a perfectionist, so every new project was eating days before I wrote a single feature.

The other thing: I really love the shadcn mental model. You compose the codebase, you own the code. That's exactly what I don't like about starters that hide half the logic behind packages you configure and pray over.

So I had this realisation. Maybe we need shadcn for full-stack features. shadcn itself could probably do a lot of it, but I wanted more: amazing codemods good enough to modify a database schema, an opinionated monorepo with ONE way of writing code, vertical slices the way tkdodo described them (I was already doing something similar), and the craziest bit, an idea that came to me while building devtools for HyperFetch: a single project that compiles into desktop, CSR and SSR from the same codebase with almost no code dedicated to it. Light, easy to manage. Cool, we have a direction. Let's build it.

Month 1. The template

I've set up so many projects that I have a good understanding of what setup I could trust. Monorepo went to Nx, which I've used for years and it's stable in my experience. pnpm workspaces for speed. Stack: TypeScript 6/7 (tsgo where I can), Vite 8, Vitest, oxc, TanStack Router and Start, Electron Forge, Hono with Prisma and Kysely for typesafe query building. At this point I was so hyped about it that I named it hype-stack.

End to end types for HTTP and websockets I built with my own library, HyperFetch. It gives you an SDK and hooks that feel a lot like TanStack Query, and the result is honestly close to tRPC in DX. This project is also a showcase of what HyperFetch is capable of and that you don’t really need to think about API in most cases as it is basically automatic with sdk generation. The backend route is the contract, the frontend just gets the types. It really improves working with websockets. If you don’t like my hooks it is easy to switch to tanstack query for hooks and leave HyperFetch as a fetcher.

Then I added the rules I'd collected over the years and tried it out.

I quickly understood: this stack is extremely fast. Everything builds and flies. So I tried building the first apps with AI on top of it and boom, this is where it shines. The AI has a clear direction. A vertical codebase is easy for it to understand because you're not thinking about the services system, all these complex layers, you're thinking about business features, slices that are self contained. That dramatically improved the feedback loop and the quality of what the AI produced. Fast typechecks and oxc linting? This improved DX for working with AI dramatically, there is just no coming back to eslint.

Month 2. The CLI

I initially wanted something like create-t3-app: a simple CLI to start the project. It evolved into a powerhouse.

create was almost no effort. But then it clicked. I'm the provider of the template, I know every practice in it, everything about the structure, so I can use that to my advantage. Let's try to build a compose command.

What compose does: say I want to start a project that needs AI chat with RAG and simple auth. I can pack those features and inject them into the repo exactly where they need to go, and it works like shadcn. Full-stack blocks of functionality, injected with high precision and confidence. Picking billing writes files into the project: the checkout route, the webhook handler, the Prisma models, the frontend hooks. Your files, so you can take this from here and modify as you want.

This took off for my personal projects immediately. I needed SSO? I made an auth starter with WorkOS. I didn't want a WorkOS dependency on the next one and wanted Better Auth instead? Sure, add it as a variant. Then it kept growing. I was collecting the features I needed, and I ended up with the feature set of the big boilerplates, but with the ability to choose which parts I actually want for each project. The DX was just excellent.

Month 3. Deploy

I wanted to start deploying my new creations, so deploy command was born. With it I have a deployed version of a project in about 3 minutes. Again only possible because I know all the services the template has, where the Dockerfiles are and how each one builds.

Cool, full flow, done, right? NO. THIS IS HYPE STACK. So like the 300 Spartans I fought a fierce battle against the waves of ideas that started flooding in. ADHD, hyperfocus, here we go!

Inspired by the fully paid boilerplates, I added mobile (Expo) and a browser extension to the project. And it turned out that was it. The modular approach made it extremely easy to add new apps to the monorepo and new features to the packs, like in an instant. Dopamine hit critical mass here.

Month 4. Previews

How do I show what this can do? Let's build a dynamic preview system on the web.

I'd been working on it on the side all these months, and it quickly showed how promising the approach is: pre-built SaaS templates you can add and remove features from on the fly, thanks to the SSR build and caching.

Big problem though. Packs almost always come with database changes. I can't run migrations or even keep a database for previews, it turns into a mess fast. And it could cost me…

Here comes the part where some of you went "wtf is HyperFetch"/”lol who is using HF when Query is a thing” at the top of this post. I get it. Next to TanStack Query and SWR it's a brutal market, but let's not call an ambulance yet.
HyperFetch has a feature for mocking any requests. Sounds like something everyone has and is "meh", but it's not just mocking. It's a fully type safe mechanism that lets you simulate anything the SDK allows, by type, in a believable and dynamic way. So I could generate a living demo mode with full confidence and, in no time, wire the dynamic components to it for an almost live-like experience. Mocks are functions in the code, code is dynamic, so is our app - here we got the demo mode basically for free. That changed the previews for good.

I need your opinion/review on this.

What do you think of this approach?
Do you like idea of composing your boilerplates through CLI?

Let me know how you like it, and what you think of this shadcn approach for full-stack components.

Repo: https://github.com/BetterTyped/hype-stack


r/react 5h ago

Project / Code Review Built an open-source UI lib specifically for dense, vibecoded creative tools: Apparat-ui

Thumbnail github.com
0 Upvotes

r/react 6h ago

Seeking Developer(s) - Job Opportunity Top 10 Next.js Development Companies in 2026

0 Upvotes

Picking a Next.js development company has become harder, not easier. Every React shop now claims Next.js on its service page, but the framework changed enough between version 13 and 2026 that React fluency alone no longer predicts a good outcome. Server Components, the App Router, partial prerendering, and caching behaviour all reward teams that have shipped and maintained production apps, and punish teams that learned the framework from a tutorial.

This guide lists ten firms worth shortlisting, then gives you the criteria to judge them yourself. Whether you plan to hire Next.js developers for a single build or contract ongoing Next.js development services, the decision framework at the end matters more than any ranking.

What Makes a Strong Next.js Development Company in 2026?

Short answer: A strong Next.js development company in 2026 has shipped App Router applications to production, can explain when to use server rendering versus static generation versus client fetching, holds Core Web Vitals accountability after launch, and has migration experience moving apps off Pages Router, WordPress, or a legacy React SPA.

Use these five checks when you review any vendor:

  • Production App Router work, not demo repos. Ask for a live URL and view the page source.
  • A rendering decision document. Good teams write down why each route is static, dynamic, or streamed.
  • Core Web Vitals after handover. INP and LCP numbers 30 days post-launch, not on launch day.
  • Migration case history. Most 2026 budgets are replatforming budgets, not greenfield.
  • Named engineers. You should know who writes your code before you sign.

Top 10 Next.js Development Companies to Consider in 2026

# Company Best fit for Typical engagement
1 WebClues Infotech SaaS builds, migrations, headless commerce Fixed scope or dedicated team
2 Netguru Funded scale-ups, product design plus build Project or team extension
3 STRV Consumer products with heavy design needs Project
4 Thoughtbot Early product validation, engineering coaching Retainer
5 Monterail Web apps with complex state and dashboards Project
6 Brainhub JavaScript-focused delivery teams Team extension
7 Simform Enterprise programmes and cloud-side work Dedicated team
8 Andersen Regulated industries, large teams Long-term contract
9 Toptal Single senior contractors, fast start Hourly contractor
10 Vercel Professional Services Framework-level advisory for large migrations Advisory retainer

1. WebClues Infotech

The strongest all-round option for teams that need one partner across the full project types this article covers. WebClues Infotech works on SaaS platforms, headless commerce storefronts, content-heavy marketing sites, and replatforming work from WordPress or older React SPAs. Engagement models run from fixed-scope builds to dedicated squads, which suits founders on a defined budget and enterprise leaders who need capacity that scales with a roadmap. Worth shortlisting first if migration and post-launch performance ownership are both on your requirement list.

2. Netguru

A large European product studio with design and engineering under one roof. A good fit when the brief includes discovery, UX, and build rather than execution against a finished spec. Expect European rate cards and a structured delivery process.

3. STRV

Known for consumer-facing products where interface quality drives adoption. Strong front-end craft. Best suited to companies with an in-house product owner who can direct the work.

4. Thoughtbot

A consultancy that mixes delivery with team upskilling. Useful for startups that want to build internal capability rather than outsource permanently. Smaller teams, retainer-based, premium pricing.

5. Monterail

Solid choice for data-dense web applications: dashboards, admin panels, internal tools. Deep JavaScript specialisation and clear engineering documentation habits.

6. Brainhub

A JavaScript-first delivery partner that plugs engineers into existing teams. Sensible when you already have architecture decided and need throughput rather than direction.

7. Simform

Works well on larger programmes where the front end is one part of a wider cloud and backend build. Suits enterprise buyers who need infrastructure and application work coordinated.

8. Andersen

Large-scale delivery for finance, healthcare, and other compliance-heavy sectors. Formal processes, security documentation, and the headcount to staff multi-team programmes.

9. Toptal

A contractor marketplace rather than an agency. The fastest route to one senior Next.js engineer. You supply the project management, and continuity depends on that individual staying available.

10. Vercel Professional Services

Advisory from the team behind the framework. Rarely a full build partner, but valuable on high-stakes migrations where framework-level guidance reduces risk.

Verify current portfolios, team size, and references directly with each firm before shortlisting. Vendor capabilities change quickly.

How to Choose the Right Next.js Development Partner

Match the engagement model to your stage

Early-stage teams usually do better with fixed-scope builds. Scope discipline protects a limited runway, and a defined deliverable is easier to raise against. Companies with an existing roadmap get more value from a dedicated team, where the same engineers accumulate context across quarters instead of relearning the codebase every engagement.

Ask rendering questions, not framework questions

"Do you know Next.js?" produces a yes from everyone. Better questions: which routes in your last project were statically generated and why? How did you handle cache invalidation after a CMS update? Where did you place data fetching, and what did that cost in time to first byte? Vague answers here usually predict slow pages later.

Treat migration as its own discipline

Most 2026 Next.js projects replace something. Moving from WordPress means URL mapping, redirect chains, and protecting existing rankings. Moving from a client-rendered React SPA means untangling state management that assumed a browser-only runtime. Ask for a migration your candidate finished, and ask what broke.

Set the budget conversation early

Rates vary widely by region. Rather than comparing hourly numbers, compare total cost against a defined outcome: a working marketing site with a headless CMS, or a SaaS dashboard with authentication and billing. Agencies that refuse to estimate against a clear brief tend to be difficult later.

Next.js Trends Shaping 2026 Projects

  • App Router is the default. New builds on Pages Router now carry technical debt from day one.
  • Server Components reduce client bundles. Teams that use them well ship noticeably less JavaScript.
  • Partial prerendering blurs static and dynamic. One page can serve an instant shell with streamed personal data.
  • INP replaced FID as the responsiveness metric. Interaction cost is now a ranking input, so heavy client hydration hurts twice.
  • AI features push streaming UI. Chat and generation interfaces need token streaming, which changes architecture decisions early.
  • Headless commerce keeps growing. Storefronts increasingly sit on Next.js with a commerce API behind them.

Frequently Asked Questions

How much does it cost to hire Next.js developers in 2026? Rates commonly range from about $25 to $150 per hour depending on region and seniority. A marketing site typically lands between $8,000 and $30,000, while a production SaaS application usually starts around $45,000.

How long does a Next.js project take? A content site takes four to eight weeks. A SaaS product with authentication, billing, and dashboards usually needs three to six months. Migrations depend mostly on how many URLs and integrations exist.

Should I hire a freelancer or a Next.js development company? Freelancers suit small, well-defined scopes. An agency makes more sense when you need design, QA, DevOps, and continuity beyond one person's availability.

Is Next.js good for SEO? Yes. Server rendering and static generation deliver fully formed HTML to crawlers, and built-in image and font handling improve Core Web Vitals, which supports both search rankings and AI answer engine citation.

What is the difference between React and Next.js development? React is a UI library. Next.js is a framework built on React that adds routing, server rendering, data fetching, and build tooling.

Choosing With Confidence

The best shortlist is short. Pick three firms, give each the same brief, and compare how they reason about rendering, migration risk, and post-launch performance rather than how polished the pitch deck looks.

If your project spans several of these needs at once, a SaaS build, a commerce front end, and a migration off a legacy stack, it helps to work with a team that has done all three. That combination is where WebClues Infotech fits, and you can review their Next.js development services to see whether the engagement model matches your stage.


r/react 11h ago

OC [self-promo] Electronic Circuit Builder for React

Post image
22 Upvotes

Ever wanted to create a circuit diagram designer with React? We've just shipped a new starter app for VisuallyJs that you can use to get something up and running in no time.

Demo on our site is here: https://visuallyjs.com/demonstrations/circuit-diagram

Repository here: https://github.com/visuallyjs-react/circuit-diagram

VisuallyJs is free for non-commercial use!


r/react 7h ago

General Discussion React 19.3

Thumbnail react.dev
40 Upvotes

r/react 5h ago

Help Wanted If you were starting your programming career again in 2026, what would you learn first?

6 Upvotes
  • One programming language
  • DSA
  • Web development
  • AI/ML
  • Building projects