Juan Manzanero

A Better Way for Consuming Content

Juan Manzanero — Thu, 11 Apr 2024 06:00:00 GMT

Get your news without visiting websites with algorithms that shows content that you don't want to see.

Algorithms that Dictates What You See

Social media are not designed for showing you the latest and most important news, but for showing you content dictated by an algorithm.

And this content is normally viral, and viral doesn't mean interesting.

Usually this algorithm prioritizes content that get you angry.

Content that promotes negativity gets more clicks rather than those whose promotes positivity.

That's the reason why Twitter and Facebook are full of stupid and irrelevant posts (usually).

Of course, it's really cool when the algorithm shows you content that you like, discovering new people and pages, but that's not usual.

Without mentioning the annoying ads and more stuff that wants you to click it.

Meta (previously Facebook) knows about this, and encourages it in their products like Instagram and Facebook, and the same for Twitter.

The Solution: News Aggregators (RSS)

RSS is an acronym for "Really Simple Syndication".

It's an ancient technology, not promoted so much by companies.

That's because when you read a post in an RSS Reader, you don't need to visit the website, and the website can't show advertisements using Google Ads (for example). You don't generate traffic; your visits don't count, at least not if you don't open the post link in your RSS Reader.

The good thing is that almost every RSS Reader shows you content sorted by date, not by a creepy algorithm that wants you to be mad.

For my website I use a Node.js script that takes the .mdx files inside content/blog and content/portfolio, then generates the RSS Items, those with the rss: true in the metadata.

How to Use an RSS Reader

First, you should download one.

There are many options:

NetNewsWire: a native RSS Reader for macOS and iOS, free and Open Source, my favorite option as an Apple ~~Sinner~~ user
Akregator: from the KDE project for Linux
Feeder: for Android
Raven Reader: desktop cross-platform

Adding Feeds

Now you need to search for the RSS URL on your favorite website, like this one!

https://juanmanzanero.com/rss.xml

If you open it, you'll get a weird page with code similar to HTML.

Once copied, go to your RSS feed and search for "Add feed" or something similar, and paste the link, and you're done! Now you'll get the latest posts from my website.

Adding Social Media Feeds

You can even add feeds from sites like Reddit or YouTube.

Just change [SUBREDDIT] for the name of your subreddit to add:

https://reddit.com/r/[SUBREDDIT]/new/.rss

YouTube

Go to the channel to add, then go to the About tab, then click on Share > Copy channel ID.

Now just change [CHANNEL ID] for the copied one:

https://youtube.com/feeds/videos.xml?channel_id=[CHANNEL ID]

My Favorite Feeds

More About RSS

Build a fullstack web app

Juan Manzanero — Thu, 18 Jan 2024 06:00:00 GMT

GitHub repo

1. Introduction

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

Next.js as meta-framework
TailwindCSS for styling
shadcn/ui for UI components
Prisma as ORM
PostgreSQL as database
Auth.js for authentication
Docker for creating an intance of a PostgreSQL database locally

We'll learn some of the fundamentals of this tech stack, like using server components in Next.js, or creating API endpoints using the app router.

2. Initial setup

Let's start creating a new Next.js project, in your terminal run:

npx create-next-app@latest

Make sure to mark Yes the following options:

Would you like to use TypeScript?
Would you like to use ESLint?
Would you like to use Tailwind CSS?
Would you like to use 'src/' directory?
Would you like to use App Router? (recommended)

> What is your project named? fullstack-app
> Would you like to use TypeScript? No / Yes
> Would you like to use ESLint? No / Yes
> Would you like to use Tailwind CSS? No / Yes
> Would you like to use `src/` directory? No / Yes
> Would you like to use App Router? (recommended) No / Yes
> Would you like to customize the default import alias (@/*)? No / Yes
> What import alias would you like configured? @/*

Wait until the dependencies installation is completed, then access to the project directory:

cd fullstack-app

Open your code editor of your preference.

2.1 Install shadcn/ui

This components will help us a lot building the UI along with TailwindCSS.

First, initialize shadcn/ui:

npx shadcn-ui@latest init

Make sure to config shadcn/ui according your project configuration.

You can check the shadcn/ui docs for every component that you could need, each components is installed individually.

2.2 Create a db using Docker

Make sure to have Docker installed in your machine.

First you need to pull a PostgreSQL image from Docker Hub:

docker pull postgres

Then, create a container with the image:

docker run --name my-postgres -e POSTGRES_PASSWORD=password -p 5432:5432 -d postgres

2.3 Install Prisma

Install Prisma using your dependency manager, in this case npm:

npm install prisma -D

Now initialize Prisma:

npx prisma init

A new ./prisma direcotry will be created in the root of your project, with a schema.prisma file.

You'll create your schemas in this file.

Add this model as an example:

model User {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  email     String   @unique
  name      String?
}

Update your .env file with the following:

DATABASE_URL="postgresql://postgres:password@localhost:5432/postgres?schema=public"

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).

Create your first migration to test if Prisma can connect to your local database:

npx prisma migrate dev --name init

If everything is ok, you'll see a new /migrations directory with a new file inside.

If you have an error, make sure you can connect to your local DB. Delete, and create the container again if necessary.

2.4 Config Auth.js

Add this models to your prisma schema:

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

These models are for Auth.js, now we can install it with the prisma adapter:

npm install @prisma/client @auth/prisma-adapter

Instal nodemailer too, as we'll use magic links for authentication:

npm install nodemailer -D

Now create a src/utils/db.ts and initialize prisma:

import { PrismaClient } from '@prisma/client';

const prismaClientSingleton = () => {
  return new PrismaClient();
};

declare global {
  var prisma: undefined | ReturnType<typeof prismaClientSingleton>;
}

const prisma = globalThis.prisma ?? prismaClientSingleton();

export default prisma;

if (process.env.NODE_ENV !== 'production') globalThis.prisma = prisma;

Then, create a src/utils/auth.ts file to config Auth.js:

import type { NextAuthOptions } from 'next-auth';
import { PrismaAdapter } from '@auth/prisma-adapter';
import EmailProvider from 'next-auth/providers/email';
import prisma from '@/libs/db';
import { Adapter } from 'next-auth/adapters';

export const authOptions = {
  adapter: PrismaAdapter(prisma) as Adapter,
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ],
  callbacks: {
    session: async ({ session, user }) => {
      return {
        ...session,
        user: user,
      };
    },
  },
} satisfies NextAuthOptions;

This config is for using an email provider, for this project we'll use Resend.

Create an account and get the next credentials in your .env file:

EMAIL_SERVER_HOST: smtp.resend.com
EMAIL_SERVER_PORT: 465
EMAIL_SERVER_USER: resend
EMAIL_FROM: onboarding@resend(dot)dev
EMAIL_SERVER_PASSWORD: yor api key

Now, create a src/app/api/auth/[...nextauth]/route.ts file:

import { authOptions } from '@/libs/auth';
import NextAuth from 'next-auth/next';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

This file is for handling the authentication in our app.

You can now authenticate users with a magic link sent by email.

Create a src/app/auth/signin-form.tsx file:

'use client';

import { useState } from 'react';
import { signIn } from 'next-auth/react';

export default function SigninForm() {
  const [email, setEmail] = useState<null | string>(null);

  async function handleSubmit() {
    await signIn('email', {
      email,
      callbackUrl: `${window.location.origin}`,
    });
  }

  return (
    <form className='mt-5 space-y-4' action={handleSubmit}>
      <section className='flex flex-col gap-2'>
        <label htmlFor='email'>Email</label>
        <input
          id='email'
          type='email'
          name='email'
          onChange={(e) => setEmail(e.target.value)}
          className='w-max p-1 border border-slate-400'
        />
      </section>
      <button type='submit'>Sign in</button>
    </form>
  );
}

Import it to your src/app/auth/page.tsx file:

import { authOptions } from '@/libs/auth';
import { getServerSession } from 'next-auth';
import { redirect } from 'next/navigation';
import SigninForm from './form';

export default async function Signin() {
  const session = await getServerSession(authOptions);

  if (session) {
    return redirect('/');
  }

  return (
    <>
      <h1>Sign in</h1>

      <SigninForm />
    </>
  );
}

As you can see, you can redirect users if they're not authenticated getting the session with getServerSession.

3. Improve your UI

Let's create a short posts like app.

First, add some shadcn/ui components and update your components, we'll create new components too:

npx shadcn-ui@latest add button

npx shadcn-ui@latest add dialog

npx shadcn-ui@latest add input

npx shadcn-ui@latest add textarea

npx shadcn-ui@latest add form

npx shadcn-ui@latest add label

npx shadcn-ui@latest add sonner

We'll add the endpoints URL for these components, but we'll create them later.

src/app/auth/signin-form.tsx

Here we'll update the UI and add form validation.

'use client';

import { signIn } from 'next-auth/react';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useForm } from 'react-hook-form';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';

const formSchema = z.object({
  email: z.string().email(),
});

export default function SigninForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: '',
    },
  });

  async function onSubmit({ email }: z.infer<typeof formSchema>) {
    await signIn('email', {
      email,
      callbackUrl: `${window.location.origin}`,
    });
  }

  return (
    <Form {...form}>
      <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name='email'
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input placeholder='address@example.com' {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button className='w-full' type='submit'>
          Send magic link
        </Button>
      </form>
    </Form>
  );
}

src/components/post/create.tsx

Update UI components and form validation.

'use client';

import { useState } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useForm } from 'react-hook-form';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { SessionProps } from './types';

const formSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(1),
});

export default function CreatePost(props: SessionProps) {
  const [open, setOpen] = useState(false);
  const router = useRouter();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: '',
      content: '',
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const res = await fetch('/api/posts', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...values,
          authorId: props.session.user?.id,
        }),
      });
      const json = await res.json();

      if (!res.ok) {
        toast(json.message);

        return;
      }

      toast('Post created!');
      form.reset();
      setOpen(false);
      router.refresh();
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Create post</Button>
      </DialogTrigger>
      <DialogContent className='max-w-[300px]'>
        <DialogHeader className='text-left'>
          <DialogTitle>Create post</DialogTitle>
          <DialogDescription>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
            <FormField
              control={form.control}
              name='title'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Title</FormLabel>
                  <FormControl>
                    <Input placeholder='Hi there!' {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name='content'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Content</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder='Testing this great app!'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button className='w-full' type='submit'>
              Post
            </Button>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}

src/app/page.tsx

Fetch data from Prisma, as this page is a server component, we can fetch it directly.

import { authOptions } from '@/libs/auth';
import { getServerSession } from 'next-auth';
import prisma from '@/libs/db';
import CreatePost from '@/components/post/create';
import Post from '@/components/post';

export default async function Home() {
  const session = await getServerSession(authOptions);

  // You can fetch data to Prisma in server components
  const posts = await prisma.post.findMany({
    include: {
      author: true,
    },
  });

  return (
    <>
      <h1 className='mb-5 font-bold text-xl'>Home</h1>
      {session ? (
        <>
          <CreatePost session={session} />
        </>
      ) : (
        <>
          <p>You are not logged in</p>
        </>
      )}
      <h3 className='text-lg font-semibold mt-10'>Posts</h3>
      <ul className='mt-5 space-y-2.5'>
        {posts.length > 0 ? (
          posts.map((post) => (
            <li key={post.id}>
              <Post {...post} session={session} />
            </li>
          ))
        ) : (
          <p>No posts</p>
        )}
      </ul>
    </>
  );
}

src/components/post/item.tsx

'use client';

import DeletePost from './delete';
import EditPost from './edit';
import { TPostProps } from './types';

export default function PostItem(props: TPostProps) {
  return (
    <article className='w-max p-2 border border-slate-500 rounded-md'>
      <header className='flex justify-between items-center'>
        <h2 className='font-bold text-lg'>{props.title}</h2>
        {props.session?.user?.id === props.authorId && (
          <section className='space-x-2'>
            <EditPost {...props} />
            <DeletePost {...props} />
          </section>
        )}
      </header>
      <p>{props.content}</p>
      <span className='text-sm'>
        Posted by {props.author?.email || 'anon'} at{' '}
        {new Date(props.createdAt).toLocaleString()}
      </span>
    </article>
  );
}

src/components/post/edit.tsx

Create a button icon for opening a dialog rendering the post data for editing, add validation and fetch to the API endpoint.

'use client';

import { useState } from 'react';
import { Edit } from 'lucide-react';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useForm } from 'react-hook-form';
import * as z from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { Button } from '@/components/ui/button';
import { TPostProps } from './types';

const formSchema = z.object({
  title: z.string().min(1).max(100),
  content: z.string().min(1),
});

export default function EditPost(props: TPostProps) {
  const [open, setOpen] = useState(false);
  const router = useRouter();
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: props.title,
      content: props.content,
    },
  });

  async function onSubmit(values: z.infer<typeof formSchema>) {
    try {
      const res = await fetch('/api/posts', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...values,
          id: props.id,
        }),
      });
      const json = await res.json();

      if (!res.ok) {
        toast(json.message);

        return;
      }

      toast('Post edited!');
      form.reset();
      setOpen(false);
      router.refresh();
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant='secondary' size='icon'>
          <Edit />
        </Button>
      </DialogTrigger>
      <DialogContent className='max-w-[300px]'>
        <DialogHeader className='text-left'>
          <DialogTitle>Edit post</DialogTitle>
          <DialogDescription>
            Please <strong>do not</strong> post <strong>NSFW</strong> content.
          </DialogDescription>
        </DialogHeader>
        <Form {...form}>
          <form className='space-y-4' onSubmit={form.handleSubmit(onSubmit)}>
            <FormField
              control={form.control}
              name='title'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Title</FormLabel>
                  <FormControl>
                    <Input placeholder='Hi there!' {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name='content'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Content</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder='Testing this great app!'
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <DialogClose asChild>
              <Button className='w-full' type='submit'>
                Edit post
              </Button>
            </DialogClose>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}

src/components/post/delete.tsx

Create a button icon for opening a dialog for deleting the post, add validation and fetch to the API endpoint.

'use client';

import { LucideTrash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import { useRouter } from 'next/navigation';
import { toast } from 'sonner';
import { TPostProps } from './types';

export default function DeletePost(props: TPostProps) {
  const router = useRouter();

  async function handleDelete() {
    try {
      const res = await fetch('/api/posts', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          id: props.id,
        }),
      });
      const json = await res.json();

      if (!res.ok) {
        toast(json.message);

        return;
      }

      toast('Post deleted!');
      router.refresh();
    } catch (error) {
      console.error(error);
    }
  }
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant='destructive' size='icon'>
          <LucideTrash2 />
        </Button>
      </DialogTrigger>
      <DialogContent className='max-w-[300px]'>
        <DialogHeader className='text-left'>
          <DialogTitle>Delete post</DialogTitle>
          <DialogDescription>
            Are you sure you want to <strong>delete</strong> this post? This
            action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <footer className='flex flex-col gap-2'>
          <DialogClose asChild>
            <Button variant='secondary' className='w-full'>
              No, keep post
            </Button>
          </DialogClose>
          <DialogClose asChild>
            <Button
              onClick={handleDelete}
              variant='destructive'
              className='w-full'
            >
              Yes, delete post
            </Button>
          </DialogClose>
        </footer>
      </DialogContent>
    </Dialog>
  );
}

src/components/post/types.ts

type SessionProps = {
  session: any;
};

type TPostProps = {
  author: {
    id: string;
    name: string | null;
    email: string | null;
    emailVerified: Date | null;
    image: string | null;
  } | null;
  id: string;
  createdAt: Date;
  updatedAt: Date;
  title: string;
  content: string;
  authorId: string | null;
  session: any;
};

export type { SessionProps, TPostProps };

src/components/sign-out.tsx

A simple sign out button.

'use client';

import { signOut } from 'next-auth/react';
import { Button } from './ui/button';

export default function SignOut() {
  return <Button onClick={() => signOut()}>Sign out</Button>;
}

src/components/navbar.tsx

Render the sign out or sign in button depending if the user is logged in or not.

import Link from 'next/link';
import { Button } from './ui/button';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/libs/auth';
import SignOut from './sign-out';

export default async function Navbar() {
  const session = await getServerSession(authOptions);

  return (
    <nav className='w-full p-4 border-b flex justify-between items-center'>
      <section>
        <Button variant='link' className='px-0 font-semibold text-lg'>
          <Link href='/'>Fullstack app</Link>
        </Button>
      </section>
      <section>
        {session ? (
          <SignOut />
        ) : (
          <Button asChild>
            <Link href='/auth'>Sign in</Link>
          </Button>
        )}
      </section>
    </nav>
  );
}

src/app/layout.tsx

Add your Navbar and Toaster components and some styles.

import { Inter } from 'next/font/google';
import Navbar from '@/components/navbar';
import { Toaster } from '@/components/ui/sonner';
import './globals.css';

const inter = Inter({ subsets: ['latin'] });

interface Props extends React.PropsWithChildren {}

export default function RootLayout(props: Props) {
  return (
    <html lang='en'>
      <body className={inter.className}>
        <Navbar />
        <main className='px-4 py-8'>{props.children}</main>
        <Toaster />
      </body>
    </html>
  );
}

4. Add CRUD functionality

Now we can add Create, Read, Update and Delete functionality to our app.

prisma/schema.prisma

Update your Prisma schema adding to User model a relationship with Post model:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Account {
  id                String  @id @default(cuid())
  userId            String
  type              String
  provider          String
  providerAccountId String
  refresh_token     String? @db.Text
  access_token      String? @db.Text
  expires_at        Int?
  token_type        String?
  scope             String?
  id_token          String? @db.Text
  session_state     String?

  user User @relation(fields: [userId], references: [id], onDelete: Cascade)

  @@unique([provider, providerAccountId])
}

model Session {
  id           String   @id @default(cuid())
  sessionToken String   @unique
  userId       String
  expires      DateTime
  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  accounts      Account[]
  sessions      Session[]
  posts         Post[]
}

model VerificationToken {
  identifier String
  token      String   @unique
  expires    DateTime

  @@unique([identifier, token])
}

model Post {
  id        String   @id @default(cuid())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String
  content   String
  author    User     @relation(fields: [authorId], references: [id])
  authorId  String
}

Generate a new Prisma migration:

npx prisma migrate dev --name add-posts

Now, create a src/app/api/posts/route.ts file with a POST, PUT and DELETE async functions:

import prisma from '@/libs/db';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: Request) {
  try {
    if (!req.body) {
      return NextResponse.json({
        ok: false,
        status: 400,
        message: 'Data required',
      });
    }

    const json = await req.json();
    const res = await prisma.post.create({
      data: json,
    });

    return NextResponse.json({
      ok: true,
      status: 201,
      data: res,
    });
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json({
        ok: false,
        status: 500,
        message: error.message,
      });
    }

    return NextResponse.json({
      ok: false,
      status: 500,
      message: 'Internal server error',
    });
  }
}

export async function PUT(req: NextRequest) {
  try {
    const body = await req.json();
    const res = await prisma.post.update({
      where: { id: body.id },
      data: {
        title: body.title,
        content: body.content,
      },
    });

    return NextResponse.json({
      ok: true,
      status: 200,
      data: res,
    });
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json({
        ok: false,
        status: 500,
        message: error.message,
      });
    }

    return NextResponse.json({
      ok: false,
      status: 500,
      message: 'Internal server error',
    });
  }
}

export async function DELETE(req: NextRequest) {
  try {
    const body = await req.json();
    const res = await prisma.post.delete({
      where: { id: body.id },
    });

    return NextResponse.json({
      ok: true,
      status: 200,
      data: res,
    });
  } catch (error) {
    if (error instanceof Error) {
      return NextResponse.json({
        ok: false,
        status: 500,
        message: error.message,
      });
    }

    return NextResponse.json({
      ok: false,
      status: 500,
      message: 'Internal server error',
    });
  }
}

Try creating a post in the home.

The page will refresh and you'll see the post, as you created it, only you can edit or delete it.

5. Conclusion

As you can see, create a fullstack app with Next.js and Prisma is really easy.

Of course, it could be improved, adding server side validation for inputs, adding pagination for posts in the home, etc.

How Computers Works

Juan Manzanero — Mon, 29 May 2023 06:00:00 GMT

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.

New works have appeared, new careers to study, and new problems to be solved.

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

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.

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

The power of computers

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.

All these things are possible by flipping 0’s and 1’s, but how is this possible?

If you've watched The Imitation Code, maybe you know this story.

Computing Fundaments

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.

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.

An algorithm's like a recipe, declaring ingredients (variables) and the steps to follow to achieve the result (functions).

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.

Functions are blocks of instructions that achieve a task, like obtaining your current location or sending a message.

And maybe you are asking, how do I tell a computer how to do what I want?

Programming languages

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.

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.

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.

There is Java, is a language that can create an environment when is compiled, meaning that can be used on almost every computer.

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.

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.

The Browser

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:

Hyper Text Markup Language (HTML)
Cascading Styles Sheet (CSS)
JavaScript

HTML

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.

CSS

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.

JavaScript

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.

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.

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.

The Cloud

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.

Computers Changed Humanity

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.

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.

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.

I participated in a Hackathon

Juan Manzanero — Wed, 16 Aug 2023 06:00:00 GMT

I recently participated in a Supabase Hackathon, forming a team with people from other countries.

The Hackathon thematic was free, the only main rule is to use Supabase for any feature, like authentication, as a PostgreSQL database or using vectors for AI, with 10 days to build a product using any technology and upload it in a GitHub repository.

We developed an e-commerce app with a Walmart products model, implementing vectors for better search results.

Using Supabase we implemented auth and protected routes so the user needs to log in to see recommendations and more.

The user can add products to the shopping cart and check their items for saved it and see recommendations and which items are frequently bought.

My main role was focused on creating the UI using the Next.js 13 app router, protecting routes only for authenticated users, and create reusable components such as product cards, and of course, making the layout responsive for mobile and desktop.

We used Shadcn/UI as those components are already implemented functionalities with accessibility like modals or sidebars, like the sidebar that appears when you’re on a mobile device and open the button in the header, with a smooth animation.

We submitted the project on time and waiting for the results, and this is my first time participating in a Hackathon, I really enjoy it and hope to continue contributing to the project on GitHub.

It's amazing work with people from other countries, using English even if is not our native language, but with a purpose in common, create a great product.

I’ll keep looking to participate in more Hackathons in the future and contribute to open source projects on Github because I really enjoy the feeling of developing something big with more people.

I learned too much in these few days, like integrating Next.js with Supabase for authentication and protected routes, using the Supabase docs as a guide, and using it for the first time Shadcn/UI, and looking forward to keep using it.

It took me so long to participate in a Hackathon, as before I hesitated about my experience, but the reality is we’ll never be ready for new challenges because if you’re already ready it means that’s too late.

I want to learn more about using vectors for AI, so I’ll investigate more about the topic, as the tech tends to go that way, who knows what would be the next big tech trend or when.

You can see the project: Grocewise here

Next Intl Blog Template

Juan Manzanero — Mon, 18 Dec 2023 00:00:00 GMT

GitHub

Website

Overview

Recently I update this website, and as you may know, is an English and Spanish content website.

I'm not using a translation plugin, instead I write every work in both English and Spanish.

Thanks to Next.js and next-intl I can achieve this, rendering routes for each language in the website, accessing a dictionary that contains the content translated by me.

For the .mdx files, I created a directory for each language, and inside of those directories it contains the content in both languages too.

How to use

This template is an extension of next-intl, chek the getting started to learn the basics, the purpouse of the template is to create a simple layout for future customization.

Add or remove locales

You can add or remove locales in the src/lang/locales.ts file.

export type locales = 'en' | 'es';

export const localesList: locales[] = ['en', 'es'];

Just add or remove a locale from the locales const, and add or remove it from the list.

The first item in the localesList must be the default locale.

The list is used for static generation of the routes in src/app/[locale]/layout.tsx.

import { localesList } from '@/lang/locales';

export function generateStaticParams() {
  return localesList.map((locale) => ({ locale }));
}

Remember to update the matcher in src/middleware.ts.

//...

export const config = {
  matcher: ['/', '/(en|es)/:path*'],
};

And of course, update your src/lang/[locale].json files.

Content creation

Use src/content/[locale] for create content, in the /[locale]/ directory ceate the directory for each purpouse, for example: /[locale]/blog.

Inside create the .mdx file with an unique name, the name will be used as the slug for create the static page for that post.

For create a blog section, you'll use the getAllContent function in your route, for example: src/app/[locale]/blog/[slug]/page.tsx.

import { Mdx } from '@/components';
import { TParamsLocale, TPage, TSlugLang } from '@/types';
import { Metadata } from 'next';
import { getAllContent, getContent } from '@/utils/getContent';

export async function generateStaticParams(
  props: TParamsLocale,
): Promise<TSlugLang[]> {
  const blogs = await getAllContent(props.params.locale, 'blog');

  if (!blogs) return [];

  return blogs.map((blog) => ({
    slug: blog.slug,
    locale: props.params.locale,
  }));
}

//...

This will create each static page for each blog post.

You can get the metadata of the .mdx file too.

//...

export async function generateMetadata(props: TPage): Promise<Metadata> {
  const blog = await getContent(props.params.locale, 'blog', props.params.slug);

  if (!blog) return {};

  return {
    title: blog.title,
    //...
  };
}

//...

Then, render the content using the Mdx component.

//...

export default async function Page(props: TPage) {
  const post = await getContent(props.params.locale, 'blog', props.params.slug);

  if (!post) return null;

  return <Mdx code={post.body.code} />;
}

You can fork this template here

Privacy Must Be Taken More Seriously

Juan Manzanero — Thu, 23 Apr 2026 00:00:00 GMT

Privacy is a fundamental pillar for free speech.

You might found state propaganda on social media, about how “anonymous individuals/groups” are doing crimes, hacking, etc.

Well, as I said, that's pure propaganda.

Governments wants to convince you that privacy or anonymity equals crime.

I shouldn't tell you, but that's just stupid thinking.

Not because a criminal uses Tor or Monero it means that everyone which uses the mentioned technologies are criminals.

It's like saying that if a criminal uses a spoon then everyone who uses a spoon is also a criminal, yes; that's how stupid it sounds.

Privacy is a basic right, it guarantees that those in power can be questioned without them taking down their criticizers, and this is more required as the censorship keeps incrementing.

Today they might censor bad words, tomorrow memes of the idiot in a chair who people calls president, in 1 month you can't talk about anything but good things about the government.

But as freedom, everyone wants it, but not everyone is going to fight for it, at least in these days.

Learn about PGP, Tor, Monero, and any other technology that protects you.

Rewind 2023 and future plans

Juan Manzanero — Sat, 16 Dec 2023 00:00:00 GMT

My rewind for 2023 and my plans for 2024 and beyond.

I hope you are having a good time this holiday.

Life is a succession of choices, and in retrospect, I'm happy that this year I made the right ones.

In retrospect about my career this 2023

I grew up drastically as a Full Stack Developer, learning new libraries and establishing my tech stack.

I even started hacking (not the thing you hear in the news), creating side projects looking to create solutions.

I updated this website, creating new functionalities for content creation.

Now I have more confidence in my skills, ready to keep growing up and taking on new challenges.

Futures plans for my career this 2024

I want to start freelancing, I'll be creating templates and demo projects for selling my services as a Frontend Developer mainly, but I'll keep learning about Backend and Cloud, as well as keep practicing my English to enter the USA or European markets.

Maybe I'll not achieve this in 2024, but I must keep growing, as each year passes, I'll be more prepared.

I'll check if I could contribute to an Open Source project, as almost every tool that I use is an Open Source one, I couldn't be here without if not with the help of Open Source projects.

Honestly, my true wish is to work full time in a Software as a Service startup, or any startup with a focus on Software.

The good thing that is I keep growing professionally, and I expect (and will) the next year I'll reach more milestones.

And of course, I'll continue hacking (in a creative way, not stealing info or criminal things) with side projects, creating an extra incoming source will be great for my finances.

Retrospect of 2023 personally and more

This year I rediscovered the hobby of reading, and I really enjoy it.

I discovered my new favorite book, Ready Player One, it was a really exciting and great lecture, the next year I'll read the sequel.

I also started reading Ikigai, to keep acquiring good habits for a long and happy life, and seek a purpose in life.

Another book I started reading is The Little Book of Common Sense Investing, as I already had a good habit of saving, but I want my money to keep growing more for a dignified retirement.

I'm spending less time on social media, even I wrote an article about this, doing things that I really want to do instead.

Is really horrible how much time social media steals from us, keeping us away from doing things that we really enjoy.

I'm doing moderate exercise, but indoors, I want to go outdoors too, I need more solar light.

I'm happy spending my time with my family, even if the majority of the time I'm working or studying, I keep contact with my loved ones, and continue doing it, clearly.

Future plans for 2024 personally and more

I'll keep reading, I'll write more on this website.

I want to acquire new habits, like pixel art.

And I'm retaking an old hobby, GameDev.

As Unity is doing questionable things, I'll be using Godot instead.

I don't have in mind a big project or something like that, just retake to develop simple videogames demos, it would be great to launch a little videogame, but a complete one.

Trust me, is really, REALLY challenging to develop videogames, so instead of overwhelming myself, I'll keep my ambitions simple, but constant.

Happy holidays!

The Monotony of Social Media

Juan Manzanero — Mon, 17 Jul 2023 06:00:00 GMT

Abstracting human interaction using software has caused many problems that didn’t exist before.

It’s obvious, a lot of interactions on the Internet occurs through social media, letting you send friend requests, chat, or share memes and photos. However, abstracting human interaction using software has caused many problems that didn’t exist before.

When the Internet started, many people created their own websites because that's was the thing you must have if you want to be cool, and a lot of these websites was just blogpost-like where the users shares their hobbies like movies, sports, books, videogames, etc. This motivation made more unique and human websites, where you can meet someone and their likes or dislikes.

Now, with the boom of social media in the middle of 2000's, people prefer to connect just searching for a name or looking the friends of their friends, and send friend requests to try and connect. That was cool at the start, as anything new, but the problems started when companies like Facebook (now Meta) or Google (with YouTube) needed to monetize their platforms, mostly with Ads.

And of course, that means that they needed to suppress, censor or ban anything that could be harmful for society, like hate speeches or stupid challenges that could risk people's lives.

But, the bat thing about this, is that they homogenize almost everyone, forcing them to act as the algorithms keeps recommending users with likes and comments, guiding the people to act like someone else, and so.

Now almost everyone does mainly two things, post photos about their "perfect" lives or share memes, and don't get me wrong, it's ok to enter to social media and try to disconnect for your job or problems, but using this every day as instant escape instead of confronting your own problems could be harmful in the long term, isolating you from the need of socialize in real life, with real people, and thinking that everyone has a perfect life.

No, EVERYONE has problems in their lives, even more than yours, but social media algorithms promotes mainly "positive vibes only" and all that shit that in big dose is hamrful for our minds.

And don't mention the censorship and shadow-banning if you post something controversial, it could be something that should not be tolerated like incite hate to a group, or it could be something that don't everyone agrees but it could be useful think a little about it, but still being controversial.

Should everyone can tell what they thinks? Yeah, always if doesn't promotes hate or hurt other people or animals.

They're reports like Twitter promotes hate in the algorithm, and Meta knows that Instagram increases anxiety and depression on young people, and actually; promotes it... as all negative feelings keeps you on the social media interacting with others, as that's what those companies sell, your data and time to advertisers.

I recently heard a video talking about this topic, and that would be cool if we go back as the starts of the Internet where people created content as a hobby, instead of looking for validation through likes and comments, being more authentic persons instead of products.

Should software solutions replace human interactions? I think not, but it's too late for almost everyone, but if you're reading this, start changing your life first if you want to be honest with yourself.

Blog inspired by "Why does every personal website look like this now?" by Eric Murphy on YouTube.

Source Video:

</iframe>

Website migrated to Astro

Juan Manzanero — Wed, 26 Jun 2024 06:00:00 GMT

So yeah, I proved this tool for building static websites, as Vercel has been taking weird decisions about the direction of the development of Next.js.

That, and I realized that I just need a full static website, no need of SSR.

Static is the way to go

At the start of the Internet, websites were just plain HTML, CSS and JS, no need of Single Page Application, Server Side Rendering, etc.

Of course, there are many websites that need these rendering strategies, but for a website like this, just static is better.

Less time building, fast load, cheaper hosting, less JavaScript on the browser.

The cool thing about Astro

You can use any component from any framework.

You can use React, Angular, Vue, Svelte components in the same project, as Astro compiles them as HTML/CSS/JS.

Not only that, but you can use Astro as Next.js too, with the hybrid rendering strategy, you can specify which pages you want to be Server Side Rendered. Obviously, if you're going this way, you must host your project on a server.

In other things...

I'm planning on making videos for YouTube, talking about topics that I think we need more in the Hispanic community, topics like cybersecurity, privacy, the current status of technology, and more.

There are many YT channels in English talking about that, so that's why I'm thinking of doing it in Spanish.

I need to improve the banners of these posts, though.