A simple internal analytics dashboard for NextFaster.
Built with Next.js (App Router), TailwindCSS, and PostgreSQL.
- Dashboard-style UI (simple, minimal styling)
- Total users count
- Active users (last 24 hours) based on
last_login_at - Logged-out users (last 24 hours) based on
last_logout_at - Data fetched server-side using Postgres queries
- Cart additions tracking via
cart_metrics - Product view events per session via
product_view_events - Estimated cart revenue
- Products per collection
- Products added to cart
This project uses unstable_cache from Next.js to optimize database query performance:
- Performance: Caches expensive database queries to reduce response times
- Deduplication: Wrapped with React's
cache()to prevent duplicate requests during a single render - Automatic Revalidation: Configured with time-based revalidation to keep data fresh
- Server-Side: Works seamlessly with Next.js App Router's server components
The custom wrapper in lib/unstable-cache.ts combines Next.js's unstable_cache with React's cache to provide both request-level deduplication and time-based cache revalidation, ensuring optimal performance without sacrificing data freshness.
npm install
# or pnpm install
# or yarnCreate a .env.local file in the project root:
POSTGRES_USER=your_user
POSTGRES_HOST=localhost
POSTGRES_DB=your_db
POSTGRES_PASSWORD=your_password
POSTGRES_PORT=5432
POSTGRES_MAX=10
POSTGRES_IDLE_TIMEOUT=30000
POSTGRES_CONNECTION_TIMEOUT=5000
POSTGRES_KEEP_ALIVE=truepnpm devAll the required SQL commands are provided in the data/ folder:
-
Navigate to the
data/folder and unzipdata.zip:cd data unzip data.zip -
Run the SQL file in PostgreSQL:
psql -U your_user -d your_db
Then inside the psql prompt:
\i data.sql
This will create all the required tables and populate them with sample data.
Based on NextFaster by: