Project structure and your first screen

📘What it really is

• A common structure for a small React app:

src/
  components/    reusable pieces (buttons, cards)
  pages/         whole screens (Dashboard, EnquiryDetail)
  types.ts       shared TypeScript types
  data.ts        sample data, until there's a backend
  App.tsx
  main.tsx

• Shared types work exactly as in Module 28:

export interface Enquiry {
  id: string;
  name: string;
  email: string;
  subject: string;
  status: "new" | "in-progress" | "closed";
  createdAt: string;
}

• Styling options: one global CSS file, a CSS file per component, CSS Modules (Card.module.css, class names that can't clash), or utility libraries like Tailwind. Start simple; your Level 2 CSS skills all apply.

• Developer tools: install the React Developer Tools browser extension. Its Components tab shows your component tree and each component's data.