[{"id":"269b1794-e14d-4bed-967e-84c75985651e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Weather App","styles":{}}],"children":[]},{"id":"b4730b49-cfb0-42f9-8295-91de12c5b12e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Weather App","styles":{"bold":true}},{"type":"text","text":" is a practice project for building an API-based weather application using React.js.","styles":{}}],"children":[]},{"id":"b2bded07-650c-4790-8b74-62632fb38914","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"In simple words:","styles":{}}],"children":[]},{"id":"6f91e449-0926-408d-9608-34194f20fb06","type":"procode","props":{"code":"Weather App = app for searching a city and showing current weather\n","language":"txt","filename":"","files":"[{\"id\":\"azefey0ve\",\"name\":\"code\",\"code\":\"Weather App = app for searching a city and showing current weather\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"91e95111-86a2-4a6d-b96a-149bd51d6626","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"A weather app usually has a search form, loading state, error state, and weather result card.","styles":{}}],"children":[]},{"id":"bf7717f7-0f7e-4d33-a843-f8d41adb67f5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example:","styles":{}}],"children":[]},{"id":"98ce7eb8-86a6-452d-b3aa-bde065f11831","type":"procode","props":{"code":"Weather App\n├── Search city form\n├── Weather result card\n├── Temperature\n├── Weather condition\n├── Humidity\n├── Wind speed\n└── Recent searches\n","language":"txt","filename":"","files":"[{\"id\":\"kdy8s955o\",\"name\":\"code\",\"code\":\"Weather App\\n├── Search city form\\n├── Weather result card\\n├── Temperature\\n├── Weather condition\\n├── Humidity\\n├── Wind speed\\n└── Recent searches\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b558743d-c5ff-4e27-8763-92e1f54ad463","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This project is good for practicing React state, form handling, API fetching, TypeScript types, reusable components, and clean frontend architecture.","styles":{}}],"children":[]},{"id":"fe17d970-9ae7-4915-b18e-0a855f103a55","type":"divider","props":{},"children":[]},{"id":"51b9e175-553e-4b4c-8be5-abe6a3c1d45d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Explanation","styles":{}}],"children":[]},{"id":"73bb67e2-dd41-458e-b24c-d8a221c2abca","type":"procode","props":{"code":"Weather App Project\n├── Uses React.js\n├── Uses Vite\n├── Uses TypeScript\n├── Uses weather API\n├── Uses city search\n├── Uses reusable components\n├── Uses service file for API logic\n├── Uses normal CSS for styling\n└── Helps practice real API integration\n","language":"txt","filename":"","files":"[{\"id\":\"mb97gn4cl\",\"name\":\"code\",\"code\":\"Weather App Project\\n├── Uses React.js\\n├── Uses Vite\\n├── Uses TypeScript\\n├── Uses weather API\\n├── Uses city search\\n├── Uses reusable components\\n├── Uses service file for API logic\\n├── Uses normal CSS for styling\\n└── Helps practice real API integration\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fdbd8faa-14d4-4f33-a31d-b0293574abe6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1a58f481-4767-4835-9e91-3c4169066e38","type":"procode","props":{"code":"User searches city\n└── React fetches weather data\n └── UI shows weather result\n","language":"txt","filename":"","files":"[{\"id\":\"0grlv1xvf\",\"name\":\"code\",\"code\":\"User searches city\\n└── React fetches weather data\\n └── UI shows weather result\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7d8a3fc-5ef3-4936-8f62-ae1734bcb8e0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example search:","styles":{}}],"children":[]},{"id":"e3d21ddb-3844-4277-90d8-fc0870b816d2","type":"procode","props":{"code":"Pontianak\n└── Shows current weather in Pontianak\n","language":"txt","filename":"","files":"[{\"id\":\"a5znsjxr2\",\"name\":\"code\",\"code\":\"Pontianak\\n└── Shows current weather in Pontianak\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"508ea70b-9876-4279-ae86-7afdb8ae7ea5","type":"divider","props":{},"children":[]},{"id":"153b6287-47a7-4012-ad98-4d5bf76e477f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Project Goal","styles":{}}],"children":[]},{"id":"82d8cf51-42d4-417f-95da-6b01ddc7f16a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The goal of this project is to build a simple weather app with clean React architecture.","styles":{}}],"children":[]},{"id":"856698e8-8d5a-49ad-9044-7778d2336c5c","type":"procode","props":{"code":"Project Goal\n├── Practice React components\n├── Practice form input\n├── Practice API request\n├── Practice loading state\n├── Practice error state\n├── Practice reusable UI components\n├── Practice service folder\n├── Practice TypeScript types\n└── Practice clean project structure\n","language":"txt","filename":"","files":"[{\"id\":\"dinqqahud\",\"name\":\"code\",\"code\":\"Project Goal\\n├── Practice React components\\n├── Practice form input\\n├── Practice API request\\n├── Practice loading state\\n├── Practice error state\\n├── Practice reusable UI components\\n├── Practice service folder\\n├── Practice TypeScript types\\n└── Practice clean project structure\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"da19bf21-ba89-480d-9c87-fd280ad1432d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This project is useful before building bigger API projects like movie search, e-commerce frontend, dashboard app, or fullstack CRUD app.","styles":{}}],"children":[]},{"id":"8116fcc9-3ed5-42af-a9cf-da7183a2c753","type":"divider","props":{},"children":[]},{"id":"0bca8513-19dc-4222-95fb-f28e686521b9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What You Will Build","styles":{}}],"children":[]},{"id":"a205f0ae-927a-4768-a831-0628bace058d","type":"procode","props":{"code":"Weather App Features\n├── Search weather by city\n├── Show city and country\n├── Show current temperature\n├── Show weather condition\n├── Show humidity\n├── Show wind speed\n├── Toggle Celsius and Fahrenheit\n├── Show loading state\n├── Show error message\n└── Show recent searches\n","language":"txt","filename":"","files":"[{\"id\":\"rn8thqs4n\",\"name\":\"code\",\"code\":\"Weather App Features\\n├── Search weather by city\\n├── Show city and country\\n├── Show current temperature\\n├── Show weather condition\\n├── Show humidity\\n├── Show wind speed\\n├── Toggle Celsius and Fahrenheit\\n├── Show loading state\\n├── Show error message\\n└── Show recent searches\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"237fad3a-f6f1-4342-8c15-f308fea6dffc","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Weather components:","styles":{}}],"children":[]},{"id":"6fe97a15-51c9-4009-a971-026df0af7d13","type":"procode","props":{"code":"Weather Components\n├── Navbar\n├── Footer\n├── WeatherForm\n├── WeatherCard\n├── UnitToggle\n├── RecentSearches\n├── LoadingState\n├── ErrorMessage\n└── EmptyState\n","language":"txt","filename":"","files":"[{\"id\":\"uo29ca55t\",\"name\":\"code\",\"code\":\"Weather Components\\n├── Navbar\\n├── Footer\\n├── WeatherForm\\n├── WeatherCard\\n├── UnitToggle\\n├── RecentSearches\\n├── LoadingState\\n├── ErrorMessage\\n└── EmptyState\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3f50a7bb-214c-4546-845b-4b7fb87b3600","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple layout flow:","styles":{}}],"children":[]},{"id":"e259fa8a-d7b5-4020-a7b6-ec1f9b6c8e8c","type":"procode","props":{"code":"Navbar\n ↓\nWeather App Content\n ↓\nFooter\n","language":"txt","filename":"","files":"[{\"id\":\"ydyaf870w\",\"name\":\"code\",\"code\":\"Navbar\\n ↓\\nWeather App Content\\n ↓\\nFooter\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3c98207f-79fa-410e-839e-d8b7adece5cf","type":"divider","props":{},"children":[]},{"id":"32fa2e46-166a-4d0e-b1a0-618df273cd37","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Final Project Structure","styles":{}}],"children":[]},{"id":"e5ccfabf-5730-4390-8f7c-efca14d1b1b9","type":"procode","props":{"code":"src/\n├── main.tsx\n├── App.tsx\n├── index.css\n│\n├── components/\n│ ├── layout/\n│ │ ├── navbar.tsx\n│ │ └── footer.tsx\n│ │\n│ └── weather/\n│ ├── weather-form.tsx\n│ ├── weather-card.tsx\n│ ├── unit-toggle.tsx\n│ ├── recent-searches.tsx\n│ ├── loading-state.tsx\n│ ├── error-message.tsx\n│ └── empty-state.tsx\n│\n├── services/\n│ └── weather-service.ts\n│\n├── types/\n│ └── weather.ts\n│\n├── utils/\n│ └── weather-utils.ts\n│\n└── config/\n └── site.ts\n","language":"txt","filename":"","files":"[{\"id\":\"wd8oq3o0k\",\"name\":\"code\",\"code\":\"src/\\n├── main.tsx\\n├── App.tsx\\n├── index.css\\n│\\n├── components/\\n│ ├── layout/\\n│ │ ├── navbar.tsx\\n│ │ └── footer.tsx\\n│ │\\n│ └── weather/\\n│ ├── weather-form.tsx\\n│ ├── weather-card.tsx\\n│ ├── unit-toggle.tsx\\n│ ├── recent-searches.tsx\\n│ ├── loading-state.tsx\\n│ ├── error-message.tsx\\n│ └── empty-state.tsx\\n│\\n├── services/\\n│ └── weather-service.ts\\n│\\n├── types/\\n│ └── weather.ts\\n│\\n├── utils/\\n│ └── weather-utils.ts\\n│\\n└── config/\\n └── site.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0888e47a-58a3-4c5e-9acb-0ee2ae178056","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Important files:","styles":{}}],"children":[]},{"id":"0bc6bf0b-76a6-4bd2-93a7-c3e429b6fe60","type":"procode","props":{"code":"src/App.tsx\n└── Main weather app logic\n\nsrc/services/weather-service.ts\n└── API request logic\n\nsrc/types/weather.ts\n└── Weather TypeScript types\n\nsrc/components/weather\n└── Weather-specific reusable components\n\nsrc/utils/weather-utils.ts\n└── Helper functions for weather condition and temperature conversion\n","language":"txt","filename":"","files":"[{\"id\":\"phxa45l4e\",\"name\":\"code\",\"code\":\"src/App.tsx\\n└── Main weather app logic\\n\\nsrc/services/weather-service.ts\\n└── API request logic\\n\\nsrc/types/weather.ts\\n└── Weather TypeScript types\\n\\nsrc/components/weather\\n└── Weather-specific reusable components\\n\\nsrc/utils/weather-utils.ts\\n└── Helper functions for weather condition and temperature conversion\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce238026-c311-4c7d-9c5f-a1881a1a0610","type":"divider","props":{},"children":[]},{"id":"fd941064-f392-4567-8b3f-cfd8dae5b94f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Create Project","styles":{}}],"children":[]},{"id":"1f6ae5e2-9cf4-4f38-8f35-8ac2702e94fb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Create a new React project with Vite.","styles":{}}],"children":[]},{"id":"d64d8507-e70a-414c-8763-82241426ede0","type":"procode","props":{"code":"pnpm create vite@latest weather-app\n","language":"bash","filename":"","files":"[{\"id\":\"k6vky3xq1\",\"name\":\"code\",\"code\":\"pnpm create vite@latest weather-app\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a6401f1d-1eed-4e27-baba-22f40a4c9d3e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Choose:","styles":{}}],"children":[]},{"id":"79c0aa44-1f7f-42a7-8642-dadec356d3aa","type":"procode","props":{"code":"Framework: React\nVariant: TypeScript\n","language":"txt","filename":"","files":"[{\"id\":\"y5jn9n4hh\",\"name\":\"code\",\"code\":\"Framework: React\\nVariant: TypeScript\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f20d90a3-7fb3-470d-bc7e-1c2c50b341d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Then enter the project:","styles":{}}],"children":[]},{"id":"86f76970-36d7-4eab-aa0a-12e14c734375","type":"procode","props":{"code":"cd weather-app\n","language":"bash","filename":"","files":"[{\"id\":\"oxevjdux5\",\"name\":\"code\",\"code\":\"cd weather-app\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"712637e1-ac49-40ce-9699-45512c40dd3e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Install dependencies:","styles":{}}],"children":[]},{"id":"af053b97-ba02-41d1-aaf3-b341ea6d1e37","type":"procode","props":{"code":"pnpm install\n","language":"bash","filename":"","files":"[{\"id\":\"o2ga45geo\",\"name\":\"code\",\"code\":\"pnpm install\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e269ad21-66db-4ccb-995b-e0ebde7c48ec","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Run development server:","styles":{}}],"children":[]},{"id":"49941123-2e72-43f9-b913-5db4f27885fc","type":"procode","props":{"code":"pnpm dev\n","language":"bash","filename":"","files":"[{\"id\":\"gfuxflp8p\",\"name\":\"code\",\"code\":\"pnpm dev\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b7594733-cdfe-404f-a95b-95ae97d60be7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Open:","styles":{}}],"children":[]},{"id":"601f2025-1a6c-49ee-9011-1ee8c9220dfc","type":"procode","props":{"code":"http://localhost:5173\n","language":"txt","filename":"","files":"[{\"id\":\"lu0hln8ma\",\"name\":\"code\",\"code\":\"http://localhost:5173\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"958bda29-ad32-48a8-8b85-e1f46af23bb8","type":"divider","props":{},"children":[]},{"id":"5372e28c-20ba-46ec-b823-cf9f6c2ff5d8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Main Entry File","styles":{}}],"children":[]},{"id":"2fb7e7a8-a234-4f98-9beb-c794ebaa2157","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/main.tsx","styles":{"code":true}}],"children":[]},{"id":"38c07640-6b4f-4fb9-b3f5-d567d63a197d","type":"procode","props":{"code":"import React from \"react\"\nimport ReactDOM from \"react-dom/client\"\nimport App from \"./App\"\nimport \"./index.css\"\n\nReactDOM.createRoot(document.getElementById(\"root\")!).render(\n \n \n \n)\n","language":"tsx","filename":"","files":"[{\"id\":\"0nmmk8gcq\",\"name\":\"code\",\"code\":\"import React from \\\"react\\\"\\nimport ReactDOM from \\\"react-dom/client\\\"\\nimport App from \\\"./App\\\"\\nimport \\\"./index.css\\\"\\n\\nReactDOM.createRoot(document.getElementById(\\\"root\\\")!).render(\\n \\n \\n \\n)\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ed8e18a0-baee-4577-bdef-77db24572f3b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"0e584df3-8468-4fbc-862b-7ae60a963ce4","type":"procode","props":{"code":"main.tsx\n├── Imports React\n├── Imports App\n├── Imports global CSS\n└── Renders app into root element\n","language":"txt","filename":"","files":"[{\"id\":\"96h9ijgj3\",\"name\":\"code\",\"code\":\"main.tsx\\n├── Imports React\\n├── Imports App\\n├── Imports global CSS\\n└── Renders app into root element\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"6748bb05-a21d-4aa6-aab5-90a78f1dd38f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"App","styles":{"code":true}},{"type":"text","text":" is the main component of the weather application.","styles":{}}],"children":[]},{"id":"c4a72fc2-c142-4360-aa10-3550f576cbc7","type":"divider","props":{},"children":[]},{"id":"46e7dcd0-9dad-4216-a8db-6091d642e30d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 3: Global CSS","styles":{}}],"children":[]},{"id":"f3685dc9-e0f8-4a66-84ec-0c5c90a75735","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/index.css","styles":{"code":true}}],"children":[]},{"id":"62f122a9-d891-4016-8e40-c23fcbec76f3","type":"procode","props":{"code":"* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family:\n Inter,\n ui-sans-serif,\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n sans-serif;\n background: #f3f4f6;\n color: #111827;\n}\n\nbutton,\ninput {\n font: inherit;\n}\n\nbutton {\n cursor: pointer;\n}\n\n.app {\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.container {\n width: min(100% - 32px, 960px);\n margin: 0 auto;\n}\n\n.navbar {\n border-bottom: 1px solid #e5e7eb;\n background: #ffffff;\n}\n\n.navbar-inner {\n height: 64px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.logo {\n font-size: 20px;\n font-weight: 800;\n letter-spacing: -0.04em;\n}\n\n.nav-text {\n color: #6b7280;\n font-size: 14px;\n}\n\n.main-content {\n flex: 1;\n padding: 64px 0;\n}\n\n.hero {\n max-width: 640px;\n margin-bottom: 32px;\n}\n\n.badge {\n display: inline-flex;\n border: 1px solid #d1d5db;\n border-radius: 999px;\n padding: 8px 14px;\n color: #6b7280;\n font-size: 14px;\n font-weight: 600;\n}\n\n.title {\n margin: 16px 0 0;\n font-size: clamp(40px, 6vw, 64px);\n line-height: 1;\n letter-spacing: -0.06em;\n}\n\n.description {\n margin-top: 20px;\n color: #6b7280;\n font-size: 18px;\n line-height: 1.7;\n}\n\n.weather-panel {\n border: 1px solid #e5e7eb;\n border-radius: 28px;\n background: #ffffff;\n padding: 24px;\n box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);\n}\n\n.weather-form {\n display: flex;\n gap: 12px;\n}\n\n.weather-input {\n flex: 1;\n min-width: 0;\n border: 1px solid #d1d5db;\n border-radius: 14px;\n padding: 14px 16px;\n outline: none;\n}\n\n.weather-input:focus {\n border-color: #111827;\n}\n\n.primary-button {\n border: 0;\n border-radius: 14px;\n background: #111827;\n color: #ffffff;\n padding: 14px 18px;\n font-weight: 700;\n}\n\n.primary-button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.unit-toggle {\n margin-top: 16px;\n display: inline-flex;\n gap: 8px;\n border: 1px solid #e5e7eb;\n border-radius: 999px;\n padding: 4px;\n background: #f9fafb;\n}\n\n.unit-button {\n border: 0;\n border-radius: 999px;\n background: transparent;\n padding: 8px 14px;\n color: #6b7280;\n font-weight: 700;\n}\n\n.unit-button.active {\n background: #111827;\n color: #ffffff;\n}\n\n.status {\n margin-top: 24px;\n border-radius: 18px;\n background: #f9fafb;\n padding: 18px;\n color: #6b7280;\n}\n\n.error {\n background: #fef2f2;\n color: #991b1b;\n}\n\n.weather-card {\n margin-top: 24px;\n border-radius: 24px;\n background: #111827;\n color: #ffffff;\n padding: 28px;\n}\n\n.weather-top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 24px;\n}\n\n.weather-city {\n margin: 0;\n font-size: 28px;\n letter-spacing: -0.04em;\n}\n\n.weather-condition {\n margin: 8px 0 0;\n color: #d1d5db;\n}\n\n.weather-temp {\n margin: 0;\n font-size: 64px;\n line-height: 1;\n letter-spacing: -0.06em;\n}\n\n.weather-details {\n display: grid;\n gap: 12px;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n margin-top: 28px;\n}\n\n.weather-detail {\n border: 1px solid rgba(255, 255, 255, 0.14);\n border-radius: 18px;\n padding: 16px;\n}\n\n.weather-detail span {\n display: block;\n color: #9ca3af;\n font-size: 14px;\n}\n\n.weather-detail strong {\n display: block;\n margin-top: 6px;\n font-size: 20px;\n}\n\n.recent-searches {\n margin-top: 24px;\n}\n\n.recent-title {\n margin: 0 0 12px;\n font-size: 14px;\n color: #6b7280;\n}\n\n.recent-list {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.recent-button {\n border: 1px solid #e5e7eb;\n border-radius: 999px;\n background: #ffffff;\n padding: 8px 14px;\n color: #374151;\n}\n\n.footer {\n border-top: 1px solid #e5e7eb;\n background: #ffffff;\n padding: 28px 0;\n color: #6b7280;\n font-size: 14px;\n}\n\n.footer-inner {\n display: flex;\n justify-content: space-between;\n gap: 16px;\n}\n\n@media (max-width: 640px) {\n .weather-form {\n flex-direction: column;\n }\n\n .weather-top {\n flex-direction: column;\n }\n\n .weather-details {\n grid-template-columns: 1fr;\n }\n\n .footer-inner {\n flex-direction: column;\n }\n}\n","language":"css","filename":"","files":"[{\"id\":\"g2ngzyud3\",\"name\":\"code\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nbody {\\n margin: 0;\\n font-family:\\n Inter,\\n ui-sans-serif,\\n system-ui,\\n -apple-system,\\n BlinkMacSystemFont,\\n \\\"Segoe UI\\\",\\n sans-serif;\\n background: #f3f4f6;\\n color: #111827;\\n}\\n\\nbutton,\\ninput {\\n font: inherit;\\n}\\n\\nbutton {\\n cursor: pointer;\\n}\\n\\n.app {\\n min-height: 100vh;\\n display: flex;\\n flex-direction: column;\\n}\\n\\n.container {\\n width: min(100% - 32px, 960px);\\n margin: 0 auto;\\n}\\n\\n.navbar {\\n border-bottom: 1px solid #e5e7eb;\\n background: #ffffff;\\n}\\n\\n.navbar-inner {\\n height: 64px;\\n display: flex;\\n align-items: center;\\n justify-content: space-between;\\n}\\n\\n.logo {\\n font-size: 20px;\\n font-weight: 800;\\n letter-spacing: -0.04em;\\n}\\n\\n.nav-text {\\n color: #6b7280;\\n font-size: 14px;\\n}\\n\\n.main-content {\\n flex: 1;\\n padding: 64px 0;\\n}\\n\\n.hero {\\n max-width: 640px;\\n margin-bottom: 32px;\\n}\\n\\n.badge {\\n display: inline-flex;\\n border: 1px solid #d1d5db;\\n border-radius: 999px;\\n padding: 8px 14px;\\n color: #6b7280;\\n font-size: 14px;\\n font-weight: 600;\\n}\\n\\n.title {\\n margin: 16px 0 0;\\n font-size: clamp(40px, 6vw, 64px);\\n line-height: 1;\\n letter-spacing: -0.06em;\\n}\\n\\n.description {\\n margin-top: 20px;\\n color: #6b7280;\\n font-size: 18px;\\n line-height: 1.7;\\n}\\n\\n.weather-panel {\\n border: 1px solid #e5e7eb;\\n border-radius: 28px;\\n background: #ffffff;\\n padding: 24px;\\n box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);\\n}\\n\\n.weather-form {\\n display: flex;\\n gap: 12px;\\n}\\n\\n.weather-input {\\n flex: 1;\\n min-width: 0;\\n border: 1px solid #d1d5db;\\n border-radius: 14px;\\n padding: 14px 16px;\\n outline: none;\\n}\\n\\n.weather-input:focus {\\n border-color: #111827;\\n}\\n\\n.primary-button {\\n border: 0;\\n border-radius: 14px;\\n background: #111827;\\n color: #ffffff;\\n padding: 14px 18px;\\n font-weight: 700;\\n}\\n\\n.primary-button:disabled {\\n opacity: 0.6;\\n cursor: not-allowed;\\n}\\n\\n.unit-toggle {\\n margin-top: 16px;\\n display: inline-flex;\\n gap: 8px;\\n border: 1px solid #e5e7eb;\\n border-radius: 999px;\\n padding: 4px;\\n background: #f9fafb;\\n}\\n\\n.unit-button {\\n border: 0;\\n border-radius: 999px;\\n background: transparent;\\n padding: 8px 14px;\\n color: #6b7280;\\n font-weight: 700;\\n}\\n\\n.unit-button.active {\\n background: #111827;\\n color: #ffffff;\\n}\\n\\n.status {\\n margin-top: 24px;\\n border-radius: 18px;\\n background: #f9fafb;\\n padding: 18px;\\n color: #6b7280;\\n}\\n\\n.error {\\n background: #fef2f2;\\n color: #991b1b;\\n}\\n\\n.weather-card {\\n margin-top: 24px;\\n border-radius: 24px;\\n background: #111827;\\n color: #ffffff;\\n padding: 28px;\\n}\\n\\n.weather-top {\\n display: flex;\\n align-items: flex-start;\\n justify-content: space-between;\\n gap: 24px;\\n}\\n\\n.weather-city {\\n margin: 0;\\n font-size: 28px;\\n letter-spacing: -0.04em;\\n}\\n\\n.weather-condition {\\n margin: 8px 0 0;\\n color: #d1d5db;\\n}\\n\\n.weather-temp {\\n margin: 0;\\n font-size: 64px;\\n line-height: 1;\\n letter-spacing: -0.06em;\\n}\\n\\n.weather-details {\\n display: grid;\\n gap: 12px;\\n grid-template-columns: repeat(2, minmax(0, 1fr));\\n margin-top: 28px;\\n}\\n\\n.weather-detail {\\n border: 1px solid rgba(255, 255, 255, 0.14);\\n border-radius: 18px;\\n padding: 16px;\\n}\\n\\n.weather-detail span {\\n display: block;\\n color: #9ca3af;\\n font-size: 14px;\\n}\\n\\n.weather-detail strong {\\n display: block;\\n margin-top: 6px;\\n font-size: 20px;\\n}\\n\\n.recent-searches {\\n margin-top: 24px;\\n}\\n\\n.recent-title {\\n margin: 0 0 12px;\\n font-size: 14px;\\n color: #6b7280;\\n}\\n\\n.recent-list {\\n display: flex;\\n flex-wrap: wrap;\\n gap: 10px;\\n}\\n\\n.recent-button {\\n border: 1px solid #e5e7eb;\\n border-radius: 999px;\\n background: #ffffff;\\n padding: 8px 14px;\\n color: #374151;\\n}\\n\\n.footer {\\n border-top: 1px solid #e5e7eb;\\n background: #ffffff;\\n padding: 28px 0;\\n color: #6b7280;\\n font-size: 14px;\\n}\\n\\n.footer-inner {\\n display: flex;\\n justify-content: space-between;\\n gap: 16px;\\n}\\n\\n@media (max-width: 640px) {\\n .weather-form {\\n flex-direction: column;\\n }\\n\\n .weather-top {\\n flex-direction: column;\\n }\\n\\n .weather-details {\\n grid-template-columns: 1fr;\\n }\\n\\n .footer-inner {\\n flex-direction: column;\\n }\\n}\\n\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"14491b1e-a0cc-43b8-b615-6358fc266513","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"7757c078-557e-490d-abfe-fc61fd7e881f","type":"procode","props":{"code":"index.css\n├── Stores global styling\n├── Styles layout\n├── Styles weather form\n├── Styles weather card\n└── Adds responsive design\n","language":"txt","filename":"","files":"[{\"id\":\"z0iow56up\",\"name\":\"code\",\"code\":\"index.css\\n├── Stores global styling\\n├── Styles layout\\n├── Styles weather form\\n├── Styles weather card\\n└── Adds responsive design\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9db5e4ff-a6bf-4189-b9a6-a0b9ec26ee4f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Keep the styling simple first.","styles":{}}],"children":[]},{"id":"2f096967-a1ba-4a31-8069-56f9ee59a090","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The main focus of this project is React logic and API integration.","styles":{}}],"children":[]},{"id":"67b29439-5748-4187-b620-6b366f75b179","type":"divider","props":{},"children":[]},{"id":"ec958c4b-75cd-40b1-bcd9-5b3621d84d57","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 4: Site Config","styles":{}}],"children":[]},{"id":"99b4dd09-6abb-4e82-870b-a0d06c04ebd0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/config/site.ts","styles":{"code":true}}],"children":[]},{"id":"81f7418e-2725-448f-a918-225978f8a7da","type":"procode","props":{"code":"export const siteConfig = {\n name: \"WeatherNow\",\n description: \"A simple weather app built with React and TypeScript.\",\n}\n","language":"ts","filename":"","files":"[{\"id\":\"cdiezo6kr\",\"name\":\"code\",\"code\":\"export const siteConfig = {\\n name: \\\"WeatherNow\\\",\\n description: \\\"A simple weather app built with React and TypeScript.\\\",\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"33de1827-1feb-409c-9842-d5c6c552e79d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6aad91bd-1f61-4157-b195-85504fe633a6","type":"procode","props":{"code":"siteConfig\n├── Stores app name\n├── Stores app description\n└── Keeps repeated text in one place\n","language":"txt","filename":"","files":"[{\"id\":\"hwwjg5ylu\",\"name\":\"code\",\"code\":\"siteConfig\\n├── Stores app name\\n├── Stores app description\\n└── Keeps repeated text in one place\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9b31286a-9372-4224-b138-60bcf8c87b3e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The navbar and footer can use this config instead of hardcoding the app name manually.","styles":{}}],"children":[]},{"id":"905f8d1b-15e6-46a8-b764-06f364da8e2b","type":"divider","props":{},"children":[]},{"id":"05d61dfc-da1d-413f-b83f-ed0e6f51d311","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 5: Weather Types","styles":{}}],"children":[]},{"id":"d0b3ee0c-6cae-46ee-88f1-becc2cb6deaf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/types/weather.ts","styles":{"code":true}}],"children":[]},{"id":"8ce861ee-5720-451d-8cba-e7a0805bbfb9","type":"procode","props":{"code":"export type Weather = {\n city: string\n country: string\n temperatureCelsius: number\n condition: string\n weatherCode: number\n humidity: number\n windSpeed: number\n latitude: number\n longitude: number\n}\n\nexport type WeatherUnit = \"celsius\" | \"fahrenheit\"\n","language":"ts","filename":"","files":"[{\"id\":\"h7p05rpk8\",\"name\":\"code\",\"code\":\"export type Weather = {\\n city: string\\n country: string\\n temperatureCelsius: number\\n condition: string\\n weatherCode: number\\n humidity: number\\n windSpeed: number\\n latitude: number\\n longitude: number\\n}\\n\\nexport type WeatherUnit = \\\"celsius\\\" | \\\"fahrenheit\\\"\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0c024dd2-37d8-414a-9aad-4a0fa013a2c8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"d14388db-7b6e-4ace-aa42-03ecbcda240b","type":"procode","props":{"code":"weather.ts\n├── Defines Weather type\n├── Defines WeatherUnit type\n├── Makes API data safer\n└── Helps TypeScript understand weather data\n","language":"txt","filename":"","files":"[{\"id\":\"yz6ssgbl3\",\"name\":\"code\",\"code\":\"weather.ts\\n├── Defines Weather type\\n├── Defines WeatherUnit type\\n├── Makes API data safer\\n└── Helps TypeScript understand weather data\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"30bfa1a9-45e9-49d1-9285-048e3243b153","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This keeps the shape of weather data clear.","styles":{}}],"children":[]},{"id":"5c16735f-6578-4d64-9627-c78edc1795e1","type":"divider","props":{},"children":[]},{"id":"dbba75b3-00db-4828-a9a4-78135354775c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 6: Weather Utils","styles":{}}],"children":[]},{"id":"2d4f624a-a7da-41ab-bf6a-cf5aac6dfb59","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/utils/weather-utils.ts","styles":{"code":true}}],"children":[]},{"id":"7835cae7-e436-4999-9193-ae814dff3696","type":"procode","props":{"code":"import type { WeatherUnit } from \"../types/weather\"\n\nexport function getWeatherCondition(code: number) {\n if (code === 0) {\n return \"Clear sky\"\n }\n\n if ([1, 2, 3].includes(code)) {\n return \"Partly cloudy\"\n }\n\n if ([45, 48].includes(code)) {\n return \"Foggy\"\n }\n\n if ([51, 53, 55, 56, 57].includes(code)) {\n return \"Drizzle\"\n }\n\n if ([61, 63, 65, 66, 67].includes(code)) {\n return \"Rain\"\n }\n\n if ([71, 73, 75, 77].includes(code)) {\n return \"Snow\"\n }\n\n if ([80, 81, 82].includes(code)) {\n return \"Rain showers\"\n }\n\n if ([95, 96, 99].includes(code)) {\n return \"Thunderstorm\"\n }\n\n return \"Unknown weather\"\n}\n\nexport function convertTemperature(\n celsius: number,\n unit: WeatherUnit\n) {\n if (unit === \"fahrenheit\") {\n return Math.round((celsius * 9) / 5 + 32)\n }\n\n return Math.round(celsius)\n}\n\nexport function getTemperatureSymbol(unit: WeatherUnit) {\n return unit === \"fahrenheit\" ? \"°F\" : \"°C\"\n}\n","language":"ts","filename":"","files":"[{\"id\":\"mcq72hxcd\",\"name\":\"code\",\"code\":\"import type { WeatherUnit } from \\\"../types/weather\\\"\\n\\nexport function getWeatherCondition(code: number) {\\n if (code === 0) {\\n return \\\"Clear sky\\\"\\n }\\n\\n if ([1, 2, 3].includes(code)) {\\n return \\\"Partly cloudy\\\"\\n }\\n\\n if ([45, 48].includes(code)) {\\n return \\\"Foggy\\\"\\n }\\n\\n if ([51, 53, 55, 56, 57].includes(code)) {\\n return \\\"Drizzle\\\"\\n }\\n\\n if ([61, 63, 65, 66, 67].includes(code)) {\\n return \\\"Rain\\\"\\n }\\n\\n if ([71, 73, 75, 77].includes(code)) {\\n return \\\"Snow\\\"\\n }\\n\\n if ([80, 81, 82].includes(code)) {\\n return \\\"Rain showers\\\"\\n }\\n\\n if ([95, 96, 99].includes(code)) {\\n return \\\"Thunderstorm\\\"\\n }\\n\\n return \\\"Unknown weather\\\"\\n}\\n\\nexport function convertTemperature(\\n celsius: number,\\n unit: WeatherUnit\\n) {\\n if (unit === \\\"fahrenheit\\\") {\\n return Math.round((celsius * 9) / 5 + 32)\\n }\\n\\n return Math.round(celsius)\\n}\\n\\nexport function getTemperatureSymbol(unit: WeatherUnit) {\\n return unit === \\\"fahrenheit\\\" ? \\\"°F\\\" : \\\"°C\\\"\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50090719-6914-460e-a734-eb865b0d545b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c6a70af9-beb0-44b3-aceb-3fea563d9767","type":"procode","props":{"code":"weather-utils.ts\n├── Converts weather code to readable text\n├── Converts Celsius to Fahrenheit\n├── Returns temperature symbol\n└── Keeps helper logic outside components\n","language":"txt","filename":"","files":"[{\"id\":\"utgnw64f4\",\"name\":\"code\",\"code\":\"weather-utils.ts\\n├── Converts weather code to readable text\\n├── Converts Celsius to Fahrenheit\\n├── Returns temperature symbol\\n└── Keeps helper logic outside components\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ff751d27-608c-4025-8b71-b4c1bac14cf6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This makes the component files cleaner.","styles":{}}],"children":[]},{"id":"cc8c6c03-4cd9-4438-9b68-fc966044dc9a","type":"divider","props":{},"children":[]},{"id":"c71444d0-2c2e-4c2e-b2a8-d2240ba90283","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 7: Weather Service","styles":{}}],"children":[]},{"id":"3d3be530-5d65-4e98-afa9-329701b26e6f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/services/weather-service.ts","styles":{"code":true}}],"children":[]},{"id":"aee78cf8-198a-49a8-8a34-a39a82e9987d","type":"procode","props":{"code":"import type { Weather } from \"../types/weather\"\nimport { getWeatherCondition } from \"../utils/weather-utils\"\n\ntype GeocodingResponse = {\n results?: {\n name: string\n country: string\n latitude: number\n longitude: number\n }[]\n}\n\ntype ForecastResponse = {\n current: {\n temperature_2m: number\n relative_humidity_2m: number\n weather_code: number\n wind_speed_10m: number\n }\n}\n\nconst GEOCODING_API_URL = \"https://geocoding-api.open-meteo.com/v1/search\"\nconst FORECAST_API_URL = \"https://api.open-meteo.com/v1/forecast\"\n\nexport async function getWeatherByCity(city: string): Promise {\n const geocodingUrl = `${GEOCODING_API_URL}?name=${encodeURIComponent(\n city\n )}&count=1&language=en&format=json`\n\n const geocodingResponse = await fetch(geocodingUrl)\n const geocodingData: GeocodingResponse = await geocodingResponse.json()\n\n if (!geocodingResponse.ok || !geocodingData.results?.length) {\n throw new Error(\"City not found\")\n }\n\n const location = geocodingData.results[0]\n\n const forecastUrl =\n `${FORECAST_API_URL}` +\n `?latitude=${location.latitude}` +\n `&longitude=${location.longitude}` +\n `¤t=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m` +\n `&timezone=auto`\n\n const forecastResponse = await fetch(forecastUrl)\n const forecastData: ForecastResponse = await forecastResponse.json()\n\n if (!forecastResponse.ok) {\n throw new Error(\"Failed to fetch weather\")\n }\n\n const weatherCode = forecastData.current.weather_code\n\n return {\n city: location.name,\n country: location.country,\n latitude: location.latitude,\n longitude: location.longitude,\n temperatureCelsius: forecastData.current.temperature_2m,\n humidity: forecastData.current.relative_humidity_2m,\n windSpeed: forecastData.current.wind_speed_10m,\n weatherCode,\n condition: getWeatherCondition(weatherCode),\n }\n}\n","language":"ts","filename":"","files":"[{\"id\":\"mm1sljrtg\",\"name\":\"code\",\"code\":\"import type { Weather } from \\\"../types/weather\\\"\\nimport { getWeatherCondition } from \\\"../utils/weather-utils\\\"\\n\\ntype GeocodingResponse = {\\n results?: {\\n name: string\\n country: string\\n latitude: number\\n longitude: number\\n }[]\\n}\\n\\ntype ForecastResponse = {\\n current: {\\n temperature_2m: number\\n relative_humidity_2m: number\\n weather_code: number\\n wind_speed_10m: number\\n }\\n}\\n\\nconst GEOCODING_API_URL = \\\"https://geocoding-api.open-meteo.com/v1/search\\\"\\nconst FORECAST_API_URL = \\\"https://api.open-meteo.com/v1/forecast\\\"\\n\\nexport async function getWeatherByCity(city: string): Promise {\\n const geocodingUrl = `${GEOCODING_API_URL}?name=${encodeURIComponent(\\n city\\n )}&count=1&language=en&format=json`\\n\\n const geocodingResponse = await fetch(geocodingUrl)\\n const geocodingData: GeocodingResponse = await geocodingResponse.json()\\n\\n if (!geocodingResponse.ok || !geocodingData.results?.length) {\\n throw new Error(\\\"City not found\\\")\\n }\\n\\n const location = geocodingData.results[0]\\n\\n const forecastUrl =\\n `${FORECAST_API_URL}` +\\n `?latitude=${location.latitude}` +\\n `&longitude=${location.longitude}` +\\n `¤t=temperature_2m,relative_humidity_2m,weather_code,wind_speed_10m` +\\n `&timezone=auto`\\n\\n const forecastResponse = await fetch(forecastUrl)\\n const forecastData: ForecastResponse = await forecastResponse.json()\\n\\n if (!forecastResponse.ok) {\\n throw new Error(\\\"Failed to fetch weather\\\")\\n }\\n\\n const weatherCode = forecastData.current.weather_code\\n\\n return {\\n city: location.name,\\n country: location.country,\\n latitude: location.latitude,\\n longitude: location.longitude,\\n temperatureCelsius: forecastData.current.temperature_2m,\\n humidity: forecastData.current.relative_humidity_2m,\\n windSpeed: forecastData.current.wind_speed_10m,\\n weatherCode,\\n condition: getWeatherCondition(weatherCode),\\n }\\n}\\n\",\"language\":\"ts\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dfff2f9b-3617-4351-aeca-676509970c19","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6c7d4a07-4f8e-484d-af35-e86efcd4685a","type":"procode","props":{"code":"weather-service.ts\n├── Searches city location\n├── Gets latitude and longitude\n├── Requests current weather\n├── Converts API response\n└── Returns clean Weather object\n","language":"txt","filename":"","files":"[{\"id\":\"a4hhoeaxx\",\"name\":\"code\",\"code\":\"weather-service.ts\\n├── Searches city location\\n├── Gets latitude and longitude\\n├── Requests current weather\\n├── Converts API response\\n└── Returns clean Weather object\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d30f78df-4561-496a-b222-6192e16c253f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The service file keeps API logic away from the UI components.","styles":{}}],"children":[]},{"id":"771764de-4add-4d86-8eeb-6d38b080af3f","type":"divider","props":{},"children":[]},{"id":"10bda612-db99-408c-8806-d8f7fc4b8781","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 8: Navbar Component","styles":{}}],"children":[]},{"id":"18590f64-553e-4b9b-be97-50a02ddfbf2b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/layout/navbar.tsx","styles":{"code":true}}],"children":[]},{"id":"a122a1e7-5315-4782-93fe-f818c4535818","type":"procode","props":{"code":"import { siteConfig } from \"../../config/site\"\n\nexport function Navbar() {\n return (\n

\n {siteConfig.name}\n

\n\n

\n React Weather App\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"h8k60glvu\",\"name\":\"code\",\"code\":\"import { siteConfig } from \\\"../../config/site\\\"\\n\\nexport function Navbar() {\\n return (\\n

\\n

\\n {siteConfig.name}\\n

\\n\\n

\\n React Weather App\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"01ddba12-25ec-4e20-bc1e-464b1f095101","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b3741aae-4b7b-48c8-bdc0-ca7bb94e06cc","type":"procode","props":{"code":"Navbar\n├── Shows app name\n├── Uses siteConfig\n├── Shows short app label\n└── Appears on top of the page\n","language":"txt","filename":"","files":"[{\"id\":\"43yghqwfs\",\"name\":\"code\",\"code\":\"Navbar\\n├── Shows app name\\n├── Uses siteConfig\\n├── Shows short app label\\n└── Appears on top of the page\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fbf33e33-c166-450b-a612-b3131503294c","type":"divider","props":{},"children":[]},{"id":"9a34799b-6884-406d-927a-40f0fbc385c9","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 9: Footer Component","styles":{}}],"children":[]},{"id":"01c3dc4c-c64c-49b4-b6b8-b325ef76b863","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/layout/footer.tsx","styles":{"code":true}}],"children":[]},{"id":"f2644474-3e1f-4f25-a111-9300a717e043","type":"procode","props":{"code":"import { siteConfig } from \"../../config/site\"\n\nexport function Footer() {\n return (\n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"wobp0g8hi\",\"name\":\"code\",\"code\":\"import { siteConfig } from \\\"../../config/site\\\"\\n\\nexport function Footer() {\\n return (\\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e96d4786-b33c-48cd-8fc5-fb24f5fc4980","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"c3449196-bf73-4882-a18c-ea0b8676eb5a","type":"procode","props":{"code":"Footer\n├── Shows copyright\n├── Shows short tech note\n└── Closes the page layout\n","language":"txt","filename":"","files":"[{\"id\":\"s0ke1wz76\",\"name\":\"code\",\"code\":\"Footer\\n├── Shows copyright\\n├── Shows short tech note\\n└── Closes the page layout\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7139685f-9614-4870-b766-9cdb26fa6cdf","type":"divider","props":{},"children":[]},{"id":"e0562f9c-7b70-4ef2-8de4-2e1f503d890f","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 10: Weather Form Component","styles":{}}],"children":[]},{"id":"499d8a23-b931-484b-bd9d-af785cc74036","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/weather/weather-form.tsx","styles":{"code":true}}],"children":[]},{"id":"8e6e2680-c55f-4410-92ba-099319e9b806","type":"procode","props":{"code":"type WeatherFormProps = {\n city: string\n loading: boolean\n onCityChange: (value: string) => void\n onSubmit: (event: React.FormEvent) => void\n}\n\nexport function WeatherForm({\n city,\n loading,\n onCityChange,\n onSubmit,\n}: WeatherFormProps) {\n return (\n

\n onCityChange(event.target.value)}\n placeholder=\"Search city...\"\n aria-label=\"City name\"\n />\n\n \n {loading ? \"Searching...\" : \"Search\"}\n \n \n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"7pekj8a9m\",\"name\":\"code\",\"code\":\"type WeatherFormProps = {\\n city: string\\n loading: boolean\\n onCityChange: (value: string) => void\\n onSubmit: (event: React.FormEvent) => void\\n}\\n\\nexport function WeatherForm({\\n city,\\n loading,\\n onCityChange,\\n onSubmit,\\n}: WeatherFormProps) {\\n return (\\n

\\n onCityChange(event.target.value)}\\n placeholder=\\\"Search city...\\\"\\n aria-label=\\\"City name\\\"\\n />\\n\\n \\n {loading ? \\\"Searching...\\\" : \\\"Search\\\"}\\n \\n \\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"2333de4c-695c-452a-80ec-e9007a3cf65a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"821df490-946e-4b75-8fb3-45851a21cd9a","type":"procode","props":{"code":"WeatherForm\n├── Receives city value\n├── Updates city input\n├── Submits search\n├── Disables button while loading\n└── Keeps form JSX outside App.tsx\n","language":"txt","filename":"","files":"[{\"id\":\"zmqvc9vop\",\"name\":\"code\",\"code\":\"WeatherForm\\n├── Receives city value\\n├── Updates city input\\n├── Submits search\\n├── Disables button while loading\\n└── Keeps form JSX outside App.tsx\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"fa5c51a0-cd53-41ed-ad34-db0ab90a003b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This component is responsible only for the search form UI.","styles":{}}],"children":[]},{"id":"168b70c9-8b39-4425-89d1-3114c8794ff8","type":"divider","props":{},"children":[]},{"id":"fc4ee032-e712-4c2b-a22a-304c0cee73c7","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 11: Unit Toggle Component","styles":{}}],"children":[]},{"id":"956ad883-40c5-4b91-bd53-f285dff7cc89","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/weather/unit-toggle.tsx","styles":{"code":true}}],"children":[]},{"id":"1235f6f2-b738-479d-a9fc-cd159b34adc4","type":"procode","props":{"code":"import type { WeatherUnit } from \"../../types/weather\"\n\ntype UnitToggleProps = {\n unit: WeatherUnit\n onUnitChange: (unit: WeatherUnit) => void\n}\n\nexport function UnitToggle({\n unit,\n onUnitChange,\n}: UnitToggleProps) {\n return (\n

\n onUnitChange(\"celsius\")}\n >\n °C\n \n\n onUnitChange(\"fahrenheit\")}\n >\n °F\n \n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"5gqkwi3l6\",\"name\":\"code\",\"code\":\"import type { WeatherUnit } from \\\"../../types/weather\\\"\\n\\ntype UnitToggleProps = {\\n unit: WeatherUnit\\n onUnitChange: (unit: WeatherUnit) => void\\n}\\n\\nexport function UnitToggle({\\n unit,\\n onUnitChange,\\n}: UnitToggleProps) {\\n return (\\n

\\n onUnitChange(\\\"celsius\\\")}\\n >\\n °C\\n \\n\\n onUnitChange(\\\"fahrenheit\\\")}\\n >\\n °F\\n \\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0ce7c1ca-c96e-4d45-9fe8-2d1b60f3b975","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"18eca88f-7be4-40b1-b3ec-1df324a09b8e","type":"procode","props":{"code":"UnitToggle\n├── Receives current unit\n├── Changes unit to Celsius\n├── Changes unit to Fahrenheit\n└── Controls temperature display\n","language":"txt","filename":"","files":"[{\"id\":\"ptdz825yg\",\"name\":\"code\",\"code\":\"UnitToggle\\n├── Receives current unit\\n├── Changes unit to Celsius\\n├── Changes unit to Fahrenheit\\n└── Controls temperature display\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"680619b5-0f78-4bce-ab42-5ef781df89c4","type":"divider","props":{},"children":[]},{"id":"ffe97f14-de2d-457c-8585-fcf795fb0c03","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 12: Weather Card Component","styles":{}}],"children":[]},{"id":"f24aeeaa-74f6-44aa-84cd-c481fbc73fd1","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/weather/weather-card.tsx","styles":{"code":true}}],"children":[]},{"id":"77a19ddf-834e-4c45-a75b-253302d72207","type":"procode","props":{"code":"import type { Weather, WeatherUnit } from \"../../types/weather\"\nimport {\n convertTemperature,\n getTemperatureSymbol,\n} from \"../../utils/weather-utils\"\n\ntype WeatherCardProps = {\n weather: Weather\n unit: WeatherUnit\n}\n\nexport function WeatherCard({\n weather,\n unit,\n}: WeatherCardProps) {\n const temperature = convertTemperature(\n weather.temperatureCelsius,\n unit\n )\n\n const symbol = getTemperatureSymbol(unit)\n\n return (\n

\n {weather.city}, {weather.country}\n

\n\n

\n {weather.condition}\n

\n\n

\n {temperature}\n {symbol}\n

\n\n

\n Humidity\n {weather.humidity}%\n

\n\n

\n Wind Speed\n {weather.windSpeed} km/h\n

\n\n

\n Latitude\n {weather.latitude.toFixed(2)}\n

\n\n

\n Longitude\n {weather.longitude.toFixed(2)}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"5jfqhnr2h\",\"name\":\"code\",\"code\":\"import type { Weather, WeatherUnit } from \\\"../../types/weather\\\"\\nimport {\\n convertTemperature,\\n getTemperatureSymbol,\\n} from \\\"../../utils/weather-utils\\\"\\n\\ntype WeatherCardProps = {\\n weather: Weather\\n unit: WeatherUnit\\n}\\n\\nexport function WeatherCard({\\n weather,\\n unit,\\n}: WeatherCardProps) {\\n const temperature = convertTemperature(\\n weather.temperatureCelsius,\\n unit\\n )\\n\\n const symbol = getTemperatureSymbol(unit)\\n\\n return (\\n

\\n

\\n {weather.city}, {weather.country}\\n

\\n\\n

\\n {weather.condition}\\n

\\n

\\n\\n

\\n {temperature}\\n {symbol}\\n

\\n

\\n\\n

\\n

\\n Humidity\\n {weather.humidity}%\\n

\\n\\n

\\n Wind Speed\\n {weather.windSpeed} km/h\\n

\\n\\n

\\n Latitude\\n {weather.latitude.toFixed(2)}\\n

\\n\\n

\\n Longitude\\n {weather.longitude.toFixed(2)}\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"9f04247e-ac66-406f-abae-ef12140cad8f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"b71de8eb-a4db-4745-91fc-274ed065d7b4","type":"procode","props":{"code":"WeatherCard\n├── Receives weather data\n├── Receives temperature unit\n├── Shows city and country\n├── Shows temperature\n├── Shows condition\n├── Shows humidity\n└── Shows wind speed\n","language":"txt","filename":"","files":"[{\"id\":\"3a9b1jbff\",\"name\":\"code\",\"code\":\"WeatherCard\\n├── Receives weather data\\n├── Receives temperature unit\\n├── Shows city and country\\n├── Shows temperature\\n├── Shows condition\\n├── Shows humidity\\n└── Shows wind speed\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"77559d0f-c3a0-4108-bb5b-bf3807533170","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This component displays the successful weather result.","styles":{}}],"children":[]},{"id":"0da61c04-6b37-4768-a7c1-0849b9d14a07","type":"divider","props":{},"children":[]},{"id":"0fcc65fd-beaf-47bb-abe6-399f5230d146","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 13: Loading State Component","styles":{}}],"children":[]},{"id":"da6337eb-cc29-4946-a2d8-2b2ffb7413b2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/weather/loading-state.tsx","styles":{"code":true}}],"children":[]},{"id":"74cef0fa-e450-42d0-ad1e-30cf73e8b527","type":"procode","props":{"code":"export function LoadingState() {\n return (\n

\n Loading weather data...\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"xa9ur5r25\",\"name\":\"code\",\"code\":\"export function LoadingState() {\\n return (\\n

\\n Loading weather data...\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"49020e3c-8ac2-4e81-a99f-cbb1b954f2ae","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"6bf4830a-a945-4f05-8657-2b22e5eac38d","type":"procode","props":{"code":"LoadingState\n├── Shows when request is running\n├── Gives feedback to user\n└── Prevents blank UI\n","language":"txt","filename":"","files":"[{\"id\":\"6znb4ic26\",\"name\":\"code\",\"code\":\"LoadingState\\n├── Shows when request is running\\n├── Gives feedback to user\\n└── Prevents blank UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cde53a11-86a7-48eb-b2b7-7c5d98363209","type":"divider","props":{},"children":[]},{"id":"36474293-281a-431f-a3c7-931287221673","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 14: Error Message Component","styles":{}}],"children":[]},{"id":"ac08aeaa-640d-482b-828f-a424a7eea727","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/weather/error-message.tsx","styles":{"code":true}}],"children":[]},{"id":"f1d87bd3-0eaf-4f7d-92fb-f89a0a3b5da3","type":"procode","props":{"code":"type ErrorMessageProps = {\n message: string\n}\n\nexport function ErrorMessage({ message }: ErrorMessageProps) {\n return (\n

\n {message}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"560d9rgp6\",\"name\":\"code\",\"code\":\"type ErrorMessageProps = {\\n message: string\\n}\\n\\nexport function ErrorMessage({ message }: ErrorMessageProps) {\\n return (\\n

\\n {message}\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"59668b62-609e-4c6a-bc4d-6b875eed2b69","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"05e2125d-5367-4eb3-86c8-6f2600f54c06","type":"procode","props":{"code":"ErrorMessage\n├── Receives error message\n├── Shows failed request message\n└── Uses role alert for accessibility\n","language":"txt","filename":"","files":"[{\"id\":\"pam6f90is\",\"name\":\"code\",\"code\":\"ErrorMessage\\n├── Receives error message\\n├── Shows failed request message\\n└── Uses role alert for accessibility\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"236ae486-cc73-4d12-b352-aa6dcbceb787","type":"divider","props":{},"children":[]},{"id":"d93f9e3e-47f6-433b-a2d5-32258bf17eb5","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 15: Empty State Component","styles":{}}],"children":[]},{"id":"3a3f1a1b-bf53-41da-9ed4-91dd907392a0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/weather/empty-state.tsx","styles":{"code":true}}],"children":[]},{"id":"f2093aba-c499-4d3d-94e0-392031a4f049","type":"procode","props":{"code":"export function EmptyState() {\n return (\n

\n Search a city to see the current weather.\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"yuma20une\",\"name\":\"code\",\"code\":\"export function EmptyState() {\\n return (\\n

\\n Search a city to see the current weather.\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"5fe259fc-d2e2-45a4-a3fa-008a0a2edca2","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"1ac75b7d-f82e-4b3d-8729-a0d09d697d17","type":"procode","props":{"code":"EmptyState\n├── Shows before first search\n├── Tells user what to do\n└── Makes UI clearer\n","language":"txt","filename":"","files":"[{\"id\":\"oeonj44zt\",\"name\":\"code\",\"code\":\"EmptyState\\n├── Shows before first search\\n├── Tells user what to do\\n└── Makes UI clearer\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"19b30705-19ab-4034-a765-04cd4aa5bdc8","type":"divider","props":{},"children":[]},{"id":"cea6f84a-edab-40c5-8433-bc1294ae5084","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 16: Recent Searches Component","styles":{}}],"children":[]},{"id":"6cb8f487-58b8-43f9-8ef0-b737b553d337","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/components/weather/recent-searches.tsx","styles":{"code":true}}],"children":[]},{"id":"9185fa88-0d04-4967-81a8-cc9a959a5ab0","type":"procode","props":{"code":"type RecentSearchesProps = {\n searches: string[]\n onSelect: (city: string) => void\n}\n\nexport function RecentSearches({\n searches,\n onSelect,\n}: RecentSearchesProps) {\n if (searches.length === 0) {\n return null\n }\n\n return (\n

\n Recent searches\n

\n\n

\n {searches.map((city) => (\n onSelect(city)}\n >\n {city}\n \n ))}\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"mmvcpvufx\",\"name\":\"code\",\"code\":\"type RecentSearchesProps = {\\n searches: string[]\\n onSelect: (city: string) => void\\n}\\n\\nexport function RecentSearches({\\n searches,\\n onSelect,\\n}: RecentSearchesProps) {\\n if (searches.length === 0) {\\n return null\\n }\\n\\n return (\\n

\\n

\\n Recent searches\\n

\\n\\n

\\n {searches.map((city) => (\\n onSelect(city)}\\n >\\n {city}\\n \\n ))}\\n

\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d7c7f86f-7c2a-424b-a7ed-e4c75c37ec50","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"55a4ff2b-c577-468d-b0b6-64b0b74c89c2","type":"procode","props":{"code":"RecentSearches\n├── Receives searched cities\n├── Shows recent city buttons\n├── Lets user search again quickly\n└── Hides when there are no searches\n","language":"txt","filename":"","files":"[{\"id\":\"4vm1pn7o7\",\"name\":\"code\",\"code\":\"RecentSearches\\n├── Receives searched cities\\n├── Shows recent city buttons\\n├── Lets user search again quickly\\n└── Hides when there are no searches\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d5546701-8435-4d7d-b24d-cdd24c6de174","type":"divider","props":{},"children":[]},{"id":"3677bc3a-2088-4d6e-91e0-5b30b7c27823","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 17: App Component","styles":{}}],"children":[]},{"id":"54ee7ddc-8a23-4ab8-aca0-56be535be339","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"src/App.tsx","styles":{"code":true}}],"children":[]},{"id":"e174a370-2db2-4dfe-a829-157296a8a2de","type":"procode","props":{"code":"import { useState } from \"react\"\nimport { Footer } from \"./components/layout/footer\"\nimport { Navbar } from \"./components/layout/navbar\"\nimport { EmptyState } from \"./components/weather/empty-state\"\nimport { ErrorMessage } from \"./components/weather/error-message\"\nimport { LoadingState } from \"./components/weather/loading-state\"\nimport { RecentSearches } from \"./components/weather/recent-searches\"\nimport { UnitToggle } from \"./components/weather/unit-toggle\"\nimport { WeatherCard } from \"./components/weather/weather-card\"\nimport { WeatherForm } from \"./components/weather/weather-form\"\nimport { siteConfig } from \"./config/site\"\nimport { getWeatherByCity } from \"./services/weather-service\"\nimport type { Weather, WeatherUnit } from \"./types/weather\"\n\nexport default function App() {\n const [city, setCity] = useState(\"\")\n const [weather, setWeather] = useState(null)\n const [unit, setUnit] = useState(\"celsius\")\n const [recentSearches, setRecentSearches] = useState([])\n const [loading, setLoading] = useState(false)\n const [error, setError] = useState(\"\")\n\n async function searchWeather(cityName: string) {\n const trimmedCity = cityName.trim()\n\n if (!trimmedCity) {\n setError(\"Please enter a city name\")\n setWeather(null)\n return\n }\n\n try {\n setLoading(true)\n setError(\"\")\n setWeather(null)\n\n const data = await getWeatherByCity(trimmedCity)\n\n setWeather(data)\n setCity(data.city)\n\n setRecentSearches((currentSearches) => {\n return [\n data.city,\n ...currentSearches.filter((item) => item !== data.city),\n ].slice(0, 5)\n })\n } catch (error) {\n if (error instanceof Error) {\n setError(error.message)\n } else {\n setError(\"Something went wrong\")\n }\n } finally {\n setLoading(false)\n }\n }\n\n function handleSubmit(event: React.FormEvent) {\n event.preventDefault()\n searchWeather(city)\n }\n\n function handleRecentSearch(cityName: string) {\n searchWeather(cityName)\n }\n\n return (\n

\n \n\n

\n \n React API practice project\n \n\n

\n Search weather by city.\n

\n\n

\n {siteConfig.description} Practice React state, form handling,\n API fetching, loading state, error state, and reusable components.\n

\n\n

\n \n\n \n\n \n\n {loading && }\n\n {!loading && error && (\n \n )}\n\n {!loading && !error && !weather && (\n \n )}\n\n {!loading && !error && weather && (\n \n )}\n

\n\n

\n )\n}\n","language":"tsx","filename":"","files":"[{\"id\":\"yq2ewuol4\",\"name\":\"code\",\"code\":\"import { useState } from \\\"react\\\"\\nimport { Footer } from \\\"./components/layout/footer\\\"\\nimport { Navbar } from \\\"./components/layout/navbar\\\"\\nimport { EmptyState } from \\\"./components/weather/empty-state\\\"\\nimport { ErrorMessage } from \\\"./components/weather/error-message\\\"\\nimport { LoadingState } from \\\"./components/weather/loading-state\\\"\\nimport { RecentSearches } from \\\"./components/weather/recent-searches\\\"\\nimport { UnitToggle } from \\\"./components/weather/unit-toggle\\\"\\nimport { WeatherCard } from \\\"./components/weather/weather-card\\\"\\nimport { WeatherForm } from \\\"./components/weather/weather-form\\\"\\nimport { siteConfig } from \\\"./config/site\\\"\\nimport { getWeatherByCity } from \\\"./services/weather-service\\\"\\nimport type { Weather, WeatherUnit } from \\\"./types/weather\\\"\\n\\nexport default function App() {\\n const [city, setCity] = useState(\\\"\\\")\\n const [weather, setWeather] = useState(null)\\n const [unit, setUnit] = useState(\\\"celsius\\\")\\n const [recentSearches, setRecentSearches] = useState([])\\n const [loading, setLoading] = useState(false)\\n const [error, setError] = useState(\\\"\\\")\\n\\n async function searchWeather(cityName: string) {\\n const trimmedCity = cityName.trim()\\n\\n if (!trimmedCity) {\\n setError(\\\"Please enter a city name\\\")\\n setWeather(null)\\n return\\n }\\n\\n try {\\n setLoading(true)\\n setError(\\\"\\\")\\n setWeather(null)\\n\\n const data = await getWeatherByCity(trimmedCity)\\n\\n setWeather(data)\\n setCity(data.city)\\n\\n setRecentSearches((currentSearches) => {\\n return [\\n data.city,\\n ...currentSearches.filter((item) => item !== data.city),\\n ].slice(0, 5)\\n })\\n } catch (error) {\\n if (error instanceof Error) {\\n setError(error.message)\\n } else {\\n setError(\\\"Something went wrong\\\")\\n }\\n } finally {\\n setLoading(false)\\n }\\n }\\n\\n function handleSubmit(event: React.FormEvent) {\\n event.preventDefault()\\n searchWeather(city)\\n }\\n\\n function handleRecentSearch(cityName: string) {\\n searchWeather(cityName)\\n }\\n\\n return (\\n

\\n \\n\\n

\\n

\\n \\n React API practice project\\n \\n\\n

\\n Search weather by city.\\n

\\n\\n

\\n {siteConfig.description} Practice React state, form handling,\\n API fetching, loading state, error state, and reusable components.\\n

\\n

\\n\\n

\\n \\n\\n \\n\\n \\n\\n {loading && }\\n\\n {!loading && error && (\\n \\n )}\\n\\n {!loading && !error && !weather && (\\n \\n )}\\n\\n {!loading && !error && weather && (\\n \\n )}\\n

\\n

\\n\\n

\\n )\\n}\\n\",\"language\":\"tsx\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dd49d16e-f13b-4857-b274-a219199b93d0","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple idea:","styles":{}}],"children":[]},{"id":"87371310-b257-49d8-a553-667cc477dd66","type":"procode","props":{"code":"App.tsx\n├── Stores city state\n├── Stores weather state\n├── Stores loading state\n├── Stores error state\n├── Handles form submit\n├── Calls weather service\n├── Updates recent searches\n└── Renders weather UI\n","language":"txt","filename":"","files":"[{\"id\":\"vrtuh86co\",\"name\":\"code\",\"code\":\"App.tsx\\n├── Stores city state\\n├── Stores weather state\\n├── Stores loading state\\n├── Stores error state\\n├── Handles form submit\\n├── Calls weather service\\n├── Updates recent searches\\n└── Renders weather UI\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e8f2771a-1aef-4c46-af7f-aac2af68d50d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"App.tsx","styles":{"code":true}},{"type":"text","text":" controls the main logic, while smaller components handle the UI.","styles":{}}],"children":[]},{"id":"77261c99-1a95-4876-83ae-48c03f71cd74","type":"divider","props":{},"children":[]},{"id":"3dc60089-90a8-4adb-9bfa-fb732e97866e","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 18: Run and Test","styles":{}}],"children":[]},{"id":"dcf70729-b7b0-40bb-8be0-258f99f5f3b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Run the project:","styles":{}}],"children":[]},{"id":"2b659308-08a7-4148-af4b-dc4ebda63cb4","type":"procode","props":{"code":"pnpm dev\n","language":"bash","filename":"","files":"[{\"id\":\"zpaxr49cf\",\"name\":\"code\",\"code\":\"pnpm dev\\n\",\"language\":\"bash\"}]","width":"100%","height":"auto"},"children":[]},{"id":"939123c4-6db2-493f-9415-c6af884696b7","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Open:","styles":{}}],"children":[]},{"id":"69fe27c0-c0a4-4b3b-93a4-784bb18f14b3","type":"procode","props":{"code":"http://localhost:5173\n","language":"txt","filename":"","files":"[{\"id\":\"jgk8jieqx\",\"name\":\"code\",\"code\":\"http://localhost:5173\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"a32f2dc9-1bb9-46d9-b802-3db69c12829b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Test these actions:","styles":{}}],"children":[]},{"id":"1ad16af4-0845-47e8-a8e0-5675b0b09ed5","type":"procode","props":{"code":"Testing Checklist\n├── App opens correctly\n├── Search input works\n├── Empty input shows error\n├── Valid city shows weather card\n├── Invalid city shows error message\n├── Loading state appears while fetching\n├── Celsius toggle works\n├── Fahrenheit toggle works\n├── Recent searches appear\n├── Recent search button works\n└── Layout works on mobile screen\n","language":"txt","filename":"","files":"[{\"id\":\"7ecpm7f7r\",\"name\":\"code\",\"code\":\"Testing Checklist\\n├── App opens correctly\\n├── Search input works\\n├── Empty input shows error\\n├── Valid city shows weather card\\n├── Invalid city shows error message\\n├── Loading state appears while fetching\\n├── Celsius toggle works\\n├── Fahrenheit toggle works\\n├── Recent searches appear\\n├── Recent search button works\\n└── Layout works on mobile screen\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c070a837-411b-42ef-8e1a-b4177b480b6b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Example cities to test:","styles":{}}],"children":[]},{"id":"98a42d85-0546-4869-a18c-533847eee34e","type":"procode","props":{"code":"Pontianak\nJakarta\nYogyakarta\nSingapore\nTokyo\nLondon\n","language":"txt","filename":"","files":"[{\"id\":\"ljv53bre8\",\"name\":\"code\",\"code\":\"Pontianak\\nJakarta\\nYogyakarta\\nSingapore\\nTokyo\\nLondon\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb71acc5-c343-4310-9a82-080cc82073de","type":"divider","props":{},"children":[]},{"id":"edd20cc6-c4c9-4d4d-9d4c-c82c4ae4a5dc","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Server or Client Component?","styles":{}}],"children":[]},{"id":"35a10db3-4370-40d9-b693-61c5d9ae891e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is a normal React Vite project, so components run in the browser.","styles":{}}],"children":[]},{"id":"4068cdf7-0073-4e0d-a3c7-5b38afa701b1","type":"procode","props":{"code":"This Weather App\n├── Uses useState\n├── Uses form onSubmit\n├── Uses button onClick\n├── Uses fetch from browser\n├── Uses user interaction\n└── Runs as client-side React\n","language":"txt","filename":"","files":"[{\"id\":\"j3249iwfg\",\"name\":\"code\",\"code\":\"This Weather App\\n├── Uses useState\\n├── Uses form onSubmit\\n├── Uses button onClick\\n├── Uses fetch from browser\\n├── Uses user interaction\\n└── Runs as client-side React\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"f0445fb0-e739-4488-98c4-c9dddceaed58","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Simple rule:","styles":{}}],"children":[]},{"id":"c22cc6e2-c379-4965-83df-a45cf1c1c57e","type":"procode","props":{"code":"React Vite app = client-side app by default\n","language":"txt","filename":"","files":"[{\"id\":\"zq9sdpkyb\",\"name\":\"code\",\"code\":\"React Vite app = client-side app by default\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c013f62b-c1e5-4bae-857b-15d6a305d704","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is different from Next.js App Router where you must think about Server Components and Client Components.","styles":{}}],"children":[]},{"id":"294aec69-3be9-4da9-bdbb-a8e2b63a4d6a","type":"divider","props":{},"children":[]},{"id":"01ae41d3-3544-4762-a6bc-872becf6de96","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"What This Project Teaches","styles":{}}],"children":[]},{"id":"01d3f30b-febc-4cca-91a3-fc62716532a4","type":"procode","props":{"code":"This project teaches:\n├── React project structure\n├── Component organization\n├── Form input handling\n├── API request with fetch\n├── Loading state\n├── Error state\n├── Empty state\n├── Conditional rendering\n├── TypeScript data types\n├── Service folder pattern\n├── Utility function pattern\n├── Recent search state\n└── Responsive UI structure\n","language":"txt","filename":"","files":"[{\"id\":\"mjd3z5zr0\",\"name\":\"code\",\"code\":\"This project teaches:\\n├── React project structure\\n├── Component organization\\n├── Form input handling\\n├── API request with fetch\\n├── Loading state\\n├── Error state\\n├── Empty state\\n├── Conditional rendering\\n├── TypeScript data types\\n├── Service folder pattern\\n├── Utility function pattern\\n├── Recent search state\\n└── Responsive UI structure\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d0e8e380-7f63-4756-a554-dfe89c5b18da","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"This is a good practice project after Todo App.","styles":{}}],"children":[]},{"id":"51213727-1305-41fd-9ecb-dad6db6b3862","type":"divider","props":{},"children":[]},{"id":"262f441e-4a14-4ea5-a73c-96a25cf174d8","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Possible Improvements","styles":{}}],"children":[]},{"id":"25153dfb-dab3-44ee-91f3-35097e6c234a","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"After finishing the simple version, you can improve it.","styles":{}}],"children":[]},{"id":"a07c8448-b9b6-4bc8-8667-773fcb1f97d2","type":"procode","props":{"code":"Possible Improvements\n├── Add current location weather\n├── Add 7-day forecast\n├── Add hourly forecast\n├── Add weather icons\n├── Add dark mode\n├── Add search autocomplete\n├── Save recent searches to localStorage\n├── Add skeleton loading\n├── Add better error messages\n├── Add unit preference persistence\n├── Add background based on weather condition\n└── Deploy to Vercel or Netlify\n","language":"txt","filename":"","files":"[{\"id\":\"x7fic4rg9\",\"name\":\"code\",\"code\":\"Possible Improvements\\n├── Add current location weather\\n├── Add 7-day forecast\\n├── Add hourly forecast\\n├── Add weather icons\\n├── Add dark mode\\n├── Add search autocomplete\\n├── Save recent searches to localStorage\\n├── Add skeleton loading\\n├── Add better error messages\\n├── Add unit preference persistence\\n├── Add background based on weather condition\\n└── Deploy to Vercel or Netlify\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"dc6ed1f9-b686-4b92-91d1-4eca8a141204","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Start simple first.","styles":{}}],"children":[]},{"id":"685b5e9f-13b0-4425-9b07-14cee0edbf2d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Add extra features step by step.","styles":{}}],"children":[]},{"id":"d1d23f42-18fe-4ff1-bd0a-2caaba9a2784","type":"divider","props":{},"children":[]},{"id":"ea229699-6c64-4bbb-8bd9-c5e68287997c","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Common Mistakes","styles":{}}],"children":[]},{"id":"32e56b62-7b63-41ca-a85b-b4ae0c01d260","type":"procode","props":{"code":"Mistake 1: Putting all logic in one huge file\nMistake 2: Not validating empty city input\nMistake 3: Not showing loading state\nMistake 4: Not showing error state\nMistake 5: Not checking API response\nMistake 6: Not using TypeScript type for weather data\nMistake 7: Mixing API logic inside UI component\nMistake 8: Showing old weather after failed search\nMistake 9: Forgetting responsive layout\nMistake 10: Building advanced forecast before simple search works\n","language":"txt","filename":"","files":"[{\"id\":\"7fn60zi49\",\"name\":\"code\",\"code\":\"Mistake 1: Putting all logic in one huge file\\nMistake 2: Not validating empty city input\\nMistake 3: Not showing loading state\\nMistake 4: Not showing error state\\nMistake 5: Not checking API response\\nMistake 6: Not using TypeScript type for weather data\\nMistake 7: Mixing API logic inside UI component\\nMistake 8: Showing old weather after failed search\\nMistake 9: Forgetting responsive layout\\nMistake 10: Building advanced forecast before simple search works\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"95bd8486-0a3f-4c6c-8f8b-94df1b31c107","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Better approach:","styles":{}}],"children":[]},{"id":"18e7804a-3437-400b-af66-a08b93321fbf","type":"procode","props":{"code":"Use weather-service.ts for API logic.\nUse weather.ts for data type.\nUse WeatherForm for search form.\nUse WeatherCard for result.\nUse LoadingState for loading.\nUse ErrorMessage for error.\nUse EmptyState before first search.\nKeep App.tsx clean.\n","language":"txt","filename":"","files":"[{\"id\":\"a15uhbglm\",\"name\":\"code\",\"code\":\"Use weather-service.ts for API logic.\\nUse weather.ts for data type.\\nUse WeatherForm for search form.\\nUse WeatherCard for result.\\nUse LoadingState for loading.\\nUse ErrorMessage for error.\\nUse EmptyState before first search.\\nKeep App.tsx clean.\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"b8b26df0-314b-4234-9602-b5dfb5e04d3b","type":"divider","props":{},"children":[]},{"id":"cb3ba7cc-1bd9-4135-be3b-9dec8a7c938a","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Professional Pattern","styles":{}}],"children":[]},{"id":"8da3ca53-a4e7-4043-8a50-f9411428d030","type":"procode","props":{"code":"Professional Weather App Pattern\n├── Use App.tsx for main state and flow\n├── Store API logic in services/weather-service.ts\n├── Store Weather type in types/weather.ts\n├── Store helper functions in utils/weather-utils.ts\n├── Use WeatherForm for search input\n├── Use WeatherCard for result UI\n├── Use UnitToggle for temperature unit\n├── Use RecentSearches for search history\n├── Use LoadingState while fetching\n├── Use ErrorMessage when request fails\n├── Use EmptyState before first search\n├── Validate city before fetch\n├── Use try/catch/finally\n├── Clear old error before new request\n├── Clear old weather before new request\n├── Keep components focused\n└── Add advanced features only after base app works\n","language":"txt","filename":"","files":"[{\"id\":\"8u2jsnh72\",\"name\":\"code\",\"code\":\"Professional Weather App Pattern\\n├── Use App.tsx for main state and flow\\n├── Store API logic in services/weather-service.ts\\n├── Store Weather type in types/weather.ts\\n├── Store helper functions in utils/weather-utils.ts\\n├── Use WeatherForm for search input\\n├── Use WeatherCard for result UI\\n├── Use UnitToggle for temperature unit\\n├── Use RecentSearches for search history\\n├── Use LoadingState while fetching\\n├── Use ErrorMessage when request fails\\n├── Use EmptyState before first search\\n├── Validate city before fetch\\n├── Use try/catch/finally\\n├── Clear old error before new request\\n├── Clear old weather before new request\\n├── Keep components focused\\n└── Add advanced features only after base app works\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bb1b247d-cda9-4a71-b75b-e3734b88c037","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Professional structure:","styles":{}}],"children":[]},{"id":"236f5b74-913c-4f1d-9374-e24cbd56f185","type":"procode","props":{"code":"src/\n├── App.tsx\n├── components/\n│ ├── layout/\n│ └── weather/\n├── services/\n│ └── weather-service.ts\n├── types/\n│ └── weather.ts\n├── utils/\n│ └── weather-utils.ts\n└── config/\n └── site.ts\n","language":"txt","filename":"","files":"[{\"id\":\"wi122r9e4\",\"name\":\"code\",\"code\":\"src/\\n├── App.tsx\\n├── components/\\n│ ├── layout/\\n│ └── weather/\\n├── services/\\n│ └── weather-service.ts\\n├── types/\\n│ └── weather.ts\\n├── utils/\\n│ └── weather-utils.ts\\n└── config/\\n └── site.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e220dcaf-1cb2-4ebe-8091-7979fb30411b","type":"divider","props":{},"children":[]},{"id":"a9225f59-fd13-41e8-a2a9-6ff728a2732d","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Simple Mental Model","styles":{}}],"children":[]},{"id":"beadf50b-962a-4362-a5cf-55c037755efb","type":"procode","props":{"code":"Weather App = search form + API request + weather card\n","language":"txt","filename":"","files":"[{\"id\":\"bx0btm2iv\",\"name\":\"code\",\"code\":\"Weather App = search form + API request + weather card\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3207cdcf-4689-4dd5-8172-ba64048a5e08","type":"procode","props":{"code":"Need city input? WeatherForm\nNeed fetch weather? weather-service.ts\nNeed weather shape? weather.ts\nNeed result card? WeatherCard\nNeed loading UI? LoadingState\nNeed error UI? ErrorMessage\nNeed first screen UI? EmptyState\nNeed temperature toggle? UnitToggle\nNeed helper logic? weather-utils.ts\n","language":"txt","filename":"","files":"[{\"id\":\"wm5i6ttt1\",\"name\":\"code\",\"code\":\"Need city input? WeatherForm\\nNeed fetch weather? weather-service.ts\\nNeed weather shape? weather.ts\\nNeed result card? WeatherCard\\nNeed loading UI? LoadingState\\nNeed error UI? ErrorMessage\\nNeed first screen UI? EmptyState\\nNeed temperature toggle? UnitToggle\\nNeed helper logic? weather-utils.ts\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"07fe4d4d-efee-439c-9332-4dfda390fea8","type":"divider","props":{},"children":[]},{"id":"f039674c-0c39-4680-8b76-ee7d8256cce3","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Summary","styles":{}}],"children":[]},{"id":"d852946d-6ca6-469e-b158-149b1863ffef","type":"procode","props":{"code":"Weather App\n├── Good practice project after Todo App\n├── Uses React.js\n├── Uses Vite\n├── Uses TypeScript\n├── Uses API fetching\n├── Uses city search\n├── Uses form handling\n├── Uses loading state\n├── Uses error state\n├── Uses empty state\n├── Uses reusable components\n├── Uses service folder for API logic\n├── Uses TypeScript types\n├── Uses utility functions\n├── Can be improved with forecast later\n└── Helps practice real-world frontend API integration\n","language":"txt","filename":"","files":"[{\"id\":\"ih7aphkpf\",\"name\":\"code\",\"code\":\"Weather App\\n├── Good practice project after Todo App\\n├── Uses React.js\\n├── Uses Vite\\n├── Uses TypeScript\\n├── Uses API fetching\\n├── Uses city search\\n├── Uses form handling\\n├── Uses loading state\\n├── Uses error state\\n├── Uses empty state\\n├── Uses reusable components\\n├── Uses service folder for API logic\\n├── Uses TypeScript types\\n├── Uses utility functions\\n├── Can be improved with forecast later\\n└── Helps practice real-world frontend API integration\\n\",\"language\":\"txt\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ad1f2ba1-2bc1-4259-a5f6-8eceb07403cb","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Weather App is important as a practice project because it teaches how to connect React UI with real API data, manage request states, split components properly, and build a clean user flow from input to result.","styles":{}}],"children":[]},{"id":"2f19857e-38b4-429f-abea-08f8fea0a0b9","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]