• Node.js & Yarn Install Node.js
• Docker & Docker Compose Install Docker
• Next.js Install Next.js
• Prisma ORM Install Prisma
• Shadcn/ui Install Shadcn/ui

Install Next.js on current project and replace the package manager with yarn:

npx create-next-app@latest .
rm -fr node_modules
rm package-lock.json
yarn

Run the development server:

yarn dev

Open https://localhost:3000 with your browser to see the result.

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Use shadcn/ui for components and styles.

Shadcn/ui Next.js Install: npx [email protected]

Init the project: npx shadcn-ui init

Pick a theme and replace app/globals.css: https://ui.shadcn.com/themes

Install button component: npx shadcn-ui add button

Install Next.js dark mode themes: https://ui.shadcn.com/docs/dark-mode/next

Run: yarn add next-themes

Then create components/theme-provider.tsx

For application database we will use PostgreSQL and Prisma ORM.

On local development we will use Docker to run a PostgreSQL container.

Prisma ORM https://www.prisma.io will interface data into the application.

Add prisma to the project:

• yarn add prisma --dev
• npx prisma init

Shadcn/ui table component is used to display the data: npx shadcn-ui add table

In order to validate inputs we will use Zod package.

To install it, run: yarn add zod

For form handling we will use React Hook Form.

To install it, run: yarn add react-hook-form

To use Zod with the hook form, install the zod resolver: yarn add @hookform/resolvers

To allow description markups in the form, install mde packages:

From https://www.npmjs.com/package/react-simplemde-editor

• yarn add react-simplemde-editor --dev
• yarn add easymde --dev

Also install the component library that are used in the form:

• npx shadcn-ui add form
• npx shadcn-ui add input
• npx shadcn-ui add select

For visualization we can use:

• Card component: npx shadcn-ui add card
• React Markdown: yarn add react-markdown
• Tailwind CSS for Markdown: yarn add @tailwindcss/typography

To delete we can use the alert dialog component: npx shadcn-ui add alert-dialog

For pagination styling, use Lucide React that comes along with Shadcn/ui installation.

chrevron Pagination Icons styling: https://lucide.dev/icons/?search=chrevron

Handle database password encryption with bcrypt: yarn add bcryptjs @types/bcryptjs

We use Next Auth for user authentication: yarn add next-auth

Generate a secret key for the session: openssl rand -base64 32

Add the secret key to .env.local file: NEXTAUTH_SECRET=...

Don't forget to generate a new secret key for production.

For dashboard we will use Recharts: yarn add recharts

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.