Acme Dashboard

Description

Acme Dashboard is a responsive web application built with Next.js and TypeScript, providing comprehensive features for managing customers, invoices, and tracking revenue. It leverages Tailwind CSS for styling and Vercel Postgres for data storage. The application includes secure user authentication managed by NextAuth.

Features

• User Authentication: Secure login system using NextAuth with credentials provider.
• Dashboard Overview: View key metrics such as total invoices, customers, and revenue.
• Customer Management: View and manage customer information.
• Invoice Management: Create, edit, and manage invoices with status tracking.
• Revenue Visualization: Interactive charts to monitor monthly revenue.
• Responsive Design: Optimized for both desktop and mobile devices.
• Skeleton Loading: Enhanced user experience with loading placeholders.

Technologies Used

• Next.js - React framework for server-rendered applications.
• TypeScript - Typed superset of JavaScript.
• Tailwind CSS - Utility-first CSS framework.
• NextAuth - Authentication for Next.js applications.
• Vercel Postgres - Managed PostgreSQL database.
• Heroicons - Beautiful SVG icons.

Installation

1. Clone the Repository

   git clone https://github.com/yourusername/acme-dashboard.git
   cd acme-dashboard

2. Install Dependencies

   pnpm install
   # or
   npm install
   # or
   yarn install

3. Set Up Environment Variables

   Create a .env.local file in the root directory and add the following:

   DATABASE_URL=your_vercel_postgres_connection_string
   NEXTAUTH_SECRET=your_nextauth_secret

4. Run Database Migrations and Seed Data

   pnpm run seed
   # or
   npm run seed
   # or
   yarn seed

5. Start the Development Server

   pnpm dev
   # or
   npm run dev
   # or
   yarn dev

   Open http://localhost:3000 in your browser to view the application.

Usage

• Login

  Navigate to /login and use the following credentials:

  Email: [email protected]
  Password: 123456
  

• Dashboard

  Access the dashboard at /dashboard to view an overview of invoices, customers, and revenue.

• Manage Customers

  Go to /dashboard/customers to view and manage customer data.

• Manage Invoices

  Visit /dashboard/invoices to view, create, and edit invoices.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any changes or improvements.

License

This project is licensed under the MIT License.