ACME Dashboard - Invoice Management System

Vercel App: https://nextjs-dashboard-viswaksenas-projects.vercel.app

Demo Login Credentials

• Email: user@nextmail.com
• Password: 123456

Tech Stack

Web Stack:

Development Environment:

Description

This is a full-stack web application built using Next.js and Tailwind CSS, designed for creating, editing, and deleting invoices for customers. The application provides a dashboard where users can manage their invoices, check amounts, and monitor the status of each invoice. The application is connected to a PostgreSQL database to store the invoice data.

Functionalities

Getting Started

• Created a new Next.js application using the dashboard starter example.
• Explored the project structure and files.

CSS Styling

• Styled the Next.js application with Tailwind and CSS modules.

Optimizing Fonts and Images

• Optimized fonts and images with the Next.js built-in components.

Creating Layouts and Pages

• Created the dashboard routes and a shared layout that can be shared between multiple pages.

Navigating Between Pages

• Learned how to use the <Link> component to navigate between pages.

Setting Up Your Database

• Set up a database for your application and seeded it with initial data.

Fetching Data

• Learned about the different ways to fetch data in Next.js.
• Fetched data for your dashboard page using Server Components.

Static and Dynamic Rendering

• Understood how rendering works in Next.js.
• Made your dashboard app dynamic.

Streaming

• Improved your application's loading experience with streaming and loading skeletons.

Partial Prerendering (Optional)

• Explored Partial Prerendering and how it works.

Adding Search and Pagination

• Added search and pagination to your dashboard application using Next.js APIs.

Mutating Data

• Mutated data using React Server Actions.
• Revalidated the Next.js cache.

Handling Errors

• Handled errors gracefully with error.tsx and notFound.

Improving Accessibility

• Implemented server-side form validation.
• Improved accessibility in your forms.

Adding Authentication

• Added authentication to protect your dashboard routes using NextAuth.js, Server Actions, and Middleware.

Adding Metadata

• Learned how to add metadata to your Next.js application.

How to run

Steps

1. Clone the repository

https://github.com/Viswaksena-J/nextjs-dashboard.git

2. Open terminal and run the following commands

cd nextjs-dashboard
npm i
npm run dev