Interaktiivinen dashboard datan visualisointiin. Opi Recharts-kaaviokirjastoa, reaaliaikaista dataa ja filtteröintiä - taitoja joita tarvitaan lähes joka firmassa.
Keskitaso · 6-8 tuntia · Next.js, TypeScript, Tailwind CSS, Recharts, Supabase
Kopioi tämä Cursoriin tai Claude Codeen ja aloita rakentaminen.
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.
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ä.
Viivakaaviot ja palkkikaaviot
KPI-kortit
Aikavälivalitsin
Reaaliaikainen päivitys
CSV-export
Kun perusprojekti on valmis:
PDF/PNG-export
Jaettavat linkit
Email-raportit
Hälytykset raja-arvoille
Drill-down interaktiivisuus
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.
Valitse työkalu ja käytä aloituspromptiä.