initial commit

Author: abdessamadely

.env.example

@@ -0,0 +1,2 @@
+ADMIN_PASSWORD=
+DATABASE_URL="postgresql://codersteps:@localhost:5432/fullstack_app?schema=public"

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "semi": false
+}

README.md

@@ -0,0 +1,19 @@
+## About
+
+A Next.js full-stack boilerplate with TypeScript, Tailwind CSS, and Prisma.js for your future full-stack apps.
+
+## Tasks
+
+- [x] Create a new Next.js app
+- [x] Install and configure Tailwind CSS
+- [x] Set up Typesafe environment variables
+- [x] Set up Prisma.js
+- [x] Automatize Next.js api handlers and Structure next.js api handlers
+- [x] Setup Next.js api hello world middleware
+- [x] Set up hello world MOBX store (under review)
+
+## Notes
+
+Don't forget to run: `cp .env.example .env`
+
+Soon the related article will be published at codersteps.com

app/users/create.handler.ts

@@ -0,0 +1,47 @@
+import type { NextApiHandler } from 'next'
+import bcrypt from 'bcrypt'
+import { Prisma, User } from '@prisma/client'
+import { ReasonPhrases, StatusCodes } from 'http-status-codes'
+import db from '@/lib/database'
+
+interface Data {
+  error: string | null
+  data: User | null
+}
+
+const createHandler: NextApiHandler<Data> = async (req, res) => {
+  const { firstName, lastName, bio, username, password } =
+    req.body as Prisma.UserUncheckedCreateInput
+
+  if (
+    typeof username !== 'string' ||
+    typeof password !== 'string' ||
+    password.length < 6
+  ) {
+    res
+      .status(StatusCodes.BAD_REQUEST)
+      .json({ data: null, error: ReasonPhrases.BAD_REQUEST })
+    return
+  }
+
+  const hashedPassword = bcrypt.hashSync(password, 10)
+  const data: Prisma.UserUncheckedCreateInput = {
+    username,
+    password: hashedPassword,
+  }
+
+  if (typeof firstName === 'string') {
+    data.firstName = firstName
+  }
+  if (typeof lastName === 'string') {
+    data.lastName = lastName
+  }
+  if (typeof bio === 'string') {
+    data.bio = bio
+  }
+
+  const createdUser = await db.user.create({ data })
+  res.status(StatusCodes.OK).json({ data: createdUser, error: null })
+}
+
+export default createHandler

app/users/delete.handler.ts

@@ -0,0 +1,18 @@
+import type { NextApiHandler } from 'next'
+import { User } from '@prisma/client'
+import { StatusCodes } from 'http-status-codes'
+import db from '@/lib/database'
+
+interface Data {
+  data: User | null
+  error: string | null
+}
+
+const deleteHandler: NextApiHandler<Data> = async (req, res) => {
+  const id = typeof req.query.id === 'string' ? parseInt(req.query.id, 10) : 0
+
+  const user = await db.user.delete({ where: { id } })
+  res.status(StatusCodes.OK).json({ data: user, error: null })
+}
+
+export default deleteHandler

app/users/index.handler.ts

@@ -0,0 +1,15 @@
+import type { NextApiHandler } from 'next'
+import { User } from '@prisma/client'
+import { StatusCodes } from 'http-status-codes'
+import db from '@/lib/database'
+
+interface Data {
+  data: User[]
+}
+
+const indexHandler: NextApiHandler<Data> = async (req, res) => {
+  const users = await db.user.findMany()
+  res.status(StatusCodes.OK).json({ data: users })
+}
+
+export default indexHandler

app/users/show.handler.ts

@@ -0,0 +1,25 @@
+import type { NextApiHandler } from 'next'
+import { User } from '@prisma/client'
+import { ReasonPhrases, StatusCodes } from 'http-status-codes'
+import db from '@/lib/database'
+
+interface Data {
+  data: User | null
+  error: string | null
+}
+
+const showHandler: NextApiHandler<Data> = async (req, res) => {
+  const id = typeof req.query.id === 'string' ? parseInt(req.query.id, 10) : 0
+
+  const user = await db.user.findFirst({ where: { id } })
+
+  if (!user) {
+    res
+      .status(StatusCodes.NOT_FOUND)
+      .json({ data: null, error: ReasonPhrases.NOT_FOUND })
+  }
+
+  res.status(StatusCodes.OK).json({ data: user, error: null })
+}
+
+export default showHandler

app/users/update.handler.ts

@@ -0,0 +1,33 @@
+import type { NextApiHandler } from 'next'
+import { Prisma, User } from '@prisma/client'
+import { ReasonPhrases, StatusCodes } from 'http-status-codes'
+import db from '@/lib/database'
+
+interface Data {
+  data: User | null
+  error: string | null
+}
+
+const updateHandler: NextApiHandler<Data> = async (req, res) => {
+  const id = typeof req.query.id === 'string' ? parseInt(req.query.id, 10) : 0
+
+  const { firstName, lastName, bio } =
+    req.body as Prisma.UserUncheckedUpdateInput
+
+  const data: Prisma.UserUncheckedUpdateInput = {}
+
+  if (typeof firstName === 'string') {
+    data.firstName = firstName
+  }
+  if (typeof lastName === 'string') {
+    data.lastName = lastName
+  }
+  if (typeof bio === 'string') {
+    data.bio = bio
+  }
+
+  const user = await db.user.update({ data, where: { id } })
+  res.status(StatusCodes.OK).json({ data: user, error: null })
+}
+
+export default updateHandler

components/common/Google/Fonts.tsx

@@ -0,0 +1,15 @@
+export default function Fonts() {
+  return (
+    <>
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+      {
+        // eslint-disable-next-line @next/next/no-page-custom-font
+        <link
+          href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;0,700;0,800;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+          rel="stylesheet"
+        ></link>
+      }
+    </>
+  );
+}

components/common/ShowMessage.tsx

@@ -0,0 +1,13 @@
+import { useStore } from '@/store/index'
+
+const ShowMessage = () => {
+  const { helloWorld } = useStore()
+
+  return (
+    <div className="p-4 border border-gray-500">
+      Message: {helloWorld.message}
+    </div>
+  )
+}
+
+export default ShowMessage

core/make-handler.ts

@@ -0,0 +1,59 @@
+import { Prisma } from '@prisma/client'
+import type { NextApiHandler } from 'next'
+import { ReasonPhrases, StatusCodes } from 'http-status-codes'
+
+type Data = {
+  error: string
+}
+
+const makeHandler: (
+  handlerOptions: {
+    method: 'POST' | 'GET' | 'PUT' | 'PATCH' | 'DELETE'
+    handler: NextApiHandler
+  }[],
+) => NextApiHandler<Data> = (handlerOptions) => {
+  return async (req, res) => {
+    const handlerOption = handlerOptions.find(
+      (handlerOption) => handlerOption.method === req.method,
+    )
+
+    if (!handlerOption) {
+      res.setHeader(
+        'Allow',
+        handlerOptions.map((handlerOption) => handlerOption.method),
+      )
+      res
+        .status(StatusCodes.METHOD_NOT_ALLOWED)
+        .json({ error: ReasonPhrases.METHOD_NOT_ALLOWED })
+      return
+    }
+
+    try {
+      await handlerOption.handler(req, res)
+    } catch (e) {
+      console.error(e)
+
+      if (e instanceof Prisma.PrismaClientKnownRequestError) {
+        if (e.code === 'P2002') {
+          res.status(StatusCodes.BAD_REQUEST).json({
+            error: ReasonPhrases.BAD_REQUEST,
+          })
+          return
+        }
+
+        if (e.code === 'P2025') {
+          res.status(StatusCodes.NOT_FOUND).json({
+            error: ReasonPhrases.NOT_FOUND,
+          })
+          return
+        }
+      }
+
+      res.status(StatusCodes.INTERNAL_SERVER_ERROR).json({
+        error: ReasonPhrases.INTERNAL_SERVER_ERROR,
+      })
+    }
+  }
+}
+
+export default makeHandler

lib/database.ts

@@ -0,0 +1,14 @@
+import { PrismaClient } from '@prisma/client'
+
+let prisma: PrismaClient
+
+if (process.env.NODE_ENV === 'production') {
+  prisma = new PrismaClient()
+} else {
+  if (!global.prisma) {
+    global.prisma = new PrismaClient()
+  }
+  prisma = global.prisma
+}
+
+export default prisma

middlewares/hello-world.middleware.ts

@@ -0,0 +1,16 @@
+import type { NextApiMiddleware } from '@/types/next'
+
+const helloWorld: NextApiMiddleware = (handler) => {
+  return async (req, res) => {
+    if (
+      typeof req.cookies.sayHello === 'string' &&
+      req.cookies.sayHello === 'true'
+    ) {
+      console.log('Hello, World!')
+    }
+
+    await handler(req, res)
+  }
+}
+
+export default helloWorld

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig