Web-kehittäjän polku

Opi rakentamaan täysiverisiä web-sovelluksia vibekoodauksella.

Keskitaso · 8-12 viikkoa · 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

6 moduulia

1. Next.js perusteet

1 viikko

Opi Next.js:n perusteet ja App Router.

Next.js dokumentaatio

Virallinen dokumentaatio

Portfolio-projekti

Rakenna portfolio Next.js:llä

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

2. TypeScript ja tyypit

1 viikko

Opi TypeScriptin perusteet ja hyödyt vibekoodauksessa.

TypeScript-sanasto

TypeScript-perusteet

Cursor ja TypeScript

TypeScript Cursorissa

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

3. Tailwind CSS ja UI

1 viikko

Rakenna kauniita käyttöliittymiä Tailwindilla.

Tailwind CSS

Tailwind-työkalusivu

UI-komponentit

shadcn/ui komponentit

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

4. Supabase ja tietokanta

2 viikkoa

Lisää tietokanta sovellukseesi.

Supabase

Supabase-työkalusivu

CRUD-promptit

Tietokantapromptit

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

5. Autentikaatio

1 viikko

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

Autentikaatio-promptit

Auth-toteutus

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

6. Lopputyö

2-4 viikkoa

Rakenna täysiverinen sovellus.

Blogi-sovellus

Täysiverinen blogi

Verkkokauppa

E-commerce projekti

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

Muut oppimispolut

Aloittelijan polku

Täydellinen aloitus vibekoodaukseen ilman aiempaa koodauskokemusta.

Edistynyt vibekoodaus

Vie vibekoodaustaitosi seuraavalle tasolle.

Aloita oppiminen

Valitse työkalu ja aloita ensimmäinen moduuli.

Aloita tästäTyökalut