This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

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

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

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!

Packages Used in this Project

Components Library: ShadCN/UI

For reusable NextJS components. For more info, check documentation
To install: npx shadcn-ui@latest init

Icons: Lucide

For more info, check documentation
To install: npm install lucide-react

Express

Used for server side rendering. For more info, check documentation
To install: npm install express
To add types: npm install -D --save @types/express

Headless CMS: Payload

For more info, check documentation
To install: npm i payload

cross-env

For more info, check documentation
To install: npm install --save-dev cross-env

Editor: slate.js with Payload

For more info, check documentation
To install: npm install --save @payloadcms/richtext-slate

Backend: bundle-webpack with Payload

For more info, check documentation
To install: npm install @payloadcms/bundler-webpack

Database: MongoDB with Payload

For more info, check documentation
To install: npm install @payloadcms/db-mongodb

Form: react-hook-form, @hookform/resolver, zod & sooner

react-hook-form

For form handling. For more info, check documentation
To install: npm i react-hook-form

@hookform/resolvers

For form validation. For more info, check documentation
To install: npm i @hookform/resolvers

zod

For schema validation library. For more info, check documentation
To install: npm i zod

sonner

For toast notification library. For more info, check documentation
To install: npm i sonner

tRPR & Tanstack

A tool for building and consuming TypeScript RPC services. Type safety to back end and front end. For more info, check documentation
To install: npm i @trpc/client @trpc/server @trpc/next @trpc/react-query @tanstack/react-query

Emails: resend, nodemailer & @types/nodemailer

resend

To send emails that land in the inbox and not in the spam folder. Create an account in their website and use the API key in your code. For more info, check documentation
To install: npm install resend

nodemailer

For sending emails. For more info, check documentation.
To install: npm i nodemailer

@types/nodemailer

To add types to nodemailer package. For more info, check documentation.
To install: npm i @types/nodemailer

@react-email/components

A collection of reusable React components for building email templates. For more info, check documentation.
To install: npm i @react-email/components

package.json

scripts: dev

Uses nodemon to run the development server, with the PAYLOAD_CONFIG_PATH environment variable set to the path of the Payload CMS configuration file (src/payload.config.ts).
To run: npm run dev

scripts: generate:types

Generates TypeScript types using the Payload CLI, with the PAYLOAD_CONFIG_PATH environment variable set to the path of the Payload CMS configuration file.
To run: npm run generate:types

Image Slider: swiper

For more info, check documentation.
To install: npm i swiper

State Management: Zustand

Library for React applications that provides a simple and flexible way to manage global state. For more info, check documentation
To install: npm i zustand