Klassinen tehtävälista-sovellus modernilla toteutuksella. Opi React state-hallintaa, CRUD-operaatioita ja tietokannan käyttöä rakentamalla sovellus jota käytät oikeasti.
Aloittelija · 2-4 tuntia · Next.js, TypeScript, Tailwind CSS, Supabase
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
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.
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.
Tehtävien lisäys
Merkitse valmiiksi
Poista tehtävä
Filtteröinti (kaikki, aktiiviset, valmiit)
Tallennus tietokantaan
Drag & drop järjestys
Kun perusprojekti on valmis:
Drag & drop uudelleenjärjestely
Kategoriat/projektit
Deadlinet ja muistutukset
Toistuvat tehtävät
Mobiilisovellus React Nativella
Henkilökohtainen kalenteri tapahtumien hallintaan. Opi päivämäärien käsittelyä, visuaalisia näkymiä ja drag & drop -toimintoja rakentamalla oma kalenterisovellus.
Moderni ja responsiivinen portfolio-sivusto, joka esittelee työsi ja osaamisesi. Opi Next.js:n perusteet ja deployn Verceliin - täydellinen ensimmäinen projekti.
Täysiverinen blogi kirjoittamiseen ja artikkeleiden hallintaan. Opi MDX-sisällönhallintaa, hakutoimintoja ja autentikaatiota rakentamalla oma CMS.
Valitse työkalu ja käytä aloituspromptiä.