Awarefy Web Tech Stack 2025 - React, TanStack Start, shadcn, Playwright

On March 6, 2025, we had the opportunity to implement a complete rebuild of Awarefy's web application, which has now been released.

Currently, Awarefy's core functions are provided as mobile apps for iOS/Android. The web application offers only limited functionality, but developing the web app further is one of our business priorities. Therefore, we proceeded with this project with the mission of creating a foundation that enables feature development and improvement at a pace that meets our business growth needs.

In rebuilding our web application from scratch, we selected a new technology stack. It was a personally enriching learning experience, so I'd like to share insights focusing on the technology stack we adopted. I hope this will be helpful for those considering launching a web application in 2025.

Technology Stack We Adopted

Here is the technology stack we adopted:

• Framework

  • React

• Meta Framework

  • TanStack Start

• UI Components

  • shadcn

  • Magic UI (planned)

• Styling Library

  • Tailwind CSS

• Async Processing & State Management

  • TanStack Query

  • TanStack Store (planned)

• Forms

  • React Hook Form

  • Valibot

• Dependency Injection

  • Ditox

• Linter / Formatter

  • Biome

• Internationalization

  • react-i18next

• Testing

  • Vitest

  • Playwright

• Package Management

  • pnpm

• Hosting

  • Vercel

• Observability

  • Datadog

• Payment

  • Stripe Checkout

Next, I'd like to introduce and provide additional information about some of the technology stack we adopted.

TanStack Start

TanStack Start is a React meta-framework based on TanStack Router that supports not only CSR but also SSR.

As of March 2025, TanStack Start is still in beta, but since many of its features are part of TanStack Router (which has reached v1), and because of our overall trust in the TanStack series, we didn't see this as an issue and proceeded with adoption.

Meta frameworks we compared but didn't adopt include:

• "Next.js: The library was too large for our team size and what we wanted to achieve, and our previous project used Next.js which led to this decision. (This is not to say that the framework itself is bad, but it wasn't right for us in this context)."

• "React Router v7 (Remix): It was a strong candidate, but we ultimately decided against it due to uncertainty about the future direction of the React Router and Remix integration."

(Note that throughout this article, decisions not to adopt certain technologies are based on our team's specific circumstances and are the result of a single decision-making process. I'm not recommending against these options for readers, so please keep that in mind.)

shadcn + Tailwind v4

shadcn is a Tailwind-based UI component library that uses the copy & paste component addition method that has been trending in recent years. It also has a dedicated command-line tool, allowing you to add UI components to your project with commands like npx shadcn add button.

Incidentally, I discovered TanStack Start because it was included in the shadcn tutorial.

We considered many UI component libraries, but here are a few particularly interesting projects:

Preline is a Tailwind CSS-based component library. It offers a paid Pro version and provides Figma files, which makes it seem easy to adopt for teams.

HeroUI was previously developed as NextUI. As its name suggests, NextUI was originally a project that assumed Next.js, but it seems to have evolved to become a React component library not tied to Next.js.

Origin UI is another component library that adopts the Tailwind CSS copy & paste method. It offers a wide variety of components, which is attractive as it can cover many use cases. On the other hand, perhaps due to the large number, there seems to be some difficulty with overall consistency, and guidelines might be needed for deciding which components to adopt and on what basis.

We plan to share information about using shadcn + Tailwind v4 and building design systems separately, so please refer to that when it's published.

TanStack Query

One of the most popular libraries in the TanStack series is TanStack Query (formerly React Query).

TanStack Query is a library that handles caching strategies and retry management for asynchronous communication, and I believe many projects use it.

At Awarefy, we use Connect / gRPC / Protocol Buffers for client-server communication, and a library called Connect for TanStack Query has emerged, which we're currently evaluating.

TanStack Store

When developing applications with React, selecting a state management library is often a challenge. At the time of writing, we're using only TanStack Query, useState, and Context for state management. If more complex state management use cases arise, we plan to reconsider with TanStack Store as a candidate.

Ditox

At Awarefy, we use DDD + Onion Architecture as our software architecture across mobile, web, and backend. In this project, we considered whether to use a Dependency Injection (DI) library at all, and if so, which one. We ultimately adopted Ditox.

There are several options for TypeScript DI libraries, and tsyringe and InversifyJS seem to be commonly used. What became a concern was that these DI libraries use TypeScript decorators, which are still an experimental feature in TypeScript, requiring workarounds to pass the build. It was also unclear whether decorators would be officially adopted in the future, raising concerns about potential technical debt. This left us with options to either use a library that doesn't use decorators, not use DI at all, or implement our own solution.

Ditox is a library that provides DI functionality in a type-safe manner without using decorators. Like DI libraries in general, it may feel like there's a lot of boilerplate, but I personally find it acceptable, though I understand it's a technical choice that leaves room for debate.

React Hook Form + Valibot

React Hook Form (RHF) is a standard library for building form UIs in React.

RHF is often used with zod for form input validation. This time, we introduced Valibot, which claims to be "lighter weight."

The Standard Schema project, which aims to standardize common interfaces for TypeScript validation libraries, is also attracting attention, and Valibot is on that list. The experience has been good, allowing us to define validation logic simply and flexibly.

const LoginSchema = v.object({
  email: v.pipe(
    v.string(),
    v.nonEmpty('Please enter your email address'),
    v.email('Please enter a correctly formatted email address'),
  ),
  password: v.pipe(
    v.string(),
    v.nonEmpty('Please enter your password'),
  ),
});

By the way, there's a library called TanStack Form in the TanStack series that's equivalent to RHF and looks very good, but we chose RHF because it has some advantages in the details.

react-i18next

The selection of a library for internationalization was challenging, but we eventually settled on the standard react-i18next.

Other candidates we considered were typesafe-i18n, Lingui, and Paraglide JS, but we decided against them due to concerns about maintenance continuity, stability of operation and setup, and features.

Vercel

Vercel is such a major hosting service for frontend applications that it hardly needs introduction. Since our meta-framework wasn't Next.js, we debated until the end whether to use Vercel and considered alternatives.

We ultimately chose Vercel because it had the most information available among our comparison options, and we assessed that we wouldn't be disadvantaged by not using Next.js.

Our priority was ensuring that an app using TanStack Start would work without issues, and here are the other services we considered:

Netlify is another frontend app hosting service similar to Vercel. It was a close call between Netlify and Vercel, but one concern was that Netlify's CDN doesn't include a Japan region, a situation that appears to have continued for some time.

Render.com is a service that supports the operation of backend services in general. In addition to running web applications, you can set up databases, and it's often compared to Heroku in the community. While it was an interesting project, we didn't adopt it because we only needed to deploy a web frontend application and didn't need to build databases.

Regarding Cloudflare Pages, although it's listed as a hosting destination in the TanStack Start documentation, we couldn't confirm normal operation in our testing range and gave up (it seems there have been similar experiences in the past...).

Others

When adopting TanStack Start, you'll end up using Vite (personal note: pronounced "veet") and Vinxi (personal note: pronounced "vinchi").

https://github.com/nksaraf/vinxi

Vitest is commonly chosen as a testing framework, and Playwright is the most powerful choice for E2E testing, so we adopted them without much further investigation.

Side Story: SolidJS and Solid Start

Actually, in the preliminary stage of this technology selection, we developed the application prototype not with React but with SolidJS.

SolidJS also has a meta-framework, with Solid Start being a prominent one. Similar to the relationship between TanStack Start and TanStack Router (the naming is also similar!), Solid Start is a meta-framework that provides SSR functionality while using Solid Router. Solid Start also uses Vinxi.

The development experience with SolidJS and Solid Start itself was excellent. SolidJS is lightweight compared to React, designed to avoid inducing anti-patterns, and offers a clear choice for state management with Signals, eliminating the need to agonize over options. It's a technology stack with many attractive features.

However, when compared to the size of the React ecosystem, it seemed too avant-garde, particularly in terms of UI library richness, which led us to decide against adoption. Regarding UI libraries, there's an unofficial project called shadcn-solid, which is the SolidJS version of shadcn, and an attractive project called Park UI, but the options are very limited, and it raised concerns about needing to build from scratch ourselves.

The length of this section probably reveals my disappointment at not being able to adopt SolidJS...

Anyway, especially going forward, as opportunities to develop UI components with AI coding assistance increase, I believe the benefits of leaning toward technologies that "AI is familiar with" will become even greater. For example, this would support the adoption of React + shadcn, which is easier to get assistance from tools like v0 (though we didn't adopt Next.js).

https://v0.dev/

---

The Awarefy web app has launched with minimal features, and we plan to rapidly expand its functionality. Awarefy is recruiting engineers who want to work on product development in the AI x healthcare field using modern technology stacks with high energy and enjoyment.