Next.js Dashboard

This project is a modified version of the dashboard app from the the Next.js course curriculum.

It builds a simple financial dashboard that has:

• A public home page.
• A login page.
• Dashboard pages that are protected by authentication.
• The ability for users to search, add, edit, and delete invoices.

using the following libraries & frameworks:

• Next.js v14
• React
• PostgreSQL
• Docker
• Prisma TypeScript ORM
• Tailwind CSS framework
• Zod for schema validation
• NextAuth for authentication

Prerequisites

• Node.js

Set up

Clone the repository

git clone https://github.com/israataha/nextjs-dashboard

Install the dependencies

npm install

Create a copy of the .env.example file

cp .env.example .env

Generate a NextAuth secret using

openssl rand -base64 32

and copy the result into the NEXTAUTH_SECRET variable in the .env file

Start PostgreSQL Docker container

docker-compose up -d

To create the tables in your database, run

npx prisma db push

To view the data using Primsa studio run

npx prisma studio

Run the seed script to populate your database with seed data.

npm run seed

Run the App

Run the app with following command:

npm run dev

Open your browser at localhost:3000 to see the running application.

Resources:

• How to Build a Fullstack App with Next.js, Prisma, and Vercel Postgres
• How to seed a database with Prisma and Next.js https://github.com/planetscale/nextjs-starter/tree/main