Henkilökohtainen kalenteri tapahtumien hallintaan. Opi päivämäärien käsittelyä, visuaalisia näkymiä ja drag & drop -toimintoja rakentamalla oma kalenterisovellus.
Keskitaso · 6-8 tuntia · Next.js, TypeScript, Tailwind CSS, date-fns, Supabase
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo kalenterisovellus. Näkymät: - Kuukausi (ruudukko) - Viikko (aikataulu) - Päivä (yksityiskohtainen) Tietomalli: events (id, title, description, start_date, end_date, color, user_id) Toiminnot: - Lisää tapahtuma (klikkaa päivää) - Muokkaa tapahtumaa (klikkaa tapahtumaa) - Poista tapahtuma - Vaihda näkymää - Navigoi ajassa Tech: - Next.js 14 - TypeScript - Tailwind CSS - date-fns (päivämäärät) - Supabase Aloita kuukausinäkymästä ja tapahtuman lisäyksestä.
Luo visuaalinen kuukausinäkymä.
Luo kalenterin kuukausinäkymä: ruudukko päiville, navigointi edellinen/seuraava kuukausi, tämän päivän korostus. Näytä tapahtumien määrä kullakin päivällä.
Lisää tapahtumien CRUD.
Luo tapahtumien hallinta: klikkaa päivää luodaksesi tapahtuman, modal nimi/aika/kuvaus/väri. Lista päivän tapahtumista. Muokkaus ja poisto.
Lisää muut näkymät.
Luo viikkonäkymä (aikataulu tunneittain) ja päivänäkymä (yksityiskohtainen päiväaikataulu). Vaihto näkymien välillä napin painalluksella.
Kuukausi-, viikko- ja päivänäkymä
Tapahtumien lisäys
Drag & drop siirto
Toistuvat tapahtumat
Muistutukset
Kun perusprojekti on valmis:
Drag & drop tapahtumien siirto
Toistuvat tapahtumat
Kalenteri-integraatio (Google Calendar)
Muistutukset sähköpostilla
Jaetut kalenterit
Klassinen tehtävälista-sovellus modernilla toteutuksella. Opi React state-hallintaa, CRUD-operaatioita ja tietokannan käyttöä rakentamalla sovellus jota käytät oikeasti.
Henkilökohtainen budjetin ja menojen seurantasovellus. Opi CRUD-operaatiot, kategoriat ja datavisualisoinnit rakentamalla sovellus omaan käyttöösi.
Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi. Opi Next.js:n perusteet ja deployn Verceliin - täydellinen ensimmäinen projekti.
Valitse työkalu ja käytä aloituspromptiä.