https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template

Admin dashboard template.
https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template

nextjs react tailwindcss vercel

Last synced: about 1 month ago
JSON representation

Admin dashboard template.

• Host: GitHub
• URL: https://github.com/vercel/nextjs-postgres-nextauth-tailwindcss-template
• Owner: vercel
• License: mit
• Created: 2022-11-12T22:18:35.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-31T17:41:52.000Z (about 2 months ago)
• Last Synced: 2024-08-06T18:47:30.078Z (about 1 month ago)
• Topics: nextjs, react, tailwindcss, vercel
• Language: TypeScript
• Homepage: https://next-admin-dash.vercel.app/
• Size: 215 KB
• Stars: 972
• Watchers: 9
• Forks: 300
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

• jimsghstars - vercel/nextjs-postgres-nextauth-tailwindcss-template - Admin dashboard template. (TypeScript)

README

        
Next.js 14 Admin Dashboard Template

Built with the Next.js App Router






Demo

 · 

Clone & Deploy







## Overview

This is a starter template using the following stack:

- Framework - [Next.js (App Router)](https://nextjs.org)

- Language - [TypeScript](https://www.typescriptlang.org)

- Auth - [Auth.js](https://authjs.dev)

- Database - [Postgres](https://vercel.com/postgres)

- Deployment - [Vercel](https://vercel.com/docs/concepts/next.js/overview)

- Styling - [Tailwind CSS](https://tailwindcss.com)

- Components - [Shadcn UI](https://ui.shadcn.com/)

- Analytics - [Vercel Analytics](https://vercel.com/analytics)

- Formatting - [Prettier](https://prettier.io)

This template uses the new Next.js App Router. This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more.

## Getting Started

During the deployment, Vercel will prompt you to create a new Postgres database. This will add the necessary environment variables to your project.

Inside the Vercel Postgres dashboard, create a table based on the schema defined in this repository.

```

CREATE TYPE status AS ENUM ('active', 'inactive', 'archived');

CREATE TABLE products (

  id SERIAL PRIMARY KEY,

  image_url TEXT NOT NULL,

  name TEXT NOT NULL,

  status status NOT NULL,

  price NUMERIC(10, 2) NOT NULL,

  stock INTEGER NOT NULL,

  available_at TIMESTAMP NOT NULL

);

```

Then, uncomment `app/api/seed.ts` and hit `http://localhost:3000/api/seed` to seed the database with products.

Next, copy the `.env.example` file to `.env` and update the values. Follow the instructions in the `.env.example` file to set up your GitHub OAuth application.

```bash

npm i -g vercel

vercel link

vercel env pull

```

Finally, run the following commands to start the development server:

```

pnpm install

pnpm dev

```

You should now be able to access the application at http://localhost:3000.