Keskitaso6-8 tuntia🌐 Web-sovellukset

Kalenteri-sovellus

Henkilökohtainen kalenteri tapahtumien hallintaan.

Teknologiat:Next.jsTypeScriptTailwind CSSdate-fnsSupabase

Aloitusprompt

Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.

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ä.

Ominaisuudet

Tässä projektissa rakennetaan seuraavat ominaisuudet:

1Kuukausi-, viikko- ja päivänäkymä
2Tapahtumien lisäys
3Drag & drop siirto
4Toistuvat tapahtumat
5Muistutukset

Vaiheet

1

Kalenterinäkymä

Luo visuaalinen kuukausinäkymä.

Prompti:

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ä.
2

Tapahtumien hallinta

Lisää tapahtumien CRUD.

Prompti:

Luo tapahtumien hallinta: klikkaa päivää luodaksesi tapahtuman, modal nimi/aika/kuvaus/väri. Lista päivän tapahtumista. Muokkaus ja poisto.
3

Viikko- ja päivänäkymä

Lisää muut näkymät.

Prompti:

Luo viikkonäkymä (aikataulu tunneittain) ja päivänäkymä (yksityiskohtainen päiväaikataulu). Vaihto näkymien välillä napin painalluksella.

Laajennusideat

Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:

  • Drag & drop tapahtumien siirto
  • Toistuvat tapahtumat
  • Kalenteri-integraatio (Google Calendar)
  • Muistutukset sähköpostilla
  • Jaetut kalenterit

Lisää projekti-ideoita

Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.