Frontend

Web App vs Website

These recommendations apply to building interactive web applications. For how we build websites, see ScottyLabs website repo. One notable difference is that the website uses CSS Modules instead of Tailwind CSS for better organization of styles.

Client

React

Build Tool

Vite

Styling

Tailwind CSS + Shadcn

Use Corgi (ScottyLabs Component Library) instead of Shadcn when the Figma design uses the ScottyLab UI Kit.

Routing

TanStack Router

Data Fetching

TanStack Query: an example using TanStack Query with TanStack Router

State Management

Use Local Storage for states you want to persist across browser sessions, such as themes.

Use TanStack search params with Zod adaptor for storing states you want to persists on a browser refresh.

Keep it simple with useState until you prop drilled so much that you are sure you need a state library: Zustand

Environments

Use an env.ts file to validate environment secrets with Zod.

Plugin

React Compiler: automatically optimizes your React application by handling memoization for you