danvgar/nextjs-dashboard

Financial dashboard demo for small businesses. Authentication, revenue, customers, invoice tracking. // NextJS, React, TypeScript, Tailwind, Postgres, NextAuth

ACME Financial Dashboard

This is a full stack financial dashboard, complete with authentication, databases, and app routing. This project is provided by Vercel's NextJS foundations course

View Demo »

Demo Login: user@nextmail.com
Demo Password: 123456

Table Of Contents

• About The Project
  • Built With
• Navigating The Repo
• Getting Started
  • Prerequisites
  • Interactive
  • Non-Interactive
• Usage
• Roadmap
• Contributing
  • Creating A Pull Request

About The Project

This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application.

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

Built With

• Framework - Next.js
• Language - TypeScript
• Auth - NextAuth.js
• Database - Vercel Postgres
• Deployment - Vercel
• Styling - Tailwind CSS
• Components - Tremor
• Analytics - Vercel Analytics
• Linting - ESLint
• Formatting - Prettier

Navigating This Repo

• /app: Contains all the routes, components, and logic for your application, this is where you'll be mostly working from.
• /app/lib: Contains functions used in your application, such as reusable utility functions and data fetching functions.
• /app/ui: Contains all the UI components for your application, such as cards, tables, and forms. To save time, we've pre-styled these components for you.
• /public: Contains all the static assets for your application, such as images.
• /scripts: Contains a seeding script that you'll use to populate your database in a later chapter.
• Config Files: You'll also notice config files such as next.config.js at the root of your application. Most of these files are created and pre-configured when you start a new project using create-next-app. You will not need to modify them in this course.

Getting Started

The easiest way to get started with Next.js is by using create-next-app. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the official Next.js examples. To get started, use the following command:

Prerequisites

Make sure your system meets the following requirements:

• Node.js 18.17.0 or later installed. Download here.
• Operating systems: macOS, Windows (including WSL), or Linux.

In addition, you'll also need a GitHub Account and a Vercel Account.

Interactive

You can create a new project interactively by running:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
# or
bunx create-next-app

You will be asked for the name of your project, and then whether you want to create a TypeScript project:

✔ Would you like to use TypeScript? … No / Yes

Select Yes to install the necessary types/dependencies and create a new TS project.

Non-interactive

You can also pass command line arguments to set up a new project non-interactively. See create-next-app --help:

create-next-app <project-directory> [options]

Options:
  -V, --version                      output the version number
  --ts, --typescript

    Initialize as a TypeScript project. (default)

  --js, --javascript

    Initialize as a JavaScript project.

  --use-npm

    Explicitly tell the CLI to bootstrap the app using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the app using pnpm

  --use-yarn

    Explicitly tell the CLI to bootstrap the app using Yarn

  --use-bun

    Explicitly tell the CLI to bootstrap the app using Bun

  -e, --example [name]|[github-url]

    An example to bootstrap the app with. You can use an example name
    from the official Next.js repo or a GitHub URL. The URL can use
    any branch and/or subdirectory

  --example-path <path-to-example>

    In a rare case, your GitHub URL might contain a branch name with
    a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
    In this case, you must specify the path to the example separately:
    --example-path foo/bar

Why use Create Next App?

create-next-app allows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:

• Interactive Experience: Running npx create-next-app@latest (with no arguments) launches an interactive experience that guides you through setting up a project.
• Zero Dependencies: Initializing a project is as quick as one second. Create Next App has zero dependencies.
• Offline Support: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.
• Support for Examples: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. npx create-next-app --example api-routes).
• Tested: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.

Usage

Coming Soon!

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

• If you have suggestions for adding or removing projects, feel free to open an issue to discuss it, or directly create a pull request after you edit the README.md file with necessary changes.
• Please make sure you check your spelling and grammar.
• Create individual PR for each suggestion.
• Please also read through the Code Of Conduct before posting your first idea as well.

Creating A Pull Request

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request