Frontend
Client
Client side structure and features
Client
The frontend is written in React.
Why React?
React is a popular library for building user interfaces, it's fast, flexible and has a large ecosystem built around it.
tRPC
tRPC comes from Hono's RPC.
import { hc } from 'hono/client';
import type { App } from '@/server';
export const client = hc<App>('/api');You can combine it with React Query:
import { useQuery } from '@tanstack/react-query';
import { client } from '@/lib/client';
const { data: todos, isLoading, refetch } = useQuery({
queryKey: ['example'],
queryFn: async () => {
const res = await client.example.$get();
return res.json();
},
});Forms
You can use react-hook-form to handle forms.
I recommend using valibot to validate your forms.
Performance
For monitoring performance issues on the client in development, React Scan is a tool that helps you identify them without having to do any code changes.
The script is injected in the root layout of the app only in development:
'use client';
// react-scan must be imported before react
import { scan } from 'react-scan';
import { type JSX, useEffect } from 'react';
export function ReactScan(): JSX.Element {
useEffect(() => {
scan({
enabled: true,
});
}, []);
return <></>;
}import { ReactScan } from '@/components/react-scan';
// ...
export default function Root({ children }: LayoutProps) {
return (
<html lang="en" suppressHydrationWarning>
<head>
{/* ... */}
{import.meta.env.DEV && <ReactScan />}
</head>
{/* ... */}
</html>
);
}