Acme Financial Dashboard on taloushallinnan koontinäyttösovellus, joka on luotu harjoittelemaan ja oppimaan Next.js:ää. Se rakennettiin tutustumaan Next.js-ominaisuuksiin, ymmärtämään reititystä, datan hakemista ja moderneja React-malleja. Projekti on nyt tuotantovalmis ja täysin toiminnallinen.
Projektin Tila
Tila: Tuotantovalmis ja Täysin Toiminnallinen
- Täysin julkaistu ja toimiva Vercelissä
- Tietokanta alustettu ja täytetty (Neon PostgreSQL)
- Tunnistautuminen toimii oikein (NextAuth.js v5)
- Kaikki tietoturvapaikkaukset sovellettu
- Analytiikka integroitu (Vercel Analytics)
- Mukautettu verkkotunnus konfiguroitu (arthurreira.dev)
Live-osoite: https://nextjs-dashboard.arthurreira.dev
Oppimistavoitteet
Tämä projekti toimii käytännön oppimiskokemuksena:
- Harjoitella sovellusten rakentamista Next.js 16:lla
- Ymmärtää server-komponentit, client-komponentit ja App Router
- Oppia datan hakemisesta, suoratoistosta ja optimointitekniikoista
- Harjoitella tyylittelyä Tailwind CSS:llä
- Tutustua lomakkeiden käsittelyyn, validointiin ja käyttäjävuorovaikutukseen
- Ymmärtää tunnistautumisvirrat (NextAuth.js)
- Harjoitella virheiden käsittelyä ja lataustiloja
Toteutetut Ominaisuudet
Asiakashallinta
- Lisää, päivitä ja tarkastele asiakastietoja
- Asiakasluettelo haun ja sivutuksen kanssa
Laskuhallinta
- Luo, tarkastele ja päivitä laskuja
- Laskuseuranta ja statuksen hallinta
Talousyhteenveto
- Koontinäyttö tuloslaskelmilla
- Interaktiiviset kaaviot datan visualisointiin
- Perintö- ja odotettavissa olevien määrien seuranta
Lisäominaisuudet
- Hakutoiminnallisuus asiakkaille ja laskuille
- Sivutus suurille tietomäärille
- Virheiden käsittely mukautetuilla virhesivuilla
- Responsiivinen suunnittelu eri näytön ko'oille
- Lataustilat ja skeletonit
Live-Demo
Tuotanto-osoite: https://nextjs-dashboard.arthurreira.dev
Sovellus on täysin toiminnallinen ja julkaistu Verceliin:
- Neon PostgreSQL-tietokanta (alustettu ja täytetty)
- NextAuth.js-tunnistautuminen (konfiguroitu ja toimiva)
- Vercel Analytics -integraatio (seurataan kävijöitä)
- Mukautettu verkkotunnus konfiguroitu (arthurreira.dev)
- Kaikki ympäristömuuttujat konfiguroitu
- Tietoturvapaikkaukset sovellettu
Testitunnukset:
- Sähköposti:
user@nextmail.com - Salasana:
123456
Teknologiapino
- Kehys: Next.js 16.1.1 (App Router)
- Kieli: TypeScript
- Tyylittely: Tailwind CSS v4
- Tietokanta: PostgreSQL (Neon)
- Tunnistautuminen: NextAuth.js v5 (beta.30)
- Analytiikka: Vercel Analytics
- Ikonit: Heroicons
- Lomakkeiden Validointi: Zod
- Paketinhallinta: pnpm
Tutkitut Käsitteet
Tämän projektin rakentamisen aikana harjoittelin:
- Next.js App Router - Tiedostopohjainen reititys, asettelut ja sisäkkäiset reitit
- Server & Client -komponentit - Ymmärtää, milloin käyttää kumpaakin
- Datan Hakeminen - Palvelinpuolen datan hakeminen suoratoistolla
- Reittikäsittelijät - API-reitit ja palvelimen toiminnot
- Lomakkeiden Käsittely - Palvelimen toiminnot lomakkeiden lähetyksiin
- Tyylittely - Tailwind CSS -työkalut ja responsiivinen suunnittelu
- Tilan Hallinta - React-hookit ja tilamallit
- Virheiden Käsittely - Virherajat ja mukautetut virhesivut
- Lataustilat - Suspense-rajat ja latauskäyttöliittymät
- Tunnistautuminen - NextAuth.js -integrointi ja suojatut reitit
- Tietokantaintegraatio - Työskentely PostgreSQL:än kanssa
- TypeScript - Tyyppiturvallisuus Next.js-sovelluksissa
Tietoturva ja Päivitykset
Tämä projekti pidetään ajan tasalla uusimmilla tietoturvapaikkauksilla:
- Next.js 16.1.1 - Paikattu CVE-2025-66478 (React2Shell-haavoittuvuus)
- NextAuth.js 5.0.0-beta.30 - Paikattu sähköpostin väärän toimituksen haavoittuvuus
- Tailwind CSS v4 - Uusin versio modernilla PostCSS-integraatiolla
- Vercel Analytics - Integroitu tuotantoseurantaan
Projektin Valmiusaste
Projektin Tila: Valmis ja Tuotantovalmis
Sovellus on täysin toiminnallinen ja julkaistu:
- Julkaisu: Live osoitteessa https://nextjs-dashboard.arthurreira.dev
- Tietokanta: Neon PostgreSQL alustettu kaikilla tauluilla ja täytetty datalla
- Tunnistautuminen: NextAuth.js konfiguroitu ja toimii oikein
- Ympäristömuuttujat: Kaikki konfiguroitu Vercel-tuotannossa
- Tietoturva: Kaikki CVE:t paikattu ja ajan tasalla
- Analytiikka: Vercel Analytics seuraa kävijöitä
- Mukautettu Verkkotunnus: Konfiguroitu ja toimiva
Kaikki ominaisuudet ovat toiminnallisia ja projekti on valmis käyttöön.