Henkilökohtainen budjetin ja menojen seurantasovellus. Opi CRUD-operaatiot, kategoriat ja datavisualisoinnit rakentamalla sovellus omaan käyttöösi.
Keskitaso · 5-7 tuntia · Next.js, TypeScript, Tailwind CSS, Supabase, Recharts
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
Luo budjetti-seurantasovellus. Tietorakenne: - transactions (id, type, amount, description, category_id, date, user_id) - categories (id, name, type, color, budget_limit) Näkymät: - Dashboard (yhteenveto, saldo, viimeisimmät) - Tapahtumat (lista, lisäys, filtteröinti) - Budjetit (kategoriakohtaiset rajat ja seuranta) - Raportit (kuukausittainen yhteenveto, kaaviot) Tech: - Next.js 14 - TypeScript - Tailwind CSS - Supabase - Recharts Aloita tapahtumien lisäyksestä ja listauksesta.
Luo CRUD tuloille ja menoille.
Luo tapahtumien hallinta: lisää tulo/meno (summa, kuvaus, kategoria, päivämäärä). Listaa tapahtumat aikajärjestyksessä. Muokkaus ja poisto.
Lisää kategorisointi ja budjettirajat.
Luo kategoriahallinta (Ruoka, Asuminen, Liikenne, jne.). Aseta kuukausibudjetti per kategoria. Näytä edistymispalkki kulutetusta budjetista.
Visualisoi taloustiedot.
Luo kuukausiraportti-näkymä: yhteenveto (tulot, menot, säästöt), piirakka kategoriajaukaumasta, viivakaavio kuukausittaisesta kehityksestä.
Tapahtumien kirjaus
Kategoriat
Budjettirajat
Kuukausiraportit
Kaaviot kulutuksesta
Kun perusprojekti on valmis:
Pankkitili-integraatio
Toistuvat tapahtumat
Säästötavoitteet
Mobile app
Excel-import
Interaktiivinen dashboard datan visualisointiin. Opi Recharts-kaaviokirjastoa, reaaliaikaista dataa ja filtteröintiä - taitoja joita tarvitaan lähes joka firmassa.
Aseta ja seuraa henkilökohtaisia tavoitteitasi. Opi pelillistämistä, streak-logiikkaa ja edistymisen visualisointia - motivoiva projekti joka opettaa paljon.
Valitse työkalu ja käytä aloituspromptiä.