Klassinen tehtävälista-sovellus modernilla toteutuksella.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
Luo moderni todo-sovellus. Ominaisuudet: - Lisää tehtävä tekstikenttään kirjoittamalla - Merkitse tehtävä valmiiksi klikkaamalla - Poista tehtävä - Filtteröi: kaikki / aktiiviset / valmiit - Näytä jäljellä olevien määrä - Tyhjennä kaikki valmiit -nappi Tech: - Next.js 14 - TypeScript - Tailwind CSS - localStorage (tai Supabase) Tee siisti, minimalistinen UI tumma-teemalla.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
Luo projekti ja perusrakenne.
Luo Next.js 14 todo-sovellus TypeScriptillä ja Tailwind CSS:llä. Luo peruskomponentit: TodoList, TodoItem, AddTodo.
Lisää tehtävien state-hallinta.
Lisää React state tehtäville. Toteuta funktiot: addTodo, toggleTodo, deleteTodo. Käytä TypeScript-tyyppejä.
Tallenna tehtävät tietokantaan.
Lisää Supabase-integraatio. Luo todos-taulu ja synkronoi tehtävät tietokantaan. Lisää realtime-päivitykset.
Lisää filtterit ja viimeistele UI.
Lisää filtterit: kaikki, aktiiviset, valmiit. Lisää tehtävälaskuri ja "tyhjennä valmiit" -nappi. Paranna UI:ta animaatioilla.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Selaa kaikkia web-sovellukset projekteja tai tutustu muihin kategorioihin.