Build a fullstack web app

2024-01-18T00:00:00+00:00

In this tutorial, we will develop a fullstack web app with the following tech stack:</p>

Next.js</a> as meta-framework</li>
TailwindCSS</a> for styling</li>
shadcn/ui</a> for UI components</li>
Prisma</a> as ORM</li>
PostgreSQL</a> as database</li>
Auth.js</a> for authentication</li>

Docker</a> for creating an intance of a PostgreSQL database locally</li> </ul>

We’ll learn some of the fundamentals of this tech stack, like using server components</strong> in Next.js, or creating API endpoints</strong> using the app router</strong>.</p>

2. Initial setup</h2>
Let’s start creating a new Next.js project, in your terminal</strong> run:</p>

npx create-next-app@latest</span></span></code></pre>
Make sure to mark Yes</strong> the following options:</p>

Would you like to use TypeScript</strong>?</li>
Would you like to use ESLint</strong>?</li>
Would you like to use Tailwind CSS</strong>?</li>
Would you like to use ‘src/’ directory</strong>?</li>
Would you like to use App Router</strong>? (recommended)</li>
</ul>
> What is your project named? fullstack-app</span></span>
> Would you like to use TypeScript? No / Yes</span></span>
> Would you like to use ESLint? No / Yes</span></span>
> Would you like to use Tailwind CSS? No / Yes</span></span>
> Would you like to use `src/` directory? No / Yes</span></span>
> Would you like to use App Router? (recommended) No / Yes</span></span>
> Would you like to customize the default import alias (@/*)? No / Yes</span></span>
> What import alias would you like configured? @/*</span></span></code></pre>
Wait until the dependencies installation is completed, then access to the
project directory:</p>
cd fullstack-app</span></span></code></pre>
Open your code editor of your preference.</p>
2.1 Install shadcn/ui</h3>
This components will help us a lot building the UI</strong> along with TailwindCSS.</p>
First, initialize shadcn/ui:</p>
npx shadcn-ui@latest init</span></span></code></pre>
Make sure to config shadcn/ui according your project configuration.</p>
You can check the shadcn/ui docs</a> for every
component that you could need, each components is installed individually.</p>
2.2 Create a db using Docker</h3>
Make sure to have Docker</a> installed in your machine.</p>
First you need to pull a PostgreSQL image from Docker Hub:</p>
docker pull postgres</span></span></code></pre>
Then, create a container with the image:</p>
docker run --name my-postgres -e POSTGRES_PASSWORD=password -p 5432:5432 -d postgres</span></span></code></pre>2.3 Install Prisma</h3>
Install Prisma using your dependency manager, in this case npm</strong>:</p>
npm install prisma -D</span></span></code></pre>
Now initialize Prisma:</p>
npx prisma init</span></span></code></pre>
A new ./prisma</code> direcotry will be created in the root of your project, with a
schema.prisma file.</p>
You’ll create your schemas in this file.</p>
Add this model as an example:</p>
model User {</span></span>
  id        Int      @id @default(autoincrement())</span></span>
  createdAt DateTime @default(now())</span></span>
  email     String   @unique</span></span>
  name      String?</span></span>
}</span></span></code></pre>
Update your .env</code> file with the following:</p>
DATABASE_URL="postgresql://postgres:password@localhost:5432/postgres?schema=public"</span></span></code></pre>
In the URL is your username (by default is postgres), your password (in this
case password), the host (by default is localhost), the port (by default is
5432), the database name (by default is postgres) and the schema (by default is
public).</p>
Create your first migration to test if Prisma can connect to your local
database:</p>
npx prisma migrate dev --name init</span></span></code></pre>
If everything is ok, you’ll see a new /migrations directory with a new file
inside.</p>

If you have an error, make sure you can connect to your local DB. Delete, and
create the container again if necessary.</p>
</blockquote>
2.4 Config Auth.js</h3>
Add this models to your prisma schema</strong>:</p>
model Account {</span></span>
  id                String  @id @default(cuid())</span></span>
  userId            String</span></span>
  type              String</span></span>
  provider          String</span></span>
  providerAccountId String</span></span>
  refresh_token     String? @db.Text</span></span>
  access_token      String? @db.Text</span></span>
  expires_at        Int?</span></span>
  token_type        String?</span></span>
  scope             String?</span></span>
  id_token          String? @db.Text</span></span>
  session_state     String?</span></span>
</span>
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
</span>
  @@unique([provider, providerAccountId])</span></span>
}</span></span>
</span>
model Session {</span></span>
  id           String   @id @default(cuid())</span></span>
  sessionToken String   @unique</span></span>
  userId       String</span></span>
  expires      DateTime</span></span>
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
}</span></span>
</span>
model User {</span></span>
  id            String    @id @default(cuid())</span></span>
  name          String?</span></span>
  email         String?   @unique</span></span>
  emailVerified DateTime?</span></span>
  image         String?</span></span>
  accounts      Account[]</span></span>
  sessions      Session[]</span></span>
}</span></span>
</span>
model VerificationToken {</span></span>
  identifier String</span></span>
  token      String   @unique</span></span>
  expires    DateTime</span></span>
</span>
  @@unique([identifier, token])</span></span>
}</span></span></code></pre>
These models are for Auth.js</strong>, now we can install it with the prisma adapter:</p>
npm install @prisma/client @auth/prisma-adapter</span></span></code></pre>
Instal nodemailer too, as we’ll use magic links for authentication:</p>
npm install nodemailer -D</span></span></code></pre>
Now create a src/utils/db.ts</code> and initialize prisma</strong>:</p>
import { PrismaClient } from "@prisma/client";</span></span>
</span>
const prismaClientSingleton = () => {</span></span>
  return new PrismaClient();</span></span>
};</span></span>
</span>
declare global {</span></span>
  var prisma: undefined | ReturnType<typeof prismaClientSingleton>;</span></span>
}</span></span>
</span>
const prisma = globalThis.prisma ?? prismaClientSingleton();</span></span>
</span>
export default prisma;</span></span>
</span>
if (process.env.NODE_ENV !== "production") globalThis.prisma = prisma;</span></span></code></pre>
Then, create a src/utils/auth.ts</code> file to config Auth.js</strong>:</p>
import type { NextAuthOptions } from "next-auth";</span></span>
import { PrismaAdapter } from "@auth/prisma-adapter";</span></span>
import EmailProvider from "next-auth/providers/email";</span></span>
import prisma from "@/libs/db";</span></span>
import { Adapter } from "next-auth/adapters";</span></span>
</span>
export const authOptions = {</span></span>
  adapter: PrismaAdapter(prisma) as Adapter,</span></span>
  providers: [</span></span>
    EmailProvider({</span></span>
      server: {</span></span>
        host: process.env.EMAIL_SERVER_HOST,</span></span>
        port: process.env.EMAIL_SERVER_PORT,</span></span>
        auth: {</span></span>
          user: process.env.EMAIL_SERVER_USER,</span></span>
          pass: process.env.EMAIL_SERVER_PASSWORD,</span></span>
        },</span></span>
      },</span></span>
      from: process.env.EMAIL_FROM,</span></span>
    }),</span></span>
  ],</span></span>
  callbacks: {</span></span>
    session: async ({ session, user }) => {</span></span>
      return {</span></span>
        ...session,</span></span>
        user: user,</span></span>
      };</span></span>
    },</span></span>
  },</span></span>
} satisfies NextAuthOptions;</span></span></code></pre>
This config is for using an email provider, for this project we’ll use
Resend</a>.</p>
Create an account and get the next credentials in your .env file:</p>

EMAIL_SERVER_HOST: smtp.resend.com</li>
EMAIL_SERVER_PORT: 465</li>
EMAIL_SERVER_USER: resend</li>
EMAIL_FROM: onboarding@resend(dot)dev</li>
EMAIL_SERVER_PASSWORD: yor api key</li>
</ul>
Now, create a src/app/api/auth/[...nextauth]/route.ts</code> file:</p>
import { authOptions } from "@/libs/auth";</span></span>
import NextAuth from "next-auth/next";</span></span>
</span>
const handler = NextAuth(authOptions);</span></span>
</span>
export { handler as GET, handler as POST };</span></span></code></pre>
This file is for handling the authentication in our app.</p>
You can now authenticate users with a magic link sent by email.</p>
Create a src/app/auth/signin-form.tsx</code> file:</p>
"use client";</span></span>
</span>
import { useState } from "react";</span></span>
import { signIn } from "next-auth/react";</span></span>
</span>
export default function SigninForm() {</span></span>
  const [email, setEmail] = useState<null | string>(null);</span></span>
</span>
  async function handleSubmit() {</span></span>
    await signIn("email", {</span></span>
      email,</span></span>
      callbackUrl: `${window.location.origin}`,</span></span>
    });</span></span>
  }</span></span>
</span>
  return (</span></span>
    <form className="mt-5 space-y-4" action={handleSubmit}></span></span>
      <section className="flex flex-col gap-2"></span></span>
        <label htmlFor="email">Email</label></span></span>
        <input</span></span>
          id="email"</span></span>
          type="email"</span></span>
          name="email"</span></span>
          onChange={(e) => setEmail(e.target.value)}</span></span>
          className="w-max p-1 border border-slate-400"</span></span>
        /></span></span>
      </section></span></span>
      <button type="submit">Sign in</button></span></span>
    </form></span></span>
  );</span></span>
}</span></span></code></pre>
Import it to your src/app/auth/page.tsx</code> file:</p>
import { authOptions } from "@/libs/auth";</span></span>
import { getServerSession } from "next-auth";</span></span>
import { redirect } from "next/navigation";</span></span>
import SigninForm from "./form";</span></span>
</span>
export default async function Signin() {</span></span>
  const session = await getServerSession(authOptions);</span></span>
</span>
  if (session) {</span></span>
    return redirect("/");</span></span>
  }</span></span>
</span>
  return (</span></span>
    <></span></span>
      <h1>Sign in</h1></span></span>
</span>
      <SigninForm /></span></span>
    </></span></span>
  );</span></span>
}</span></span></code></pre>
As you can see, you can redirect users if they’re not authenticated getting the
session with getServerSession</strong>.</p>
3. Improve your UI</h2>
Let’s create a short posts like app.</p>
First, add some shadcn/ui components and update your components, we’ll create
new components too:</p>
npx shadcn-ui@latest add button</span></span></code></pre>npx shadcn-ui@latest add dialog</span></span></code></pre>npx shadcn-ui@latest add input</span></span></code></pre>npx shadcn-ui@latest add textarea</span></span></code></pre>npx shadcn-ui@latest add form</span></span></code></pre>npx shadcn-ui@latest add label</span></span></code></pre>npx shadcn-ui@latest add sonner</span></span></code></pre>
We’ll add the endpoints URL for these components, but we’ll create them later.</p>
src/app/auth/signin-form.tsx</code></p>
Here we’ll update the UI and add form validation.</p>
"use client";</span></span>
</span>
import { signIn } from "next-auth/react";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import {</span></span>
  Form,</span></span>
  FormControl,</span></span>
  FormField,</span></span>
  FormItem,</span></span>
  FormLabel,</span></span>
  FormMessage,</span></span>
} from "@/components/ui/form";</span></span>
import { Input } from "@/components/ui/input";</span></span>
import { Textarea } from "@/components/ui/textarea";</span></span>
import { useForm } from "react-hook-form";</span></span>
import * as z from "zod";</span></span>
import { zodResolver } from "@hookform/resolvers/zod";</span></span>
</span>
const formSchema = z.object({</span></span>
  email: z.string().email(),</span></span>
});</span></span>
</span>
export default function SigninForm() {</span></span>
  const form = useForm<z.infer<typeof formSchema>>({</span></span>
    resolver: zodResolver(formSchema),</span></span>
    defaultValues: {</span></span>
      email: "",</span></span>
    },</span></span>
  });</span></span>
</span>
  async function onSubmit({ email }: z.infer<typeof formSchema>) {</span></span>
    await signIn("email", {</span></span>
      email,</span></span>
      callbackUrl: `${window.location.origin}`,</span></span>
    });</span></span>
  }</span></span>
</span>
  return (</span></span>
    <Form {...form}></span></span>
      <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}></span></span>
        <FormField</span></span>
          control={form.control}</span></span>
          name="email"</span></span>
          render={({ field }) => (</span></span>
            <FormItem></span></span>
              <FormLabel>Email</FormLabel></span></span>
              <FormControl></span></span>
                <Input placeholder="address@example.com" {...field} /></span></span>
              </FormControl></span></span>
              <FormMessage /></span></span>
            </FormItem></span></span>
          )}</span></span>
        /></span></span>
        <Button className="w-full" type="submit"></span></span>
          Send magic link</span></span>
        </Button></span></span>
      </form></span></span>
    </Form></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/create.tsx</code></p>
Update UI components and form validation.</p>
"use client";</span></span>
</span>
import { useState } from "react";</span></span>
import {</span></span>
  Dialog,</span></span>
  DialogContent,</span></span>
  DialogDescription,</span></span>
  DialogHeader,</span></span>
  DialogTitle,</span></span>
  DialogTrigger,</span></span>
} from "@/components/ui/dialog";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import {</span></span>
  Form,</span></span>
  FormControl,</span></span>
  FormField,</span></span>
  FormItem,</span></span>
  FormLabel,</span></span>
  FormMessage,</span></span>
} from "@/components/ui/form";</span></span>
import { Input } from "@/components/ui/input";</span></span>
import { Textarea } from "@/components/ui/textarea";</span></span>
import { useForm } from "react-hook-form";</span></span>
import * as z from "zod";</span></span>
import { zodResolver } from "@hookform/resolvers/zod";</span></span>
import { useRouter } from "next/navigation";</span></span>
import { toast } from "sonner";</span></span>
import { SessionProps } from "./types";</span></span>
</span>
const formSchema = z.object({</span></span>
  title: z.string().min(1).max(100),</span></span>
  content: z.string().min(1),</span></span>
});</span></span>
</span>
export default function CreatePost(props: SessionProps) {</span></span>
  const [open, setOpen] = useState(false);</span></span>
  const router = useRouter();</span></span>
  const form = useForm<z.infer<typeof formSchema>>({</span></span>
    resolver: zodResolver(formSchema),</span></span>
    defaultValues: {</span></span>
      title: "",</span></span>
      content: "",</span></span>
    },</span></span>
  });</span></span>
</span>
  async function onSubmit(values: z.infer<typeof formSchema>) {</span></span>
    try {</span></span>
      const res = await fetch("/api/posts", {</span></span>
        method: "POST",</span></span>
        headers: { "Content-Type": "application/json" },</span></span>
        body: JSON.stringify({</span></span>
          ...values,</span></span>
          authorId: props.session.user?.id,</span></span>
        }),</span></span>
      });</span></span>
      const json = await res.json();</span></span>
</span>
      if (!res.ok) {</span></span>
        toast(json.message);</span></span>
</span>
        return;</span></span>
      }</span></span>
</span>
      toast("Post created!");</span></span>
      form.reset();</span></span>
      setOpen(false);</span></span>
      router.refresh();</span></span>
    } catch (error) {</span></span>
      console.error(error);</span></span>
    }</span></span>
  }</span></span>
</span>
  return (</span></span>
    <Dialog open={open} onOpenChange={setOpen}></span></span>
      <DialogTrigger asChild></span></span>
        <Button>Create post</Button></span></span>
      </DialogTrigger></span></span>
      <DialogContent className="max-w-[300px]"></span></span>
        <DialogHeader className="text-left"></span></span>
          <DialogTitle>Create post</DialogTitle></span></span>
          <DialogDescription></span></span>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.</span></span>
          </DialogDescription></span></span>
        </DialogHeader></span></span>
        <Form {...form}></span></span>
          <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="title"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Title</FormLabel></span></span>
                  <FormControl></span></span>
                    <Input placeholder="Hi there!" {...field} /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="content"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Content</FormLabel></span></span>
                  <FormControl></span></span>
                    <Textarea</span></span>
                      placeholder="Testing this great app!"</span></span>
                      {...field}</span></span>
                    /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <Button className="w-full" type="submit"></span></span>
              Post</span></span>
            </Button></span></span>
          </form></span></span>
        </Form></span></span>
      </DialogContent></span></span>
    </Dialog></span></span>
  );</span></span>
}</span></span></code></pre>
src/app/page.tsx</code></p>
Fetch data from Prisma, as this page is a server component, we can fetch it
directly.</p>
import { authOptions } from "@/libs/auth";</span></span>
import { getServerSession } from "next-auth";</span></span>
import prisma from "@/libs/db";</span></span>
import CreatePost from "@/components/post/create";</span></span>
import Post from "@/components/post";</span></span>
</span>
export default async function Home() {</span></span>
  const session = await getServerSession(authOptions);</span></span>
</span>
  // You can fetch data to Prisma in server components</span></span>
  const posts = await prisma.post.findMany({</span></span>
    include: {</span></span>
      author: true,</span></span>
    },</span></span>
  });</span></span>
</span>
  return (</span></span>
    <></span></span>
      <h1 className="mb-5 font-bold text-xl">Home</h1></span></span>
      {session ? (</span></span>
        <></span></span>
          <CreatePost session={session} /></span></span>
        </></span></span>
      ) : (</span></span>
        <></span></span>
          <p>You are not logged in</p></span></span>
        </></span></span>
      )}</span></span>
      <h3 className="text-lg font-semibold mt-10">Posts</h3></span></span>
      <ul className="mt-5 space-y-2.5"></span></span>
        {posts.length > 0 ? (</span></span>
          posts.map((post) => (</span></span>
            <li key={post.id}></span></span>
              <Post {...post} session={session} /></span></span>
            </li></span></span>
          ))</span></span>
        ) : (</span></span>
          <p>No posts</p></span></span>
        )}</span></span>
      </ul></span></span>
    </></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/item.tsx</code></p>
"use client";</span></span>
</span>
import DeletePost from "./delete";</span></span>
import EditPost from "./edit";</span></span>
import { TPostProps } from "./types";</span></span>
</span>
export default function PostItem(props: TPostProps) {</span></span>
  return (</span></span>
    <article className="w-max p-2 border border-slate-500 rounded-md"></span></span>
      <header className="flex justify-between items-center"></span></span>
        <h2 className="font-bold text-lg">{props.title}</h2></span></span>
        {props.session?.user?.id === props.authorId && (</span></span>
          <section className="space-x-2"></span></span>
            <EditPost {...props} /></span></span>
            <DeletePost {...props} /></span></span>
          </section></span></span>
        )}</span></span>
      </header></span></span>
      <p>{props.content}</p></span></span>
      <span className="text-sm"></span></span>
        Posted by {props.author?.email || "anon"} at{" "}</span></span>
        {new Date(props.createdAt).toLocaleString()}</span></span>
      </span></span></span>
    </article></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/edit.tsx</code></p>
Create a button icon for opening a dialog rendering the post data for editing,
add validation and fetch to the API endpoint.</p>
"use client";</span></span>
</span>
import { useState } from "react";</span></span>
import { Edit } from "lucide-react";</span></span>
import {</span></span>
  Dialog,</span></span>
  DialogClose,</span></span>
  DialogContent,</span></span>
  DialogDescription,</span></span>
  DialogHeader,</span></span>
  DialogTitle,</span></span>
  DialogTrigger,</span></span>
} from "@/components/ui/dialog";</span></span>
import {</span></span>
  Form,</span></span>
  FormControl,</span></span>
  FormField,</span></span>
  FormItem,</span></span>
  FormLabel,</span></span>
  FormMessage,</span></span>
} from "@/components/ui/form";</span></span>
import { Input } from "@/components/ui/input";</span></span>
import { Textarea } from "@/components/ui/textarea";</span></span>
import { useForm } from "react-hook-form";</span></span>
import * as z from "zod";</span></span>
import { zodResolver } from "@hookform/resolvers/zod";</span></span>
import { useRouter } from "next/navigation";</span></span>
import { toast } from "sonner";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import { TPostProps } from "./types";</span></span>
</span>
const formSchema = z.object({</span></span>
  title: z.string().min(1).max(100),</span></span>
  content: z.string().min(1),</span></span>
});</span></span>
</span>
export default function EditPost(props: TPostProps) {</span></span>
  const [open, setOpen] = useState(false);</span></span>
  const router = useRouter();</span></span>
  const form = useForm<z.infer<typeof formSchema>>({</span></span>
    resolver: zodResolver(formSchema),</span></span>
    defaultValues: {</span></span>
      title: props.title,</span></span>
      content: props.content,</span></span>
    },</span></span>
  });</span></span>
</span>
  async function onSubmit(values: z.infer<typeof formSchema>) {</span></span>
    try {</span></span>
      const res = await fetch("/api/posts", {</span></span>
        method: "PUT",</span></span>
        headers: { "Content-Type": "application/json" },</span></span>
        body: JSON.stringify({</span></span>
          ...values,</span></span>
          id: props.id,</span></span>
        }),</span></span>
      });</span></span>
      const json = await res.json();</span></span>
</span>
      if (!res.ok) {</span></span>
        toast(json.message);</span></span>
</span>
        return;</span></span>
      }</span></span>
</span>
      toast("Post edited!");</span></span>
      form.reset();</span></span>
      setOpen(false);</span></span>
      router.refresh();</span></span>
    } catch (error) {</span></span>
      console.error(error);</span></span>
    }</span></span>
  }</span></span>
</span>
  return (</span></span>
    <Dialog open={open} onOpenChange={setOpen}></span></span>
      <DialogTrigger asChild></span></span>
        <Button variant="secondary" size="icon"></span></span>
          <Edit /></span></span>
        </Button></span></span>
      </DialogTrigger></span></span>
      <DialogContent className="max-w-[300px]"></span></span>
        <DialogHeader className="text-left"></span></span>
          <DialogTitle>Edit post</DialogTitle></span></span>
          <DialogDescription></span></span>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.</span></span>
          </DialogDescription></span></span>
        </DialogHeader></span></span>
        <Form {...form}></span></span>
          <form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="title"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Title</FormLabel></span></span>
                  <FormControl></span></span>
                    <Input placeholder="Hi there!" {...field} /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <FormField</span></span>
              control={form.control}</span></span>
              name="content"</span></span>
              render={({ field }) => (</span></span>
                <FormItem></span></span>
                  <FormLabel>Content</FormLabel></span></span>
                  <FormControl></span></span>
                    <Textarea</span></span>
                      placeholder="Testing this great app!"</span></span>
                      {...field}</span></span>
                    /></span></span>
                  </FormControl></span></span>
                  <FormMessage /></span></span>
                </FormItem></span></span>
              )}</span></span>
            /></span></span>
            <DialogClose asChild></span></span>
              <Button className="w-full" type="submit"></span></span>
                Edit post</span></span>
              </Button></span></span>
            </DialogClose></span></span>
          </form></span></span>
        </Form></span></span>
      </DialogContent></span></span>
    </Dialog></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/delete.tsx</code></p>
Create a button icon for opening a dialog for deleting the post, add validation
and fetch to the API endpoint.</p>
"use client";</span></span>
</span>
import { LucideTrash2 } from "lucide-react";</span></span>
import { Button } from "@/components/ui/button";</span></span>
import {</span></span>
  Dialog,</span></span>
  DialogClose,</span></span>
  DialogContent,</span></span>
  DialogDescription,</span></span>
  DialogHeader,</span></span>
  DialogTitle,</span></span>
  DialogTrigger,</span></span>
} from "@/components/ui/dialog";</span></span>
import { useRouter } from "next/navigation";</span></span>
import { toast } from "sonner";</span></span>
import { TPostProps } from "./types";</span></span>
</span>
export default function DeletePost(props: TPostProps) {</span></span>
  const router = useRouter();</span></span>
</span>
  async function handleDelete() {</span></span>
    try {</span></span>
      const res = await fetch("/api/posts", {</span></span>
        method: "DELETE",</span></span>
        headers: { "Content-Type": "application/json" },</span></span>
        body: JSON.stringify({</span></span>
          id: props.id,</span></span>
        }),</span></span>
      });</span></span>
      const json = await res.json();</span></span>
</span>
      if (!res.ok) {</span></span>
        toast(json.message);</span></span>
</span>
        return;</span></span>
      }</span></span>
</span>
      toast("Post deleted!");</span></span>
      router.refresh();</span></span>
    } catch (error) {</span></span>
      console.error(error);</span></span>
    }</span></span>
  }</span></span>
  return (</span></span>
    <Dialog></span></span>
      <DialogTrigger asChild></span></span>
        <Button variant="destructive" size="icon"></span></span>
          <LucideTrash2 /></span></span>
        </Button></span></span>
      </DialogTrigger></span></span>
      <DialogContent className="max-w-[300px]"></span></span>
        <DialogHeader className="text-left"></span></span>
          <DialogTitle>Delete post</DialogTitle></span></span>
          <DialogDescription></span></span>
            Are you sure you want to <strong>delete</strong> this post? This</span></span>
            action cannot be undone.</span></span>
          </DialogDescription></span></span>
        </DialogHeader></span></span>
        <footer className="flex flex-col gap-2"></span></span>
          <DialogClose asChild></span></span>
            <Button variant="secondary" className="w-full"></span></span>
              No, keep post</span></span>
            </Button></span></span>
          </DialogClose></span></span>
          <DialogClose asChild></span></span>
            <Button</span></span>
              onClick={handleDelete}</span></span>
              variant="destructive"</span></span>
              className="w-full"</span></span>
            ></span></span>
              Yes, delete post</span></span>
            </Button></span></span>
          </DialogClose></span></span>
        </footer></span></span>
      </DialogContent></span></span>
    </Dialog></span></span>
  );</span></span>
}</span></span></code></pre>
src/components/post/types.ts</code></p>
type SessionProps = {</span></span>
  session: any;</span></span>
};</span></span>
</span>
type TPostProps = {</span></span>
  author: {</span></span>
    id: string;</span></span>
    name: string | null;</span></span>
    email: string | null;</span></span>
    emailVerified: Date | null;</span></span>
    image: string | null;</span></span>
  } | null;</span></span>
  id: string;</span></span>
  createdAt: Date;</span></span>
  updatedAt: Date;</span></span>
  title: string;</span></span>
  content: string;</span></span>
  authorId: string | null;</span></span>
  session: any;</span></span>
};</span></span>
</span>
export type { SessionProps, TPostProps };</span></span></code></pre>
src/components/sign-out.tsx</code></p>
A simple sign out button.</p>
"use client";</span></span>
</span>
import { signOut } from "next-auth/react";</span></span>
import { Button } from "./ui/button";</span></span>
</span>
export default function SignOut() {</span></span>
  return <Button onClick={() => signOut()}>Sign out</Button>;</span></span>
}</span></span></code></pre>
src/components/navbar.tsx</code></p>
Render the sign out or sign in button depending if the user is logged in or not.</p>
import Link from "next/link";</span></span>
import { Button } from "./ui/button";</span></span>
import { getServerSession } from "next-auth";</span></span>
import { authOptions } from "@/libs/auth";</span></span>
import SignOut from "./sign-out";</span></span>
</span>
export default async function Navbar() {</span></span>
  const session = await getServerSession(authOptions);</span></span>
</span>
  return (</span></span>
    <nav className="w-full p-4 border-b flex justify-between items-center"></span></span>
      <section></span></span>
        <Button variant="link" className="px-0 font-semibold text-lg"></span></span>
          <Link href="/">Fullstack app</Link></span></span>
        </Button></span></span>
      </section></span></span>
      <section></span></span>
        {session ? (</span></span>
          <SignOut /></span></span>
        ) : (</span></span>
          <Button asChild></span></span>
            <Link href="/auth">Sign in</Link></span></span>
          </Button></span></span>
        )}</span></span>
      </section></span></span>
    </nav></span></span>
  );</span></span>
}</span></span></code></pre>
src/app/layout.tsx</code></p>
Add your Navbar</strong> and Toaster</strong> components and some styles.</p>
import { Inter } from "next/font/google";</span></span>
import Navbar from "@/components/navbar";</span></span>
import { Toaster } from "@/components/ui/sonner";</span></span>
import "./globals.css";</span></span>
</span>
const inter = Inter({ subsets: ["latin"] });</span></span>
</span>
interface Props extends React.PropsWithChildren {}</span></span>
</span>
export default function RootLayout(props: Props) {</span></span>
  return (</span></span>
    <html lang="en"></span></span>
      <body className={inter.className}></span></span>
        <Navbar /></span></span>
        <main className="px-4 py-8">{props.children}</main></span></span>
        <Toaster /></span></span>
      </body></span></span>
    </html></span></span>
  );</span></span>
}</span></span></code></pre>4. Add CRUD functionality</h2>
Now we can add Create, Read, Update and Delete functionality to our app.</p>
prisma/schema.prisma</code></p>
Update your Prisma schema adding to User model a relationship with Post model:</p>
generator client {</span></span>
  provider = "prisma-client-js"</span></span>
}</span></span>
</span>
datasource db {</span></span>
  provider = "postgresql"</span></span>
  url      = env("DATABASE_URL")</span></span>
}</span></span>
</span>
model Account {</span></span>
  id                String  @id @default(cuid())</span></span>
  userId            String</span></span>
  type              String</span></span>
  provider          String</span></span>
  providerAccountId String</span></span>
  refresh_token     String? @db.Text</span></span>
  access_token      String? @db.Text</span></span>
  expires_at        Int?</span></span>
  token_type        String?</span></span>
  scope             String?</span></span>
  id_token          String? @db.Text</span></span>
  session_state     String?</span></span>
</span>
  user User @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
</span>
  @@unique([provider, providerAccountId])</span></span>
}</span></span>
</span>
model Session {</span></span>
  id           String   @id @default(cuid())</span></span>
  sessionToken String   @unique</span></span>
  userId       String</span></span>
  expires      DateTime</span></span>
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)</span></span>
}</span></span>
</span>
model User {</span></span>
  id            String    @id @default(cuid())</span></span>
  name          String?</span></span>
  email         String?   @unique</span></span>
  emailVerified DateTime?</span></span>
  image         String?</span></span>
  accounts      Account[]</span></span>
  sessions      Session[]</span></span>
  posts         Post[]</span></span>
}</span></span>
</span>
model VerificationToken {</span></span>
  identifier String</span></span>
  token      String   @unique</span></span>
  expires    DateTime</span></span>
</span>
  @@unique([identifier, token])</span></span>
}</span></span>
</span>
model Post {</span></span>
  id        String   @id @default(cuid())</span></span>
  createdAt DateTime @default(now())</span></span>
  updatedAt DateTime @updatedAt</span></span>
  title     String</span></span>
  content   String</span></span>
  author    User     @relation(fields: [authorId], references: [id])</span></span>
  authorId  String</span></span>
}</span></span></code></pre>
Generate a new Prisma migration:</p>
npx prisma migrate dev --name add-posts</span></span></code></pre>
Now, create a src/app/api/posts/route.ts</code> file with a POST</strong>, PUT</strong> and
DELETE</strong> async functions:</p>
import prisma from "@/libs/db";</span></span>
import { NextRequest, NextResponse } from "next/server";</span></span>
</span>
export async function POST(req: Request) {</span></span>
  try {</span></span>
    if (!req.body) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 400,</span></span>
        message: "Data required",</span></span>
      });</span></span>
    }</span></span>
</span>
    const json = await req.json();</span></span>
    const res = await prisma.post.create({</span></span>
      data: json,</span></span>
    });</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: true,</span></span>
      status: 201,</span></span>
      data: res,</span></span>
    });</span></span>
  } catch (error) {</span></span>
    if (error instanceof Error) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 500,</span></span>
        message: error.message,</span></span>
      });</span></span>
    }</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: false,</span></span>
      status: 500,</span></span>
      message: "Internal server error",</span></span>
    });</span></span>
  }</span></span>
}</span></span>
</span>
export async function PUT(req: NextRequest) {</span></span>
  try {</span></span>
    const body = await req.json();</span></span>
    const res = await prisma.post.update({</span></span>
      where: { id: body.id },</span></span>
      data: {</span></span>
        title: body.title,</span></span>
        content: body.content,</span></span>
      },</span></span>
    });</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: true,</span></span>
      status: 200,</span></span>
      data: res,</span></span>
    });</span></span>
  } catch (error) {</span></span>
    if (error instanceof Error) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 500,</span></span>
        message: error.message,</span></span>
      });</span></span>
    }</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: false,</span></span>
      status: 500,</span></span>
      message: "Internal server error",</span></span>
    });</span></span>
  }</span></span>
}</span></span>
</span>
export async function DELETE(req: NextRequest) {</span></span>
  try {</span></span>
    const body = await req.json();</span></span>
    const res = await prisma.post.delete({</span></span>
      where: { id: body.id },</span></span>
    });</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: true,</span></span>
      status: 200,</span></span>
      data: res,</span></span>
    });</span></span>
  } catch (error) {</span></span>
    if (error instanceof Error) {</span></span>
      return NextResponse.json({</span></span>
        ok: false,</span></span>
        status: 500,</span></span>
        message: error.message,</span></span>
      });</span></span>
    }</span></span>
</span>
    return NextResponse.json({</span></span>
      ok: false,</span></span>
      status: 500,</span></span>
      message: "Internal server error",</span></span>
    });</span></span>
  }</span></span>
}</span></span></code></pre>
Try creating a post in the home.</p>
The page will refresh and you’ll see the post, as you created it, only you can
edit or delete it.</p>
5. Conclusion</h2>
As you can see, create a fullstack app with Next.js and Prisma is really easy.</p>
Of course, it could be improved, adding server side validation for inputs,
adding pagination for posts in the home, etc.</p>

How Computers Works

2023-05-29T00:00:00+00:00

Today we use, in some way, the computer in almost every activity in our lives, it could be for work or just fun, but if we think carefully, computers are an invention from the previous century, and have changed our lives.</p>

New works have appeared, new careers to study, and new problems to be solved.</p>

However, do we know how computers penetrated our lives? Do we know how a computer works? How does the Internet work?</p>

Many people use their smartphones to communicate with family and friends and to share their lives, but they don’t know how all this is possible.</p>

I’m not saying that everyone needs to be a Software Engineer or IT Expert, but knowing about this could be outstanding knowledge.</p>

The power of computers</h2>
Computers can expand our brains, such things like sends messages to people from the other side of the Earth, to create an app that speeds up delivery.</p>
All these things are possible by flipping 0’s and 1’s, but how is this possible?</p>
If you’ve watched The Imitation Code, maybe you know this story.</p>

Computing Fundaments</h3>
Alan Turing was the inventor of the Turing Machine, a simple but powerful machine that can receive instructions to move along a long tape, changing the state of each slot. This three things, a head, a long tape and a set of instructions are the bases for the modern computers.</p>
The head is the Central Processing Unit (CPU), a piece of hardware that can be used for general purposes, receiving instructions (Algorithm) whose are transformed to electric pulses, understanding if electricity pass trough or not, if it’s true or false, 1 or 0. All these instructions are saved in a Random Access Memory (RAM) for a quick access of the work that needs to be accomplished, and using a Read-Only Memory (ROM) to store persistent data that needs to be saved even if the computer shuts down.</p>
An algorithm’s like a recipe, declaring ingredients (variables) and the steps to follow to achieve the result (functions).</p>
A variable is an identifier that points to a slot of memory in the RAM, storing a value that can be a number, a text (known as “string”), a boolean (true or false), or an object (a set of multiple variables and functions that can be instanced), etc.</p>
Functions are blocks of instructions that achieve a task, like obtaining your current location or sending a message.</p>
And maybe you are asking, how do I tell a computer how to do what I want?</p>

Programming languages</h3>
If you try to speak with someone who doesn’t speak the same language as you, you try to use a translator or use gestures, something that you know that both can in some way understand, the same is for computers.</p>
Computers are powerful, but they need someone to tell them what to do, this is work for humans, and to achieve it we use programming languages. With a programming language you use a specific syntax to tell a computer your desired task, then you compile that file where you type all your instructions, when a file compiles, is transformed to a computer nature language (1’s and 0’s) and then the computer executes the task.</p>
There are different programming languages, and all of them are designed to achieve specific needs, like the programming languages C and C++, both are low-level languages, which means that are close to how a computer “speaks” and are used to control and administrate memory in high-efficient apps, or to illuminate the screen of your computer.</p>
There is Java, is a language that can create an environment when is compiled, meaning that can be used on almost every computer.</p>
JavaScript (is NOT Java or something like that) is a language that our browsers understands, with the help of JavaScript, we can access to a web page and see nice interactions when we click a button, login with a username and password, and more.</p>
JavaScript is a high-level language, that is easiest to learn than Java or C, but not that is worse or better, just resolves a different need.</p>

The Browser</h3>
A powerful software that can access other computers using the Hyper Text Transfer Protocol (HTTP), it means that thanks to this protocol different computers can send and receive information to communicate, even if they’re far away. The browsers receive data in the form of a file, mainly three:</p>

Hyper Text Markup Language (HTML)</li>
Cascading Styles Sheet (CSS)</li>
JavaScript</li> </ul>
HTML</h3>
Helps the browser to structure data like texts or images, using a markup language (tags). The browser can know where to put an input to type your email or a button to subscribe to your favorite artist.</p>
CSS</h3>
It gives colors and forms to the HTML tags using selectors. It can be used to change page’s background color, change button’s rounded borders, modify text color, and everything your creativity can give.</p>
JavaScript</h3>
Combining HTML and CSS with JavaScript creates an interactive web site, or web app (like this one). You can for example, add a button that changes the theme to dark/light, or store items in a shopping cart and show a number of items you have.</p>
For all this you need to store your files somewhere, letting people access a computer to download all these files using their browsers, that’s the functionality of servers.</p>
Servers are computers that are connected to the Internet, and store files that can be downloaded or uploaded using protocols and security rules. Some companies like Google or Microsoft have multiple centers with many servers in different regions of the planet, called Data Centers, and can be used with a fee for storing your web app, these multiple Data Centers are called Cloud.</p>
The Cloud</h3>
Administrating a powerful computer can be difficult, but if you know how to use it, you can save a lot of money instead of maintaining local computers that need to be turned on 24/7. Thanks to the cloud we can deliver the fastest apps, and we can have a 24/7 service for our customers with a marginal cost.</p>
Computers Changed Humanity</h2>
Computers simplifies our daily tasks, software can be easy replicated and distributed without need of logistics like a tangible product. You just need an Internet connection to reach someone’s project.</p>
You don’t need a factory or natural resources like wood to produce paper, you need a group of engineers, UX/UI designers, digital marketers, and more IT people to reach billions of customers.</p>
The reason that computers are too powerful is that the marginal cost is minimal, you don’t need to extract something from the earth to build an app, you need a group of talented persons that uses their brains to create solutions.</p>

Additional Resources</h2>
Search for more services that respect your privacy and data.</p>

Monerica</a></li>
kycnot.me</a></li> </ul>

More About RSS</h2>

Privacy Tools - RSS Feed Readers</a></li>
Privacy Guides - News Aggregators</a></li> </ul>

5. Conclusion</h2>
As you can see, create a fullstack app with Next.js and Prisma is really easy.</p>
Of course, it could be improved, adding server side validation for inputs, adding pagination for posts in the home, etc.</p>

Happy holidays!</h3>
</p>

More content coming soon!</h2>
I’ll keep updating with posts, features and more content to share my experience, and know I’m writing this paragraph, I think the next feature it would be a newsletter to notify people when I create a new post. Time to work!</p>

Survival Handbook Against the Massive Surveillance

Mobile Phone</h2>
Google Pixels are the best mobile phones in terms of security, so much so that it’s the only hardware compatible with GrapheneOS, the most secure and private Operating System based on Android available for pocket devices.</p>

Privacy Must Be Taken More Seriously

Website migrated to Astro

A Better Way for Consuming Content

Build a fullstack web app

Next Intl Blog Template

Rewind 2023 and future plans

I participated in a Hackathon

The Monotony of Social Media

How Computers Works

HTML</h3>
Helps the browser to structure data like texts or images, using a markup language (tags). The browser can know where to put an input to type your email or a button to subscribe to your favorite artist.</p>

CSS</h3>
It gives colors and forms to the HTML tags using selectors. It can be used to change page’s background color, change button’s rounded borders, modify text color, and everything your creativity can give.</p>

The Reason to Create a Version 2.0 of my Website

Survival Handbook Against the Massive Surveillance

Mobile Phone</h2> Google Pixels are the best mobile phones in terms of security, so much so that it’s the only hardware compatible with GrapheneOS, the most secure and private Operating System based on Android available for pocket devices.</p>

Additional Resources</h2> Search for more services that respect your privacy and data.</p>

Privacy Must Be Taken More Seriously

Website migrated to Astro

A Better Way for Consuming Content

Adding Social Media Feeds</h3> You can even add feeds from sites like Reddit or YouTube.</p>

Reddit</h4> Just change [SUBREDDIT]</code> for the name of your subreddit to add:</p>

YouTube</h4> Go to the channel to add, then go to the About</strong> tab, then click on Share > Copy channel ID</strong>.</p> Now just change [CHANNEL ID]</code> for the copied one:</p>

Build a fullstack web app

2.1 Install shadcn/ui</h3> This components will help us a lot building the UI</strong> along with TailwindCSS.</p> First, initialize shadcn/ui:</p>

2.3 Install Prisma</h3> Install Prisma using your dependency manager, in this case npm</strong>:</p>

5. Conclusion</h2> As you can see, create a fullstack app with Next.js and Prisma is really easy.</p> Of course, it could be improved, adding server side validation for inputs, adding pagination for posts in the home, etc.</p>

Next Intl Blog Template

Rewind 2023 and future plans

I participated in a Hackathon

The Monotony of Social Media

How Computers Works

HTML</h3> Helps the browser to structure data like texts or images, using a markup language (tags). The browser can know where to put an input to type your email or a button to subscribe to your favorite artist.</p>

CSS</h3> It gives colors and forms to the HTML tags using selectors. It can be used to change page’s background color, change button’s rounded borders, modify text color, and everything your creativity can give.</p>

The Reason to Create a Version 2.0 of my Website

Mobile Phone</h2>
Google Pixels are the best mobile phones in terms of security, so much so that it’s the only hardware compatible with GrapheneOS, the most secure and private Operating System based on Android available for pocket devices.</p>

Additional Resources</h2>
Search for more services that respect your privacy and data.</p>

Monerica</a></li>
kycnot.me</a></li> </ul>

Adding Social Media Feeds</h3>
You can even add feeds from sites like Reddit or YouTube.</p>

5. Conclusion</h2>
As you can see, create a fullstack app with Next.js and Prisma is really easy.</p>
Of course, it could be improved, adding server side validation for inputs, adding pagination for posts in the home, etc.</p>

HTML</h3>
Helps the browser to structure data like texts or images, using a markup language (tags). The browser can know where to put an input to type your email or a button to subscribe to your favorite artist.</p>

CSS</h3>
It gives colors and forms to the HTML tags using selectors. It can be used to change page’s background color, change button’s rounded borders, modify text color, and everything your creativity can give.</p>