Acme Financial Dashboard is a financial dashboard application created to practice and learn Next.js. It was built to explore Next.js features, understand routing, data fetching, and modern React patterns. The project is now production-ready and fully operational.
Project Status
Status: Production Ready & Fully Operational
- Fully deployed and working on Vercel
- Database initialized and seeded (Neon PostgreSQL)
- Authentication working correctly (NextAuth.js v5)
- All security patches applied
- Analytics integrated (Vercel Analytics)
- Custom domain configured (arthurreira.dev)
Live URL: https://nextjs-dashboard.arthurreira.dev
Learning Objectives
This project serves as a hands-on learning experience to:
- Practice building applications with Next.js 16
- Understand server components, client components, and the App Router
- Learn about data fetching, streaming, and optimization techniques
- Practice styling with Tailwind CSS
- Explore form handling, validation, and user interactions
- Understand authentication flows (NextAuth.js)
- Practice error handling and loading states
Features Implemented
Customer Management
- Add, update, and view customer details
- Customer listing with search and pagination
Invoice Management
- Create, view, and update invoices
- Invoice tracking and status management
Financial Overview
- Dashboard with revenue statistics
- Interactive charts for data visualization
- Collection and pending amounts tracking
Additional Features
- Search functionality for customers and invoices
- Pagination for large datasets
- Error handling with custom error pages
- Responsive design for various screen sizes
- Loading states and skeletons
Live Demo
Production URL: https://nextjs-dashboard.arthurreira.dev
The application is fully operational and deployed on Vercel with:
- Neon PostgreSQL database (initialized and seeded)
- NextAuth.js authentication (configured and working)
- Vercel Analytics integration (tracking visitors)
- Custom domain configured (arthurreira.dev)
- All environment variables configured
- Security patches applied
Test Credentials:
- Email:
user@nextmail.com - Password:
123456
Tech Stack
- Framework: Next.js 16.1.1 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4
- Database: PostgreSQL (Neon)
- Authentication: NextAuth.js v5 (beta.30)
- Analytics: Vercel Analytics
- Icons: Heroicons
- Form Validation: Zod
- Package Manager: pnpm
Concepts Explored
Through building this project, I practiced:
- Next.js App Router - File-based routing, layouts, and nested routes
- Server & Client Components - Understanding when to use each
- Data Fetching - Server-side data fetching with streaming
- Route Handlers - API routes and server actions
- Form Handling - Server actions for form submissions
- Styling - Tailwind CSS utilities and responsive design
- State Management - React hooks and state patterns
- Error Handling - Error boundaries and custom error pages
- Loading States - Suspense boundaries and loading UI
- Authentication - NextAuth.js integration and protected routes
- Database Integration - Working with PostgreSQL
- TypeScript - Type safety in Next.js applications
Security & Updates
This project is kept up-to-date with the latest security patches:
- Next.js 16.1.1 - Patched against CVE-2025-66478 (React2Shell vulnerability)
- NextAuth.js 5.0.0-beta.30 - Patched against email misdelivery vulnerability
- Tailwind CSS v4 - Latest version with modern PostCSS integration
- Vercel Analytics - Integrated for production monitoring
Project Completion Status
Project Status: Complete and Production-Ready
The application is fully operational and deployed:
- Deployment: Live at https://nextjs-dashboard.arthurreira.dev
- Database: Neon PostgreSQL initialized with all tables and seed data
- Authentication: NextAuth.js configured and working correctly
- Environment Variables: All configured in Vercel production
- Security: All CVEs patched and up-to-date
- Analytics: Vercel Analytics tracking visitors
- Custom Domain: Configured and working
All features are functional and the project is ready for use.