Vibe Coding Projekt: Építsd meg az időjárás dashboardodat 45 perc alatt

Ma együtt megépítjük az első saját webappodat — programozási tudás nélkül, 45 perc alatt. Nem elméletet tanulsz, hanem csinálod. Mire befejezed ezt a cikket, lesz egy éles, böngészőből elérhető időjárás dashboardod, amit bárki megnézhet.

Ez nem lesz egy csúnya táblázat vagy egy "Hello World" szöveg. Lesz egy vizuálisan szép, valódi adatokat mutató webapp, amit te csináltál — kód nélkül, pusztán jó promptokkal.

Készen állsz? Nyisd meg a böngészőt, és csináld velem együtt lépésről lépésre.

Mit fogunk építeni?

Az időjárás dashboard azért a tökéletes első projekt, mert:

• Vizuálisan azonnal látványos — már az első verzió is szép lesz
• Van benne valódi adat — nem csak statikus tartalom, hanem élő API hívás
• Ingyenesen deployolható — Netlify-on ingyen él
• Személyre szabható — könnyen bővíthető, ha megérted a logikát

Az app, amit elkészítünk, a következőket fogja tudni:

• Keresés városnév alapján
• Aktuális hőmérséklet, szélsebesség, páratartalom megjelenítése
• 5 napos előrejelzés kártyákban
• Dinamikus háttér (nap/éjszaka/esős stb.)
• Reszponzív design — mobilon is szép

Eszközválasztás: miért Bolt.new?

Az eszközök közül a Bolt.new-t választjuk erre a projektre. Röviden indoklom, miért nem mást:

• Bolt.new: A böngészőben fut, nem kell semmit telepíteni. Teljes stack-et generál egyszerre (frontend + backend logika). Az eredményt azonnal látod. Ingyenes tier-rel kezdhetsz.
• Lovable: Szintén jó, de kicsit inkább full-stack appokra optimalizált. Bonyolultabb projekteknél jobb, most többet csinálna mint kellene.
• v0 (Vercel): React komponensekre fókuszál. Ideális, ha már ismered a React-ot — kezdőknek ez most kevésbé intuitív.
• Cursor: Kód editor, saját gépre telepíteni kell. Haladóbb felhasználóknak jobb.

A Bolt.new-nál megírod a promptot, és kapsz egy működő appot. Nem kell tudnod, mi az npm vagy hogyan kell deployolni — az is benne van.

Gyors összehasonlítás: Ha hamarabb akar eredményt látni a képernyőn, Bolt.new. Ha szebb designt akar kevesebb munkával, Lovable. Ha React komponenseket akar, v0.

Elofeltételek (2 perc)

Mielőtt belevágnánk, két dolog kell:

1. Bolt.new fiók — Menj a bolt.new oldalra és regisztrálj Google vagy GitHub fiókoddal. Ingyenes.
2. OpenWeatherMap API kulcs — Menj az openweathermap.org oldalra, regisztrálj, és az “API keys” menüben másold ki az ingyenes kulcsodat. Ez 60 másodperc.

Megvannak? Akkor kezdjük.

1. lépés: Projekt létrehozása Bolt.new-ban

Nyisd meg a bolt.new oldalt. Egy nagy, üres szövegmező fogad — ez a prompt mező. Másold be pontosan ezt:

Build a beautiful weather dashboard web app with the following features:

- Search for any city by name
- Display current weather: temperature (Celsius), feels like, humidity, wind speed, weather condition with icon
- 5-day weather forecast shown as cards (day name, icon, min/max temperature)
- Dynamic background gradient that changes based on weather condition (sunny = warm orange/yellow, rainy = blue/grey, cloudy = soft grey, night = dark navy)
- Clean, modern UI with glassmorphism cards (frosted glass effect)
- Fully responsive design for mobile and desktop
- Use the OpenWeatherMap API (I will provide the API key as a constant at the top of the code)
- Show a friendly error message if city is not found
- Loading state while fetching data

Tech stack: HTML, CSS, vanilla JavaScript (no frameworks needed)
Style: Modern, dark theme with purple accent colors (#7c3aed)

Nyomj Entert, és várd meg amíg Bolt generál. Ez általában 30-60 másodpercet vesz igénybe. Ne kattingass, csak nézd ahogy az AI megírja az egész appot.

Mit látsz majd? A jobb oldalon él a preview — egy időjárás app jelenik meg. Valószínűleg Budapest vagy London adataival lesz feltöltve (placeholder adatok egyelőre, az API kulcsot mindjárt adjuk hozzá).

2. lépés: Design finomítása

Az első verzió jó, de valószínűleg van pár dolog, amit máshogy szeretnél. A Bolt.new-ban chatben tudsz módosításokat kérni — pont úgy, mintha egy fejlesztőnek mondanád.

Íme néhány hasznos módosítás-prompt, amiket kipróbálhatsz:

Ha a betűméret kicsi:

Make the current temperature display much larger — at least 72px font size.
It should be the visual centerpiece of the card.

Ha sötétebb hátteret szeretnél:

Make the overall background darker — deep navy (#0f0f1a) instead of the current color.
Keep the glassmorphism cards but make them slightly more transparent.

Ha a mobil layout nem tetszik:

Fix the mobile layout: on small screens, the forecast cards should stack vertically,
not overflow horizontally. The search bar should be full width on mobile.

Ha szeretnél időzónát is:

Add a "Local time in [city]" display below the city name,
calculated from the timezone offset returned by the API.

A lényeg: mondd el természetes nyelvvel, mi nem tetszik. Az AI érti. Nem kell technikai szakkifejezés, elég annyi, hogy "a keresősáv legyen fentebb" vagy "a kártyák legyenek kerekebb sarkúak".

3. lépés: Funkciók hozzáadása

Ha elégedett vagy az alapdesignnal, bővítsük az appot. Ezeket a promptokat érdemes egyszerre egyet beküldeni — ne kérj egyszerre 5 változtatást, mert az AI összezavarodik.

Óránkénti előrejelzés hozzáadása:

Add an hourly forecast section below the current weather card.
Show the next 8 hours with time, temperature, and weather icon.
Display them in a horizontal scrollable row.
Use the OpenWeatherMap forecast API endpoint for this data.

UV index és napfelkelte/napnyugta:

Add a secondary info row below the main weather stats with:
sunrise time, sunset time, and UV index (if available from the API).
Show them as small info chips with icons.
Format sunrise/sunset in HH:MM local time.

Keresési előzmények:

Add a search history feature: store the last 5 searched cities in localStorage.
Show them as clickable chips below the search bar.
Add a small X button to each chip to remove it from history.
Clicking a chip should immediately load that city's weather.

Celsius/Fahrenheit váltó:

Add a toggle button in the top-right corner to switch between Celsius and Fahrenheit.
When toggled, convert all temperature displays without making a new API call
(just convert the already-fetched data).
Remember the preference in localStorage.

Minden módosítás után teszteld a preview-ban: keresd meg Budapest és London időjárását, ellenőrizd hogy minden adat helyesen jelenik-e meg.

4. lépés: API integráció — valódi adatok

Eddig placeholder vagy demo adatok futnak. Most adjuk hozzá a valódi API kulcsodat az OpenWeatherMap-tól.

A Bolt chatbe küldd ezt a promptot:

Replace the placeholder API key with this real OpenWeatherMap API key:
[IDE_IRD_BE_A_TE_API_KULCSODAT]

Make sure:
1. The API key is stored as a constant at the top of the JavaScript file: const API_KEY = 'your-key-here';
2. Use the OpenWeatherMap Current Weather API endpoint: https://api.openweathermap.org/data/2.5/weather
3. Use the 5-day forecast endpoint: https://api.openweathermap.org/data/2.5/forecast
4. Handle API errors gracefully — show a user-friendly Hungarian error message if the city is not found: "Nem találtuk ezt a várost. Ellenőrizd a helyesírást!"
5. Show a loading spinner while the API call is in progress

Miután az AI beillesztette, teszteld azonnal: keresd meg “Budapest” és “New York” városokat. Ha valódi adatok jelennek meg (nem 20°C minden időben), akkor az API integráció sikerült.

Ha hibaüzenetet kapsz az API-tól, valószínűleg az API kulcs még nincs aktiválva — az OpenWeatherMap-nál az ingyenes kulcsok aktiválása akár 10-30 percet is vehet. Várj egy kicsit és próbáld újra.

5. lépés: Deploy — tedd élővé ingyen

Az appod készen van. Most tegyük élővé, hogy bárki elérhesse egy URL-en keresztül.

A legegyszerűbb út: Netlify Drop

1. A Bolt.new-ban kattints a "Download" vagy "Export" gombra (általában jobb felső sarok)
2. Ez letölt egy ZIP fájlt a projekted kódjaival
3. Csomagold ki a ZIP-et a gépeden
4. Menj a netlify.com oldalra és regisztrálj (ingyenes)
5. A dashboard-on van egy nagy doboz: "Drop your site folder here"
6. Húzd bele a kicsomagolt mappát
7. 30 másodpercen belül kapsz egy URL-t: random-name-12345.netlify.app

Ez az URL azonnal elérhető. Küldd el barátaidnak!

Profi út: GitHub + Netlify automatikus deploy

Ha azt akarod, hogy minden módosításod automatikusan deployolódjon:

1. A Bolt.new-ban kattints a "Connect to GitHub" gombra
2. Hozz létre egy új GitHub repo-t a projektnek
3. A Netlify-on válaszd az "Import from Git" opciót
4. Csatlakoztasd a GitHub repo-t
5. Ezentúl: ha módosítasz Bolt.new-ban és pushol, automatikusan frissül az éles oldal

Ez a setup teljesen ingyenes Netlify ingyenes tier-rel és GitHub ingyenes fiókkal.

Hibakeresés: mit csinálj ha elakadsz

A vibe coding nem mindig megy simán elsőre. Íme a leggyakoribb problémák és megoldásaik:

Az AI rossz irányba megy

Ha a Bolt valami egészen mást csinál, mint amit kértél, ne pánikolds. Írd be a chatbe:

Undo the last change. Revert to the previous version and let's try again.

A Bolt.new-ban van verziókövetés — vissza tudsz lépni korábbi állapotokba.

Valami eltört, de nem tudod mi

Ha az app nem tölt be vagy hibát mutat, másold be a hibaüzenetet a chatbe így:

The app is showing this error: [IDE_MASOLD_BE_A_HIBA_SZOVEGET]

Please fix this error. Don't change anything else, just fix this specific problem.

Fontos a “don't change anything else” rész — anélkül az AI néha “segítségből” átír dolgokat, amik eddig jól működtek.

Az API nem ad vissza adatot

The weather API is not returning data. Check:
1. Is the API key correctly placed in the code?
2. Is the API endpoint URL correct for OpenWeatherMap?
3. Are we handling the CORS issues properly?
4. Add console.log statements to show the API response so I can debug it.

A mobil layout tönkrement

The app looks broken on mobile screens (375px wide).
Please audit all CSS media queries and fix the mobile layout.
Focus on: the search bar, the main weather card, and the forecast cards.
Test at 375px and 414px widths.

Az AI körbe-körbe megy

Ha ugyanazt a hibát próbálja javítani 3-4-szer és nem sikerül, próbálj más megközelítést:

Instead of trying to fix the current implementation, let's rewrite just the [problematic section]
from scratch. Here's what it should do: [leírás]

Arany szabály a hibakereséshez: Mindig egy problémát oldj meg egyszerre. Ha egyszerre kérsz 3 javítást, az AI belezavarodik és ronthat valamit ami eddig jó volt.

Következő projekt ötletek

Ha az időjárás dashboard elkészült, itt van 4 projekt, amivel folytathatod — mindegyik egy fokkal bonyolultabb az előzőnél:

Habit Tracker (Szokáskövető)

Egy egyszerű app, ahol beállítasz napi szokásokat (edzés, olvasás, víz ivás) és nyomon követed, melyik napon teljesítetted. LocalStorage-ban tárol, nincs szükség backend-re. Vizuálisan szép "heatmap" naptárral.

Build a habit tracker web app with: daily habits list (add/remove habits),
checkboxes for each habit per day, a GitHub-style heatmap calendar showing completion history,
streak counter for each habit, all data stored in localStorage.

Személyes Pénzügyi Tracker

Bevételek és kiadások nyilvántartása kategóriák szerint. Chart.js-sel szép kördiagramok. LocalStorage-ban tárolja az adatokat.

Build a personal budget tracker: add income/expense transactions with category, amount, date, description.
Show monthly summary with a pie chart (by category) and a line chart (spending over time).
Filter by month. Export to CSV. Store in localStorage.

Pomodoro Timer + To-Do

Klasszikus produktivitás app: 25 perces munka + 5 perces szünet ciklus, hang értesítéssel, feladatlistával kombinálva.

Build a Pomodoro timer app combined with a to-do list.
Timer: 25min work / 5min break / 15min long break cycles, visual countdown,
sound notification when timer ends. Todo: add tasks, mark done, see how many pomodoros each task took.

Link Bio Oldal (Linktree alternatíva)

Saját “link in bio” oldal, amit beállíthatsz és hosztolhatsz. Semmi előfizetés, teljesen a tiéd.

Build a "link in bio" page: profile photo, name, short bio, list of links with icons and labels.
Beautiful gradient background. Animated entrance for the links.
Include a dark/light mode toggle. Make it look like a premium Linktree alternative.

Mindegyik projektnél ugyanazt a folyamatot követed: az alap prompt → design finomítás → funkciók hozzáadása → deploy. Most már tudod hogyan kell.

Összefoglaló: amit ma megtanultál

Ma elkészítettél egy valódi, éles webappot. Végigmentél a teljes folyamaton:

• Projekt inicializálás: Egy jól megírt prompt elegendő volt az alapok lerakásához
• Design finomítás: Természetes nyelvvel kértél módosításokat — nem kellett CSS-t ismerni
• Funkciók bővítése: Fókuszált, egy problémára koncentráló promptokkal egymás után adtál hozzá feature-öket
• API integráció: Valódi külső adatforrást csatlakoztattál az apphoz
• Deploy: Ingyenesen élővé tetted, bárki elérheti

Ez a vibe coding workflow alapja. Ugyanezt a logikát követed, akár egy egyszerű oldalt, akár egy komplex SaaS alkalmazást építesz.

A különbség kezdő és haladó között nem az, hogy ki ismeri jobban a kódot — hanem az, aki jobban tudja mit akar, és pontosabban tudja leírni. A leírás pontossága = a prompt minősége. A prompt minősége = az app minősége.

Ha szeretnél mélyebbre menni a vibe coding technikákba, olvasd el ezt a cikkünket is: Vibe Coding: A helyes megközelítés kezdőknek és haladóknak — ott a 4 fejlődési szintet és a hibakeresés lélektanát is megtalálod.

Ha automatizálni is szeretnéd a kész projektedet (pl. automatikus adatfrissítés, értesítések), érdemes megnézni: Első AI automatizálásod n8n-nel.

Illetve ha AI csapatot szeretnél maga köré építeni a fejlesztéshez, a AI ügynök csapat összeállítása cikk ad ötleteket.

A következő lépés a tiéd. Nyisd meg a bolt.new-t, és kezdj el építeni.