React-sovellus vibekoodauksella – askel askeleelta opas

Tässä oppaassa rakennamme yhdessä toimivan React-sovelluksen vibekoodauksella. Ei teoriaa – pelkkää käytäntöä. Jokainen askel sisältää tarkan promptin, jonka voit kopioida ja käyttää.

Rakennamme tehtävienhallintasovelluksen (task manager), jossa on:

• Tehtävien lisääminen, muokkaaminen ja poistaminen
• Kategoriat ja prioriteetit
• Suodatus ja haku
• Paikallinen tallennus (localStorage)
• Responsiivinen Tailwind-tyylitys

Jos vibekoodaus on sinulle uutta, tutustu ensin aloitusoppaaseen.

Vaihe 1: Projektin pystytys

Ensimmäinen prompti luo koko projektin rungon. Avaa Cursor tai Claude Code ja anna tämä ohje:

Luo uusi React-projekti Vitellä ja TypeScriptillä. Käytä seuraavia
teknologioita:
- React 19
- TypeScript
- Tailwind CSS v4
- Vite

Projektin nimi on "taskmaster". Luo perusrakenne:
- src/components/ (komponentit)
- src/hooks/ (custom hookit)
- src/types/ (TypeScript-tyypit)
- src/utils/ (apufunktiot)

Poista oletussisältö ja luo yksinkertainen App.tsx joka näyttää
otsikon "TaskMaster" ja tyhjän listan.

Tekoäly luo koko projektirakenteen, asentaa riippuvuudet ja konfiguroi Tailwindin. Tarkista, että kaikki toimii ajamalla npm run dev.

Vinkki: Jos käytät Cursoria, se tekee tämän automaattisesti terminaalissa. Claude Codessa saat samat komennot suoraan.

Vaihe 2: Tyyppimäärittelyt

Ennen komponenttien rakentamista määritellään datan rakenne. Tämä on tärkeä askel – hyvät tyypit ohjaavat tekoälyä tuottamaan parempaa koodia.

Luo src/types/task.ts jossa on seuraavat TypeScript-tyypit:

Task-tyyppi:
- id: string (UUID)
- title: string
- description: string (valinnainen)
- category: Category
- priority: Priority (low, medium, high)
- completed: boolean
- createdAt: Date
- updatedAt: Date

Category-tyyppi: "työ" | "henkilökohtainen" | "opiskelu" | "muu"

Priority-tyyppi: "low" | "medium" | "high"

FilterOptions-tyyppi:
- category: Category | "all"
- priority: Priority | "all"
- status: "all" | "active" | "completed"
- searchQuery: string

Huomaa miten tarkka prompti on. Mitä tarkemmin kuvaat tyypit, sitä vähemmän joudut korjaamaan myöhemmin. Tämä on hyvän promptauksen ydintä.

Vaihe 3: Custom hookit

Nyt tulee arkkitehtuurin ydin. Custom hookit erottavat logiikan komponenteista ja tekevät koodista uudelleenkäytettävää.

Luo kaksi custom hookia:

1. src/hooks/useTasks.ts
- Hallinnoi tehtävälistaa (CRUD-operaatiot)
- Tallentaa automaattisesti localStorageen
- Lataa tehtävät localStoragesta mount-vaiheessa
- Funktiot: addTask, updateTask, deleteTask, toggleComplete
- Käyttää useReducer-hookia state managementtiin

2. src/hooks/useFilters.ts
- Hallinnoi suodatusasetuksia
- Funktiot: setCategory, setPriority, setStatus, setSearchQuery, resetFilters
- Palauttaa myös filteredTasks-funktion, joka ottaa vastaan
  tehtävälistan ja palauttaa suodatetun version
- Käyttää useMemo-hookia suorituskyvyn optimointiin

Tässä vaiheessa tekoäly tekee useita arkkitehtuuripäätöksiä puolestasi: useReducer vs useState, miten localStorage-synkronointi hoidetaan, miten suodatus optimoidaan. Tarkista, että ratkaisut ovat järkeviä.

Tärkeä oppi: Vibekoodauksessa sinun ei tarvitse kirjoittaa koodia, mutta sinun pitää ymmärtää miksi tietyt ratkaisut ovat parempia kuin toiset. Jos tekoäly ehdottaa jotain, mitä et ymmärrä, kysy miksi.

Vaihe 4: Komponenttien rakentaminen

Nyt rakennetaan käyttöliittymä. Tämä on usein se vaihe, jossa vibekoodaus loistaa eniten – visuaaliset komponentit syntyvät nopeasti.

Rakenna seuraavat React-komponentit Tailwind CSS:llä. Tyyli:
moderni, selkeä, vaalea tausta, pyöristetyt kulmat, hienovaraiset
varjot. Käytä sinistä (#3B82F6) päävärinä.

1. TaskForm.tsx
- Lomake uuden tehtävän lisäämiseen
- Kentät: title (pakollinen), description, category (dropdown),
  priority (radio buttons)
- Validointi: title vaaditaan, näytä virheviesti jos tyhjä
- Submit-napin teksti: "Lisää tehtävä"
- Lomake tyhjenee submittauksen jälkeen

2. TaskCard.tsx
- Yksittäisen tehtävän kortti
- Näyttää: title, description, category badge, priority indicator,
  created date
- Checkbox tehtävän valmiiksi merkitsemiseen (yliviivaus kun valmis)
- Muokkaus-nappi ja poista-nappi
- Priority-värit: high=punainen, medium=keltainen, low=vihreä

3. TaskList.tsx
- Renderöi listan TaskCard-komponentteja
- Näyttää "Ei tehtäviä" -viestin jos lista on tyhjä
- Animoitu lista (framer-motion tai CSS transitions)

4. FilterBar.tsx
- Suodatuspalkki listan yläpuolella
- Hakukenttä (search input)
- Category-dropdown, priority-dropdown, status-toggle
- "Tyhjennä suodattimet" -nappi
- Näyttää aktiivisten suodattimien määrän

Tämä on iso prompti, ja tekoäly saattaa tuottaa paljon koodia kerralla. Se on OK. Käy läpi komponentti kerrallaan ja varmista, että jokainen toimii.

Vaihe 5: Kokonaisuuden yhdistäminen

Nyt yhdistetään kaikki App.tsx-tiedostossa:

Päivitä App.tsx yhdistämään kaikki komponentit:

- Käytä useTasks-hookia tehtävien hallintaan
- Käytä useFilters-hookia suodatukseen
- Layout: Header ylhäällä (otsikko + tehtävien kokonaismäärä),
  sen alla TaskForm vasemmalla ja FilterBar + TaskList oikealla
  (desktop: kaksi kolumnia, mobile: yksi kolumni)
- Välitä oikeat propsit jokaiselle komponentille
- Lisää myös statistiikkapalkki: "X tehtävää, Y valmiita, Z aktiivista"

Varmista että kaikki TypeScript-tyypit ovat kunnossa eikä
any-tyyppejä käytetä.

Kun tekoäly on yhdistänyt komponentit, aja sovellus selaimessa ja testaa:

• Lisää muutama tehtävä eri kategorioilla ja prioriteeteilla
• Merkitse tehtäviä valmiiksi
• Kokeile suodatusta ja hakua
• Lataa sivu uudelleen – tehtävien pitäisi säilyä (localStorage)

Vaihe 6: Viimeistely ja bugien korjaus

Tässä vaiheessa sovellus toimii, mutta siinä on todennäköisesti pieniä ongelmia. Tämä on normaalia – vibekoodattu koodi vaatii aina viimeistelyä.

Tyypillisiä korjattavia asioita:

Tarkista ja korjaa seuraavat asiat:

1. Accessibility: Lisää aria-labelit lomakekenttiin, varmista
   keyboard navigation, tarkista värikontrastit
2. Responsiivisuus: Varmista että sovellus toimii puhelimella
   (min 320px leveydellä)
3. Edge caset: Mitä tapahtuu jos title on todella pitkä?
   Entä jos localStorage on täynnä?
4. UX: Lisää confirmation dialog ennen tehtävän poistamista.
   Lisää toast-ilmoitus kun tehtävä lisätään tai poistetaan.
5. Performance: Varmista ettei turha renderöinti hidasta
   sovellusta kun tehtäviä on paljon (100+)

Vaihe 7: Bonus – API-integraatio

Jos haluat viedä sovelluksen pidemmälle, lisää backend. Tässä prompti, jolla lisäät mock API:n:

Lisää sovellukseen API-kerros:

1. Luo src/services/taskApi.ts joka simuloi API-kutsuja
   (setTimeout + Promise, 500ms viive)
2. Funktiot: fetchTasks, createTask, updateTask, deleteTask
3. Päivitä useTasks-hook käyttämään API-funktioita localStoragen
   sijaan
4. Lisää loading-tilat ja error-tilat
5. Näytä loading spinner kun data latautuu
6. Näytä error-viesti jos "API-kutsu" epäonnistuu (simuloi
   satunnaista virhettä 10% todennäköisyydellä)

Tämä valmistelee sovelluksen oikean backendin käyttöön myöhemmin.

Vinkkejä React-vibekoodaukseen

Tässä opittuja asioita, joita voit soveltaa mihin tahansa React-projektiin:

1. Määrittele tyypit ensin. TypeScript-tyypit ovat kuin suunnittelupiirustukset. Kun tekoäly tietää datan rakenteen, se tuottaa parempaa koodia.

2. Erota logiikka ja UI. Custom hookit pitävät koodin siistinä ja testattavana. Anna tekoälyn luoda hookit erikseen komponenteista.

3. Yksi prompti per kokonaisuus. Älä yritä rakentaa koko sovellusta yhdellä promptilla. Pilko työ loogisiin vaiheisiin: tyypit → hookit → komponentit → yhdistäminen.

4. Testaa jokainen vaihe. Älä rakenna viittä komponenttia putkeen testaamatta. Aja sovellus jokaisen vaiheen jälkeen.

5. Käytä Tailwindia. Tekoäly hallitsee Tailwind CSS:n erinomaisesti, ja se tuottaa parempia tuloksia kuin perinteinen CSS. Tämä säästää paljon aikaa.

6. Nimeä asiat selkeästi. Kun promptissasi käytät kuvaavia nimiä (TaskCard, useFilters, Priority), tekoäly ymmärtää kontekstin paremmin.

Lisää promptausvinkkejä löydät erillisestä oppaastamme.

Mitä seuraavaksi?

Olet nyt rakentanut toimivan React-sovelluksen vibekoodauksella. Tästä voit jatkaa moneen suuntaan:

• Lisää backend: Next.js API routes tai erillinen Express-palvelin
• Lisää autentikaatio: Supabase Auth tai NextAuth.js
• Julkaise: Deploy Verceliin tai Netlifyyn
• Skaalaa: Lisää ominaisuuksia kuten drag-and-drop, kalenterinäkymä tai tiimijako

Jokainen näistä laajennuksista onnistuu samalla vibekoodaus-menetelmällä: kuvaa mitä haluat, anna tekoälyn rakentaa, tarkista ja iteroi.

Kun React-perusteet ovat hallussa, tutustu myös edistyneempiin promptaustekniikoihin, jotka auttavat monimutkaisemmissa projekteissa.

Aloita rakentaminen – paras tapa oppia on tehdä.