Skip to main content
Web Starter is our starting point for React front-end applications. It’s crafted using a selection of advanced technologies and tools, making it a robust and efficient foundation for development. The core technologies include:
  • Next.js (Pages Router): A React framework that supports features like server-side rendering, static site generation and routing.
  • TanStack Query: A library for managing data fetching, caching, and updating in React apps.
  • React Hook Form + Zod 4: Efficient form management and schema validation tools.
  • Tailwind CSS 4 + shadcn/ui: Utility-first CSS framework with accessible, customizable UI components.
  • lucide-react: Beautiful & consistent icon set.
  • Typescript: JavaScript with syntax for types, enhancing scalability and maintainability.

​
Web Starter Documentation Sections

Explore the following sections for detailed information on different aspects of the Web Starter:
  • Styling: Focuses on the styling approach using Tailwind CSS 4 and shadcn/ui, with cn() for conditional class merging and CSS variables for theming.
  • Routing: Covers the routing mechanism within the application, explaining how to organize navigation flow.
  • Calling API: Dedicated to API interactions using the auto-generated typed API client, with useApiQuery and useApiMutation hooks for data fetching and mutations.
  • Forms: Discusses form management, highlighting the integration of React Hook Form and Zod 4 with useApiForm for automatic schema resolution.
  • Services: Describes the various service layers used in the application, such as the API client, socket, and analytics services.
  • Environment Variables: Guides on managing environment-specific configurations, explaining the use of different .env files for development, staging, and production environments, and the importance of securing sensitive data.

​
React TypeScript Cheatsheet

For a detailed guide on using React with TypeScript, visit the React TypeScript Cheatsheet.