A financial dashboard

📋 Table of Contents

1. 🤖 Introduction
2. ⚙️ Tech Stack
3. 🔋 Features
4. 🤸 Quick Start

🤖 Introduction

Built with Next.js, it is a financial dashboard, that has a public home page, login page, pages that protected by authentication, and the ability for users to add, edit, and delete invoices.

⚙️ Tech Stack

• Next.js
• TypeScript
• postgress
• React Hook Form
• Zod
• TailwindCSS
• Chart.js
• ShadCN

🔋 Features

👉 Styling : The different ways to style an application in Next.js. 👉 Optimizations: optimizing images, links, and fonts. 👉 Routing: creating nested layouts and pages using file-system routing. 👉 Data Fetching: setting up a database on Vercel, and best practices for fetching and streaming. 👉 Search and Pagination: implementing search and pagination using URL Search Params. 👉 Mutating Data: mutate data using React Server Actions, and revalidate the Next.js cache. 👉 Error Handling: handle general and 404 not found errors. 👉 Form Validation and Accessibility: server-side form validation and tips for improving accessibility. 👉 Authentication: add authentication to the application using NextAuth.js and Middleware. 👉 Metadata: add metadata and prepare the application for social sharing.

🤸 Quick Start

Follow these steps to set up the project locally on your machine.

Prerequisites

Make sure you have the following installed on your machine:

• Git
• Node.js
• npm (Node Package Manager)

Cloning the Repository

git clone https://github.com/khaled9912/nextjs-dashboard
cd nextjs-dashboard

Installation

Install the project dependencies using npm:

pnpm install

Running the Project

pnpm run dev

🕸️ Snippets

.env.example

POSTGRES_URL
POSTGRES_PRISMA_URL
POSTGRES_URL_NO_SSL
POSTGRES_URL_NON_POOLING
POSTGRES_USER
POSTGRES_HOST
POSTGRES_PASSWORD
POSTGRES_DATABASE
AUTH_SECRET
AUTH_URL