Interaktiivinen dashboard datan visualisointiin. Opi Recharts-kaaviokirjastoa, reaaliaikaista dataa ja filtteröintiä — taitoja joita tarvitaan lähes joka firmassa.
Kopioi tämä prompti Cursoriin tai muuhun AI-työkaluun aloittaaksesi projektin.
Luo analytiikka-dashboard. Layout: - Header (otsikko, aikavälivalitsin) - KPI-kortit (4 kpl rivissä) - Pääkaavio (viivakaavio, iso) - Sivukaaviot (2x2 grid: palkit, piiras, lista, kartta) - Taulukko (yksityiskohtainen data) Tech: - Next.js 14 - TypeScript - Tailwind CSS - Recharts (kaaviot) - Supabase (data) Mock-data aluksi, sitten Supabase-integraatio. Tee tumma teema, moderni design.
Tässä projektissa rakennetaan seuraavat ominaisuudet:
Luo perustason metriikat.
Luo KPICard-komponentti joka näyttää: otsikko, arvo, muutos edellisestä jaksosta (prosentteina), ikoni. Luo 4-6 KPI-korttia dashboardin yläosaan.
Lisää datavisualisoinnit.
Luo Recharts-kaavioita: viivakaavio aikasarjadatalle, palkkikaavio kategoriadatalle, piirakkakaavio jakaumalle. Tee niistä responsiivisia.
Lisää datan suodatus.
Luo aikavälivalitsin (tänään, viikko, kuukausi, vuosi, custom). Lisää muut filtterit (kategoria, tuote, käyttäjä). Päivitä kaaviot filtterien mukaan.
Lisää live-päivitykset.
Integroi Supabase Realtime. Päivitä dashboard automaattisesti kun uutta dataa tulee. Lisää pieni indikaattori live-päivityksistä.
Kun perusprojekti on valmis, voit laajentaa sitä näillä ideoilla:
Henkilökohtainen budjetin ja menojen seurantasovellus. Opi CRUD-operaatiot, kategoriat ja datavisualisoinnit rakentamalla sovellus omaan käyttöösi.
Aseta ja seuraa henkilökohtaisia tavoitteitasi. Opi pelillistämistä, streak-logiikkaa ja edistymisen visualisointia — motivoiva projekti joka opettaa paljon.
Selaa kaikkia data ja analytiikka projekteja tai tutustu muihin kategorioihin.