Forem: The Opinionated Dev

Shadcn UI: Revamp your legacy React app with minimal effort

The Opinionated Dev — Tue, 01 Apr 2025 10:49:24 +0000

It’s difficult to go back to Material UI or Daisy UI in 2025 once you get into Shadcn. It became my go-to choice and potentially one of my primary reasons I’d opt for https://nextjs.org/ when I create a quick side-project or proof of concept.

The other day I had to touch a pretty old React app and to stay that it was in a pretty bad state was an understatement. We are talking about 4 different styling solutions (SCSS, CSS, Tailwind, MUI) used sometimes in the same component, random hacks everywhere and pretty much all the signs that’d make most of us say: “Yep, this app needs to be rewritten from scratch”

But once I realised it’s mainly UI related issues, decided to opt for my Swiss army knife — aka Shadcn. By using the pre-made build components it providers along with Tailwind, I have everything I need to refactor the app.

Installing Shadcn

First I had to install the dependencies. Since it’s an old React app, I had to manually install and generate everything as instructed in the docs.

yarn add class-variance-authority clsx tailwind-merge lucide-react tw-animate-css

Next update the tsconfig.json file to help resolve our paths:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Next, import the Tailwind in our CSS file. Here I didn’t use the CSS variables, but you can add them in if you prefer.

@import "tailwindcss";
@import "tw-animate-css";

Add our cn util function to help merge, manage and apply classes:

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

And next we’ll need a components.json file in the root of our app.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": false,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}

Now after all this, I can finally add the components via the following command:

npx shadcn add — all

Potential issue

As mentioned earlier, this app I have is pretty old. Old dependencies, webpack config etc. Even though I managed to install everything successfully, when running I get the following error:

ERROR in ./node_modules/@radix-ui/react-arrow/dist/index.mjs 4:0-40
Module not found: Error: Can't resolve 'react/jsx-runtime' in '/Users/the-opinionated-dev/dev/dt/dt-dashboard/node_modules/@radix-ui/react-arrow/dist' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

The fix for this issue lies in our Webpack config. Simply add this alias and install the dependency and that should fix the issue:

react/jsx-runtime’:require.resolve(‘react/jsx-runtime’)

And basically that’s it! Hopefully at this point you have Shadcn components available in your React app, ready to use!

Before/After Image Slider with Next.js

The Opinionated Dev — Mon, 23 Sep 2024 23:34:23 +0000

Today we'll recreate a component that I saw on a fair amount of websites. It's a comparison slider or a before/after slider where we display 2 images overlapping, and allowing a user to move a slider revealing or hiding one of the images.

You can find the completed Github repository here.

We'll start with a new Next.js app, and let's go ahead and update our homepage to have this code:

// src/app/page.tsx

import { Slider } from "./components/Slider";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <Slider />
    </main>
  );
}

Now that we have it, let's get to the main course and create a new file for out Slider component. In this component we'll have a both the before and after image displayed at all times.

To make this effect, we'll have to display the first 50% of image A, and the last 50% of image B. Once that's done, we'll add a button in the middle and make it draggable. As it drags, we get it's current position and set how big of a portion should we hide/display of image A and image B.

After all that, the code will look something like this

"use client";

import Image from "next/image";
import { useState } from "react";

export const Slider = () => {
  const [sliderPosition, setSliderPosition] = useState(50);
  const [isDragging, setIsDragging] = useState(false);

  const handleMove = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    if (!isDragging) return;

    const rect = event.currentTarget.getBoundingClientRect();
    const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
    const percent = Math.max(0, Math.min((x / rect.width) * 100, 100));

    setSliderPosition(percent);
  };

  const handleMouseDown = () => {
    setIsDragging(true);
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  return (
    <div className="w-full relative" onMouseUp={handleMouseUp}>
      <div
        className="relative w-full max-w-[700px] aspect-[70/45] m-auto overflow-hidden select-none"
        onMouseMove={handleMove}
        onMouseDown={handleMouseDown}
      >
        <Image
          alt=""
          fill
          draggable={false}
          priority
          src="https://images.unsplash.com/photo-1523435324848-a7a613898152?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWgelHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1769&q=80"
        />

        <div
          className="absolute top-0 left-0 right-0 w-full max-w-[700px] aspect-[70/45] m-auto overflow-hidden select-none"
          style={{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }}
        >
          <Image
            fill
            priority
            draggable={false}
            alt=""
            src="https://images.unsplash.com/photo-1598875791852-8bb153e713f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWgelHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2010&q=80"
          />
        </div>
        <div
          className="absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize"
          style={{
            left: `calc(${sliderPosition}% - 1px)`,
          }}
        >
          <div className="bg-white absolute rounded-full h-3 w-3 -left-1 top-[calc(50%-5px)]" />
        </div>
      </div>
    </div>
  );
};

As you can see, we have a onMouseDown and onMouseMove handler that sets our component to be in isDragging mode. This way we only change the image ratios when you actually click and drag.

In the handleMove we get the current position where we drag, calculate the new position based on that and set it in the state under sliderPosition.

Once that's done we use sliderPosition in our JSX to display the image and crop of sliderPosition/%.

I hope you enjoyed this article and it was helpful in some way. Please leave a comment if you have any questions.

You can also find the Github repository with the completed code here.

Interactive video transition with Next.js

The Opinionated Dev — Mon, 16 Sep 2024 07:33:53 +0000

Not so long ago I worked at an advertising company where my team was responsible for creating custom campaigns in the form of websites for our clients.
I’ve worked with several big companies at this time, and one of their favourite was the component we are about to create. Essentially, it’s just a video that gets played when you land on the page, and when it finishes it slowly disappears allowing you to access the website, click buttons etc. Obviously the better video you have to show the user, the bigger the “wow” factor will be.

You can find the Github repository here with the completed code.

Now, we’ll start with creating a new component called VideoReveal and have this code for it:

import { useRef } from "react";

interface VideoRevelProps {
  onVideoEnd: () => void;
}

export const VideoReveal = ({ onVideoEnd }: VideoRevelProps) => {
  const wrapperRef = useRef<HTMLDivElement | null>(null);

  const handleVideoEnded = () => {
    wrapperRef?.current?.classList?.add("opacity-0", "pointer-events-none");

    setTimeout(() => {
      onVideoEnd();
    }, 500);
  };

  return (
    <div
      ref={wrapperRef}
      onClick={handleVideoEnded}
      className="fixed top-0 left-0 w-full h-full z-50 transition-opacity duration-500"
    >
      <video
        autoPlay
        muted
        className="w-full h-full object-cover"
        onEnded={handleVideoEnded}
      >
        <source src="/door.mp4" type="video/mp4" />
      </video>
    </div>
  );
};

Here’s what happens

We have a video defined here that has the autoplay property, meaning it will start playing the video as soon the component mounts. We also set it to take the full height and screen of the viewport, and gave it a z-index to make it appear over everything already on the page.

Once this video ends, we want to remove this component. But instead of abruptly unmounting the component, we set it’s opacity to 0 over 500ms and also invoke our onVideoEnd once the CSS transition finished (500ms).

What do we need the `onVideoEnd` callback?

In the parent component where you want to use the VideoReveal component, here’s how you can use it:

"use client";

import { VideoReveal } from "./components/VideoReveal";
import { useState } from "react";

export default function Home() {
  const [isVideoPlaying, setIsVideoPlaying] = useState(true);

  return (
    <main>
      <h1>Homepage content</h1>
      {isVideoPlaying ? (
        <VideoReveal onVideoEnd={() => setIsVideoPlaying(false)} />
      ) : null}
    </main>
  );
}

With this we mount our VideoReveal because isVideoPlaying is set to true by default and the video start playing. Once the video is finished playing, it calls whatever we pass in to onVideoEnd.

In this scenario, we know that when the video stopped playing, we want to remove our video component as we don’t need it anymore, and we want to display the content on the page so the user can interact with it etc.

Disclaimer

This solution might not be for you if you want the fastest page and interactivity for the user. This is meant to be used as more of a creative approach to “woo” or “charm” the user.

That’s all, hope you enjoyed it and let me know if you have any questions, I’m happy to answer.

You can find the Github repository here with the completed code.

Page read progress bar in Next.js

The Opinionated Dev — Fri, 13 Sep 2024 09:38:43 +0000

Nowadays I see on almost every blog, news article and just any random website a view progress bar on the top of the page, that shows the reader how much of the article have they read so far.

In this article I’ll show you my take on it using Next.js, Tailwind and Typescript. You can also find the completed Github repo here.

Setup

We’ll get started with a new Next.js app. For this you can use either the app router or pages router. I’ll use the app router in this article.

Let’s change our homepage (app/page.tsx) to have the following code:

"use client";

import { useRef } from "react";
import { Progressbar } from "./components/Progressbar";

export default function Home() {
  const mainRef = useRef<HTMLElement | null>(null);

  return (
    <main ref={mainRef}>
      <Progressbar target={mainRef} />
      <div className="w-full h-screen bg-blue-200" />
      <div className="w-full h-screen bg-red-200" />
      <div className="w-full h-screen bg-yellow-200" />
      <div className="w-full h-screen bg-green-200" />
    </main>
  );
}

Now, a quick summary of what happens here:

We added 4 divs just to extend our page and make it scrollable so we can verify the progress bar works and displays the current read progress.
Convert the page to be a client component. We’ll need this because we’ll attach a ref to our main element to use it to determine the scroll depth.
Add our ProgressBar on the top. With saying that, let’s jump to that component and create it.

Progressbar component

It’s time to create our Progressbar component. Let’s create a new file called Progressbar.tsx and paste this inside:

"use client";

import { useCallback, useEffect, useState } from "react";

type ProgressbarProps = {
  target: React.RefObject<HTMLElement>;
};

export const Progressbar = ({ target }: ProgressbarProps) => {
  const [readingProgress, setReadingProgress] = useState(0);

  const scrollListener = useCallback(() => {
    if (!target.current) {
      return;
    }

    const element = target.current;
    const totalHeight =
      element.clientHeight - element.offsetTop - window.innerHeight;
    const windowScrollTop =
      window.scrollY ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;

    if (windowScrollTop === 0) {
      return setReadingProgress(0);
    }

    if (windowScrollTop > totalHeight) {
      return setReadingProgress(100);
    }

    setReadingProgress((windowScrollTop / totalHeight) * 100);
  }, [target]);

  useEffect(() => {
    window.addEventListener("scroll", scrollListener);

    return () => window.removeEventListener("scroll", scrollListener);
  }, [scrollListener]);

  return (
    <div className="w-full fixed top-0 left-0 right-0">
      <div
        className="h-2 bg-gradient-to-r from-[#FB7C00] via-[#E73B50] to-[#9E009B]"
        style={{
          width: `${readingProgress}%`,
        }}
      />
    </div>
  );
};

Quick breakdown of the component:

As you can see, we return some JSX that’ll essentially be just a div absolutely positioned to the top of the page. The width we’ll set dynamically based on the readingProgress attribute.

We also have a useEffect that’ll just register a scroll event listener for us. It’s also responsible for removing that event listener once our component unmounts.

And the brain of the component, the scrollListener function. This function uses the parent ref we passed in, and calculates based on the window height how far you’ve scrolled and sets it in the state, causing our component to re-render to make the changes visible.

Usage with React Server Components

Now, to use this component you’ll always have to have the use client directive. But in the case you don’t want to have the parent component also a client component and passing the ref to the Progressbar, you can skip that part.
Instead define an ID/classname on the component/element you want to use as the reference, and in the Progressbar rather than using a ref, you can use document.getElementById to access the parent component. This way you don’t have to have both parent and child as a client component, only the Progressbar.

That’s all for now, let me know if you have any questions. You can find the completed Github repo here.

Make Your Github Profile Stand Out With CSS

The Opinionated Dev — Thu, 12 Sep 2024 20:25:45 +0000

Previously the only way you could customise your Github profile was by updating the picture or changing your name. This meant every Github profile looked the same, the options to customise it or to stand out was minimal.

Since then, you have the option to create a custom section using Markdown. You can include your CV, your interests and hobbies to make your profile reflect who you are. It’s one of the main sections that anyone sees when they land on your profile.

In this article I’ll show you how I created my Github readme with a twist. I’ll be using Markdown and solving it’s main problem. The problem that it can be highly restrictive, as you can’t change colours, adjusting positions and spacing can be difficult. To solve there is a way you can add CSS to your Github readme and even add transitions to present a better UX.

But let’s start with creating the readme first. For this, you’ll need to create a new public repository that is exactly what your Github username is. You’ll see a small text showcasing that this will be a unique repository.

Now whatever you update in your [README.md](<http://README.md>) file, it will be displayed on your profile. You can use Markdown syntax or HTML to display your content. If you add any inline styling, CSS files or JavaScript, it’ll be stripped by Github, so that solution is a no-go.

The solution

In your README.md file you can include images. That includes SVG files. The loophole that enables us to add CSS is embedding custom HTML and CSS using the foreignObject element in an SVG file. The foreignObject element allows you to include elements from other markup languages inside an SVG graphic.

Let’s create a new file in our repository, called header.svg. In my case, I’d like a text being displayed on my profile saying CodeFlow., with a nice gradient and a typewriter effect. To achieve that, I wrote some CSS and some HTML nested in a foreignObject in my SVG file:

<svg fill="none" width="100%"  xmlns="http://www.w3.org/2000/svg">
 <foreignObject width="100%" height="100%">
  <div xmlns="http://www.w3.org/1999/xhtml">
      <style>
        .wrapper {
          height: 100vh;
          display: grid;
          place-items: center;
        }

        .text {
          width: 9ch;
          animation: typing 1.5s steps(9), blink .5s step-end infinite alternate;
          white-space: nowrap;
          overflow: hidden;
          border-right: 3px solid;
          font-family: monospace;
          font-size: 4em;
          background: linear-gradient(90deg, rgba(0,241,220,1) 0%, rgba(86,115,241,1) 44%, rgba(103,68,241,1) 54%, rgba(254,0,255,1) 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        @keyframes typing {
          from {
            width: 0
          }
        }

        @keyframes blink {
          from, to { border-color: transparent }
          50% { border-color: rgba(254,0,255,1); }
        }
      </style>
      <div class="wrapper">
        <div class="text">
          CodeFlow.
        </div>
      </div>
  </div>
 </foreignObject>
</svg>

Now let’s update the README.md file to use this SVG as an image and display it in our profile:

<div align="center">
 <a class="link" href="https://github.com/codeflowjs/codeflowjs/blame/main/header.svg">
  <img class="image" src="header.svg" alt="Click to see the source">
 </a>
</div>

And that’s it. It’s really just some CSS and HTML wrapped inside an SVG. Check out the end result below or if you’d like to see in in action, my Github profile is here.

How To Build a REST API with TypeScript, Express and Prisma

The Opinionated Dev — Thu, 12 Sep 2024 08:44:26 +0000

You can find the Github repository here.

After seeing countless videos, articles and news regarding Prisma, a relatively new ORM on the market, I decided it’s time I check it out myself. In this article I’ll give a quick introduction to Prisma, what it does, and we’ll even create a quick REST API with TypeScript, Express, Prisma and SQLite.

What is Prisma?

Prisma is an Object-Relational Mapping tool. It interacts with your database, meaning you don’t have to write SQL queries yourself, making life easier and safer. It also provides type-safe queries and generates your types based on your database schema. It has so many more features and benefits, including: works with PostgreSQL, SQLite, MySQL and even MongoDB.

Setup

Now, it’s time to get started. First let’s init our project and install our dependencies by running these commands:

yarn init -y
yarn add express @prisma/client
yarn add --dev @types/express @types/node nodemon ts-node typescript

Let’s add some scripts to our package.json file to run our application and other commands we might use often. Here’s mine:

{
  "name": "express-prisma-rest-api",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "author": "codeflowjs <codeflowjs@gmail.com>",
  "scripts": {
    "dev": "nodemon src/index.ts",
    "migrate": "prisma migrate dev"
  },
  "dependencies": {
    "@prisma/client": "^4.8.1",
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.15",
    "@types/node": "^18.11.18",
    "nodemon": "^2.0.20",
    "prisma": "^4.8.1",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  }
}

Now let’s create in our root folder a file for our TypeScript config, named tsconfig.json and here’s the config I use for this tutorial:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es2017",
    "lib": [
      "es2017",
      "esnext.asynciterable"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "pretty": true,
    "sourceMap": true,
    "declaration": true,
    "outDir": "dist",
    "allowJs": true,
    "noEmit": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "baseUrl": "src",
  },
  "include": [
    "src/**/*.ts",

  ],
  "exclude": [
    "node_modules",
  ]
}

Database schema

It’s time to create our database schema. In this tutorial, we’ll have 2 models in our database. Author and Book. They’ll share a one to many relationship, meaning an Author can have multiple Books but a Book can only have one Author.

To create this database schema, we’ll have to initialize our Prisma instance, and define the schema.

Run npx prisma init in your terminal, and you’ll see it generates a new folder called prisma in the root folder of your application. Inside there, there’s a file called schema.prisma. All you need to do is paste this into your schema.prisma file and save it.

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

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

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model Author {
  id    String @id @default(uuid())
  name  String
  books Book[]
}

model Book {
  id       String @id @default(uuid())
  author   Author @relation(fields: [authorId], references: [id])
  authorId String
  title    String
}

To create these models in your database, you need to run yarn migrate or npx prisma migrate dev for the changes to be applied.

Creating our server

Now that we are done with all the setting up, let’s get to the coding part. Let’s create a new folder called src and a file inside called index.ts. This file will be the heart of our application, being responsible for running our server. The code will look something like this:

import express from "express";

// import authorRouter from "./routes/author.router";
// import bookRouter from "./routes/book.router";

const app = express();
const port = process.env.PORT || 8080;

app.use(express.json());

// app.use("/authors", authorRouter);
// app.use("/books", bookRouter);

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Next, we’ll create two folder within our src folder. I’ll call them controllers and routes. Controllers will be responsible for connecting to the database and executing CRUD (Create-Read-Update-Delete) operations, while routes will be responsible for invoking the right function based on which endpoint we call.

Creating our authors

In controllers I create a file called authors.controller.ts to house all logic regarding an author. Inside this file I’ll have the following code:

import { Request, Response } from "express";
import { Author, PrismaClient } from "@prisma/client";

const authorClient = new PrismaClient().author;

export const getAllAuthors = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const allAuthors: Author[] = await authorClient.findMany({ include: { books: true }});

    res.status(200).json({ data: allAuthors });
  } catch (error) {
    console.log(error);
  }
};

export const getAuthorById = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const authorId = req.params.id;
    const author = await authorClient.findUnique({ where: { id: authorId }, include: { books: true } });

    res.status(200).json({ data: author });
  } catch (error) {
    console.log(error);
  }
};

export const createAuthor = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const authorData = req.body;
    const author = await authorClient.create({
      data: { ...authorData },
    });

    res.status(201).json({ data: author });
  } catch (error) {
    console.log(error);
  }
};

export const updateAuthor = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const authorId = req.params.id;
    const authorData = req.body;
    const updatedAuthorData = await authorClient.update({
      where: { id: authorId },
      data: { ...authorData },
    });

    res.status(200).json({ data: updatedAuthorData });
  } catch (error) {
    console.log(error);
  }
};

export const deleteAuthor = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const authorId = req.params.id;
    const authorData = await authorClient.delete({ where: { id: authorId } });

    res.status(200).json({ data: {} });
  } catch (error) {
    console.log(error);
  }
};

As you can see, you can fetch a single author, fetch them all, create one, update one or delete one. There’s one important piece however, if you look further in getAuthorById or getAllAuthors. Within these two methods, when we interact with the database via authorClient, you can see that I’m passing in include: { books: true } as an argument. Because we have a relationship between our models, it means that you can fetch all Authors, and you can include every Book in the response that is related to the Author.

To use these methods, we’ll need to go into our routes folder and create author.router.ts. In this file we’ll have all the logic regarding which method gets executed on which request, looking like so:

import { Router } from "express";
import {
  getAllAuthors,
  getAuthorById,
  createAuthor,
  updateAuthor,
  deleteAuthor,
} from "../controllers/author.controller";

const authorRouter = Router();

authorRouter.get("/", getAllAuthors);
authorRouter.get("/:id", getAuthorById);
authorRouter.post("/", createAuthor);
authorRouter.put("/:id", updateAuthor);
authorRouter.delete("/:id", deleteAuthor);

export default authorRouter;

Creating our books

The next step is to create the same files for the Book model, so let’s start with creating book.controller.ts in the controllers folder. Inside this the code will be almost identical, with one difference:

import { Request, Response } from "express";
import { Book, PrismaClient } from "@prisma/client";

const bookClient = new PrismaClient().book;

export const getAllBooks = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const allBooks: Book[] = await bookClient.findMany();

    res.status(200).json({ data: allBooks });
  } catch (error) {
    console.log(error);
  }
};

export const getBookById = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const bookId = req.params.id;
    const book = await bookClient.findUnique({
      where: { id: bookId },
    });

    res.status(200).json({ data: book });
  } catch (error) {
    console.log(error);
  }
};

export const createBook = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const bookData = req.body;

    console.log(bookData)
    const book: Book = await bookClient.create({
      data: { 
        title: bookData.title,
        author: {
          connect: { id: bookData.authorId }
        }
      },
    });

    res.status(201).json({ data: book });
  } catch (error) {
    console.log(error);
  }
};

export const updateBook = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const bookId = req.params.id;
    const bookData = req.body;
    const updatedBookData = await bookClient.update({
      where: { id: bookId },
      data: { ...bookData },
    });

    res.status(200).json({ data: updatedBookData });
  } catch (error) {
    console.log(error);
  }
};

export const deleteBook = async (
  req: Request,
  res: Response
): Promise<void> => {
  try {
    const bookId = req.params.id;
    const book = await bookClient.delete({ where: { id: bookId } });

    res.status(200).json({ data: {} });
  } catch (error) {
    console.log(error);
  }
};

If you wish to create a Book that is connected to an Author, the key part is to declare it in your createBook method. As you can see, I’m declaring the book title, and below that there’s one extra field called author with an object inside looking like this: connect: { id: bookData.authorId }. This is the part that’s crucial if you want your models to be related to each other. You have to connect them. Alternatively you can pass in { authorId: authorId } and Prisma will do the rest.

With only one item missing, let’s continue by creating book.router.ts in the routes folder and have this inside:

import { Router } from "express";
import {
  getAllBooks,
  getBookById,
  createBook,
  updateBook,
  deleteBook,
} from "../controllers/book.controller";

const bookRouter = Router();

bookRouter.get("/", getAllBooks);
bookRouter.get("/:id", getBookById);
bookRouter.post("/", createBook);
bookRouter.put("/:id", updateBook);
bookRouter.delete("/:id", deleteBook);

export default bookRouter;

If you look back in our src/index.ts file, we have 4 lines commented out. Let’s uncomment them and run the application by typing yarn dev in the terminal. Now that our server runs, you can execute CRUD operations by using Postman, Insomnia or even spin up a small React app.

I hope you enjoyed this article, here’s the Github repo.

Animated Credit Card with Next.js and Tailwind

The Opinionated Dev — Wed, 11 Sep 2024 11:14:00 +0000

I remember a good few years ago I saw an app or website where a loyalty card was displayed and it tilted and animated as you moved your cursor around. I was still new in the tech scene at that point and I was blown away! I completely forgot about it only until recently and decided to recreate it for fun. So join me in creating this small but neat animation!

You can find the Github repo with the completed code here.

Setup

I’ll start with a new Next.js app with Tailwind and Typescript. Once that’s installed, we only need to add one dependency with the following command:

yarn add react-tilt

React-tilt is a wrapper around the Tilt.js library that’ll do the heavy lifting for us.
Next we’ll be using some SVG icons that you can find in the Github repo at the bottom of this article.

Credit Card component

Now we get to the main part, we’ll create a new folder called components. In our new folder, let’s create a file called CreditCard.tsx. This is the destination of our component where we’ll insert the following snippet:

"use client";

import Image from "next/image";
import { Tilt } from "react-tilt";
import { Share_Tech_Mono } from "next/font/google";

const shareTechMono = Share_Tech_Mono({
  weight: "400",
  subsets: ["latin"],
});

export const CreditCard = () => {
  return (
    <Tilt
      className={`${shareTechMono.className} w-[425px] h-[270px] bg-gradient-to-tr rounded-2xl flex content-center items-center justify-center from-[#9C2CF3] to-[#3A49F9]`}
    >
      <div className="p-8 w-full h-full">
        <div className="relative w-full h-full">
          <Image
            className="absolute"
            alt=""
            src="/mastercard.svg"
            width={70}
            height={24}
          />
          <Image
            className="absolute right-0 bottom-0 top-0 my-auto"
            alt=""
            src="/chip.svg"
            width={60}
            height={30}
          />
          <div className="flex flex-col w-full h-full justify-end gap-4">
            <p className="text-2xl">4242 4242 4242 4242</p>
            <div className="flex gap-28">
              <p className="text-lg uppercase">John Doe</p>
              <p className="text-lg uppercase">10/24</p>
            </div>
          </div>
        </div>
      </div>
    </Tilt>
  );
};

Now there are a few things to unwrap here. First we’ll use the use client directive from Next.js because react-tilt won’t work otherwise.
Next I’m importing a font of my choosing that somewhat resembles a credit card.

And then we get to our actual component. As you can see it’s pretty simple, we just use the Tilt component from react-tilt and pass in some styling. I hardcoded the width and height, but feel free to adjust it, or the colours too.

Inside the Tilt component I just added the icons for our app which are just a chip and a Mastercard logo. Below the the images in the div I just display the card details like card number, card holder name and expiration date.

Finish up

Now that we have our component created, the only thing that’s left is to import it in our page and display it. Let’s go to our pages/index.tsx file and add the following snippet:

import { CreditCard } from "./components/CreditCard";

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <CreditCard />
    </main>
  );
}

This will import and display our credit card in the middle of the screen. Now all that’s left is for you to hover around and check out that animation! Pretty slick if I might say so!

And that brings the end of this short article, I hope it was useful and you enjoyed it! If you need, here is the GitHub repo.

Forem: The Opinionated Dev

Shadcn UI: Revamp your legacy React app with minimal effort

Installing Shadcn

Potential issue

Before/After Image Slider with Next.js

Interactive video transition with Next.js

Here’s what happens

What do we need the onVideoEnd callback?

Disclaimer

Page read progress bar in Next.js

Setup

Progressbar component

Usage with React Server Components

Make Your Github Profile Stand Out With CSS

The solution

How To Build a REST API with TypeScript, Express and Prisma

What is Prisma?

Setup

Database schema

Creating our server

Creating our authors

Creating our books

Animated Credit Card with Next.js and Tailwind

Setup

Credit Card component

Finish up

What do we need the `onVideoEnd` callback?