Keskitaso8-12 viikkoa

Web-kehittäjän polku

Opi rakentamaan täysiverisiä web-sovelluksia vibekoodauksella.

Kohderyhmä: Vibekoodauksen perusteista kiinnostuneet, jotka haluavat syventää web-osaamistaan

Mitä opit

✓Osaat rakentaa Next.js-sovelluksia
✓Hallitset TypeScriptin
✓Osaat käyttää Supabasea
✓Osaat toteuttaa autentikaation
✓Olet rakentanut täysiverisen web-sovelluksen

Edellytykset

  • Vibekoodauksen perusteet
  • Yksi valmis projekti

Moduulit

1

Moduuli 1: Next.js perusteet

1 viikko

Opi Next.js:n perusteet ja App Router.

Resurssit:

Harjoitukset:

  • Luo Next.js projekti ja tutustu rakenteeseen
  • Rakenna 3-sivuinen sovellus (etusivu, about, yhteystiedot)
  • Toteuta navigaatio ja footer
2

Moduuli 2: TypeScript ja tyypit

1 viikko

Opi TypeScriptin perusteet ja hyödyt vibekoodauksessa.

Resurssit:

Harjoitukset:

  • Lisää TypeScript olemassa olevaan projektiin
  • Luo tyypit kaikille komponenteille
  • Käytä AI:ta tyyppien generointiin
3

Moduuli 3: Tailwind CSS ja UI

1 viikko

Rakenna kauniita käyttöliittymiä Tailwindilla.

Resurssit:

Harjoitukset:

  • Rakenna 5 erilaista UI-komponenttia
  • Tee responsiivinen layout
  • Toteuta tumma/vaalea teema
4

Moduuli 4: Supabase ja tietokanta

2 viikkoa

Lisää tietokanta sovellukseesi.

Resurssit:

Harjoitukset:

  • Perusta Supabase-projekti
  • Luo taulut ja tyypit
  • Toteuta CRUD-operaatiot
  • Lisää Row Level Security
5

Moduuli 5: Autentikaatio

1 viikko

Lisää käyttäjähallinta sovellukseen.

Resurssit:

Harjoitukset:

  • Toteuta kirjautuminen ja rekisteröityminen
  • Lisää OAuth (Google)
  • Suojaa reitit kirjautuneille
6

Moduuli 6: Lopputyö

2-4 viikkoa

Rakenna täysiverinen sovellus.

Resurssit:

Harjoitukset:

  • Valitse lopputyöprojekti
  • Suunnittele arkkitehtuuri
  • Toteuta vaiheittain
  • Julkaise ja dokumentoi

Muut oppimispolut

Aloittelija

Aloittelijan polku

Täydellinen aloitus vibekoodaukseen ilman aiempaa koodauskokemusta.

Edistynyt

Edistynyt vibekoodaus

Vie vibekoodaustaitosi seuraavalle tasolle.

Aloita oppiminen

Tutustu työkaluihin ja aloita ensimmäinen moduuli.

TyökalutPromptit