DEV Community: Bro Karim

animation

Bro Karim — Tue, 21 Jan 2025 04:11:16 +0000

Animated Footer w/ Float Icon using typescript and tailwind

Bro Karim ・ Jan 21

#webdev #javascript #programming #beginners

Animated Footer w/ Float Icon using typescript and tailwind

Bro Karim — Tue, 21 Jan 2025 04:10:31 +0000

A footer component featuring social media icons that float upward with a rotation effect when hovered, revealing their respective platform names underneath.

Demo

// Detect dark theme var iframe = document.getElementById('tweet-1881554286825689489-655'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1881554286825689489&theme=dark" }

Source Code

footer-animation.tsx

import { Send } from "lucide-react";

export function Footer() {
  return (
    <>
        <footer className="w-full mx-auto container max-w-7xl rounded-2xl px-4 h-16 flex items-center py-3 bg-gray-100">
          <div className="w-full  flex justify-between items-center">
            {/* Email section */}
            <div className="flex items-center gap-2">
              <Send className="size-7" />
              <Link href="mailto:hello@danielsun.space" className="text-2xl hover:underline">
                hello@brokariim.space
              </Link>
            </div>

            {/* Social icons */}
            <div className="flex items-center relative">
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/wa3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Whatsapp</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" -rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/ig3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Instagram</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/dc3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Discord</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" -rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/ln3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Linkdln</span>
              </Link>
              <Link href="#" className="relative group grid place-items-center">
                <div className=" rotate-6 group-hover:-rotate-12 group-hover:-translate-y-6 transition duration-500 hover:duration-200 rounded-xl grid place-items-center">
                  <img src="/tiktok3d.png" alt="" className="w-16 h-16" />
                </div>
                <span className="absolute top-10  opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-[10px] font-medium">Tiktok</span>
              </Link>
            </div>
          </div>
        </footer>
    </>
  );
}

Credit

•⁠ ⁠3d icon : https://www.figma.com/community/file/1015485067395949509

Animated Work Card using Typescript, Tailwind and Framer Motion

Bro Karim — Sat, 18 Jan 2025 14:41:20 +0000

Simple work card components that brings your projects to life. As users hover over the card, a subtle gradient fades in from the top corner while the image tilts slightly, creating a dynamic and engaging effect.

Demo

// Detect dark theme var iframe = document.getElementById('tweet-1880625972871049553-874'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1880625972871049553&theme=dark" }

Source Code

I used several UI libraries like shadcn for the card.tsx and 21st.dev for the Glow.tsx component. If you're curious about the glow effect, check it out on 21st.dev—it's a must-see!

work-card.tsx

 <Card className="group relative w-[800px] rounded-3xl p-8 border-none overflow-hidden bg-[#f5f5f5] mb-10">
          <Glow variant="top" className="group-hover:opacity-100 opacity-0" />
          <div className="relative z-10">
            {/* Logo and Title */}
            <div className="flex items-center gap-2 mb-4">
              <div className="w-8 h-8 bg-black rounded-lg flex items-center justify-center">
                <svg viewBox="0 0 24 24" className="w-5 h-5 text-white" fill="none" stroke="currentColor">
                  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <span className="text-2xl font-semibold">Simple</span>
            </div>

            {/* Description */}
            <p className="text-gray-600 text-lg mb-8 max-w-2xl">From classic elegance to moddern innovation, this watch are crafted to elevate your style .</p>

            {/* Images Container */}
            <div className="flex w-full relative  justify-center gap-2 items-center transition-all duration-500 ease-in-out group-hover:translate-y-2">
              <div className=" w-2/5 aspect-[4/3] -rotate-6 grid place-items-center -bottom-28 border-4 border-white rounded-xl relative   shadow-lg ring-1 ring-border group-hover:-translate-x-5 group-hover:-rotate-12 group-hover:-translate-y-0.5 transition duration-500 group-hover:duration-200">
                <img
                  src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=2899&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  alt="Rachit Tank via unsplash"
                  className="w-full h-full object-cover rounded-xl"
                />
              </div>
              <div className="w-1/2 aspect-[4/3] grid place-items-center -bottom-20 rounded-xl border-4 border-white relative right-2.5   shadow-lg ring-1 ring-border group-hover:translate-x-5 group-hover:rotate-12 group-hover:-translate-y-0.5 transition duration-500 group-hover:duration-200">
                <img
                  src="https://images.unsplash.com/photo-1638095562082-449d8c5a47b4?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                  alt="Howard Bouchevereau via unsplash"
                  className="w-full h-full object-cover rounded-xl border-4 border-white"
                />
              </div>
            </div>
          </div>
        </Card>

Animated Select component using typescript, shadcn and framer-motion

Bro Karim — Wed, 15 Jan 2025 07:32:03 +0000

The "Expand Select Animation" is a custom select component built using TypeScript and Framer Motion, with the base component provided by ShadCN. This component enhances the standard select element with a smooth, visually appealing animation that expands downward to reveal options and collapses upward to hide them.

Demo

// Detect dark theme var iframe = document.getElementById('tweet-1878086086502887693-992'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878086086502887693&theme=dark" }

Source Code

expand-select.tsx

import { Globe } from "lucide-react";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { motion, AnimatePresence } from "framer-motion";

export function ExapandSelect() {
  return (
    <Select>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <Globe />
        <SelectValue placeholder="English" />
      </SelectTrigger>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] text-white  border-none p-[1px]">
          <motion.div
            initial={{ opacity: 0, height: 0, scale: 0.95 }}
            animate={{
              opacity: 1,
              height: "auto",
              scale: 1,
              transition: {
                type: "spring",
                stiffness: 300,
                damping: 30,
              },
            }}
            exit={{
              opacity: 0,
              height: 0,
              scale: 0.95,
              transition: {
                duration: 0.2,
              },
            }}
            style={{ transformOrigin: "center" }}
          >
            <SelectGroup>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="eng">
                English
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="france">
                Français
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="spain">
                Español
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="deutsch">
                Deutsch
              </SelectItem>
              <SelectItem className=" focus:bg-[#1a1a1a] focus:text-white" value="china">
                中国
              </SelectItem>
            </SelectGroup>
          </motion.div>
        </SelectContent>
      </AnimatePresence>
    </Select>
  );
}

Animated Hover Logo using Typescript, Tailwind and Framer Motion

Bro Karim — Mon, 13 Jan 2025 10:19:24 +0000

It transforms a static logo into a button, which activates a video tooltip that follows the cursor's movement along the button's axis using motion values.

Upon closer inspection, you'll notice we use micro-animations. When the logo is hovered over, it smoothly scales down and fades out, then transitions into a button that scales up with a fade-in effect. Hovering over the button then triggers a video tooltip.

Demo

// Detect dark theme var iframe = document.getElementById('tweet-1878748540677283930-172'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878748540677283930&theme=dark" }

Source Code

logo-hover.tsx


import { useState, useCallback } from "react";
import { motion, AnimatePresence, useMotionValue } from "framer-motion";
import { Play } from "lucide-react";

export default function LogoHover() {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

  const handleMouseMove = useCallback(
    (event: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [x]
  );

  return (
    <div className="relative w-[100px] h-[80px] cursor-pointer" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <AnimatePresence>
        {!isHovered && (
          // change with your own logo
          <motion.img src="/theo-logo.png" alt="Wegic Logo" className="absolute inset-0 w-full h-full object-contain" initial={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.2 }} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isHovered && (
          <motion.div className="absolute inset-0 flex items-center justify-center w-full" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, scale: 0.8 }} transition={{ duration: 0.2 }}>
            <button
              className="flex w-full items-center justify-center  gap-2 bg-white border border-black h-10  py-2 rounded-md"
              onMouseMove={handleMouseMove}
              onMouseEnter={() => setShowVideo(true)}
              onMouseLeave={() => setShowVideo(false)}
            >
              <Play size={16} fill="white" strokeWidth={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">watch video</p>
            </button>
          </motion.div>
        )}
      </AnimatePresence>
      {/* Video Tooltip */}
      <AnimatePresence mode="popLayout">
        {showVideo && (
          <motion.div
            initial={{ opacity: 0, y: 20, scale: 0.6 }}
            animate={{
              opacity: 1,
              y: 0,
              scale: 1,
              transition: {
                stiffness: 260,
                damping: 10,
                duration: 0.3,
              },
              width: "200px",
              height: "auto",
            }}
            exit={{ opacity: 0, y: 20, scale: 0.6 }}
            style={{
              translateX: x,
            }}
            className="absolute top-full mt-2 z-50"
          >
            <motion.div className="rounded-md overflow-hidden ">
              <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/ZK-rNEhJIDs?si=KBECTf4W-b_37Xsn&amp;autoplay=1&mute=1&controls=0"
                title="YouTube video player"
                className="w-full h-full object-cover rounded-md border-[1px] border-white ring-1 ring-black/5"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
              ></iframe>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

Animated Video Tooltip using typescript and framer-motion

Bro Karim — Mon, 06 Jan 2025 14:38:07 +0000

Video Tooltip is an animated component that activates when users hover over an avatar.

This component displays a short video of the person introducing themselves or providing additional context, adding a personal and interactive touch.

It's particularly useful for creating memorable user experiences, offering quick insights about team members, speakers, or influencers without requiring extra clicks.

Demo

// Detect dark theme var iframe = document.getElementById('tweet-1876277733086707986-544'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1876277733086707986&theme=dark" }

Source Code

video-tooltip.tsx

import { useState, useCallback, useMemo } from "react";
import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from "framer-motion";
import { cn } from "@/lib/utils";

interface TooltipItem {
  id: number;
  name: string;
  designation: string;
  image: string;
  video: string;
  text: string;
}

interface VideoTooltipProps {
  items: TooltipItem[];
  className?: string;
}

export const VideoTooltip = ({ items, className = "" }: VideoTooltipProps) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
  const [showText, setShowText] = useState(false);
  const springConfig = useMemo(
    () => ({
      stiffness: 100,
      damping: 5,
    }),
    []
  );

  // Motion setup
  const x = useMotionValue(0);
  const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
  // Optimize event handler with useCallback
  const handleMouseMove = useCallback(
    (event: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [x]
  );

  return (
    <div className={cn("flex items-center gap-2", className)}>
      {items.map((item) => (
        <div className="-mr-4 relative group" key={item.name} onMouseEnter={() => setHoveredIndex(item.id)} onMouseLeave={() => setHoveredIndex(null)}>
          <AnimatePresence mode="popLayout">
            {hoveredIndex === item.id && (
              <motion.div
                initial={{ opacity: 0, y: 20, scale: 0.6 }}
                animate={{
                  opacity: 1,
                  y: 0,
                  scale: 1,
                  transition: {
                    stiffness: 260,
                    damping: 10,
                    duration: 0.3,
                  },
                  width: showText ? "300px" : "96px",
                  height: showText ? "auto" : "96px",
                }}
                exit={{ opacity: 0, y: 20, scale: 0.6 }}
                style={{
                  translateX: translateX,
                  // rotate: rotate,
                  // whiteSpace: "nowrap",
                }}
                className="absolute w-24 h-24 group  -top-28 -left-1/2 translate-x-1/2 border-2 border-white flex text-xs flex-col bg-white items-center justify-center rounded-md  z-50 shadow-xl px-4 py-2"
              >
                <motion.div animate={{ opacity: showText ? 0 : 1 }} transition={{ duration: 0.3 }} className="absolute inset-0 z-10">
                  <video src={item.video} autoPlay muted loop playsInline className="w-full h-full object-cover rounded-md ring-black" />
                </motion.div>
                <motion.div className="p-1 w-full bg-white max-h-32 overflow-y-auto flex  flex-col" initial={{ opacity: 0 }} animate={{ opacity: showText ? 1 : 0 }} transition={{ duration: 0.3 }}>
                  <p className="text-sm text-black text-foreground-foreground">{item.text}</p>
                </motion.div>
                <div className=" relative h-full w-full ">
                  <div className={`absolute ${showText ? "left-0" : "-left-[16%]"} bottom-2 flex space-x-2 z-30 items-center justify-center rounded-full border border-white text-black p-1`}>
                    <button className={`text-[8px] h-auto rounded-full px-1 ${!showText ? "bg-black text-white" : ""}`} onClick={() => setShowText(false)}>
                      Video
                    </button>
                    <button className={`text-[8px] h-auto rounded-full px-1 ${showText ? "bg-black text-white" : ""}`} onClick={() => setShowText(true)}>
                      Text
                    </button>
                  </div>
                </div>
              </motion.div>
            )}
          </AnimatePresence>
          <img
            onMouseMove={handleMouseMove}
            height={100}
            width={100}
            src={item.image}
            alt={item.name}
            className="object-cover !m-0 !p-0 object-top rounded-full h-14 w-14 border-2 group-hover:scale-105 group-hover:z-30 border-background relative transition duration-500"
          />
        </div>
      ))}
    </div>
  );
};

Handling Local Storage for Toaster Notifications

Bro Karim — Thu, 02 Jan 2025 13:58:16 +0000

Demo :

// Detect dark theme var iframe = document.getElementById('tweet-1874817943860834535-693'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1874817943860834535&theme=dark" }

Source code :

============= layout.tsx 
<body>
   <ThemeProvider attribute="class" defaultTheme="dark">
     {children}
      <DevToaster />
   </ThemeProvider>
</body>

============= dev-toaster.tsx 
export function TemplateToaster() {
  const [isVisibile, setIsVisible] = useState(true);
  const [notificationStatus, setNotificationStatus] = useState<string | null>(null);
  const path = usePathname();
  const [hydrated, setHydrated] = useState(false);

  // Run this effect only once to set hydrated to true
  useEffect(() => {
    setHydrated(true);
  }, []);

  // Run this effect only on client side
  useEffect(() => {
    if (hydrated) {
      // Remove the saved notification status to reset it
      localStorage.removeItem("behindui-notification");
      // Check localStorage after clearing
      setNotificationStatus(localStorage.getItem("behindui-notification"));
    }
  }, [hydrated]);

  if (!hydrated) {
    return null;
  }

  const templates = path.includes("templates");
  const isIframe = isInIframe();
  if (isIframe || notificationStatus === "off") {
    return <div></div>;
  }

  return (
    isVisibile &&
    !templates && (
      <section className="relative z-50">
        <div className="font-geist fixed bottom-4 right-4">
          <Card className={cn(" w-[350px] bg-background [border:1px_solid_rgba(255,255,255,.1)]")}>
            <CardHeader>
              <div className="font-mono font-bold  uppercase tracking-tight">
                🚧Website Under Development 🚧 <br />
              </div>
              <CardDescription className="mt-4 text-black/90 dark:text-white/70">This website is currently in active development. Some features may be incomplete or not working as expected</CardDescription>
            </CardHeader>
            <CardFooter className="flex justify-end gap-4">
              <Button
                size="sm"
                onClick={() => {
                  localStorage.setItem("behindui-notification", "off");
                  setIsVisible(false);
                }}
              >
                Understand
              </Button>
            </CardFooter>
          </Card>
        </div>
      </section>
    )
  );
}

function isInIframe() {
  try {
    return window.self !== window.top;
  } catch (e) {
    return true;
  }
}

Journey In Learning Pandas

Bro Karim — Fri, 08 Nov 2024 02:11:15 +0000

This is note a course or tutorial, this is just my own note that i create while learning python3

## Course i use (it's free)
firts of all, i am not using any course to learn only this usefull website : datawars.io

Install Jupyter

But before i am learn in there, i already know therea soeme tools i need to install in my device link python3 and jupyter notebook. since i am using macbook i follow this tutorial
https://youtu.be/pkjtbnsX7Yw?si=kq85ZuhM1wLYle8S

point penting

A virtual environment is a self-contained directory that contains its own Python installation, along with its own set of installed packages. This is useful for managing dependencies and keeping your projects isolated from one another.
Running the command source bin/activate is the next step to activate your virtual environment
So whenever you want to start jupyter notebook, you must go to the fodlder, run source bin/activate than jupyter notebook at leasth this step in macbook

point penting

Jupyter is cell-based
It's free and open source software. Anybody can inspect the source code, modify it and use it for free
It's language agnostic. You can use Python, R, Julia or pretty much any other language
It's web based, which means it can run on any browser
It's a mature project with a huge community.

second tool : visidata

VisiData is an interactive multitool for tabular data. It combines the clarity of a spreadsheet, the efficiency of the terminal, and the power of Python, into a lightweight utility which can handle millions of rows with ease.

Its hellp you help to explore, clean, edit, and restructure tabular data directly from the terminal. It supports a wide range of data formats, including CSV files, Excel spreadsheets, SQL databases, and more. With VisiData, you can interactively select, filter, and group rows, rearrange and transform columns, and even create ad-hoc data pipelines. Its intuitive interface and extensive keyboard shortcuts make it an efficient tool for data analysis and manipulation.

Installation & more : https://www.visidata.org/docs/
To run the visidata, just typer :

vd [options] [input ...]

Intro to Pandas

Pandas is our swiss knife when it comes to Data Analysis/Science in Python. We use it to:

Load/dump read/write data: to and from different formats (CSV, XML, HTML, Excel, JSON, even from the Internet)
Analyze data: perform statistical analysis, query the data, find inconsistencies, etc
Data cleaning: finding missing values, duplicate data, invalid or broken values, etc
Visualizations: with support from matplotlib, we can quickly visualize data
Data Wrangling/Munging: a non-so-scientific term that involves data handling: merging multiple data sources, creating derived representations, grouping data, etc.

Other resuorce that help me much to learn pandas is this repo : https://github.com/TirendazAcademy/PANDAS-TUTORIAL/tree/main

Docker Compose in Action : A Real Case Study for Nextjs Projects

Bro Karim — Sun, 08 Sep 2024 15:01:17 +0000

Docker Compose sounds great in theory, but how does it actually look in a real project? In this post, we'll dive into a practical case study where I’ll walk you through the setup of my own Next.js application using Docker Compose.

This isn't just another tutorial—this is the real deal. You’ll see exactly how I configured Redis, MySQL, and Next.js to work together in harmony using Docker. Spoiler alert: It’s easier than you think, and by the end, you’ll be ready to deploy your own stack with confidence.

The Journey Begins:

So, there I was, diving into the world of open-source projects when I stumbled upon a repository that looked perfect for me. But there was one catch—it came with a docker-compose.yml file, which meant I had to get my hands dirty with Docker Compose.

Before we dive into the details of how everything works, let me show you the Docker Compose file I used to set up the environment:

//docker-compose.yml
version: '2.3'

services:
  redis-server:
    restart: always
    image: redis:4.0
    platform: "linux/amd64"
    container_name: redis-server
    command: redis-server --requirepass ubuntu
    sysctls:
      - net.core.somaxconn=65535
    ports:
      - "6379:6379"
    volumes:
      - redis-data:/data
    mem_limit: 96m

  redis-insight:
    image: redislabs/redisinsight:latest
    platform: "linux/amd64"
    container_name: redis-insight
    ports:
      - "8001:8001"
    depends_on:
      - redis-server

  mysql-server:
    restart: always
    image: mysql:5.7
    container_name: mysql-server
    platform: "linux/amd64"
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      MYSQL_DATABASE: shiptalker
    ports:
      - "3306:3306"
    volumes:
      - mysql-data:/var/lib/mysql
    mem_limit: 512m

volumes:
  redis-data:
    driver: local
  mysql-data:
    driver: local

In this file, we define three services—essentially, a service in Docker Compose refers to a containerized process, such as a database or server, that your application depends on. these are the core components of our project that need to run.

Here’s a quick overview of the services we’re using:

Redis Server: This service is responsible for running a Redis instance, which acts as our in-memory data store, used for caching and real-time analytics.
Redis Insight: This is a web-based GUI for managing and visualizing your Redis data. It provides an easier way to interact with Redis compared to the command line.
MySQL Server: The database service where all the structured data (like user information) is stored.

Now, let's break it down step by step to see how this configuration powers the entire stack.

Step 1: MySQL – Setting the Foundation

The first challenge on this journey was setting up MySQL. I opened up MySQL Workbench and created a new database.

Once the database was ready, the next step was to grab the all-important DATABASE_URL. This key detail was needed in the project’s env.js file, and without it, nothing would work.

Since this is an open-source project, I need to follow their DATABASE_URL format. It looks something like this :

mysql://youruser:yourpassword@localhost:3306/yourdatabase

his URL tells the application how to connect to your MySQL database:

youruser: The MySQL user (in this case, it's root by default).
yourpassword: The password for the MySQL user.
localhost: The host where MySQL is running.
3306: The default MySQL port.
yourdatabase: The database name

If your MySQL database doesn't require a password, you can simply leave out the password, like this:

mysql://youruser@localhost:3306/yourdatabase

You can verify your MySQL user and port with the following queries in the MySQL command line:

To check the current user:

SELECT user();

To check the port MySQL is running on:

SHOW VARIABLES WHERE Variable_name = 'port';

Once your DATABASE_URL is configured, the application will be able to connect to the MySQL database.

Step 2: Setting Up Redis

Now that MySQL was up and running, it was time to tackle the next step of the journey: setting up Redis. But before we dive into the setup, let me explain what Redis is and why it's essential for this project.

Redis is like the speedster of the data storage world. It’s an in-memory data structure store that acts as a lightning-fast cache. Think of it as the hyper-efficient assistant that quickly fetches and stores data, so your website doesn’t have to do the heavy lifting every single time.

Now, I didn’t have Redis installed on my laptop yet, so that was the next task. If you're setting this up on Windows, the official Redis documentation will guide you through the process. But here's the simplified version of what I did:

1️⃣Check Your Setup:
Make sure Ubuntu and WSL 2 (Windows Subsystem for Linux) are installed and working on your laptop.
Before we can install Redis on Windows, we need to enable the Windows Subsystem for Linux (WSL).

WSL is a compatibility layer that enables running Linux binary executables natively on Windows 11 and Windows Server 2019.

Open PowerShell as Administrator and run the following command to enable WSL:

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

After running this command, you need to reboot your system. Note that this step only needs to be done once.

Once the WSL is enabled, launch the Microsoft Windows Store and search for your preferred Linux distribution. In this example, we will use Ubuntu.

Download the latest version of Ubuntu and wait for it to finish the installation.

2️⃣Install Redis:
With Ubuntu and WSL 2 all set up, I jumped into the Ubuntu terminal and ran the commands needed to install Redis. It’s a straightforward process :

sudo apt-get install lsb-release curl gpg
curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg
sudo chmod 644 /usr/share/keyrings/redis-archive-keyring.gpg
echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list
sudo apt-get update
sudo apt-get install redis

3️⃣Configure and Start Redis:
After installation, I started the Redis server with the following command:

sudo service redis-server start

Redis sprang to life, and just like that, I had a caching system up and running.

4️⃣Connect to Redis:
Once Redis is running, you can test it by running redis-cli:

redis-cli

Test the connection with the ping command:

127.0.0.1:6379> ping
PONG

Step 3 : Install Redis Insight

Redis Insight is a powerful tool for visualizing and optimizing data in Redis or Redis Stack, making real-time application development easier and more fun than ever before. Redis Insight lets you do both GUI- and CLI-based interactions in a fully-featured desktop GUI client.

You can check out the installation here. It’s pretty straightforward—just head over to the Microsoft Store and download it. Easy peasy!

Step 4: Docker to the Rescue

With MySQL and Redis set up individually, things were working, but let’s be real—it wasn’t the most convenient setup. I found myself constantly running different services manually, and that’s when I realized: Docker could save me a lot of time and headaches. Instead of starting each service one by one, Docker allows us to run everything at once with the power of Docker Compose.

Before we dive in, if you haven't set up Docker on your machine yet, don’t worry! I’ve created a detailed tutorial on how to install Docker👇🏻

Now, with the docker dekstop and docker-compose.yml ready, running all of these services together is simple. Here’s what you need to do:

Open Ubuntu: Head over to your Ubuntu terminal (make sure you’re using WSL 2).
Navigate to the Directory: Use cd to move into the directory where your docker-compose.yml file is located.
Start the Services: Run the following command to bring everything up:

docker-compose up

This command tells Docker to spin up all the services defined in your Compose file. It’s like hitting the power button for your project—everything just starts working!

And that’s it! You don’t have to start Redis, MySQL, or Redis Insight individually anymore. Docker Compose does all the heavy lifting for you.

So there you have it—your docker-compose setup is good to go!. If you found this blog post helpful, feel free to share it with others who might benefit from it. And hey, why not hit that follow button for more nerdy goodness on JavaScript, React, and all things web development?

Let's stay in touch on Instagram, Twitter, and GitHub—where the real magic happens.

Thanks for sticking around! 😊

Docker on Windows: Led Into Container Wonderland

Bro Karim — Sun, 01 Sep 2024 04:00:46 +0000

It all started with a simple curiosity. I came across this cool open-source project made with Next.js—something I was excited to explore. But then, hidden in the project files... the mysterious docker-compose.yml file.

After a quick Google search, I learned this wasn’t just some random file sitting there for decoration. No, no, it was essential! And to run this project, I needed Docker, the magical tool that everyone seemed to know about but never explained in simple terms.

So, my journey began—installing Docker on Windows, navigating a few challenges along the way, and eventually learning that Docker is like packing your app into a shipping container, ready to sail smoothly across any platform. 🚢 But first, I had to figure out how to actually install the thing… and here’s how that went. 😅

Mission 1 : Install wsl

So, the first stop on my Docker journey? WSL—aka, the Windows Subsystem for Linux. If you’re unfamiliar with WSL, think of it as a secret door that lets you run a full Linux environment inside your Windows machine.

I quickly learned that Docker plays really well with Linux, so installing WSL was my ticket to getting Docker up and running smoothly on Windows. My tool of choice? The mighty PowerShell! 🖥️ With one simple command, I summoned WSL:

wsl --install

If everything goes well, Windows will work its magic and install the default Linux distribution, which is Ubuntu! 🐧

Now, this is where things got interesting. The first time Ubuntu launches, it asks for a username and password. In a flash of brilliance (or laziness), I decided to keep things simple: 'ubuntu' for both the username and password.

After a brief moment, I found myself at the Ubuntu command line. But since we’re just getting started, the next step was to gracefully exit. To do that, I typed:

exit

…and just like that, the Linux command line window closed.

Now, if you’re feeling adventurous and want to try something other than Ubuntu, don’t worry—WSL gives you options! You can list all available distributions with:

wsl -l -o

And switch to a different one by running:

wsl --install -d <Distribution Name>

But for now, we’ll stick with Ubuntu (I mean, I already committed to the username and password, right? 😆).

Before we move forward, let’s make sure we’re using the right version of WSL. You can check which version you have installed with:

wsl -l -v

If you’ve got WSL 2, awesome! It’s faster, more powerful, and overall a better choice for Docker. Let’s make it the default by running:

wsl --set-default-version 2

And just like that, the first requirement for installing Docker is complete! We’re one step closer to containerized glory🚢.

Mission 2 : Donwload docker

With WSL set up and ready, it was time to tackle the next big mission: installing Docker itself. 🐳 But before diving headfirst into the download, I had to make sure my trusty device was up to the challenge. Docker doesn’t run on just any old machine, after all—it has a few requirements you’ll need to meet.

1️⃣Check the System Requirements

First, I visited the official Docker website to grab the installer. But before hitting that download button, I double-checked that my device met Docker’s system requirements.

These requirements include things like sufficient memory, disk space, and, importantly, a Windows build of 1900 or higher. You can check your Windows build by running the dxdiag command, which will show you all the juicy details about your system.

2️⃣Virtualization – It’s a Must!

Next, I made sure that virtualization was enabled on my machine. Docker relies on virtualization to create its containers, so this step is crucial. You can check whether it’s enabled by opening the Task Manager and looking for the virtualization status under the "Performance" tab.

If it’s enabled, you’re good to go! If not… well, it’s time to take a trip to your BIOS settings and turn it on, check this out

3️⃣Enable Windows Features

Before installing Docker, there are a couple of important Windows features that need to be activated: Windows Subsystem for Linux and Virtual Machine Platform. These are essential for Docker to run smoothly.

Here’s how to activate them:

Open the run system and type 'windows featuere'
Scroll through the list and check the boxes for:
- Windows Subsystem for Linux
- Virtual Machine Platform
Click OK and let Windows do its thing. You’ll probably need to restart your computer to apply these changes.

Once these features are enabled, you’re ready to proceed with the Docker installation. 🚀

4️⃣Download and Install Docker

Now that my system was fully prepped, I went ahead and downloaded the Docker installer from the official website. The installation process was smooth—just a few clicks, and Docker was up and running on my PC. 🎉

5️⃣Fire Up Docker

With Docker successfully installed, I launched Docker Desktop, and just like that, my system was ready to start spinning up containers like a pro. 🚢

And there we have it—mission two complete! Docker is now installed, next I’ll walk you through setting up your first Docker container and running your Next.js project inside it.

Final Mission : Start Docker

With Docker installed and ready to roll, it was time for the final mission: testing the installation. I was about to take my first dive into containerized waters, and luckily, Docker provided a handy little lifeboat—a sample project called docker/welcome-to-docker. 🛳️

Step 1: Launch Docker Desktop
First things first, I launched Docker Desktop from the Start menu. You’ll notice Docker starts running in the background, quietly preparing to do its container magic.

Step 2: Accessing the CLI
Now, it was time to get my hands dirty with some command-line interface (CLI) action. Since Docker works best with Linux distributions, I needed to make sure I was operating in the right environment. In my case, that meant switching to Ubuntu (remember we already exit just now☺️).

To switch to Ubuntu, I opened my CLI and typed:

ubuntu

This moved me into my Ubuntu environment, where Docker commands are at home. 🐧💻

Step 3: Running the Docker Welcome Project
With the environment set, it was time to spin up my first Docker container using Docker’s welcome project. Here’s the command I used:

docker run -d -p 80:80 docker/welcome-to-docker

(Note: The -d flag runs the container in detached mode, meaning it runs in the background, and the -p 80:80 part maps the container’s port 80 to my machine’s port 80. Translation: the container is now accessible via my web browser.)

After running this command, Docker fired up the welcome container in the background, and I could visit http://localhost in my browser to see the "Welcome to Docker" message. Success! 🎉

Step 4: Stopping the Container
Once I’d taken in all the glory of my first running container, it was time to shut it down. To do this, I needed the container’s ID. I found it by running:

docker ps -a

This listed all running containers, and from there, I grabbed the container ID. With the ID in hand, I issued the command:

docker stop [container_id]

And just like that, my container was stopped, quietly resting until needed again. 🛌

So there you have it—Docker is now installed on Windows. If you found this blog post helpful, feel free to share it with others who might benefit from it. And hey, why not hit that follow button for more nerdy goodness on JavaScript, React, and all things web development?

Let's stay in touch on Instagram, Twitter, and GitHub—where the real magic happens.

Thanks for sticking around! 😊

Reference

Effortless Payments with Lemon Squeezy | Next.js Integration Made Simple

Bro Karim — Sun, 25 Aug 2024 08:08:07 +0000

Introduction

For many entrepreneurs, the payment process feels like the ultimate test of patience. Just when you think you've finally untangled it all, another layer of complications pops up, reminding you that smooth sailing is still a distant dream.

You feel the same? Lemon Squeezy is your aspirin!
This magical payment potion simplifies everything, so you can ditch the payment drama and focus on the fun stuff. No more coding contortions needed. It's like having a payment unicorn on your team.

Why LemonSqueezy?

Well, imagine running your SaaS business without needing a PhD in tax compliance or an endless supply of aspirin for payment headaches. LemonSqueezy streamlines it all, from payments and subscriptions to global tax compliance and fraud prevention.

Plus, it’s got your back with multi-currency support and a storefront ready for all kinds of digital products. It’s like having a tech-savvy business partner who handles all the boring stuff so you can focus on what you do best—creating! Perfect for digital creators, entrepreneurs, and anyone who prefers clicking buttons to coding solutions.

Project Setup

Before we dive in, I just want to say that you can find the full code in my GitHub repo and catch the demo on my Instagram. Now, about this project on GitHub—it’s got two payment options: first, the classic one-time payment; second, the ever-fancy subscription model.

But for this tutorial, we’re going all-in on once time payment. Oh, and for my example, I’m using a monthly house cleaning service as the case study. It might sound a tad absurd, but hey, it’s all part of our coding workout! 💪

1. Setup LemonSqueezy

In order to get started you should have created a store in Lemon Squeezy as well as some products and variants.

Make sure you have test mode ON. On publishing the store, it will turn OFF; check on the bottom left side.

Here's how my product look like

Next, let's generate an API Key at https://app.lemonsqueezy.com/settings/api to connect to our store:

Add this as an environment variable to your Next.js project:



LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

2. Setuup the route handler

Next, create an API route to handle the payment procces, In this part, the final result we want is to obtain a checkoutUrl which we will later pass to the Frontend section.



export const dynamic = "force-dynamic";

export async function POST(req: NextRequest) {
  try {

    const reqData = await req.json();

    if (!reqData.productId) {
      console.error("Product ID is missing");
      return NextResponse.json({ message: "Product ID is required" }, { status: 400 });
    }


    const response = await lemonSqueezyApiInstance.post("/checkouts", {
      data: {
        type: "checkouts",
        attributes: {
          checkout_data: {
            custom: {
              user_id: "123",
            },
          },
        },
        relationships: {
          store: {
            data: {
              type: "stores",
              id: process.env.LEMON_SQUEEZY_STORE_ID?.toString(),
            },
          },
          variant: {
            data: {
              type: "variants",
              id: reqData.productId.toString(),
            },
          },
        },
      },
    });

    const checkoutUrl = response.data.data.attributes.url;
    console.log(response.data);
    return NextResponse.json({ checkoutUrl });
  } catch (error) {
    console.error("Error in POST /api/lemonsqueezy:", error);
    return NextResponse.json({ message: "An error occured" }, { status: 500 });
  }
}

Here's a simple explanation for this code :

firs we ensures that the page is always dynamically rendered, which is important for real-time data by using export const dynamic = "force-dynamic";
Define async function that handles POST requests to this API route, The function first checks if a product ID is provided. If not, it returns an error message.
Next we do Api Call to lemonsqueezy to creates a new checkout session , including details like the store ID and product variant.
To get storeId, Go to settings for that

After the Api call , it extracts the checkout URL from the response:

const checkoutUrl = response.data.data.attributes.url;

Finally, it returns this URL in the response:

return NextResponse.json({ checkoutUrl });

To make sure our API is working correctly, we need to test it. I use a tool called Postman for this. Before we start,we need the variantId of our product You can find this in your LemonSqueezy dashboard.

If everything is working correctly, you should get a response that includes a checkoutUrl

3. CreatIng the UI & Call the item data

Now that we've laid the groundwork, our next step is time to make the frontend look good, I am a huge fan of TailwindCSS so i make the pricing card with them

the code is availale here

Next lets set up an async function that calls the API route we just created. The function will send a POST request with the productId and, in return, get the checkout URL. Once you have the URL, open it in a new tab to send the user to the payment page.



 const buyProcut1 = async () => {
    try {
      const response = await axios.post("../api/lemonsqueezy", {
        productId: "495244",
      });

      console.log(response.data);
      window.open(response.data.checkoutUrl, "_blank");
    } catch (error) {
      console.error(error);
      alert("Failed to buy product #1");
    }
  };

That code is about

Defines an asynchronous function called buyProduct1
Next send a request to your server with a specific productId, If success opens a new browser tab with the checkout URL
If anything goes wrong during the process, it catches the problem, logs it, and shows an alert to the user saying the purchase failed.

4. Setup Webhook

Last but not least, we're setting up webhooks to keep track of orders. Head back to your LemonSqueezy dashboard and set up a webhook.

For the URL, you’ll need something publicly accessible, which is tricky during local development. This is where ngrok comes in handy.

ngrok will give you a temporary public URL that forwards to your local machine, You can check this link to setup ngrok in your device :
https://dashboard.ngrok.com/get-started/setup/

Just like before, the code to handle the webhook is already done for you. All you need to do is set it up in your route handler and enjoy the sweet

Let's stay in touch on Instagram, Twitter, and GitHub—where the real magic happens.

Thanks for sticking around! 😊

Newsletter with Next.js | Nextjs Mailchimp API Integration✉️

Bro Karim — Sun, 18 Aug 2024 10:03:53 +0000

Introduction

Do you feel like your email inbox is too empty and needs a little useful 'spam'?

No worries—let’s fix it with some good old-fashioned email magic! Today, we’ll dive into setting up a Mailchimp newsletter subscription in your Next.js app

Why Mailchimp

Well, let's dive into the world of email marketing without emptying our wallets, shall we? Mailchimp's free tier perfect for us newsletter newbies who aren't ready to break the bank.
But wait....

there's more! Mailchimp isn't just a pretty face with a cute monkey logo. It's got a flexible API that's letting you bend and twist your newsletter form to your heart's content. And let's not forget its popularity among developers , which means when you're stuck, you're never alone. So, whether you're a penny-pinching startup or a customization enthusiast, Mailchimp's got your back.

Project Setup

Before we begin,I just want to say that you can get the full code in my GitHub repo.

1. Setting Up Mailchimp

To begin, you'll need to set up a Mailchimp account and obtain the necessary credentials

After creating your account, it's time to grab your API keys. If you're a seasoned pro with API keys, you can jump straight to the keys section. For the rest of us mere mortals, there's a handy guide to walk you through it.

Once you're on the API keys page, look for the "Create A Key" button. When naming your key, get creative but practical. Think of it as naming a pet rock – make it memorable and relevant, like "blog-newsletter-signup". This way, you won't scratch your head later wondering what on earth that key was for. Remember, a well-named API key is a happy API key!

Once, you’ve created a key, copy it and put it somewhere safe so you can use it later.

Next, you need a way to add a user to your audience when they hit the subscribe button on your form.

With your account set up, your API key, Audience ID, and API server region you are ready to get into coding up your newsletter. Let’s start by creating some environment variables.

2. Configuring Environment Variables for Mailchimp API

To keep your audience id and API keys secure, it's recommended to create environment variables. Otherwise, someone could see your keys and Audience ID in the request data.

To create environmental variables you need to create a .env file in the root directory of your project. This lets you access these values without hardcoding them to your form.

MAILCHIMP_API_KEY=xxxxxx-us20
MAILCHIMP_API_SERVER=us20
MAILCHIMP_AUDIENCE_ID=xxxxxx

Remember to add .env to your .gitignore file to keep your credentials secure.

3. Creating API Route for Newsletter Subscription

Next, create an API route to handle the subscription process. This route will communicate with the Mailchimp API to add new subscribers. Create a file named app/api/subscribe/route.ts, Here how my file look like :

Now lets make a request to Mailchimp. You can achieve this by using Nextjs API routes with the following code :

import type { NextApiResponse } from 'next';
import { NextResponse } from 'next/server';

export async function POST(req: Request, res: NextApiResponse) {
  try {
    const { email } = await req.json();

    if (!email) {
      return res.status(400).json({ error: 'Email is required' });
    }

    const MailchimpKey = process.env.MAILCHIMP_API_KEY;
    const MailchimpServer = process.env.MAILCHIMP_API_SERVER;
    const MailchimpAudience = process.env.MAILCHIMP_LIST_ID;

    if (!MailchimpKey || !MailchimpServer || !MailchimpAudience) {
      throw new Error('Missing Mailchimp environment variables');
    }

    const customUrl = `https://${MailchimpServer}.api.mailchimp.com/3.0/lists/${MailchimpAudience}/members`;

    const response = await fetch(customUrl, {
      method: 'POST',
      headers: {
        Authorization: `Basic ${Buffer.from(`anystring:${MailchimpKey}`).toString('base64')}`,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email_address: email,
        status: 'subscribed',
      }),
    });

    if (!response.ok) {
      const errorData = await response.json();
      return res.status(response.status).json({ error: errorData.detail });
    }

    const received = await response.json();
    return NextResponse.json(received);
  } catch (error) {
    console.error('Error:', error);
    return res.status(500).json({ error: 'Internal Server Error' });
  }
}

This API route receives the email address, validates it, and sends a request to Mailchimp to add the subscriber.

4. Creating a Newsletter Subscribe form

Finally, let's create a user-friendly subscription form using Formik for form handling and Yup for validation. Here's an example of how to implement the form:

"use client";

import React, { useState, useRef, useEffect } from "react";
import * as Yup from "yup";
import { Formik, Form, Field, ErrorMessage } from "formik";

type Props = {};

const requiredSchema = Yup.object({
  email: Yup.string().email("Invalid email").required("Email is required"),
});

function SubscribeForm({}: Props) {
  const [status, setStatus] = useState<number | null>(null);
  const [message, setMessage] = useState<string>("");
  const [buttonDisabled, setButtonDisabled] = useState<boolean>(false);
  const [submitting, setSubmitting] = useState<boolean>(false);
  const [run, setRun] = useState<boolean>(false);
  const [totalCounts, setTotalCounts] = useState<number>(400);
  const [dimensions, setDimensions] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    const { innerWidth: width, innerHeight: height } = window;
    setDimensions({
      width,
      height,
    });
  }, []);
  return (
    <div className="flex flex-col space-y-8 md:w-[500px]">
      <Formik
        initialValues={{
          email: "",
        }}
        validationSchema={requiredSchema}
        onSubmit={async (values, { resetForm }) => {
          setButtonDisabled(true);
          try {
            const response = await fetch("/api/subscribe", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify({
                email: values?.email,
              }),
            });
            const datas = await response.json();
            if (datas.status >= 400) {
              setStatus(datas.status);
              setMessage("Error joining the newsletter. You can directly contact me at github@ebraj.");
              setTimeout(() => {
                setMessage("");
                setButtonDisabled(false);
              }, 2000);
              return;
            }

            setStatus(201);
            setMessage("Thank you for subscribing my newsletter 👻.");
            setRun(true);
            setTimeout(() => {
              setTotalCounts(0);
              setMessage("");
              resetForm();
              setButtonDisabled(false);
            }, 4000);
            setTotalCounts(400);
          } catch (error) {
            setStatus(500);
            setMessage("Error joining the newsletter. You can directly contact me at github@ebraj.");
            setTimeout(() => {
              setMessage("");
              setButtonDisabled(false);
            }, 2000);
          }
        }}
      >
        <Form className="w-full">
          <div className="w-full bg-transparent border flex-1 border-black rounded-full flex gap-2 px-3">
            <Field type="email" name="email" className="w-full grow rounded-md bg-transparent px-5 py-3 outline-none" placeholder="Enter your email" autoComplete="off" />
            <button className="rounded-full bg-black  my-2 px-4 py-2 font-bold text-gray-100 transition-all hover:scale-105 hover:bg-gray-900 disabled:opacity-80" type="submit" disabled={buttonDisabled}>
              {submitting ? "Submitting" : "Subscribe"}
            </button>
          </div>
          {message && <p className={`${status !== 201 ? "text-red-500" : "text-green-500"} pt-4 font-black`}>{message}</p>}
        </Form>
      </Formik>
    </div>
  );
}

export default SubscribeForm;

Awesome! Our newsletter form is up and running like a charm!

So there you have it—Mailchimp is now happily mingling with your Next.js app. If you found this blog post useful, feel free to share the love with others who might need it. And hey, why not hit that follow button for more nerdy goodness on JavaScript, React, and all things web development?

Let's stay in touch on Instagram, Twitter, and GitHub—where the real magic happens.

Thanks for sticking around! 😊