DEV Community: Peter Kelvin Torver

Build a Full-Stack Video Streaming App with React.js, Node.js, Next.js, MongoDB, Bunny CDN, and Material UI

Peter Kelvin Torver — Sat, 29 Mar 2025 09:11:21 +0000

The rise of video streaming platforms like YouTube, Netflix, and Twitch has transformed how we consume media. But what if you could build your own? In this comprehensive guide, we’ll walk you through creating a full-stack video streaming application using a modern tech stack: React.js, Node.js, Next.js, MongoDB, Bunny CDN, and Material UI (MUI). By the end, you’ll have a feature-rich app that supports video uploads, streaming, user interaction, and more—perfect for personal projects, learning, or even launching your own platform. Let’s dive into the process!

In this tutorial, we’ll create a powerful, full-stack video streaming application using React.js for dynamic, reusable components, Node.js for a reliable and scalable backend, Next.js for seamless server-side rendering and routing, MongoDB for efficient and flexible data management, Bunny CDN for lightning-fast video delivery, and Material UI (MUI) for a sleek, professional user interface. By the end of this journey, you’ll have a fully functional streaming app packed with modern, cutting-edge features—ready to rival platforms like YouTube or Netflix. Let’s get started!

Key Features You’ll Build:

✅ HLS Video Streaming: Deliver smooth, adaptive video playback across all devices.

✅ Debounced Search Functionality: Enhance search performance with efficient, user-friendly input handling.

✅ Data Fetching & Pagination with SWR: Seamlessly fetch video data with infinite scrolling and caching.

✅ Notification Display: Keep users engaged with real-time alerts and updates.

✅ MUI Toolpad Dashboard Design: Build a robust admin dashboard using Material UI’s advanced tools.

✅ Bookmark: Allow users to save their favorite videos effortlessly.

✅ Like & Unlike: Add interactive like/unlike features to boost engagement.

✅ Save Video History & Last Watched Time: Track user viewing progress and history with ease.

✅ Comment: Enable users to leave comments and interact with content.

✅ MongoDB Modeling: Design an optimized database schema for videos, users, and more.

✅ Upload & Publish Videos in Different Resolutions: Process and store videos in multiple quality levels.

✅ Securely Download Videos: Provide safe, authenticated video downloads for offline viewing.

✅ Share Videos to Different Platforms: Integrate social sharing for platforms like Twitter and Facebook.

✅ Implement PWA: Transform your app into a Progressive Web App for a native-like experience.

✅ SEO-Friendly: Optimize for search engines using Next.js SSR and metadata.

✅ Check Video Statistics: Display analytics like views, likes, and watch time.

✅ Stream in Different Resolutions & Quality: Let users select their preferred playback quality.

✅ Check Trending & Subscribed Channels: Showcase trending content and user subscriptions.

Why This Tech Stack?

Before we start, let’s break down why this combination of tools is ideal for a video streaming app:

React.js: Powers dynamic, reusable UI components for a responsive and interactive frontend.
Next.js: Enhances the app with server-side rendering (SSR), static site generation, and built-in routing for performance and SEO.
MongoDB: Offers a flexible, NoSQL database for storing video metadata, user profiles, and interactions.
Bunny CDN: Ensures ultra-fast video delivery with global content distribution and HLS streaming support.
Material UI (MUI): Delivers a polished, professional design system and tools like MUI Toolpad for rapid UI development.

Full Video Implementation

A video is worth a thousand words.

Conclusion

By the end of this project, you’ll have a full-stack video streaming app that’s not just functional but packed with modern features like HLS streaming & PWA support. Whether you’re building for fun, learning, or launching a startup, this app is a solid foundation. Experiment with additional features like live streaming or analytics to take it even further. Happy coding, and enjoy your YouTube-inspired creation!

Building a Full-Stack Email Job Scheduler with Next.js, Node.js, Redis, Prisma, and BullMQ

Peter Kelvin Torver — Thu, 13 Mar 2025 10:55:55 +0000

In today’s fast-paced digital world, automating workflows like email scheduling is a game-changer for developers and businesses alike. Whether you’re sending bulk marketing emails or time-sensitive notifications, a reliable job scheduling system can save time and ensure consistency. In this article, we’ll walk through building a full-stack email job scheduler using a modern tech stack: Next.js, Node.js, Redis, Prisma, and BullMQ. With features like cron-based scheduling, job retries, and a secure monitoring dashboard, this project is both practical and production-ready. Let’s dive in!

Project Overview

The goal is to create an application that allows users to schedule and manage email jobs efficiently. Users can design emails, set schedules using cron patterns or intervals, and monitor job statuses—all while ensuring security and scalability. Here’s the tech stack powering this solution:

Next.js & React.js: A dynamic, responsive front end for the user interface.
Node.js: The backbone of our server-side logic.
Redis: A fast in-memory store to manage job queues.
BullMQ & Bree: Robust libraries for job scheduling and queue processing.
Prisma & PostgreSQL: Structured data storage for users, jobs, and email records.
React-email-editor: A drag-and-drop editor for crafting professional emails.
Nodemailer: Handles sending bulk emails seamlessly.
Passport: Secures the Bull Board dashboard with authentication.

Why This Matters

This project combines modern tools to solve a real-world problem: automating email workflows. Next.js and React provide a smooth user experience, while Node.js, Redis, and BullMQ ensure backend reliability. Prisma keeps data organized, and Nodemailer scales email delivery. Adding Passport authentication to Bull Board makes it secure for production use—perfect for businesses or side projects.

By the end, you’ll have a system that schedules emails, retries failed jobs, enforces job limits, and provides real-time monitoring—perfect for automating email workflows.

Conclusion

Building a full-stack email job scheduler with Next.js, Node.js, Redis, Prisma, and BullMQ is a rewarding challenge that showcases the power of modern web development. From cron-based scheduling to secure monitoring, this app has it all. Ready to take it further? Add user roles, email templates, or analytics to make it your own.

A video is worth a thousand word; watch the full tutorial below;

React js & Nextjs Animation tutorial using React awesome reveal

Peter Kelvin Torver — Fri, 28 Feb 2025 11:31:05 +0000

In this tutorial, i have demonstrated how to add stunning animations to your React.js and Next.js projects using React Awesome Reveal! 🚀 In this tutorial, we'll cover how to integrate smooth entrance animations, scrolling effects, and more with this lightweight and easy-to-use library. Whether you're a beginner or an experienced developer, this guide will help you create eye-catching UI animations effortlessly.

🔥 What You’ll Learn:
✅ How to install and set up React Awesome Reveal
✅ Implementing fade-in, slide-in, and zoom animations
✅ Adding scroll-based animations for better user engagement
✅ Optimizing performance for smooth rendering

📌 Code & Resources: Github repo

💬 Have questions? Drop them in the comments! Don't forget to like, share, and subscribe for more React & Next.js tutorials.

A video is worth a thousand words.

Watch this video to see how to implement animations to your website step by step.

Build a Digital Agency Website with Next.js, React js & Material UI

Peter Kelvin Torver — Wed, 26 Feb 2025 14:04:11 +0000

In this full-step-by-step tutorial, you'll learn how to build a modern and responsive agency website using Next.js, React, and Material UI. Whether you're a beginner or an experienced developer, this video will guide you through:
What you will
✅ Setting up a Next.js project with MUI
✅ Designing a sleek UI with Material UI
✅ Implementing responsive layouts and animations
✅ Dark & Light Mode Toggling

Libraries Used Include
✅ Next js
✅ Material UI
✅ React awesome reveal
✅ React photo view
✅ React slick

By the end, you’ll have a fully functional agency website that looks amazing and performs great! 🚀

Here's the link to the source code

DigiAgency Source Code

How i built pac-man game using Grok 3 Ai | Can you believe it?

Peter Kelvin Torver — Sat, 22 Feb 2025 10:12:36 +0000

I challenged Grok-3 AI to build a Pac-Man game, and the results are INSANE! 🤖🎮 Watch as AI generates the classic arcade experience from scratch.
Check out this modern take on the classic Pac-Man game, built from scratch using JavaScript and powered by Grok 3 AI from xAI!

Featuring improved graphics, animated dots, smart ghost AI, sound effects, and a thrilling chase mechanic. Control Pac-Man with arrow keys, collect all dots to win, and avoid the ghosts with 5 lives to spare. Watch the confetti fly when you win, or hear the iconic death sound when caught! Full source code included – perfect for gamers and coders alike. Like, subscribe, and share if you enjoy this Grok 3 AI-enhanced retro revival!

Will it match the original? Can AI revolutionize game development? Find out now!

Wanna see how i did it?

🚀 Tech Used: Grok-3 AI, JavaScript, HTML, CSS
👍 Like & Subscribe for more AI-powered projects!
💬 Comment what game I should build next with AI!

Try game here

Build & Deploy a Real-Time Sports Voting App with Express.js, Next.js, Node.js, & SSE on Vercel & Google Cloud App Engine

Peter Kelvin Torver — Tue, 12 Nov 2024 07:51:30 +0000

I already talked about realtime data streaming using server sent events and how it differs from websockets here Realtime data streaming and in this guide, I'm going to expatiate more on that and demonstrate how to build a realtime sport leaderboard application using server sent events, nextjs app router and nodejs.

Indepth Article on Codesermon

If you're curious about real-time communication in web applications, it's essential to understand the differences and use cases of Server-Sent Events (SSE) and WebSockets. Both technologies enable real-time data transfer between the server and client, but they operate in different ways and are suited for different scenarios. Read more on Server sent events vs Websockets

Server-Sent Events (SSE) is a simpler, more efficient solution for one-way communication from the server to the client, perfect for use cases like live notifications, real-time updates, and streaming events—like in our sports voting app. On the other hand, WebSockets provide full-duplex communication, making them ideal for scenarios where both the client and server need to exchange data continuously, such as in live chats or multiplayer games.

To dive deeper into these two technologies and learn when to use each, check out this detailed article comparing Server-Sent Events (SSE) and WebSockets. You'll discover key differences, performance considerations, and real-world use cases for both technologies.

Building realtime sports voting app

In this detailed tutorial, you’ll learn how to build and deploy a real-time sports voting app using Next.js, Node.js, TypeScript, and Server-Sent Events (SSE). This app allows users to vote on sports events in real time, with live updates streamed seamlessly from the Node.js backend to the Next.js frontend. We'll guide you through each step, from setting up the development environment to deploying the app on Vercel and Google Cloud App Engine.

What you'll learn in this tutorial:

Setting up a Next.js app using TypeScript and the Next.js App Router for efficient routing and modern app structure.
Building a Node.js backend that serves voting data, handles business logic, and streams real-time updates to the frontend.
How to establish a connection between Node.js and the client using SSE (Server-Sent Events), enabling real-time communication without WebSockets.
Learn how to create a single SSE context in ReactJS, so you can manage and consume streaming data across the entire app efficiently using React Context API.
How to configure CORS (Cross-Origin Resource Sharing) on the Node.js server to allow only trusted origins to connect, ensuring security while enabling real-time updates.
Deploying your app on Vercel (for frontend) and Google Cloud App Engine (for the Node.js backend), making your app scalable, secure, and production-ready.

By the end of this tutorial, you’ll have a fully functional, real-time voting app that streams live events from the server to the client, all hosted on Vercel and Google Cloud, ready for production.

Key concepts covered in this video:

SSE (Server-Sent Events) for real-time data streaming.
React Context to manage real-time events globally across the app.
CORS Configuration to secure the server connection to trusted domains.
Deploying with Vercel and Google Cloud for robust, scalable hosting.

Project source code and indepth tutorial

You can find the project source code here together with step by step explanation of our realtime sport voting app using server sent events, nextjs app router, express and nodejs here 👉 Read the full article here to gain a better understanding of real-time project to implement in your next project!

SSE Video Tutorial

If you're looking to build a real-time web app with live updates, check out my latest YouTube tutorial! Learn how to create a sports voting app using Express.js, Next.js, Node.js, TypeScript, and Server-Sent Events (SSE). I’ll guide you through every step, from setting up the environment to deploying your app on Vercel and Google Cloud. This is a great way to learn real-time communication and cloud deployment. Don’t miss out—watch the full tutorial now!

🔔 Make sure to hit the like button and subscribe to stay updated with more web development tutorials, real-time apps, and cloud deployment tips!

Dark mode & light mode in next. Js 14 app router with material-ui without ui flickering

Peter Kelvin Torver — Thu, 07 Nov 2024 06:57:54 +0000

Introduction

Dark mode has become a popular feature in modern web applications, enhancing user experience and adding a sleek, visually appealing touch. With Next.js 14 and Material-UI (MUI), you can seamlessly toggle between dark and light modes, giving users the flexibility to choose based on their preferences. One of the challenges, however, is ensuring that the UI doesn’t flicker during theme transitions due to Nextjs server side rendering.

In this article, we’ll implement a flicker-free dark mode and light mode in Next.js 14 using the new App Router, Material-UI, and MUI CSS variables to manage theme states smoothly.

Nowadays,I spend more time creating content on my personal platform - Codesermon - Do check it out!
Checkout my new platform - Codesermon

Prerequisites

Before we start, ensure you have:

Node.js and npm installed.
Next.js 14 project setup.
Material-UI (MUI) for theme management.

Follow the steps below to install the necessary packages

Open your terminal and bootstrap a new nextjs project.

1.First, create a nextjs app

  npx create-next-app@14.2.16 nextjs-mui-theme

Open the project in your coding environment

2.Install the MUI dependencies:

npm install @mui/material @emotion/react @emotion/styled next-themes

3.Install MUI library for nextjs

npm install @mui/material-nextjs/v15-appRouter

4.Install Roboto fonts

npm install @fontsource/roboto

5.Copy & paste the code below in src/app/layout.tsx and

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

6.Install MUI icons library

npm install @mui/icons-material

7.Copy the code below and replace the code in the file src/app/globals.css


@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

8.Install the package for generating dummy data

  npm i @faker-js/faker

If you did the above, your package.json should look like this

{
  "name": "nextjs-mui-theme",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/cache": "^11.13.1",
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@faker-js/faker": "^9.2.0",
    "@fontsource/roboto": "^5.1.0",
    "@mui/icons-material": "^6.1.6",
    "@mui/material": "^6.1.6",
    "@mui/material-nextjs": "^6.1.6",
    "next": "14.2.16",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.16",
    "typescript": "^5"
  }
}

9.Create two directories in src directory

context
components

Open context driectory and create a file AppThemeContext.tsx and paste the following code.

To handle theme switching, we’ll create a custom ThemeProvider component. This component will wrap our application, detect the theme preference (dark or light), and apply it without causing UI flickering.

'use client'
import { createTheme, CssBaseline, responsiveFontSizes, ThemeProvider } from "@mui/material";
import { createContext, useContext, useMemo } from "react";
import type {} from '@mui/material/themeCssVarsAugmentation';


const AppThemeContext = createContext(null)


const AppThemeProvider = (props: any) => {

    const theme = useMemo(() => {
        return responsiveFontSizes(createTheme({
            cssVariables: {
                colorSchemeSelector: "class",
                disableCssColorScheme: true
            },
            palette: {
                primary: {
                    main: `rgb(10, 18, 42)`,
                    contrastText: 'rgb(255, 255, 255)',
                },
                secondary: {
                    main: `rgb(27, 59, 111)`,
                    contrastText: 'rgb(255, 255, 255)',
                }
            },
            colorSchemes: {
                light: {
                    palette: {
                        primary: {
                            main: `rgb(10, 18, 42)`,
                        },
                        secondary: {
                            main: `rgb(27, 59, 111)`,
                        }
                    }
                },
                dark: {
                    palette: {
                        primary: {
                            main: `rgb(10, 18, 42)`,
                        },
                        secondary: {
                            main: `rgb(27, 59, 111)`,
                        }
                    }
                }
            }
        }))
    }, [])

    return <AppThemeContext.Provider value={null}>
        <ThemeProvider theme={theme} disableTransitionOnChange>
            <CssBaseline enableColorScheme />
            {props.children}
        </ThemeProvider>
    </AppThemeContext.Provider>
}

export const useAppThemeContext =  () => useContext(AppThemeContext)

export default AppThemeProvider

Explanation

We created a theme object to be used throughout our application
Code line 14 - 17, specifies the cssVariables config which enables css variables in MUI
We defined the palette for our app
We defined the colorSchemes which specifies our light and dark mode themes. This can be modified based on your needs.
ThemeProvider: This provider applies the selected MUI theme (either dark or light) to the entire app. You

Notice that we passed theme object to the ThemeProvider component

We called CssBaseline from mui with the prop enableColorScheme which will enable color schemes based on user selection or system default and reset the proper styles for our app to display well on different devices.
We exported our custom AppThemeProvider which will wrap the whole of our application.

11.Open src/app/layout.tsx file and replace the following code

import type { Metadata } from "next";
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';
import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import "./globals.css";
import InitColorSchemeScript from "@mui/material/InitColorSchemeScript"
import AppThemeProvider from "@/context/AppThemeContext";
import {MainNavbar} from "@/components"

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
      <AppRouterCacheProvider options={{enableCssLayer: false}}>
        <AppThemeProvider>
          <InitColorSchemeScript attribute="class" />
          <MainNavbar />
          {children}
        </AppThemeProvider>
      </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Explanation

We called AppRouterCacheProvider from mui nextjs library and wrap our children inside the body element.
The component also accept an option of enableCssLayer: false
We imported our custom AppThemeProvider to wrap our whole app to apply our MUI styles.
We called <InitiColorSchemeScript attribute="class" /> to initialize our default mode on the server without a flicker.
Since cssVariables is enabled and initialized, this can be applied on the on server without a flicker.

Remember the attribute="class" must be the same value with the custom theme cssVariables config in AppThemeContext.tsx file cssVariables: { colorSchemeSelector: "class" }

Since we want our navbar to persist across pages, we called <MainNavbar /> and then {children} which will be any component passed to the layout in this case the page.tsx component.

12.Open src/components directory and create 4 files namely;
- index.tsx
- MainNavbar.tsx
- Homepage.tsx
- MediaCard.tsx

Open src/components/index.tsx and paste the code below;

export { default as MainNavbar } from "./MainNavbar"

export { default as Homepage } from "./Homepage"

Open src/components/MainNavbar.tsx and paste the code below;

'use client'
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import AdbIcon from '@mui/icons-material/Adb';
import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined';
import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined';
import { useColorScheme } from '@mui/material/styles';


const pages = ['Products', 'Pricing', 'Blog'];
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];

function MainNavbar() {
  const { mode, systemMode, setMode } = useColorScheme();
  const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
  const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);

  const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorElNav(event.currentTarget);
  };
  const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorElUser(event.currentTarget);
  };

  const handleCloseNavMenu = () => {
    setAnchorElNav(null);
  };

  const handleCloseUserMenu = () => {
    setAnchorElUser(null);
  };

  const toggleDarkTheme = React.useCallback(() => {
    if(mode){
        const currMode = mode === 'dark' ? 'light' : 'dark';
        setMode(currMode);
    }
  },[mode, systemMode])

  return (
    <AppBar position="fixed">
      <Container maxWidth="xl">
        <Toolbar disableGutters>
          <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
          <Typography
            variant="h6"
            noWrap
            component="a"
            href="#app-bar-with-responsive-menu"
            sx={{
              mr: 2,
              display: { xs: 'none', md: 'flex' },
              fontFamily: 'monospace',
              fontWeight: 700,
              letterSpacing: '.3rem',
              color: 'inherit',
              textDecoration: 'none',
            }}
          >
            LOGO
          </Typography>

          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
            <IconButton
              size="large"
              aria-label="account of current user"
              aria-controls="menu-appbar"
              aria-haspopup="true"
              onClick={handleOpenNavMenu}
              color="inherit"
            >
              <MenuIcon />
            </IconButton>
            <Menu
              id="menu-appbar"
              anchorEl={anchorElNav}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              keepMounted
              transformOrigin={{
                vertical: 'top',
                horizontal: 'left',
              }}
              open={Boolean(anchorElNav)}
              onClose={handleCloseNavMenu}
              sx={{ display: { xs: 'block', md: 'none' } }}
            >
              {pages.map((page) => (
                <MenuItem key={page} onClick={handleCloseNavMenu}>
                  <Typography sx={{ textAlign: 'center' }}>{page}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>
          <AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
          <Typography
            variant="h5"
            noWrap
            component="a"
            href="#app-bar-with-responsive-menu"
            sx={{
              mr: 2,
              display: { xs: 'flex', md: 'none' },
              flexGrow: 1,
              fontFamily: 'monospace',
              fontWeight: 700,
              letterSpacing: '.3rem',
              color: 'inherit',
              textDecoration: 'none',
            }}
          >
            LOGO
          </Typography>
          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
            {pages.map((page) => (
              <Button
                key={page}
                onClick={handleCloseNavMenu}
                sx={{ my: 2, color: 'white', display: 'block' }}
              >
                {page}
              </Button>
            ))}
          </Box>


          <Box sx={{ flexGrow: 0, pr: 2 }}>
            <Tooltip title="Toggle Theme">
              <IconButton size='large' color='inherit' onClick={() => toggleDarkTheme()} sx={{ p: 0 }}>
                {
                    mode === "dark" ? <DarkModeOutlinedIcon /> : <LightModeOutlinedIcon />
                }
              </IconButton>
            </Tooltip>
        </Box>


          <Box sx={{ flexGrow: 0 }}>
            <Tooltip title="Open settings">
              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
              </IconButton>
            </Tooltip>
            <Menu
              sx={{ mt: '45px' }}
              id="menu-appbar"
              anchorEl={anchorElUser}
              anchorOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              keepMounted
              transformOrigin={{
                vertical: 'top',
                horizontal: 'right',
              }}
              open={Boolean(anchorElUser)}
              onClose={handleCloseUserMenu}
            >
              {settings.map((setting) => (
                <MenuItem key={setting} onClick={handleCloseUserMenu}>
                  <Typography sx={{ textAlign: 'center' }}>{setting}</Typography>
                </MenuItem>
              ))}
            </Menu>
          </Box>
        </Toolbar>
      </Container>
    </AppBar>
  );
}
export default MainNavbar;

Explanation

To implement theme toggle, we import useColorScheme on line 18 from @mui/material/styles
We called it on line 25 to get the mode and systemMode
We created a function toggleDarkTheme on line 44 to 49 to check if mode is set theme toggle the opposite then we called it on line 142

Open src/components/Homepage.tsx and paste the code below;

'use client'
import React from 'react'
import { faker } from '@faker-js/faker';
import { Box, Container, Grid2 } from '@mui/material';
import MediaCard from './MediaCard';

const Homepage = () => {
    const data = Array.from({ length: 24 }).map(() => ({ 
        id: faker.string.uuid(),
        title: faker.lorem.lines(1),
        content: faker.lorem.sentences(4),
        src: faker.image.urlPicsumPhotos()
    }))
  return (
    <Box sx={[(theme) => ({
        backgroundColor: theme.vars.palette.grey[300],
        ...theme.applyStyles("dark", {
            backgroundColor: theme.vars.palette.grey[900]
        })
    })]}

    >
        <Container maxWidth="xl" sx={{mt: 9, pt: 2}}>
            <Grid2 container spacing={2}>
                {data.map(item => (
                    <Grid2 key={item.id} size={{lg: 3, md: 4, sm: 12, xs: 12}}>
                        <MediaCard item={item} />
                    </Grid2>
                ))}
            </Grid2>
        </Container>
    </Box>
  )
}

export default Homepage

Open src/components/MediaCard.tsx and paste the code below;

import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

type Item = { id: string, title: string, src: string, content: string}

export default function MediaCard({item}: { item: Item}) {
  return (
    <Card sx={{ height: "100%"}}>
      <CardMedia
        sx={{ height: 140 }}
        image={item.src}
        title={item.title}
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {item.title}
        </Typography>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {item.content}
        </Typography>
      </CardContent>
      <CardActions sx={{justifyContent: "space-between"}}>
        <Button color='inherit' variant='outlined' size="small">Share</Button>
        <Button color='inherit' variant='outlined' size="small">Learn More</Button>
      </CardActions>
    </Card>
  );
}

13.Open src/app/page.tsx file and paste the following code


import { Homepage } from "@/components";

export default function Home() {
  return ( <Homepage />);
}

14.Open your terminal within vs code or your chosen environment and run the command the blow to start the nextjs project.

npm run dev

The above command should start a nextjs server listening on port 3000 like;

http://localhost:3000

Go ahead and open it in the browser and navigate to the above url and you should see your project running!

With the above implementation you should be able to toggle between light and dark mode without UI flickering.

Minimize Flickering

Using ThemeProvider’s defaultMode="system" and InitColorSchemeScript's defaultMode="system" ensures that the app initially matches the user’s system theme on load. This approach minimizes the risk of a flicker effect and provides a smoother experience. If the above are not provided, the system's default mode will picked by default.

Conclusion

You’ve successfully implemented dark mode and light mode in your Next.js 14 app using MUI without flickering. Here are some additional tips for enhancing your implementation:

System Theme Detection: Mui ThemeProvider’ defaultTheme="system" applies the system’s theme by default, ensuring that users start with their preferred theme.
Server-Side Rendering: If using SSR, this implementation handles theme detection automatically to avoid flickering.
Customization: You can further customize light and dark in AppThemeContext.tsx for brand-specific colors, fonts, and more!

By following these steps, you can provide a smooth, flicker-free dark mode experience in your Next.js app, enhancing both usability and visual appeal.

Get The Source Code

For the full implementation, you can find the source code here Nextjs Mui Theme Code

Youtube Video

A video is worth a thousand words!

How to earn money through blogging

Peter Kelvin Torver — Wed, 06 Dec 2023 12:50:31 +0000

In the dynamic realm of the internet, blogging has emerged as a powerful tool for sharing knowledge, fostering communities, and even generating income. While the notion of earning money through blogging may seem daunting, it is indeed an achievable goal with the right approach and strategies. This article delves into effective monetization strategies that can transform your blog into a rewarding source of income.

1. Display Advertising: Unleashing the Power of Visuals

Incorporating display ads into your blog can be an effective way to monetize your content. Platforms like Google AdSense, Mediavine, and other ad networks allow you to display ads relevant to your blog's niche, earning revenue based on impressions or clicks. These ads seamlessly integrate into the layout of your blog, providing a non-intrusive way to generate income.

2. Affiliate Marketing: Harnessing the Influence of Endorsements

Affiliate marketing involves promoting products or services through unique affiliate links embedded in your blog posts or reviews. When a reader makes a purchase using your affiliate link, you earn a commission. This strategy leverages your credibility and influence to recommend products or services that align with your blog's niche, providing a valuable resource for your audience while generating income for you.

3. Sponsored Content: Partnering with Brands for Strategic Promotion

Partner with tech companies or brands to create sponsored content, such as reviews, articles, or social media posts. This approach allows you to showcase products or services to your audience while receiving compensation. Sponsored content should be seamlessly integrated into your blog's editorial style, ensuring that it remains authentic and valuable to your readers.

4. Digital Products: Unlocking the Value of Knowledge and Expertise

Capitalize on your expertise by creating and selling digital products related to tech topics. eBooks, online courses, webinars, and software tools are all viable options to generate income from your blog. Digital products offer a unique opportunity to package your knowledge and skills into a valuable resource that can be accessed by your audience on demand.

5. Membership/Subscriptions: Offering Exclusive Access to Premium Content

Offer exclusive content or resources to your audience through a paid membership or subscription model. This could include access to premium blog posts, forums, downloadable content, or early access to new products or services. A membership or subscription model allows you to provide additional value to your most engaged readers while generating ongoing revenue.

6. Freelance Services: Leveraging Skills for Direct Profitability

Leverage your tech knowledge and skills to offer freelance services through your blog. Web development, graphic design, and tech consulting are just a few examples of services you can provide. By showcasing your expertise on your blog, you can attract potential clients and establish yourself as a trusted authority in your niche.

7. Events/Webinars: Monetizing Expertise through Interactive Experiences

Organize and host online events, workshops, or webinars related to your blog's niche. Charge attendees for participation fees to generate revenue from these events. This approach allows you to share your knowledge and insights with a wider audience while establishing yourself as a thought leader in your field.

8. Selling Ad Space Directly: Bypassing Networks for Control and Profitability

Instead of relying on ad networks, sell advertising space directly to companies seeking to reach your target audience. This approach offers greater control over ad placement, pricing, and the types of ads that appear on your blog. Direct ad sales can be more lucrative than relying on ad networks, but it requires a stronger understanding of your audience and advertising metrics.

9. Sponsorships and Partnerships: Building Strategic Alliances for Mutual Benefit

Collaborate with tech brands or companies for sponsorships, endorsements, or partnerships. This could involve product placements, co-branded content, or exclusive promotions. Sponsorships and partnerships provide an opportunity to leverage the reputation and reach of established brands to enhance your blog's visibility and credibility while generating income.

10. Consulting or Coaching: Transforming Expertise into Profitable Guidance

Establish yourself as an expert in a particular tech niche and offer consulting or coaching services to individuals or businesses. Your blog can serve as a platform to showcase your expertise and attract clients. Consulting or coaching allows you to directly apply your knowledge and experience to help others achieve their goals, generating income while making a significant impact.

Conclusion: The Path to Effortless Monetization

By implementing these monetization strategies and building a loyal readership, you can transform your blog into a rewarding source of income. Remember, success in blogging requires dedication, consistency, and a genuine passion for your chosen topic. Embrace the power of blogging and embark on a journey to financial freedom through your passion for technology.

You can also read

Stream Processing Paradigm: Enabling Continuous Data Analysis and Transformation

Nextjs 14 app router authentication & role-based authorization using nextauth & mongodb adapter

Stream Processing Paradigm: Enabling Continuous Data Analysis and Transformation

Peter Kelvin Torver — Tue, 05 Dec 2023 08:12:23 +0000

Introduction

In the modern era of data-driven applications and systems, the ability to analyze and transform data in real-time has become increasingly important for organizations across various industries. Traditional batch processing approaches, which involve collecting and processing large volumes of data at fixed intervals, are often inadequate for handling the continuous influx of data generated by modern applications and systems. This is where stream processing emerges as a transformative paradigm, enabling organizations to extract valuable insights from data streams in real-time.

Unlike traditional batch processing, stream processing allows for the continuous processing and analysis of data streams in real-time. This makes it a powerful mechanism for addressing the dynamic nature of data-driven applications, where data is generated at a high velocity and needs to be analyzed and acted upon quickly. Stream processing can be used for a wide range of applications, such as fraud detection, real-time monitoring, and predictive maintenance.

What is Stream Processing?

Stream processing, also known as real-time data processing or continuous data processing, is a data processing paradigm that involves analyzing and transforming data streams as they are generated. Data streams are continuous flows of data, such as sensor data, clickstream data, and social media feeds, that arrive at a processing system in an unbounded and unordered manner.

Key Characteristics of Stream Processing

Stream processing is distinguished by several key characteristics that make it well-suited for handling real-time data:

Low Latency: Stream processing systems are designed to process data with minimal latency, ensuring that insights are extracted and actions are taken in near real-time.
High Throughput: Stream processing systems can handle massive volumes of data in real-time, enabling organizations to analyze large data streams without compromising performance.
Scalability: Stream processing systems are designed to scale horizontally, allowing them to handle increasing data volumes by adding more processing units.
Continuous Processing: Stream processing systems continuously analyze data as it arrives, providing a continuous flow of insights and enabling real-time decision-making.

Benefits of Stream Processing

Stream processing offers numerous benefits that make it a compelling choice for real-time data analysis and transformation:

Real-time Insights: Stream processing enables organizations to extract valuable insights from data streams in real-time, allowing them to make informed decisions and respond promptly to changes in the environment.
Fraud Detection: Stream processing can be used to detect fraudulent activities in real-time, such as credit card fraud or insurance fraud, by analyzing patterns in data streams.
Anomaly Detection: Stream processing can be used to detect anomalies in data streams, such as unusual sensor readings or traffic spikes, indicating potential problems or opportunities.
Predictive Analytics: Stream processing can be used to build predictive models that forecast future events based on historical data patterns, enabling organizations to take proactive measures.
Personalized Experiences: Stream processing can be used to provide personalized experiences to users based on real-time analysis of their behavior and preferences.

Common Use Cases for Stream Processing

Stream processing finds applications in a wide range of scenarios, including:

Financial Trading: Stream processing is used to analyze real-time market data for trading decisions, fraud detection, and risk management.
IoT Applications: Stream processing is used to analyze data from IoT devices in real-time for monitoring, anomaly detection, and predictive maintenance.
Social Media Analytics: Stream processing is used to analyze social media data in real-time for sentiment analysis, trend detection, and customer engagement.
Clickstream Analysis: Stream processing is used to analyze clickstream data in real-time for website optimization, user behavior analysis, and targeted advertising.
Network Traffic Monitoring: Stream processing is used to analyze network traffic data in real-time for anomaly detection, intrusion detection, and network performance optimization.

Stream Processing Architecture

Stream processing systems typically consist of three main components:

Data Sources: Data sources generate data streams, such as sensors, network traffic, or social media feeds.
Stream Processing Engine: The stream processing engine processes data streams in real-time, applying analytical functions and transformations.
Data Sinks: Data sinks store or consume processed data streams, such as databases, data warehouses, or visualization dashboards.

Stream Processing Technologies

Numerous stream processing technologies are available, each with its own strengths and capabilities. Some popular open-source stream processing technologies include:

1.Apache Kafka: A distributed streaming platform for handling high-volume data streams.

2.Apache Flink: A high-performance stream processing framework for complex data analytics.

3.Apache Spark Streaming: An extension of Apache Spark for real-time data processing.

4.Apache Storm: A distributed stream processing system for scalable real-time analytics.

5.Google Cloud Dataflow: A managed stream and batch data processing service in the Google Cloud Platform.

Challenges and Considerations in Stream Processing

Data Volume and Heterogeneity: The ever-increasing volume and heterogeneity of data streams pose significant challenges for stream processing systems. Handling large volumes of data in real-time requires efficient algorithms and scalable architectures. Moreover, the diverse nature of data streams, including structured, semi-structured, and unstructured data, demands sophisticated processing techniques that can handle different data formats and semantics.
Latency and Fault Tolerance: Real-time applications demand low latency for processing and generating insights from data streams. However, maintaining low latency while ensuring fault tolerance can be challenging. Stream processing systems need to be designed to handle failures gracefully and recover quickly to minimize disruptions and maintain continuous processing.
Scalability and Resource Optimization: Scaling stream processing systems to handle increasing data volumes and workloads is crucial for their practical use in real-world applications. This requires efficient resource utilization and the ability to dynamically allocate resources based on demand. Additionally, optimizing resource usage can help reduce costs and improve energy efficiency.
Security and Privacy: As stream processing systems handle sensitive data, security and privacy are paramount concerns. Ensuring data confidentiality, integrity, and availability is essential to prevent unauthorized access, data breaches, and privacy violations.
Deployment and Management: Deploying and managing stream processing systems can be complex, especially in distributed environments. Stream processing frameworks need to provide user-friendly tools and interfaces for configuration, monitoring, and troubleshooting.
Integration with Existing Systems: Integrating stream processing systems with existing data infrastructure and applications can be challenging due to compatibility issues and data exchange protocols. Stream processing platforms should provide seamless integration capabilities to facilitate data exchange and interoperability.
Continuous Learning and Adaptation: Stream processing systems need to adapt to changing data patterns and user requirements. Incorporating machine learning techniques can enable stream processing systems to learn from data streams, identify anomalies, and adapt their processing behavior accordingly.

Why you should consider GlassFlow

We've compiled a range of challenges present in existing data streaming technologies, from complex setup and lengthy learning curves to security concerns and the need for proficient in-house data engineers. But what if I told you there's a remedy that simplifies your life? That solution is GlassFlow.

What is GlassFlow?

GlassFlow is a Python-based platform that simplifies the process of building and managing streaming data pipelines. It offers several advantages over traditional solutions like Apache Kafka and Apache Flink, including:

Why is Glassflow the best choice?

Ease of Use: GlassFlow provides an intuitive and user-friendly interface, making it easier for Python developers to build and maintain data streaming pipelines without extensive training or expertise in complex frameworks.

Automatic Scaling: GlassFlow automatically scales its resources to meet the changing demands of the streaming data pipelines, ensuring optimal performance and eliminating the need for manual intervention.

Serverless Transformation Engine: GlassFlow's serverless transformation engine allows users to define data transformations as functions and events, streamlining the process of transforming and analyzing streaming data.

Reduced Infrastructure Burden: GlassFlow abstracts away the complexities of managing underlying infrastructure, freeing up data engineers to focus on developing and delivering value from their streaming data pipelines.

Accessibility for Data Engineers: GlassFlow empowers data engineers to play a more active role in driving business value by enabling them to build, manage, and transform streaming data pipelines without relying on specialized data science teams.

Overall, GlassFlow addresses the limitations of traditional streaming data solutions by providing a user-friendly, scalable, and serverless approach to building and managing streaming data pipelines, empowering data engineers to deliver greater value to their organizations.

I recommend you to join their waitlist here.

Do you want to learn more about data processing?

Check out GlassFlow’s blog here

Conclusion

Stream processing has emerged as a transformative paradigm for real-time data analysis and transformation, providing organizations with the capability to continuously process and analyze data streams in real-time. This enables them to extract valuable insights and make informed decisions promptly, responding effectively to dynamic and rapidly changing conditions. As the volume and velocity of data continue to grow in the modern data-driven landscape, stream processing is poised to play an increasingly critical role in various industries. Its ability to handle the continuous influx of data generated by interconnected devices and applications makes it an essential tool for businesses seeking to stay ahead of the curve, driving innovation and facilitating agile decision-making processes. In essence, stream processing has become a cornerstone for organizations striving to harness the power of real-time data analysis to gain a competitive edge and adapt to the ever-evolving demands of the digital era.

I recommend you to join their waitlist here.

Do you want to learn more about data processing?

Check out GlassFlow’s blog here

Nextjs 14 app router authentication & role-based authorization using nextauth & mongodb adapter

Peter Kelvin Torver — Sat, 02 Dec 2023 12:01:50 +0000

Unlock the Potential of NextJS 14: Mastering NextAuth & MongoDB for Secure Authentication and Role-Based Authorization

In the dynamic realm of web development, security and user authentication are paramount. NextJS 14, a popular React framework, has emerged as a powerful tool for building secure and scalable web applications. With NextAuth and MongoDB, developers can seamlessly integrate user authentication and role-based authorization into their NextJS applications, ensuring a secure and personalized user experience.

Key Highlights

This comprehensive guide will equip you with the knowledge and skills to master NextAuth and MongoDB for secure authentication and role-based authorization in NextJS 14:

Effortless NextAuth Integration: Seamlessly integrate NextAuth into your NextJS 14 application for a streamlined authentication experience.
MongoDB Authentication Backend: Harness the power of MongoDB as your authentication backend, leveraging its robust data storage and management capabilities.
Role-Based Authorization Implementation: Implement role-based authorization to control user access and permissions, ensuring secure access to application features.
NextJS Development Enhancement: Elevate your NextJS development skills to the next level by mastering advanced authentication and authorization techniques.
Nextjs App and Node Server Connection: Connect your Nextjs App with a Node server to establish a secure communication channel.
Access and Refresh Token Functionality: Implement access and refresh token functionality to maintain user sessions and manage authentication refresh cycles.
NextAuth JWT and Database Strategy with Database Adapter: Utilize NextAuth JWT and database strategy with a database adapter to enhance security and streamline authentication processes.
Server & client side data fetching: Easily fetch data on both server & client side using SWR in the nextjs app.
Data & form validation: Learn how to validate form data client and server side using zod library.
Data & form validation: Learn how to validate form data client and server side using zod library.
Protect API routes: Learn how to protect server api routes using nextjs 14 middleware to implement both protected and public routes.
Protect pages with auth session : Learn how to use next auth session to protect private pages and require authentication.

Target Audience

This guide is designed for a wide range of individuals interested in enhancing their NextJS authentication skills:

NextJS Developers: Developers seeking to elevate their NextJS development skills by mastering advanced authentication and authorization techniques.
Web Security Specialists: Aspiring web security specialists seeking to expand their knowledge of secure user authentication and authorization in NextJS applications.
MongoDB Enthusiasts: Enthusiasts eager to explore MongoDB's authentication capabilities and its integration with NextJS 14.

Embrace the Future of Secure NextJS Development

By embarking on this comprehensive journey, you will gain the necessary skills and knowledge to seamlessly implement authentication and role-based authorization within your NextJS 14 applications. This guide will empower you to:

Effortlessly Set Up User Authentication: Discover how to set up secure user authentication, ensuring a secure and personalized user experience.
Implement Flawless Role-Based Access Control: Implement role-based access control to manage user permissions, ensuring that users only access authorized application features.
Harness NextJS 14, NextAuth, and MongoDB Adapter: Leverage the power of NextJS 14, NextAuth, and MongoDB Adapter to create a smooth, secure, and scalable user authentication experience.

Enhance Your NextJS Skills

Whether you're a beginner or an experienced developer, this guide equips you with the tools and knowledge to effortlessly implement advanced authentication and authorization features in your NextJS projects. Level up your NextJS game and don't miss this opportunity to enhance your skills!

Link to the repo can be found here

Watch Now and Unlock Seamless Authentication

Embark on this journey to master NextAuth and MongoDB for secure authentication and role-based authorization in NextJS 14. Watch now and unlock the world of seamless authentication and role-based authorization in NextJS 14! Don't forget to like, subscribe, and share this knowledge with fellow developers!

Auto deploy reactjs application on cpanel using github actions(CI/CD).

Peter Kelvin Torver — Fri, 31 Mar 2023 13:00:10 +0000

In this video tutorial, I'm going to show you a step by step process on how to auto-deploy your react js application from github to cpanel using github actions. This will enable you to publish your changes from development to production and have your changes reflect on the remote server immediately .

In order to host your react.js app on cpanel, we will assume you have acquired a hosting package with cpanel accessible. In this article, we will be using namecheap shared hosting package but you can use any hosting plan.

Video Tutorial
If you are the visual type like me, go ahead and watch the video below.
Please don't forget to like, share, comment, subscribe and turn on notification as that will give me the motivation to do more awesome videos and tutorials like this.

Build & deploy tailwindcss, nextjs & nodejs app on cpanel

Peter Kelvin Torver — Fri, 19 Aug 2022 09:21:48 +0000

In this video tutorial, we 'll build and deploy a tailwindcss, nextjs, nodejs application and host it on cpanel using namcheap shared shared hosting package. Technologies used include; react js, next js, javascript, cpane, vscode, node js, tailwindcss.