React + TypeScript Project Setup: A Clean Starter Structure

A clean structure saves hours when a project grows. Here’s a setup that works for most web apps without over-engineering.

Recommended folders

src/
  components/
  pages/
  hooks/
  lib/
  services/
  styles/
  types/

Conventions that help

• Keep UI components dumb and reusable.
• Put network logic in services/.
• Centralize types in types/ for shared models.

Example: typed API call

export type User = { id: string; name: string };

export async function fetchUser(id: string): Promise<User> {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error('Request failed');
  return res.json();
}

This approach keeps your codebase predictable and easier to onboard new developers.