Next.js Dashboard

This is a simple financial dashboard built with Next.js and Tailwind CSS, developed as part of the Next.js App Router Course. The application allows users to manage invoices, customers, and revenue data.

Features

• A public home page with a hero section and a call to action.
• A login page with a form to authenticate users.
• Dashboard pages that are protected by authentication.
• The ability for users to add, edit, and delete invoices.
• An accompanying database to store user, customers, invoices and revenue data.

Technology stack

• Styling: Tailwind CSS
• Back-end: Next.js
• Front-end: React
• Deployment: Vercel
• Tools: Zod | bcrypt | use-debounce

Running locally

1. Clone this repo:

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

2. Then go to the project's folder:

cd nextjs-dashboard

3. Install all dependencies:

pnpm i

4. Configure your environment variables and follow the instructions:

cp .env.example .env.local

5. Run locally:

pnpm dev

Overview

Here's a brief overview of what I've learned while building this project:

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

For more information, see the course curriculum on the Next.js Website.

What's next?

• Add the customer page
• Sign-up page.
• Add dark mode support.
• Internationalization support.

License

MIT License © Igor Augusto