feat: create the basic project structure

country-explorer/README.md

@@ -1,17 +1,45 @@
-# React + TypeScript + Vite
+# Country Explorer
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+React + TypeScript + Vite app that fetches and displays country data from a REST API.
+
+## Project structure
+
+```
+src/
+├── api/         # Functions for calling the external REST API (one file per resource)
+├── components/  # Reusable UI components, e.g. App.tsx (one file per component)
+├── hooks/       # Custom React hooks
+├── types/       # Shared TypeScript types and interfaces
+├── utils/       # Small, framework-agnostic helper functions
+├── assets/      # Images, icons, and other static assets
+├── index.css    # Global stylesheet
+└── main.tsx     # Application entry point
+```
+
+`api/`, `hooks/`, `types/`, and `utils/` are created once there is real code to put in them.
+
+Naming conventions:
+
+- Components: PascalCase file names matching the default export (e.g. `CountryCard.tsx`), colocated with their own CSS file when they have one (e.g. `App.tsx` + `App.css`).
+- Hooks: camelCase file names prefixed with `use` (e.g. `useFetch.ts`).
+- API functions & utilities: camelCase file names describing what they do (e.g. `getCountries.ts`, `formatNumber.ts`).
+- Types: camelCase file names matching the domain they describe (e.g. `country.ts`).
+- Tests are colocated with the file they test (e.g. `CountryCard.test.tsx` next to `CountryCard.tsx`), rather than kept in a separate top-level test folder.
+
+## About this template
+
+This project was scaffolded with the React + TypeScript + Vite template, which provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
 Currently, two official plugins are available:
 
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
 
-## React Compiler
+### React Compiler
 
 The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
-## Expanding the ESLint configuration
+### Expanding the ESLint configuration
 
 If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
 

country-explorer/src/App.tsx → country-explorer/src/components/App.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import heroImg from './assets/hero.png';
-import reactLogo from './assets/react.svg';
-import viteLogo from './assets/vite.svg';
+import heroImg from '../assets/hero.png';
+import reactLogo from '../assets/react.svg';
+import viteLogo from '../assets/vite.svg';
 import './App.css';
 
 function App() {
@@ -18,7 +18,7 @@ function App() {
         <div>
           <h1>Get started</h1>
           <p>
-            Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
+            Edit <code>src/components/App.tsx</code> and save to test <code>HMR</code>
           </p>
         </div>
         <button type="button" className="counter" onClick={() => setCount((count) => count + 1)}>

country-explorer/src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './index.css';
-import App from './App.tsx';
+import App from './components/App.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>