DEV Community: syed kamruzzaman

Chat App Deploy on Kubernetes Using Kind, Metallb and Ingress

syed kamruzzaman — Tue, 31 Dec 2024 20:37:18 +0000

This guide provides step-by-step instructions for deploying a full-stack chat application on Kubernetes using Kind, Metallb, and Ingress. It is designed to help developers set up a robust Kubernetes cluster for hosting containerized applications on a virtual private server (VPS).

The deployment includes setting up essential Kubernetes tools, configuring a load balancer, integrating SSL for secure communication, and deploying both the frontend and backend services. Additionally, optional sections cover monitoring the application with Prometheus and Grafana for enhanced observability and performance tracking.

Whether you are deploying a chat application for production or exploring Kubernetes capabilities, this guide will serve as a comprehensive roadmap to get your application up and running efficiently.

🚀 Getting Started For k8s

Below table helps you to navigate to the particular tool installation section fast.

Tech stack	Installation
Docker	Install and configure Docker
Kind & Kubectl	Install and configure Kind & Kubectl
Metallb	Install Metallb
Ingress	Install and configure Ingress
Helm	Helm Install and configure
SSL Certificate	Install and configure Cert Manager
Project Deploy	Project Deploy and Others
Monitoring	Namespace Create for Groping Prometheus and grafana and Other
Prometheus	Install and configure Prometheus
Grafana	Install and configure Grafana

📢 Pre-requisites to implement this project:

[!Note]
vps minimum need

RAM - 4GB
CPU - 2 Core(s)
Storage - 20 GB
One Domain

🐳 Docker Install and configure

sudo apt-get update

sudo apt-get install docker.io -y
sudo usermod -aG docker $USER && newgrp docker

📦 Kind & Kubectl Install and configure

Install KIND and kubectl using the provided script. Create kind_kubectl_config.yaml file:


#!/bin/bash

# For AMD64 / x86_64
[ $(uname -m) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.26.0/kind-linux-amd64
chmod +x ./kind
sudo cp ./kind /usr/local/bin/kind

VERSION="v1.31.0"
URL="https://dl.k8s.io/release/${VERSION}/bin/linux/amd64/kubectl"
INSTALL_DIR="/usr/local/bin"

curl -LO "$URL"
chmod +x kubectl
sudo mv kubectl $INSTALL_DIR/
kubectl version --client

rm -f kubectl
rm -rf kind

echo "kind & kubectl installation complete."

./kind_kubectl_config.yaml

[!Note]
If your Vps ARM64 then use this [ $(uname -m) = x86_64 ] && curl -Lo ./kind https://kind.sigs.k8s.io/dl/v0.26.0/kind-linux-amd64
Run this script and it cerate kubectl and kind environment.
Kind Install More Information

🛠️ Setting Up the KIND Cluster

Create a kind-cluster-config.yaml file:

kind: Cluster
apiVersion: kind.x-k8s.io/v1alpha4

nodes:
- role: control-plane
  image: kindest/node:v1.31.2
- role: worker
  image: kindest/node:v1.31.2
- role: worker
  image: kindest/node:v1.31.2
  extraPortMappings:
  - containerPort: 80
    hostPort: 80
    protocol: TCP
  - containerPort: 443
    hostPort: 443
    protocol: TCP

Create the cluster using the configuration file:

kind create cluster --config kind-cluster-config.yaml --name my-kind-cluster

Verify the cluster:

kubectl get nodes
kubectl cluster-info

[!Note]
Here i add extraPortMappings for running Ingress

🍏 Metallb Install

[!Note]
I am using Metallb for use LoadBalance. Suppose you are using Aws/Azure/DigitalOcean ect whose provide kubernates loadBalance facility then doesn't need Metallb. Here I buy VPS from a local company. They give one IP address to access VPS.

kubectl apply -f https://raw.githubusercontent.com/metallb/metallb/v0.14.9/config/manifests/metallb-frr.yaml

Check Metallb configuration

kubectl get all -n metallb-system

🛠️ Create a metallb_config.yaml file:

apiVersion: metallb.io/v1beta1
kind: IPAddressPool
metadata:
  name: first-pool
  namespace: metallb-system
spec:
  addresses:
  - 160.191.163.33-160.191.163.33

apply metallb_config.yaml file

kubectl apply -f metallb_config.yaml

[!Note]
MY VPS IP address is 160.191.163.33. Change this IP as your require

♻️ Ingress Install and configure

kubectl apply -f https://kind.sigs.k8s.io/examples/ingress/deploy-ingress-nginx.yaml

[!Note]
Here service/ingress-nginx-controller show EXTERNAL-IP is your VPS IP. My VPS IP is 160.191.163.33. It ensure that Our Metallb LoadBalance wroking.

🧊 Helm Install and configure

curl -fsSL -o get_helm.sh https://raw.githubusercontent.com/helm/helm/main/scripts/get-helm-3
chmod 700 get_helm.sh

./get_helm.sh

Check Helm Version

helm version

🔒🌐 Install and configure Cert Manager || SSL Certificate

helm repo add jetstack https://charts.jetstack.io --force-update
helm repo update

Installing cert-manager CRDs

helm install cert-manager --namespace cert-manager --version v1.16.2 jetstack/cert-manager

https://artifacthub.io/packages/helm/cert-manager/cert-manager

📚 Project Deploy and Others

Step One

Clone the below Project in your VPS

git clone https://github.com/kamruzzamanripon/k8-node-react-mongodb-app.git

Step Two

Go to k8s folder and you can see this file \

Step Three

Create Nampe Space

kubectl apply -f namespace.yaml

Step Four

Apply all Secret file

kubectl apply -f backend-secret.yaml
kubectl apply -f jwt-secret.yaml
kubectl apply -f mongodb-secret.yaml

Step Five

Declear Mongodb Volumes and Others

kubectl apply -f mongo-pv.yaml
kubectl apply -f mongo-pvc.yaml
kubectl apply -f mongodb-deployment.yaml
kubectl apply -f mongodb-service.yaml

Step Six

Apply the Rest of Other file

kubectl apply -f backend-deployment.yaml
kubectl apply -f backend-service.yaml
kubectl apply -f frontend-deployment.yaml
kubectl apply -f frontend-service.yaml

Step Seven

Configure SSL Certificate Domain. Open ssl_certificate.yaml and edit your desired domain name

Apply ssl_certificate.yaml file

kubectl apply -f ssl_certificate.yaml

Step Eight

Configure Ingress file. Open ingress.yaml and add your desired domain name. \

Apply ingress.yaml file

kubectl apply -f ingress.yaml

Check Certificate

Check NameSpace

kubectl get all -n chat-app

🌐 Browser View

🎉 Conclusion

Congratulations! You’ve successfully deployed the Full-Stack Chat Application . You can now access your Chat App.

💻 Monitoring and Others [Optional]

Now we are doing Extra features like Monitoring. It helps you learn about servers and apps.

Create Namespace

kubectl create namespace monitoring

Check Namespace

[!Note]
This Namespace helping to control all monitoring app like- Prometheus, Grafana, Loki ect

Prometheus and Grafana Install and Configure

Install

 helm install prometheus-stack prometheus-community/kube-prometheus-stack --namespace monitoring --set prometheus.service.nodePort=30000 --set grafana.service.nodePort=31000 --set grafana.service.type=NodePort --set prometheus.service.type=NodePort

Run Prometheus Via Port

 kubectl port-forward svc/prometheus-stack-kube-prom-prometheus 9090:9090 -n monitoring --address=0.0.0.0 &

now you can access Prometheus using this port. Like

http://160.191.163.33:9090

[!Note]
Change IP Address

Grafana Install and Configure
Run Grafana Via Port

kubectl port-forward svc/prometheus-stack-grafana 3000:80 -n monitoring --address=0.0.0.0  &

Get Grafana Username and Password

UserName

admin

password

kubectl get secret prometheus-stack-grafana -n monitoring -o jsonpath="{.data.admin-password}" | base64 --decode

[!Note]
You can change password

Grafana Dashboard.

Here you can choose different type Algorithm Dashboard

That’s all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

Project Github Link
https://github.com/kamruzzamanripon/k8-node-react-mongodb-app

লাইভ ডেলিভারি পিজা অ্যাপ

syed kamruzzaman — Sun, 06 Oct 2024 13:49:07 +0000

ছোট একটি Laravel CRUD প্রজেক্ট। এই প্রজেক্ট-এ Service pattern Apply করা হয়েছে। তবে এই প্রজেক্ট এর মূল ফিচার হল Advance ফিচার। এগুলো হলো –

Event Feature.
Real Time Notification System.
Database Notification System.
Mail Feature.
Database Backup Feature.
Schedule command Feature.

বর্তমানে competition অনেক বেশি। আপনার পোটফোলিওতে যদি এইসব Advance Feature সহ একটি Project থাকে তাহলে আপনি কিছুটা হলেও এগিয়ে থাকবেন।
আর সর্বশেষে কিভাবে VPS Server এ Deploy করবো, তা দেখানো চেষ্টা করবো।
আশা করি আপনাদের ভাল লাগবে।

Project Introduction

PlayList

Project PlayList

Dockerizing a Laravel App: Nginx, MySql, PhpMyAdmin, and Php-8.2

syed kamruzzaman — Mon, 08 Jul 2024 18:13:47 +0000

What is Docker?
Docker is an open-source platform that enables developers to automate the deployment, scaling, and management of applications using containerization. Containers package an application and its dependencies into a single, lightweight unit that runs consistently across different computing environments.

Why Do We Need Docker?

Consistency Across Environments: Docker ensures that your application runs the same way regardless of where it’s deployed — whether on a developer’s local machine, a testing server, or in production. This eliminates the “it works on my machine” problem.
Isolation: Containers encapsulate everything needed to run an application, ensuring that dependencies, libraries, and configurations are isolated from other applications. This isolation prevents conflicts between different applications on the same host.
Scalability: Docker makes it easy to scale applications horizontally by running multiple container instances. This can be managed dynamically based on load and demand, leading to better resource utilization and performance.
Efficiency: Containers are lightweight and share the host system’s kernel, making them more efficient than traditional virtual machines (VMs) which include a full operating system.
Rapid Deployment: Docker containers can be quickly created, started, stopped, and destroyed. This rapid provisioning accelerates development, testing, and deployment cycles.
Portability: Containers can run on any system that supports Docker, providing great flexibility in deployment choices, whether on-premises or in the cloud.

### Prerequisite Laravel App Setup with Docker

1. Install Docker

For Windows: Download and install Docker Desktop from the Docker website.
For macOS: Download and install Docker Desktop from the Docker website.
For Linux: Follow the instructions on the Docker website for your specific Linux distribution.

Ensure Docker is running by executing the following command in your terminal:

docker –version

2. Install Docker Compose
Docker Compose is a tool for defining and running multi-container Docker applications. It’s often used for setting up complex environments with multiple services (like web servers, databases, etc.).

For Windows and macOS: Docker Compose is included with Docker Desktop.
For Linux: Install Docker Compose following the instructions on the Docker Compose installation page.

Verify the installation by running:

docker-compose –version

### Set Up a Laravel Project
If you don’t have a Laravel project already, you can create a new one. If you already have a Laravel project, skip this step.

composer create-project laravel/laravel example-app
cd example-app

### Dockerize Laravel application
1. Create a Dockerfile in your root project
A Dockerfile is a script that contains instructions on how to build a Docker image for your application.

Dockerfile

FROM php:8.2-fpm-alpine

ARG user
ARG uid

RUN apk update && apk add \
    curl \
    libpng-dev \
    libxml2-dev \
    zip \
    unzip \
    shadow  # Add shadow package to install useradd

RUN docker-php-ext-install pdo pdo_mysql \
    && apk --no-cache add nodejs npm

COPY --from=composer:latest /usr/bin/composer /usr/local/bin/composer

#USER root

#RUN chmod 777 -R /var/www/

RUN useradd -G www-data,root -u $uid -d /home/$user $user
RUN mkdir -p /home/$user/.composer && \
    chown -R $user:$user /home/$user
WORKDIR /var/www
USER $user

Here we pass two Arguments one is user and the other is uid for create a new user and other permission.

2. Create a docker-compose folder. And inside this folder create the below folder

Mysql
Nginx
- ssl
Php
Redis
- data Like this way

Here are other files we will create later.

3. Create a docker-compose.yml file in your root project
docker-compose.yml

version: "3.7"

services:

####################################################################################################
# app
####################################################################################################
  app:
    build:
      args:
        user: developer
        uid: 1000
      context: ./
      dockerfile: Dockerfile
    image: app
    container_name: app-rifive-laravel
    restart: unless-stopped
    environment:
      VIRTUAL_HOST: laravel.test
    working_dir: /var/www/
    volumes:
      - ./:/var/www
      - ~/.ssh:/root/.ssh
    depends_on:
      - db
      - redis  
    networks:
      - laravel

####################################################################################################
# DATABASE (MySQL)
####################################################################################################
  db:
    image: mysql:8.0
    container_name: mysql-rifive-laravel
    restart: unless-stopped
    ports:
      - "3306:3306"
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_USER: ${DB_USERNAME}
      SERVICE_TAGS: dev
      SERVICE_NAME: mysql
    volumes:
      - ./docker-compose/mysql/data:/var/lib/mysql
      - ./docker-compose/mysql/logs:/var/log/mysql
      - ./docker-compose/mysql/ql:/docker-entrypoint-initdb.d
    networks:
      - laravel
####################################################################################################
# Nginx
####################################################################################################      
  nginx:
    image: nginx:alpine
    container_name: nginx-rifive-laravel
    restart: unless-stopped
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./:/var/www
      - ./docker-compose/nginx:/etc/nginx/conf.d
      - ./docker-compose/nginx/ssl:/etc/nginx/conf.d/ssl
      - ./docker-compose/nginx/phpmyadmin.conf:/etc/nginx/conf.d/phpmyadmin.conf
    networks:
      - laravel

####################################################################################################
# phpMyAdmin
####################################################################################################      
  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    container_name: phpmyadmin-rifive-laravel
    ports:
        - 8080:80
    links:
        - db
    restart: unless-stopped
    environment:
        PMA_HOST: db
        #PMA_USER: ${DB_USERNAME}
        #PMA_PASSWORD: ${DB_PASSWORD}
        PMA_PORT: 3306
        PMA_ARBITRARY: 1
    networks:
        - laravel

 ####################################################################################################
# Redis
####################################################################################################
  redis:
    image: "redis:alpine"
    container_name: ri-rifive-redis
    restart: unless-stopped
    volumes:
        - ./docker-compose/redis/data:/data
    ports:
      - "6379:6379"
    networks:
      - laravel      
networks:
  laravel:
    driver: bridge

here we create 5 image

Laravel App
Database MySQL
Nginx
PhpMyAdmin
Redis

4. Create a Necessary file for nginx. Go to docker-compose/nginx Folder and create these files

laravel.conf

server {
    listen 80;
    server_name laravel.test;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name laravel.test;
    index index.php index.html;

    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/public;

    ssl_certificate /etc/nginx/conf.d/ssl/self-signed.crt;
    ssl_certificate_key /etc/nginx/conf.d/ssl/self-signed.key;

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
}

phpMyAdmin.conf

server {
    listen 80;
    server_name phpmyadmin.laravel.test;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name phpmyadmin.laravel.test;
    index index.php index.html;

    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /usr/share/nginx/html;

    ssl_certificate /etc/nginx/conf.d/ssl/self-signed.crt;
    ssl_certificate_key /etc/nginx/conf.d/ssl/self-signed.key;

    location / {
        proxy_pass http://phpmyadmin:80;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

::::Now run docker Container::::

docker compose up –build

when build is complete then run this command

docker compose exec -it app sh

Now you can see your shell terminal. If you run whoami command then you see developer as a user. Run below this command

cd docker-compose/nginx/ssl/
openssl req -x509 -sha256 -nodes -days 365 -newkey rsa:2048 -keyout self-signed.key -out self-signed.crt

This command creates two files in your docker-compose/nginx/ssl folder.

self-signed.crt
self-signed.key Like this picture

Now run this command

cd /var/www
php artisan migrate

now you exit shell command and your application will be ready for run. Hit this URL

Laravel App

https://localhost

PhpMyAdmin

http://localhost:8080/

That’s all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

https://github.com/kamruzzamanripon/docker-laravel-nginx

Laravel Vue SPA Admin Panel with Taildwindcss

syed kamruzzaman — Sun, 14 Jan 2024 09:50:58 +0000

Sometimes we work on an app That’s time, we need a simple Admin Panel. But most of the Admin Panel has a lot of components and features. But we need a simple Admin Panel for custom modification as design and logic demand. Today I discuss this simple SPA admin panel.

Below you can see the short video about this project -

Project Overview

Step-1

Install Laravel latest app

composer create-project laravel/laravel spa-admin-panel

Step-2

Install necessary packages.

npm install vue
npm install vue-router
npm install pinia
npm install  @vitejs/plugin-vue

Step-3

Install Tailwindcss and setup Tailwindcss config file

npx tailwindcss init -p

Open tailwind.config.js and do this

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then go to resources folder then css folder and open app.css and write this code-

@tailwind base;
@tailwind components;
@tailwind utilities;

Now you finished your tailwindcss setup

Step-4

Vite configure setup. Open your vite.config.js and do this

import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

Then open welcome.blade.php and do this

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />

        @vite(['resources/js/app.js', 'resources/css/app.css'])
    </head>
    <body >
        <div id="app">
            <app-component></app-component>
        </div>
    </body>
</html>

Step-5

App-component defined on app.js. Go to resources / js folder and open app.js.

import { createPinia } from 'pinia';
import { createApp } from "vue";
import './bootstrap';

//Component import
import AppComponent from './App.vue';
import router from "./routes/index.js";

//define 
const app = createApp({});
const pinia = createPinia()

//define as component
app.component("app-component", AppComponent);

//use package 
app.use(pinia)
app.use(router)

app.mount("#app");

Here we configure vue, pinia, vue-router and then define app-component.

Step-6

Make some folders and App.vue file inside js folder below like this

Step-7

Configure router file. Go to resources / js / routes and create index.js file. Write this code

import { createRouter, createWebHistory } from "vue-router";
import AuthLayout from "../components/layouts/AuthLayout.vue";
import DefaultLayout from "../components/layouts/DefaultLayout.vue";
import Page404 from "../views/PageNotFound.vue";
import About from "../views/about/About.vue";
import Login from "../views/auth/Login.vue";
import Register from "../views/auth/Register.vue";
import Dashboard from "../views/dashboard/Dashboard.vue";

const routes = [
    {
        path: "/",
        redirect: "/dashboard",
        component: DefaultLayout,
        children: [
           { path: "/dashboard", name: "Dashboard", component: Dashboard,  meta: { title: "Dashboard" } },
           { path: '/about', name: "About", component: About },
        ],
    },
    {
        path: "/auth",
        redirect: "/login",
        name: "Auth",
        component: AuthLayout,
        children: [
            { path: "/login", name: "Login", component: Login },
            { path: "/register", name: "Register", component: Register },

        ],
    },
    {
        path: "/:pathMatch(.*)*",
        name: "NotFound",
        component: Page404,
    },
];


const router = createRouter( {
    history: createWebHistory(),
    routes,
} );

// Update the document title on each route change
router.beforeEach((to, from, next) => {
    document.title = to.meta.title || 'Kamruzzaman';
    next();
  });

export default router;

Step-8

Make layout component.

AuthLayout.vue

<template>
    <section class="flex flex-col h-screen">
        <!-- navbar -->
        <nav class="w-full py-4 bg-blue-600 px-3 min-h-[10%] flex justify-center">
           <img src="../../assets/coffeeLogo.png" alt="coffeeLogo" class="h-11">
        </nav>

        <router-view />

        <!-- footer -->
        <footer class="w-full py-3 bg-blue-800 text-center text-white min-h-[5%]">
            This is coypright@syed kamruzzaman, just fun 😂
        </footer>

    </section>
</template>

DefaultLayout.vue

<template>
    <div class="relative min-h-screen">
        <Sidebar />
        <!-- navbar -->
        <div
            class="bg-gray-700 py-4 px-4 text-light-grey flex justify-between items-center fixed left-0 right-0 z-10"
        >
            <ToggleIcon
                class="my-1 w-6 h-6 sm:w-7 sm:h-7 text-gray-100 bg-dark-blue cursor-pointer md:hidden"
                @click="toggleSidebar"
            />
            <div class="cursor-pointer">
                <router-link :to="{ name: 'Dashboard' }">
                    <img
                        src="../../assets/coffeeLogo.png"
                        class="h-8"
                    />
                </router-link>
            </div>
            <div class="flex gap-4">

                <div class="flex items-center gap-4">
                    <h1
                        class="cursor-pointer font-renner_medium text-white"
                        title="Representative"
                    >
                        Hi, Kamruzzaman 
                    </h1>
                </div>
                <div class="dropdown inline-block relative">
                    <UserIcon class="w-9 h-9 cursor-pointer fill-white" />
                    <ul
                        class="dropdown-menu min-w-max absolute right-0 hidden text-gray-700 pt-5"
                    >
                        <li
                            class="bg-gray-200 hover:bg-gray-400 py-2 px-4 block whitespace-no-wrap cursor-pointer"
                            @click="logout"
                        >
                            logout
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- navbar -->
        <!-- main section -->
        <section
            class="relative pt-[70px] md:pl-[256px]"
            :class="[showSideBar ? '' : 'md:pl-[66px]']"
        >
            <router-view></router-view>
        </section>
        <!-- /main section -->

        <!-- Footer Section -->
        <div class="bg-gray-700 py-4 px-4 text-light-grey flex justify-center items-center fixed left-0 right-0 bottom-0 z-10">
            <p class="text-white mx-auto">copyright@syedKamruzzamn</p>
        </div>
        <!-- End Footer Section -->
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { basicStore } from '../../store/basicStore';
import ToggleIcon from "../icons/ToggleIcon.vue";
import UserIcon from "../icons/UserIcon.vue";
import Sidebar from "./Sidebar.vue";

const basicStoreInfo = basicStore();

const toggleSidebar =()=>{
    basicStoreInfo.showSideBar = !basicStoreInfo.showSideBar;
}
const logout =()=>{
    alert("hello Ripon");
}

const showSideBar = computed(() => basicStoreInfo.showSideBar)

</script>

<style scoped>
.dropdown:hover .dropdown-menu {
    display: block;
}

</style>

Sidebar.vue

<template>
    <!-- desktop sidebar  -->
    <div
        class="bg-gray-300 text-light-grey h-screen hidden w-full md:block md:fixed md:top-0 md:bottom-0 md:z-10 md:pt-[68px]"
        :class="[showSideBar ? 'md:w-64' : 'md:w-16']"
    >
        <ChevronLeftIcon
            class="relative -right-48 ml-5 my-2 w-8 h-8 stroke-2 text-light-grey bg-dark-blue cursor-pointer"
            v-if="showSideBar"
            @click="toggleSidebar"
        />
        <ChevronRightIcon
            class="ml-5 my-2 w-8 h-8 stroke-2 text-light-grey bg-dark-blue cursor-pointer"
            v-if="!showSideBar"
            @click="toggleSidebar"
        />

        <nav class="relative">

            <SidebarItem
                to="Dashboard"
                class="group relative"
                :class="{
                    ['router-link-active router-link-exact-active']:
                        $route.path.match('dashboard') !== null,
                }"
            >
                <CompanyIcon class="w-10 h-10 fill-white" />
                <span class="group-hover:opacity-100 transition-opacity bg-gray-800 px-3 text-sm text-gray-100 rounded-md absolute left-1/2 -translate-x-1/2 translate-y-full opacity-0 m-4 mx-auto"
                v-if="!showSideBar"
                >Dashboard</span>
                <span
                    class="sidebar-item text-white"
                    :class="[showSideBar ? 'block' : 'hidden']"
                    >Dashboard</span
                >
            </SidebarItem>


            <SidebarItem
                to="About"
                class="group relative"
                :class="{
                    ['router-link-active router-link-exact-active']:
                        $route.path.match('about') !== null,
                }"
            >
                <OrdersIcon class="w-6 h-10 fill-white ml-2" />
                <span class="group-hover:opacity-100 transition-opacity bg-gray-800 px-3 text-sm text-gray-100 rounded-md absolute left-1/2 -translate-x-1/2 translate-y-full opacity-0 m-4 mx-auto"
                v-if="!showSideBar"
                >About</span>
                <span
                    class="sidebar-item ml-2 text-white"
                    :class="[showSideBar ? 'block' : 'hidden']"
                    >About</span
                >
            </SidebarItem>

        </nav>
    </div>
    <!-- /desktop sidebar -->

    <!-- mobile side bar -->
    <MobileSidebar />
    <!-- /mobile side bar -->
</template>

<script setup>
import ChevronLeftIcon from "../icons/ChevronLeftIcon.vue";
import ChevronRightIcon from "../icons/ChevronRightIcon.vue";
import CompanyIcon from "../icons/CompnayIcon.vue";
import OrdersIcon from "../icons/OrdersIcon.vue";
import SidebarItem from "./SidebarItem.vue";

import { computed, ref } from 'vue';
import { basicStore } from '../../store/basicStore';
import MobileSidebar from "./MobileSidebar.vue";

const basicStoreInfo = basicStore();
const show = ref(true)

const toggleSidebar =()=>{
    basicStoreInfo.showSideBar = !basicStoreInfo.showSideBar;
}

const showSideBar = computed(() => basicStoreInfo.showSideBar)

</script>

SidebarItem.vue

<template>
    <router-link
        :to="{ name: to }"
        class="flex items-center gap-2 px-3 py-2 hover:bg-light-gold transition duration-200 cursor-pointer"
    >
        <slot></slot>
    </router-link>
</template>

<script>
export default {
    props: {
        to: {
            required: true,
            type: String,
            default: "Dashboard",
        },
    },
    computed: {
        routeName() {
            return this.$route.name;
        },
    },
};
</script>

<style scoped>
.router-link-active,
.router-link-exact-active {
    background: #4c4c54;
}
</style>

MobileSidebar.vue

<template>
    <!-- mobile side bar -->
    <div
        class="fixed bg-gray-600 h-screen w-full z-10 md:hidden  transition-all duration-500 ease-in-out"
        :class="[showSideBar ? '-top-[1px] sm:70px block' : '-top-[900px]']"
    >
        <nav class="mt-[80px]">
            <SidebarItem
                to="Dashboard"
                :class="{
                    ['router-link-active router-link-exact-active']:
                        $route.path.match('dashboard') !== null,
                }"
                @click="toggleSidebar"
            >
                <CompanyIcon class="w-10 h-10 fill-white text-light-grey" />
                <span class="sidebar-item text-gray-100">Dashboard </span>
            </SidebarItem>

            <SidebarItem
                to="About"
                :class="{
                    ['router-link-active router-link-exact-active']:
                        $route.path.match('about') !== null,
                }"
                @click="toggleSidebar"
            >
                <CompanyIcon class="w-10 h-10 fill-white text-light-grey" />
                <span class="sidebar-item text-gray-100">About </span>
            </SidebarItem>


        </nav>
    </div>
    <!-- /mobile side bar -->
</template>

<script setup>
import { computed } from 'vue';
import { basicStore } from '../../store/basicStore';
import CompanyIcon from "../icons/CompnayIcon.vue";
import SidebarItem from "./SidebarItem.vue";

const basicStoreInfo = basicStore();

const toggleSidebar =()=>{
    basicStoreInfo.showSideBar = !basicStoreInfo.showSideBar;
}

const showSideBar = computed(() => basicStoreInfo.showSideBar)

</script>

Step-9

Now we make some pages.

Dashboard
About
Login
Register
PageNotFound

Dashboard.vue

<template>
    <div class="px-5 py-5">
        <h1 class="text-3xl mb-3">Dashboard Page </h1>
        <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure nihil nam labore deleniti ratione eius consectetur vel illo nemo reiciendis ullam, incidunt quam doloribus praesentium id, corrupti rem. Ullam dolores, non voluptate quis maxime ducimus temporibus repudiandae nihil quasi? Similique.
        </p>
    </div>
</template>

Desktop View and Menu Unextended

Desktop View and Menu Extended

Mobile View and Menu Unextended

Mobile View and Menu Extended

About.vue

<template>
    <div class="px-5 py-5">
        <h1 class="text-3xl mb-3">About Page</h1>
        <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure nihil nam labore deleniti ratione eius consectetur vel illo nemo reiciendis ullam, incidunt quam doloribus praesentium id, corrupti rem. Ullam dolores, non voluptate quis maxime ducimus temporibus repudiandae nihil quasi? Similique, accusamus eos sunt fugit tempora sit necessitatibus vero placeat corrupti voluptatem pariatur aliquid debitis corporis iusto. Suscipit, sunt!.
        </p>
    </div>
</template>

<script setup>

</script>

Design Look Similar Dashboard.

Login.vue

<template>
    <div class="min-h-[85%] flex items-center justify-center bg-gray-100">
      <div class="bg-white p-8 rounded shadow-md">
        <h1 class="text-2xl font-semibold mb-6">Login Page</h1>

        <!-- Form -->
        <form @submit.prevent="login">
          <!-- Username Input -->
          <div class="mb-4">
            <label for="username" class="block text-gray-600 text-sm font-medium mb-2">Username:</label>
            <input
              type="text"
              id="username"
              v-model="username"
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
              required
            />
          </div>

          <!-- Password Input -->
          <div class="mb-6">
            <label for="password" class="block text-gray-600 text-sm font-medium mb-2">Password:</label>
            <input
              type="password"
              id="password"
              v-model="password"
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
              required
            />
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
          >
            Login
          </button>
        </form>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        username: '',
        password: '',
      };
    },
    methods: {
      login() {
        // Handle login logic here
        console.log('Logging in...');
      },
    },
  };
  </script>

Desktop View and Menu Unextended

Desktop View and Menu Extended

Register.vue

<template>
    <div class="min-h-[85%] flex items-center justify-center bg-gray-100">
      <div class="bg-white p-8 rounded shadow-md">
        <h1 class="text-2xl font-semibold mb-6">Register Page</h1>

        <!-- Form -->
        <form @submit.prevent="register">
          <!-- Username Input -->
          <div class="mb-4">
            <label for="username" class="block text-gray-600 text-sm font-medium mb-2">Username:</label>
            <input
              type="text"
              id="username"
              v-model="username"
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
              required
            />
          </div>

          <!-- Email Input -->
          <div class="mb-4">
            <label for="email" class="block text-gray-600 text-sm font-medium mb-2">Email:</label>
            <input
              type="email"
              id="email"
              v-model="email"
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
              required
            />
          </div>

          <!-- Password Input -->
          <div class="mb-6">
            <label for="password" class="block text-gray-600 text-sm font-medium mb-2">Password:</label>
            <input
              type="password"
              id="password"
              v-model="password"
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
              required
            />
          </div>

          <!-- Confirm Password Input -->
          <div class="mb-6">
            <label for="confirmPassword" class="block text-gray-600 text-sm font-medium mb-2">Confirm Password:</label>
            <input
              type="password"
              id="confirmPassword"
              v-model="confirmPassword"
              class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500"
              required
            />
          </div>

          <!-- Submit Button -->
          <button
            type="submit"
            class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 focus:outline-none focus:shadow-outline-blue"
          >
            Register
          </button>
        </form>
      </div>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
      };
    },
    methods: {
      register() {
        // Handle registration logic here
        console.log('Registering...');
      },
    },
  };
  </script>

Desktop View and Menu Unextended

Desktop View and Menu Extended

PageNotFound.vue

<template>
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
      <div class="text-center">
        <h1 class="text-4xl font-bold mb-6">404 Not Found</h1>
        <p class="text-gray-600 text-lg mb-8">The page you are looking for does not exist.</p>
        <router-link to="/" class="text-blue-500 hover:underline">Go back to the home page</router-link>
      </div>
    </div>
  </template>

Now we have done all the necessary things. we will now configure our main route. Go to routes folder and open web.php file and do this

Route::get('/{any}', function () {
    return view('welcome');
})->where("any", ".*");

Now we finished our full SPA app processing.

Full Project GitHub

https://github.com/kamruzzamanripon/laravel-vue-pinia-admin-panel-boilerplate

That’s all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

Deploy A NextJs App and Node API on a Linux Server

syed kamruzzaman — Sun, 17 Dec 2023 19:49:05 +0000

In this tutorial, we will learn how to deploy a NextJS app and Node Api on a Linux server. NexJS will serve as the frontend view and Node as the backend. We have already discussed Node API and NextJS app in previous articles, which you can find here:

Making API Using Node and Express. Link
Scaffolding redux-toolkit in NextJs. Link
API Setup in NextJs. Link
AI Prompt setup on Nextjs. Link

Linux is a popular and widely used server operating system. In this tutorial, we will be using Ubuntu 22.04.3. I assume you are familiar with Linux, so let's get started.

Prerequisites Before we begin, ensure you have the following:

one remote server (VPS)
one domain

Step 1:
Check your VPS for the following software and versions. Install them if they are not already present.

nginx -v
node -v
npm
mongod --version
git --version
pm2 –version

Step 2: Connect Your Domain to Your Server
Go to your domain manager, then to the DNS Manager, and set up your IP address. First, create a sub-domain for the Node API.

Note: Your domain setup page may look different from this.

Then, check your DNS here: https://dnschecker.org/

Step 3:
Upload Your Node and Next App to GitHub

Step 4: Server SSH Configuration
Go to your server and check if there is an .ssh folder. If not, create one:

sudo mkdir .ssh

Now create a key for your Node app:

ssh-keygen -f node_movie_api -t ed25519 -C "your_email@example.com"

You should now see two files in your .ssh folder:

node_movie_api
node_movie_api.pub

Open node_movie_api.pub and copy the code:

cat node_movie_api.pub

Then, go to your GitHub and open your Node project. Click the "Settings" button and paste the key in the key field.

Back on your server, create a config file:

touch ~/.ssh/config

and add the following code to the config file:

Host node_movie_api
        HostName github.com
        User your_github_username
        IdentityFile ~/.ssh/node_movie_api
        IdentitiesOnly yes

Check if your GitHub project connection is okay:

ssh -T git@node_movie_api

If you see a message indicating successful authentication, the connection is okay.
Now, go to your home directory and copy the GitHub link.

Modify this link as shown below-

git clone git@node_movie_api: kamruzzamanripon/node-movie-api.git

here node_movie_api is your host name. you already defined in .ssh folder inside config file. And after you just copy this thing and paste it here.
After successfully cloning, move the cloned project to the /var/www folder.
Then go to /var/www/ node-movie-api folder. Then run this command

npm install

then create this

nano ecosystem.config.cjs

module.exports = {
  apps : [
      {
        name: "nove_movie_api",
        script: "./app.js",
        port: 8000
      }
  ]
}

Step 5: Create Table on MongoDB

mongosh
show dbs
use node_movie_api

now you create node_movie_api table.

Step 6: Configure Nginx for node
Go to the Nginx folder and create a configuration file for your node app:

cd /etc/nginx/sites-available
sudo nano node_movie_api

Add the following configuration

server{
    listen 80;
    listen [::]:80;
    server_name your_domain www.your_domain;
    location / {
       proxy_pass http://localhost:8000;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
    }
}

Enable the virtual host or create a symbolic link of the virtual host file:

sudo ln -s /etc/nginx/sites-available/node_movie_api /etc/nginx/sites-enabled/node_movie_api

Check if the configuration is correct:

sudo nginx -t

Restart Nginx:

sudo service nginx restart

*Step 8: env file variable define *
Go to /var/www/ node-movie-api or your project folder . open your .env file and change this

Step 7 : make folder for image
In your public folder creates uploads folder then inside create two folder

category
image

then run ecosystem.config.cjs file below like this

pm2 start ecosystem.config.cjs
pm2 save

Step 8: Check Your Sub-Domain
Open your browser and check if your sub-domain is working without errors.
We have successfully deployed Node app.

Step 9: Set Up Next App
Go to your domain manager, then to the DNS Manager, and set up your IP address for the NextJS app. Use this app on your main domain.

Then check your DNS here: https://dnschecker.org/

Step 10: Server SSH Configuration for Nuxt App
Repeat the SSH key generation and GitHub configuration steps as done for the node app, but this time for your NextJS app. Remember to replace the relevant names and paths.

sh-keygen -f next_movie -t ed25519 -C "your_email@example.com"

now you can see two file in your .ssh folder

next_movie
next_movie.pub Now open next_movie.pub file and copy the code.

cat next_movie.pub

Then go to your github and open your Next project. Click Settings button

And past his copy code on Add deploy key
Go to your server and open config file

Sudo nano ~/.ssh/config

and add this code into config file

Host node_movie_api
        HostName github.com
        User kamruzzamanripon
        IdentityFile ~/.ssh/ node_movie_api
        IdentitiesOnly yes

Host next_movie
        HostName github.com
        User kamruzzamanripon
        IdentityFile ~/.ssh/next_movie
        IdentitiesOnly yes

Now check your github project connection is ok. Here is code

ssh -T git@next_movie

Now go to your Server home directory and copy github link

here next_movie is your host name. you already defined in .ssh folder inside config file. And after : you just copy this thing and past here.

git clone git@next_movie:kamruzzamanripon/next-movie-ui-with-node-api.git

Your server clones this project. Now you move this file to your /var/www folder

Sudo mv next-movie-ui-with-node-api /var/www

Go to www/folder. And then go nuxt-movie-ui-with-laravel-api folder. Open you next.config.js
sudo nano next.config.js and change this

Here mark 1 is your image url. And then open your .env.local file and put you AI Api key. Like this

After Command below line

npm install
npm run build
sudo nano ecosystem.config.js

Write below code in ecosystem.config.js file

module.exports = {
  apps : [
      {
        name: "next_movie",
        script: ".output/server/index.mjs",
        port: 3000
      }
  ]
}

Restart Nginx:

sudo service nginx restart

Start the app using pm2:

pm2 start ecosystem.config.js
pm2 save
pm2 status

Step 11: Configure Nginx for Next App
Go to the Nginx folder and create a configuration file for your Next app:

cd /etc/nginx/sites-available
sudo nano next_movie

Add the following configuration:

server{
    listen 80;
    listen [::]:80;
    server_name your_domain www.your_domain;
    location / {
       proxy_pass http://localhost:3000;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
    }

Enable the virtual host or create a symbolic link of the virtual host file:

sudo ln -s /etc/nginx/sites-available/next_movie /etc/nginx/sites-enabled/next_movie

Check if the configuration is correct:

sudo nginx -t

Restart Nginx:

sudo service nginx restart

Step 12: Check Your Domain
Open your browser and check if your domain is working without errors.
Now we successfully deploy NextJs app.

Remark on Git Cloning:
It's important to note that we used SSH for git cloning instead of HTTPS. This choice is strategic for ease of future development. Imagine you've made some changes to your project locally. With SSH, all you need to do to update your project on the server is a simple git push from your local machine, followed by a git pull on the server. This process updates your app with the latest changes. Using HTTPS wouldn't offer this straightforward workflow, as it would require repeating the entire process from the beginning for every update.
Furthermore, you can streamline the process even more by implementing auto-deployment. With this setup, any update you push to GitHub automatically reflects on your server. This automation can be achieved through GitHub Actions. In a subsequent tutorial, I plan to delve into the features of GitHub Actions and how you can use them for auto-deployment.
Stay tuned for that, and in the meantime, enjoy the benefits of easy project updates with SSH!

full Project github
Node
https://github.com/kamruzzamanripon/node-movie-api
NextJs
https://github.com/kamruzzamanripon/next-movie-ui-with-node-api
NextJs UI
https://github.com/kamruzzamanripon/next-movie-ui

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

AI Prompt setup on Nextjs.

syed kamruzzaman — Sun, 17 Dec 2023 19:46:31 +0000

In this tutorial, we have setup our AI Prompt. Previously we did 3 parts. If you don’t know then see this link

Making API Using Node and Express. Link
Scaffolding redux-toolkit in NextJs. Link
API Setup in NextJs. Link

Now we are doing 4th part. Let’s derive on-

Step-1 : .env file Setup and necessary package install

In your root project create .env.local file and do this

Here API key is a AI key which you get form your Ai Dashboard. https://platform.openai.com/

If you don’t have any AI API key then crate one and put in you .env.local file. And then install this package

  npm i openai@3.3.0

Step-2 : movie Api Setup

Previously we did a movie Api setup. API Setup in NextJs.
Go to reduxStore/features/movie folder and create this file

movieApi.js
movieSlice.js

movieApi.js

import { apiSlice } from "../api/apiSlice";

export const moviesApi = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        topMovies: builder.query({
            query: () =>
                `/top-movies`,
        }),
        manualMovieStore: builder.mutation({
            query: (data) => ({
                url: "/movie-store",
                method: "POST",
                body: data,
            }),
        }),

        aiMovieStore: builder.mutation({

            query: (data) => ({

                url: "/ai-movie-store",
                method: "POST",
                body: data,

            }),
            async onQueryStarted(arg, { queryFulfilled, dispatch }) {
               console.log('redux', arg)
            },
        }),

    }),
});

export const { useTopMoviesQuery, useManualMovieStoreMutation, useAiMovieStoreMutation} = moviesApi;

Here we have Three end points. There are

"/top-movies"
"/movie-store"
"/ai-movie-store"

movieSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    topMovies: [],
    aiMovieData:{},
    sampleData:"sdfsf sdfsf"

};

const movieSlice = createSlice({
    name: "movie",
    initialState,
    reducers: {
        topMovies: (state, action) => {
            state.topMovies = action.payload;

        },
        aiMovieData:(state, action) =>{
            console.log('redux movie')
            state.aiMovieData = action.payload;
        }

    },
});

export const { topMovies, aiMovieData} = movieSlice.actions;
export default movieSlice.reducer;

Here we have Two actions.

topMovies
aiMovieData Now, movieApi.js file, we have aiMovieStore method for store Ai information in our Database. Here you saw aiMovieData action method. This action store AI information in redux store.

Step-3: Ai Movie Page Setup and Others
Go to ai-make-movie folder and see page.js file. Write this code-

import AiFormInput from "../component/ai-make-movie/AiFormInput";
import LeftSideBar from "../component/common/LeftSideBar";
import RightSideBar from "../component/common/RightSideBar";

const Page = () => {
    return (
        <div className="flex min-h-screen">
        <LeftSideBar />
        <div className=" flex-1 py-10  px-5 sm:px-10 ">
         <AiFormInput />
        </div>
        <RightSideBar />
        </div>
    );
};

export default Page;

Now go to component/ai-make-movie and you see AiFormInput.js file

AiFormInput.js

'use client';
import { aiMovieData } from '@/app/reduxStore/features/movie/movieSlice';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { Configuration, OpenAIApi } from 'openai';
import { useState } from "react";
import { useDispatch } from 'react-redux';
import Loading from '../../ai-make-movie/loading';

const AiFormInput = () => {
  const [aiIdea, setAiIdea] = useState();
  const dispatch = useDispatch();
  const router = useRouter();
  const [loading, setLoading] = useState(false);

  //Ai configuration
  const openAiApiKey = process.env.NEXT_PUBLIC_OPEN_AI_API_KEY;
  const configuration = new Configuration({
      apiKey: openAiApiKey
  })
  const openAi = new OpenAIApi(configuration);

  //Ai form submit handle
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const aiSampleMovieData = await fetchSynopsis(aiIdea)
    dispatch(aiMovieData(aiSampleMovieData));
    //console.log('form submit', data)

   router.push("/movie-made")

  };

  async function fetchSynopsis(outline){
    const response = await openAi.createCompletion({
        model: 'text-davinci-003',
        prompt:`Generate an engaging, professional and marketable movie synopsis based on an outline. The synopsis should include actiors names in brackets after each character. Choose actors that would be ideal for this role.
        ###
        outline: A big-headed daredevil fighter pilot goes back to school only to be sent on a deadly mission.
        synopsis: The Top Gun Naval Fighter Weapons School is where the best of the best train to refine their elite flying skills, When hotshot fighter pilot Maverick (Tom Cruise) is sent o the school, his rackless attitude and cocky demeanor put him at odds with the other pilots, especially the cool and collected Iceman (Val kilmer). But Maverick ins't only competing to be the top fighter pilot, he's also fighting for the attention of his beautiful flight instructor, Charlotte Blackwood (kelly McGillis). Maverick gradually earns the respect of his intructors and peers - and also the love of Charlotte, but struggles to balance his personal and professional life. As the pilots prepare for a mission against a foreign enemy, Maverick must confront his own demons and overcome the tragedies rooted deep in his past to become the best fighter pilot and return from the mission triumphant.
        ###
        outline: ${outline}
        synopsis:
        `,
        max_tokens: 700
    })
    const synopsis = response.data.choices[0].text.trim();
    console.log('fetchSynopsis', synopsis)
    const aiMovieData = fetchTitle(synopsis);
    return aiMovieData;

}

async function fetchTitle(synopsis){
    const response = await openAi.createCompletion({
        model: 'text-davinci-003',
        prompt:`Generate a catchy movie title for this synopsis: ${synopsis}`,
        max_tokens: 25,
        temperature: 0.7
    })
    const title = response.data.choices[0].text.trim();
    console.log('fetchTitle-1', synopsis)
    console.log('fetchTitle-2', title)
    const aiMovieData = fetchImagePromt(title, synopsis)
    return aiMovieData;
}

async function fetchImagePromt(title, synopsis){
    const response = await openAi.createCompletion({
    model: 'text-davinci-003',
    prompt: `Give a short description of an image which could be used to advertise a movie based on a title and synopsis.The description should be rich in visual detail but contain no names.
    ###
    title: Love's Time Warp
    synopsis: When scientist and time traveller Wendy (Emma Watson) is sent back to the 1920s to assassinate a future dictator, she never expected to fall in love with them. As wendy infiltrates the dictator's inner circle, she soon finds herself torn between her mission and her growing feelings for the leader (Brie Larson). With the help of a mysterious stranger from the future (Josh Brolin), Wendy must decide whether to carry out her mission or follow her heart. But the choices she makes in the 1920s will have far-reaching consequences that reverberate throuugh the ages.
    image description: A silhouetted figure stands in the shadows of a 1920s speakeasy, her face turned away from the camera. In the background, two people are dancing in the dim light, one wearing a flapper-style dress and the other wearing a dapper suit. A semi-transparent image of war is super-imposed over the scene.
    ###
    title: zero Earth
    synopsis: When baodyguard kob (Daniel Radcliffe) is recruited by the United Nations to save Planet Earth from the sinister Simm (John Malkovich), an alien lord with a plan to take over the world, he reluctantly accepts the challenge, With the help of this loyal sidekick, a brave and resourceful hamster named Gizmo (Gaten Matarazzo), Kob embarks on a perilous mission to destroy Simm. Along the way, he discovers a newfound courage and strength as he battles Simms's merciless forces. With the fate of the world in his hands, kob must find a way to defeat the alien lord and save the planet.
    image description: A tired and bloodied bodyguard and hamster standing a top a tall skyscraper, looking out over a vibrant cityscape, with a rainbow in the sky above them.
    ###
    title: ${title}
    synopsis: ${synopsis}
    image description:
    `,
    temperature: 0.8,
    max_tokens: 100

    })
    console.log('fetchImagePromt-1', synopsis)
    console.log('fetchImagePromt-2', title)
    const aiMovieData = fetchImageUrl(response.data.choices[0].text.trim(), synopsis, title)
    return aiMovieData;
}

async function fetchImageUrl(imagePrompt,synopsis,title){
    const response = await openAi.createImage({
        prompt: `${imagePrompt}. There should be no text in this iamge.`,
        n: 1,
        size: '256x256',
        response_format: 'b64_json'
    })
    const b64JsonImage = response.data.data[0];
    console.log('fetchImageUrl-1', synopsis)
    console.log('fetchImageUrl-2', title)
     const aiMovieData ={
        b64JsonImage,
        synopsis,
        title
    }

    return aiMovieData;
}

  if(loading){
    return <Loading/>
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
      <div className="bg-gray-200 p-5 rounded-md dark:bg-black">
        <div className="text-center mb-8 relative">
          <h1 className="text-2xl font-bold text-gray-700 mb-3 dark:text-white">
            Hello, I am here to help Make Movie
          </h1>
          <p className="dark:text-white">
            Please, write your idea below input box
          </p>

          <Image
                src="/robot-1.webp"
                alt="Bird flying animation" 
                className="rounded-full w-48 h-48 absolute top-0 right-0"
                width={105} 
                height={105} 

            />
        </div>

        <br /><br /><br /><br />
        <div className="mb-6">
          <label
            htmlFor="message"
            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          >
            Type your Idea
          </label>
          <textarea
            id="message"
            rows={4}
            className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="Type Movie Idea..."
            onChange={(e)=>setAiIdea(e.target.value)}

          />

        </div>
        <div className="text-right">
          <button
            type="submit"
            className="bg-black text-white p-3 rounded-md dark:border"
          >
            Make Movie
          </button>
        </div>
      </div>
      </form>
    </div>
  );
};

export default AiFormInput;

Here we are implement AI Prompt. Let’s do it-
If you hit this http://localhost:3000/ai-make-movie URL then you can see this page-

This page has one input field. User just type his idea and then click Make Movie button then AI generate our information. Let’s drive in our code. Here you see ** handleSubmit** method.

//Ai form submit handle
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const aiSampleMovieData = await fetchSynopsis(aiIdea)
    dispatch(aiMovieData(aiSampleMovieData));
    //console.log('form submit', data)

   router.push("/movie-made")

  };

This method Tigger when we click Make Movie button. This method first call fetchSynopsis method and passed user input idea.

async function fetchSynopsis(outline){
    const response = await openAi.createCompletion({
        model: 'text-davinci-003',
        prompt:`Generate an engaging, professional and marketable movie synopsis based on an outline. The synopsis should include actiors names in brackets after each character. Choose actors that would be ideal for this role.
        ###
        outline: A big-headed daredevil fighter pilot goes back to school only to be sent on a deadly mission.
        synopsis: The Top Gun Naval Fighter Weapons School is where the best of the best train to refine their elite flying skills, When hotshot fighter pilot Maverick (Tom Cruise) is sent o the school, his rackless attitude and cocky demeanor put him at odds with the other pilots, especially the cool and collected Iceman (Val kilmer). But Maverick ins't only competing to be the top fighter pilot, he's also fighting for the attention of his beautiful flight instructor, Charlotte Blackwood (kelly McGillis). Maverick gradually earns the respect of his intructors and peers - and also the love of Charlotte, but struggles to balance his personal and professional life. As the pilots prepare for a mission against a foreign enemy, Maverick must confront his own demons and overcome the tragedies rooted deep in his past to become the best fighter pilot and return from the mission triumphant.
        ###
        outline: ${outline}
        synopsis:
        `,
        max_tokens: 700
    })
    const synopsis = response.data.choices[0].text.trim();
    console.log('fetchSynopsis', synopsis)
    const aiMovieData = fetchTitle(synopsis);
    return aiMovieData;

}

This fetchSynopsis method has dummy result, so that AI know what I need actually. Then I passed outline which I passed as aiIdea Parameter. So this method give me some result. Then I sort this result and get my Synopsis or Description. Then I call another method fetchTitle for get a catchy Title. Here I passed my synopsis result as a Parameter.

async function fetchTitle(synopsis){
    const response = await openAi.createCompletion({
        model: 'text-davinci-003',
        prompt:`Generate a catchy movie title for this synopsis: ${synopsis}`,
        max_tokens: 25,
        temperature: 0.7
    })
    const title = response.data.choices[0].text.trim();
    console.log('fetchTitle-1', synopsis)
    console.log('fetchTitle-2', title)
    const aiMovieData = fetchImagePromt(title, synopsis)
    return aiMovieData;
}

Now this method give me Movie Title require as my synopsis. Then again I call another method fetchImagePromt for image description. Here I passed Two parameter - title and synopsis

async function fetchImagePromt(title, synopsis){
    const response = await openAi.createCompletion({
    model: 'text-davinci-003',
    prompt: `Give a short description of an image which could be used to advertise a movie based on a title and synopsis.The description should be rich in visual detail but contain no names.
    ###
    title: Love's Time Warp
    synopsis: When scientist and time traveller Wendy (Emma Watson) is sent back to the 1920s to assassinate a future dictator, she never expected to fall in love with them. As wendy infiltrates the dictator's inner circle, she soon finds herself torn between her mission and her growing feelings for the leader (Brie Larson). With the help of a mysterious stranger from the future (Josh Brolin), Wendy must decide whether to carry out her mission or follow her heart. But the choices she makes in the 1920s will have far-reaching consequences that reverberate throuugh the ages.
    image description: A silhouetted figure stands in the shadows of a 1920s speakeasy, her face turned away from the camera. In the background, two people are dancing in the dim light, one wearing a flapper-style dress and the other wearing a dapper suit. A semi-transparent image of war is super-imposed over the scene.
    ###
    title: zero Earth
    synopsis: When baodyguard kob (Daniel Radcliffe) is recruited by the United Nations to save Planet Earth from the sinister Simm (John Malkovich), an alien lord with a plan to take over the world, he reluctantly accepts the challenge, With the help of this loyal sidekick, a brave and resourceful hamster named Gizmo (Gaten Matarazzo), Kob embarks on a perilous mission to destroy Simm. Along the way, he discovers a newfound courage and strength as he battles Simms's merciless forces. With the fate of the world in his hands, kob must find a way to defeat the alien lord and save the planet.
    image description: A tired and bloodied bodyguard and hamster standing a top a tall skyscraper, looking out over a vibrant cityscape, with a rainbow in the sky above them.
    ###
    title: ${title}
    synopsis: ${synopsis}
    image description:
    `,
    temperature: 0.8,
    max_tokens: 100

    })
    console.log('fetchImagePromt-1', synopsis)
    console.log('fetchImagePromt-2', title)
    const aiMovieData = fetchImageUrl(response.data.choices[0].text.trim(), synopsis, title)
    return aiMovieData;
}

Here inside this method, first I setup dummy result then I setup my parameter. This method give me image description as require title and synopsis. Now I get Three result

synopsis or Description
title or Movie Title
imagePrompt or Image Description. Now we call, another method fetchImageUrl for image create.

async function fetchImageUrl(imagePrompt,synopsis,title){
    const response = await openAi.createImage({
        prompt: `${imagePrompt}. There should be no text in this iamge.`,
        n: 1,
        size: '256x256',
        response_format: 'b64_json'
    })
    const b64JsonImage = response.data.data[0];
    console.log('fetchImageUrl-1', synopsis)
    console.log('fetchImageUrl-2', title)
     const aiMovieData ={
        b64JsonImage,
        synopsis,
        title
    }

    return aiMovieData;
}

This method give me Base64 image and size 256 x 256. We can increase size. Now we get three information from AI and return this information like as object to handleSubmit method

//Ai form submit handle
  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    const aiSampleMovieData = await fetchSynopsis(aiIdea)
    dispatch(aiMovieData(aiSampleMovieData));
    //console.log('form submit', data)

   router.push("/movie-made")

  };

Here this method got all information from AI and then dispatch this information to aiMovieData action, which we were create movieSlice.js

So, aiMovieDate method store AI information.

Now we show this information in our redux extension plugin.

Step-4: Ai Result Show and Others

Go to /movie-made folder, open page.js and do this

import AiFormResult from "../component/ai-make-movie/AiFormResult";
import LeftSideBar from "../component/common/LeftSideBar";
import RightSideBar from "../component/common/RightSideBar";

const Page = () => {
    return (
        <div className="flex min-h-screen">
        <LeftSideBar />
        <div className=" flex-1 py-10  px-5 sm:px-10 ">
          <AiFormResult />
        </div>
        <RightSideBar />
        </div>
    );
};

export default Page;

Now go to /component/ai-make-movie folder and open AiFormResult.js and write this-

'use client';
import { useAllCategoriesQuery } from "@/app/reduxStore/features/category/categoryApi";
import { useAiMovieStoreMutation } from "@/app/reduxStore/features/movie/moviesApi";
import Image from 'next/image';
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { useSelector } from "react-redux";

const AiFormResult = () => {
  const [movieData, setMovieData] = useState({
    title: '',
    category_id: '',
    description: '',
    image: null, 
  });
  const aiMovieData = useSelector((state)=>state.movies.aiMovieData);
  const { data, isLoading, isError } = useAllCategoriesQuery();
  const router = useRouter()
  const [aiMovieStore, { isSuccess }] = useAiMovieStoreMutation();

  //b64_json convert image src
  const getImageSource = () => {
    const imageData = aiMovieData?.b64JsonImage?.b64_json || '';
    return `data:image/png;base64,${imageData}`;
  };


  //for category when category change.
  const handleChange = (e) => {
    const { name, value } = e.target;
    setMovieData({ ...movieData, [name]: value });
  };

  //set ai data into movieData
  useEffect(()=>{
    setMovieData({
      title: aiMovieData?.title,
      description: aiMovieData?.synopsis,
      image: aiMovieData?.b64JsonImage?.b64_json,
      });
  },[aiMovieData?.b64JsonImage?.b64_json, aiMovieData?.synopsis, aiMovieData?.title])

  const handleSubmit = async (e) => {
    e.preventDefault();
    if(movieData.category_id == ''){
      alert('please Select Category')
      return;
    }

      console.log('Response from server:-2', movieData);

    try {
      const formData = new FormData();
      formData.append('title', movieData.title);
      formData.append('category_id', movieData.category_id);
      formData.append('description', movieData.description);
      formData.append('image', movieData.image);
      console.log('form submit', movieData)
      const response = await aiMovieStore(formData);
      // Handle the success response
      console.log('Response from server:', [...formData]);
      // Assuming you want to reset the form after successful submission
      setMovieData({
        title: '',
        category_id: '',
        description: '',
        image: null,
      });
      router.push("/");
    } catch (error) {
      // Handle the error
      console.error('Error saving the movie:', error);
    }
  };


  return (
    <div className="bg-gray-200 p-5 rounded-md dark:bg-black my-10">
      <div className="text-center mb-8">
        <h1 className="text-2xl font-bold text-gray-700 mb-3 dark:text-white">
          This is your Search Result
        </h1>
      </div>
      <form onSubmit={handleSubmit}>
      <div className="mx-10 px-10 py-16 bg-gray-400 dark:bg-black dark:border">
      <div className="mb-6 flex items-center justify-center">

          <Image
                src={getImageSource()}
                alt="result-image"
                className="rounded-md border border-2 border-x-1 w-[350px]"
                name="image"
                onChange={handleChange}
                width={105} 
                height={105} 
                layout="responsive"
            />
        </div>


        <div className="mb-6">
          <label
            htmlFor="large-input"
            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          >
            Movie Title
          </label>
          <input
            type="text"
            id="large-input"
            className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="Type your Movie Title..."
            value={aiMovieData?.title}
            name="title"
            onChange={handleChange}

          />
        </div>
        <div className="mb-6">
            <label
              htmlFor="base-input"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Movie Category
            </label>
            <select
              id="category"
              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              name="category_id"
              onChange={handleChange}
            >
              <option value="">Choose category</option>
              {data && data.data?.map((category) => (
                <option key={category._id} value={category._id}>
                  {category.name}
                </option>
              ))}
            </select>
          </div>
        <div className="mb-6">
          <label
            htmlFor="message"
            className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
          >
            Movie Short Description
          </label>
          <textarea
            id="message"
            rows={8}
            className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            placeholder="Type Movie short description..."
            value={aiMovieData?.synopsis}
            name="description"
            onChange={handleChange}
          />
        </div>
        <div className="text-right">
          <button className="bg-black text-white p-3 rounded-md dark:border">
            Save your Movie
          </button>
        </div>
      </div>
      </form>

    </div>
  );
};

export default AiFormResult;

now hit http://localhost:3000/movie-made URL then you can see this page

Here This page, Show AI information. If you click Save your Movie button then it Tigger aiMovieStore
Method which we were define in moviesApi.js file. This method save Ai information data in our MongoDB.

import { apiSlice } from "../api/apiSlice";

export const moviesApi = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        topMovies: builder.query({
            query: () =>
                `/top-movies`,
        }),
        manualMovieStore: builder.mutation({
            query: (data) => ({
                url: "/movie-store",
                method: "POST",
                body: data,
            }),
        }),

        aiMovieStore: builder.mutation({

            query: (data) => ({

                url: "/ai-movie-store",
                method: "POST",
                body: data,

            }),
            async onQueryStarted(arg, { queryFulfilled, dispatch }) {
               console.log('redux', arg)
            },
        }),

    }),
});

export const { useTopMoviesQuery, useManualMovieStoreMutation, useAiMovieStoreMutation} = moviesApi;

Now we Finished our AI Prompt.

Form page

Loading page

Ai Information show

Home page

Next we deploy this App. Here is this Tutorial-

Deploy A NextJs App and Node API on a Linux Server. Link

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

API Setup in NextJs

syed kamruzzaman — Sun, 17 Dec 2023 19:44:12 +0000

In this tutorial we have integrate other Api. Previously we did 1st part and 2nd part. If you don’t know then see this link

Making API Using Node and Express. Link
Scaffolding redux-toolkit in NextJs. Link

Now we are do 3rd part. Let’s derive on-

Step-1 : Authentication Api Setup
Go to reduxStore/features/auth folder and create this file

authApi.js
authSlice.js

authApi.js

import { apiSlice } from "../api/apiSlice";
import { userLoggedIn } from "./authSlice";

export const authApi = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        register: builder.mutation({
            query: (data) => ({
                url: "/register",
                method: "POST",
                body: data,
            }),
            async onQueryStarted(arg, { queryFulfilled, dispatch }) {
                try {
                    const result = await queryFulfilled;

                    localStorage.setItem(
                        "auth",
                        JSON.stringify({
                            accessToken: result.data.accessToken,
                            user: result.data.user,
                        })
                    );

                    dispatch(
                        userLoggedIn({
                            accessToken: result.data.accessToken,
                            user: result.data.user,
                        })
                    );
                } catch (err) {
                    // do nothing
                }
            },
        }),
        login: builder.mutation({
            query: (data) => ({
                url: "/login",
                method: "POST",
                body: data,
            }),

            async onQueryStarted(arg, { queryFulfilled, dispatch }) {
                try {
                    const result = await queryFulfilled;
                    console.log('data fetch', result)
                    localStorage.setItem(
                        "auth",
                        JSON.stringify({
                            accessToken: result.data.payload.token,
                            user:result.data.payload,
                        })
                    );

                    dispatch(
                        userLoggedIn({
                            accessToken: result.data.payload.token,
                            user: result.data.payload,
                        })
                    );
                } catch (err) {
                    // do nothing
                }
            },
        }),
    }),
});

export const { useLoginMutation, useRegisterMutation } = authApi;

Here this authApi we have 2 end points.
1. "/register" for register user
2. "/login" for login user.

authSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    accessToken: undefined,
    user: undefined,
};

const authSlice = createSlice({
    name: "auth",
    initialState,
    reducers: {
        userLoggedIn: (state, action) => {
            state.accessToken = action.payload.accessToken;
            state.user = action.payload.user;
        },
        userLoggedOut: (state) => {
            state.accessToken = undefined;
            state.user = undefined;
        },
    },
});

export const { userLoggedIn, userLoggedOut } = authSlice.actions;
export default authSlice.reducer;

Here this authSlice we have two actions.

userLoggedIn
userLoggedOut.

Step-2 : Login page Setup and Others
Go to login folder and create page.js file and do this

page.js

"use client";

import { useRouter } from 'next/navigation';
import { useEffect, useState } from "react";
import { useLoginMutation } from "../reduxStore/features/auth/authApi";
import Error from "../component/common/Error";

const Page = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");

  const [login, { data, isLoading, error: responseError }] = useLoginMutation();
  const router = useRouter();
  console.log('login data', data)
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("loging data", email, password)
    setError("");

    login({
      email,
      password,
    });

    router.push("/");
  };

  useEffect(() => {
    if (responseError?.data) {
      setError(responseError.data);
    }
    if (data?.accessToken && data?.user) {
      router.push("/");
    }
  }, [data, responseError, router]);

  return (
    <div className="flex h-screen items-center justify-center bg-gray-100">
      <div className="bg-white p-8 shadow-md rounded-lg w-80">
        <h1 className="text-2xl font-semibold mb-4">Login </h1>
        <form onSubmit={handleSubmit}>
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700">Email</label>
            <input
              type="email"
              className="mt-1 block w-full border rounded-md px-3 py-2 text-red-800"
              required
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700">
              Password
            </label>
            <input
              type="password"
              className="mt-1 block w-full border rounded-md px-3 py-2 text-red-800"
              required
              value={password}
              onChange={(e) => setPassword(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
          >
            Login
          </button>
        </form>

        {error !== "" && <Error message={error} />}
      </div>
    </div>
  );
};

export default Page;

Hit “/login” URL show the Login page.

Now go to “/component/common/LeftSideBar.js. Here do this-

'use client';
import { AuthCheck } from '@/app/hooks/AuthCheck';
import { userLoggedOut } from '@/app/reduxStore/features/auth/authSlice';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useDispatch } from 'react-redux';
import ComingSoon from "../icons/ComingSoon";
import Community from "../icons/Community";
import Friends from "../icons/Friends";
import Home from "../icons/Home";
import Logout from "../icons/Logout";
import MakeMovie from "../icons/MakeMovie";
import Media from "../icons/Media";
import MovieLogo from "../icons/MovieLogo";
import Profile from "../icons/Profile";
import Settings from "../icons/Settings";

const LiftSideBar = () => {
  const isAuthenticated = AuthCheck();
  const dispatch = useDispatch();
  const router = useRouter();

  const logout = () => {
    dispatch(userLoggedOut());
    localStorage.clear();
    router.push("/login");
  };

  return (
    <aside className=" w-1/6 py-10 pl-10  min-w-min  border-r border-gray-300 dark:border-zinc-700  hidden md:block ">
      <Link href="/">
        <div className=" font-bold text-lg flex items-center gap-x-3">
          <MovieLogo />
          <div className="tracking-wide dark:text-white">
            RMovie<span className="text-red-600">.</span>
          </div>
        </div>
      </Link>

      <div className="mt-12 flex flex-col gap-y-4 text-gray-500 fill-gray-500 text-sm">
        <div className="text-gray-400/70  font-medium uppercase">Menu</div>
        <Link 
          href="/"
          className="flex items-center space-x-2 py-1 dark:text-white  font-semibold  border-r-4 border-r-red-600 pr-20 "
        >
          <Home />
          <span>Home</span>
        </Link>

        <Link 
          href="/ai-make-movie"
          className="flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white"
        >
         <MakeMovie />
          <span>Ai Make Movie</span>
        </Link>
        <Link 
          href="/manual-make-movie"
          className="flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white"
        >
         <MakeMovie />
          <span>Manual Make Movie</span>
        </Link>

        <a
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white "
          href="#"
        >
          <Community />
          <span>Community</span>
        </a>
        <a
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white "
          href="#"
        >
          <ComingSoon />
          <span>Coming Soon</span>
        </a>

        <div className="mt-8 text-gray-400/70  font-medium uppercase">
          Social
        </div>
        <a
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white "
          href="#"
        >
          <Profile />
          <span>Profile</span>
        </a>
        <a
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white "
          href="#"
        >
          <Friends />
          <span>Friends</span>
        </a>
        <Link
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white "
          href="/make-category"
        >
          <Media />
          <span>Make Category</span>
        </Link>

        <div className="mt-8 text-gray-400/70  font-medium uppercase">
          General
        </div>
        <a
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white "
          href="#"
        >
          <Settings />
          <span>Settings</span>
        </a>

        { isAuthenticated && (
        <a
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white"
          href="#"
          onClick={logout}
        >
          <Logout />
          <span>Logout</span>
        </a>
         )}

        { !isAuthenticated && (
          <Link href="/login"
          className=" flex items-center space-x-2 py-1  group hover:border-r-4 hover:border-r-red-600 hover:font-semibold dark:hover:text-white"
        >
          <Logout />
          <span>login {AuthCheck}</span>
        </Link>
        )}

      </div>
    </aside>
  );
};

export default LiftSideBar;

Here we have Two action hook.

Login Button
Logout Button.

Step-3 : Category Api Setup

Go to reduxStore/features/category folder and create this file

categoryApi.js
categorySlice.js

categoryApi.js

import { apiSlice } from "../api/apiSlice";

export const categoryApi = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        categoryWiseMovies: builder.query({
            query: () =>
                `/category-wise-movies`,

        }),
        allCategories: builder.query({
            query: () =>
                `/all-category`,

        }),
        categoryStore: builder.mutation({
            query: (data) => ({
                url: "/category-store",
                method: "POST",
                body: data,
            }),
        })
    }),
});

export const { useCategoryWiseMoviesQuery, useAllCategoriesQuery, useCategoryStoreMutation} = categoryApi;

Here we have Three end point. There are

/category-wise-movies
/all-category
/category-store

categorySlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    topMovies: [],

};

const categorySlice = createSlice({
    name: "movie",
    initialState,
    reducers: {
        topMovies: (state, action) => {
            state.topMovies = action.payload;

        }

    },
});

export const { topMovies} = categorySlice.actions;
export default categorySlice.reducer;

Here we have one action “topMovies”.

Step-4: Category Page Setup and Others

Go to make-category folder and we can see page.js, now write this-

page.js

import LeftSideBar from "../component/common/LeftSideBar";
import RightSideBar from "../component/common/RightSideBar";
import AiFormInput from "../component/make-category/FormInput";
import ProtectedRoute from "../hooks/ProtectedRoute";

const Page = () => {
  return (
    <ProtectedRoute>
    <div className="flex min-h-screen">
      <LeftSideBar />
      <div className=" flex-1 py-10  px-5 sm:px-10 ">
        <AiFormInput />
      </div>
      <RightSideBar />
    </div>
    </ProtectedRoute>
  );
};

export default Page;

and go to component/make-category and see FormInput.js. Below this write-
FormInput.js

'use client';
import { useCategoryStoreMutation } from "@/app/reduxStore/features/category/categoryApi";
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useState } from "react";

const FormInput = () => {
  const [categoryStore] = useCategoryStoreMutation();
  const router = useRouter();
  const [categoryData, setCategoryData] = useState({
    title: '',
    image: null,
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setCategoryData({ ...categoryData, [name]: value });
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setCategoryData({ ...categoryData, image: file });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('name', categoryData.title);
    formData.append('image', categoryData.image);
    console.log('categry submit form', categoryData)

    try {
      const response = await categoryStore(formData);
      // Handle the success response
      console.log('Response from server:', response.data);
      // Assuming you want to reset the form after successful submission
      setCategoryData({
        name: '',
        image: null,
      });

      router.push("/");

    } catch (error) {
      console.error('Error saving the movie:', error);
    }
  };
  return (
    <div className="bg-gray-200 p-5 rounded-md dark:bg-black">
      <div className="text-center mb-8 relative">
        <h1 className="text-2xl font-bold text-gray-700 mb-3 dark:text-white">
          Create Category
        </h1>

        <Image
          src="/AS0007464_07.gif"
          alt="form"
          className="rounded-full  absolute -top-5 right-0 sm::hidden"
          width={105}
          height={105}

        />
      </div>

      <form onSubmit={handleSubmit}>
        <div className="mx-10 px-10 py-16 bg-gray-400 dark:bg-black dark:border rounded-md">
          <div className="mb-6">
            <label
              htmlFor="large-input"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Category Name
            </label>
            <input
              type="text"
              id="large-input"
              className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="Type your Category name..."
              name="title"
              onChange={handleChange}
            />
          </div>
          <div className="mb-6">
            <label
              htmlFor="large-input"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Select Category Image
            </label>
            <input
              type="file"
              id="large-input"
              className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              name="image"
              onChange={handleFileChange}
            />
          </div>
          <div className="text-right">
            <button
              type="submit"
              className="bg-black text-white p-3 rounded-md dark:border"
            >
              Make Category
            </button>
          </div>
        </div>
      </form>

    </div>
  );
};

export default FormInput;

Now “/make-category” URL show this page and we can create category.

Step-5: movie Api Setup

Go to reduxStore/features/movie folder and create this file

movieApi.js
movieSlice.js

movieApi.js

import { apiSlice } from "../api/apiSlice";

export const moviesApi = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        topMovies: builder.query({
            query: () =>
                `/top-movies`,
        }),
        manualMovieStore: builder.mutation({
            query: (data) => ({
                url: "/movie-store",
                method: "POST",
                body: data,
            }),
        }),

        aiMovieStore: builder.mutation({

            query: (data) => ({

                url: "/ai-movie-store",
                method: "POST",
                body: data,

            }),
            async onQueryStarted(arg, { queryFulfilled, dispatch }) {
               console.log('redux', arg)
            },
        }),

    }),
});

export const { useTopMoviesQuery, useManualMovieStoreMutation, useAiMovieStoreMutation} = moviesApi;

Here we have Three end points. There are

"/top-movies"
"/movie-store"
"/ai-movie-store"

movieSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
    topMovies: [],
    aiMovieData:{},
    sampleData:"sdfsf sdfsf"

};

const movieSlice = createSlice({
    name: "movie",
    initialState,
    reducers: {
        topMovies: (state, action) => {
            state.topMovies = action.payload;

        },
        aiMovieData:(state, action) =>{
            console.log('redux movie')
            state.aiMovieData = action.payload;
        }

    },
});

export const { topMovies, aiMovieData} = movieSlice.actions;
export default movieSlice.reducer;

Here we have Two actions.

topMovies
aiMovieData

Step-6: Manual Movie Page Setup and Others

Go to manual-make-movie folder and see page.js file. Write this code-

import LeftSideBar from "../component/common/LeftSideBar";
import RightSideBar from "../component/common/RightSideBar";
import FormInput from "../component/manual-make-movie/FormInput";

const Page = () => {
  return (
    <div className="flex min-h-screen">
      <LeftSideBar />
      <div className=" flex-1 py-10  px-5 sm:px-10 ">
        <FormInput />
      </div>
      <RightSideBar />
    </div>
  );
};

export default Page;

Now go to component/manual-make-movie and write this
FormInput.js

'use client';
import { useAllCategoriesQuery } from "@/app/reduxStore/features/category/categoryApi";
import { useManualMovieStoreMutation } from "@/app/reduxStore/features/movie/moviesApi";
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useState } from "react";

const FormInput = () => {
  const { data, isLoading, isError } = useAllCategoriesQuery();
  const [manualMovieStore, { isSuccess }] = useManualMovieStoreMutation();
  const router = useRouter();
  console.log("all manualMovieStore", manualMovieStore)

  const [movieData, setMovieData] = useState({
    title: '',
    category_id: '',
    description: '',
    image: null, 
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setMovieData({ ...movieData, [name]: value });
  };

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setMovieData({ ...movieData, image: file });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('title', movieData.title);
    formData.append('category_id', movieData.category_id);
    formData.append('description', movieData.description);
    formData.append('image', movieData.image);
    console.log('form submit', movieData)
    try {
      const response = await manualMovieStore(formData);
      // Handle the success response
      console.log('Response from server:', response.data);
      // Assuming you want to reset the form after successful submission
      setMovieData({
        title: '',
        category_id: '',
        description: '',
        image: null,
      });
      router.push("/");
    } catch (error) {
      // Handle the error
      console.error('Error saving the movie:', error);
    }
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isError) {
    return <div>Error fetching categories.</div>;
  }
  return (
    <div>
      <div className="text-center mb-8 relative">
        <h1 className="text-2xl font-bold text-gray-700 mb-3 dark:text-white">
          Manual Movie Maker
        </h1>

        <Image
                src="/storytelling-08.gif"
                alt="input"
                className="rounded-full w-48 h-48 absolute -top-5 right-0 sm::hidden"
                width={200}
                height={200}
            />
      </div>
      <form onSubmit={handleSubmit}>
        <div className="mx-10 px-10 py-16 bg-gray-400 dark:bg-black dark:border rounded-md">
          <div className="mb-6">
            <label
              htmlFor="large-input"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Movie Title
            </label>
            <input
              type="text"
              id="large-input"
              className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="Type your Movie Title..."
              name="title"
              onChange={handleChange}

            />
          </div>
          <div className="mb-6">
            <label
              htmlFor="base-input"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Movie Category
            </label>
            <select
              name="category_id"
              onChange={handleChange}
              id="category"
              className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
            >
              <option value="">Choose category</option>
              {data && data.data?.map((category) => (
                <option key={category._id} value={category._id}>
                  {category.name}
                </option>
              ))}
            </select>
          </div>
          <div className="mb-6">
            <label
              htmlFor="message"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Movie Short Description
            </label>
            <textarea
              id="message"
              rows={4}
              className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="Type Movie short description..."
              v-model="movieData.description"
              defaultValue={""}
              name="descriptin"
              onChange={handleChange}
            />
          </div>
          <div className="mb-6">
            <label
              htmlFor="large-input"
              className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
            >
              Select Movie image
            </label>
            <input
              type="file"
              id="large-input"
              className="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
              placeholder="Type your Movie Title..."
              name="image"
              onChange={handleFileChange}
            />
          </div>
          <div className="text-right">
            <button
              type="submit"
              className="bg-black text-white p-3 rounded-md dark:border"
            >
              Make Movie
            </button>
          </div>
        </div>
      </form>

    </div>
  );
};

export default FormInput;

Now we are making manual movie form. If you hit “/manual-make-movie” URL then you see this page.

We can now create any movie using this form.

Step-7 : Home Page setup

Go to app folder and see page.js file. Write this code

import LeftSideBar from "./component/common/LeftSideBar";
import RightSideBar from "./component/common/RightSideBar";
import CategoryWiseMovies from "./component/index/CategoryWiseMovies";
import HeroSection from "./component/index/HeroSection";
import TopMovies from "./component/index/TopMovies";

export default function Home() {
  return (
    <div className="flex min-h-screen">
    <LeftSideBar />
    <div className=" flex-1 py-10  px-5 sm:px-10 ">
      <HeroSection />
      <TopMovies />
      <CategoryWiseMovies />
    </div>
    <RightSideBar />
    </div>
  )
}

Now Go to component/index Folder and see TipMovie.js file. Write below this code-

'use client';
import { useTopMoviesQuery } from "@/app/reduxStore/features/movie/moviesApi";
import Image from 'next/image';
import ImdbLogo from "../icons/ImdbLogo";
import NextPrev from "../icons/NextPrev";

const TopMovies = () => {
  const { data, error, isLoading } = useTopMoviesQuery();
  console.log("movie data", data)

  if (isLoading) {
      return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  const getRandomNumber = () => {
    return Math.floor(Math.random() * 10) + 1;
  };

  return (
    <section className="mt-9 bg-lime-300 dark:bg-rose-500 p-5 rounded-md">
      <div className="flex items-center justify-between">
        <span className="font-semibold text-gray-700 text-base dark:text-white">
          My Favourite Movies and Collections
        </span>
        <div className="flex items-center space-x-2 fill-gray-500">
          <NextPrev />
        </div>
      </div>

      <div className="mt-4 grid grid-cols-2  sm:grid-cols-4 gap-x-5 gap-y-5">
        {data.data && data.data.map((movie, index) => (
          <div
            key={index}
            className="flex flex-col rounded-xl overflow-hidden aspect-square border dark:border-zinc-600"
          >


            <div className="w-full h-1/5 bg-white dark:bg-zinc-800 dark:text-white px-3 flex items-center justify-between border-t-2 border-t-red-600">
              <span className="capitalize font-medium truncate">{movie.title}</span>
              <div className="flex space-x-2 items-center text-xs">
                <ImdbLogo />
                <span>{getRandomNumber()}</span>
              </div>
            </div>
            <Image
                src={movie.image}
                className="h-4/5 object-cover w-full"
                alt={movie.title}
                width={105} 
                height={105} 
                layout="responsive"
            />
          </div>
        ))}
      </div>
      {isLoading && isLoading}
      {error && error}
    </section>
  );
};

export default TopMovies;

Now same Folder we can see CategoryWiseMovies.js file. Write this code-

/* eslint-disable react/jsx-key */
'use client';
import { useCategoryWiseMoviesQuery } from "@/app/reduxStore/features/category/categoryApi";
import Image from 'next/image';
import ImdbLogo from "../icons/ImdbLogo";
import NextPrev from "../icons/NextPrev";

const CategoryWiseMovies = () => {
  const { data, error, isLoading } = useCategoryWiseMoviesQuery();
  console.log('category wise movie data', data)

  const getRandomColor = () => {
    const colors = ['#FF5733', '#33FF57', '#5733FF', '#33FFFF', '#FF33FF', '#FFFF33'];
    return colors[Math.floor(Math.random() * colors.length)];
  };
  const getRandomNumber = () => {
    return Math.floor(Math.random() * 10) + 1;
  };
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <>
      {data.data.map((category, indexOne) => (
        <section className="mt-9 bg-blue-400 dark:bg-black p-5 rounded-md" style={{ backgroundColor: getRandomColor() }} key={indexOne}>
          <div className="flex items-center justify-between">
            <span className="font-semibold text-gray-700 text-base dark:text-white">{category.name} Movies</span>
            <div className="flex items-center space-x-2 fill-gray-500">
              <NextPrev />
            </div>
          </div>

          <div className="mt-4 grid grid-cols-2 gap-y-5 sm:grid-cols-3 gap-x-5 ">
            {category.movies.map((movie, indexTwo) => (
              <div className="flex flex-col rounded-xl overflow-hidden aspect-square border dark:border-zinc-600" key={indexTwo}>
                <div className="w-full h-1/5 bg-white dark:bg-zinc-800 dark:text-white px-3 flex items-center justify-between border-t-2 border-t-red-600">
                  <span className="capitalize  font-medium truncate">{movie.title}</span>
                  <div className="flex space-x-2 items-center text-xs">
                    <ImdbLogo />
                    <span>{getRandomNumber()}</span>
                  </div>
                </div>
                <Image
                  src={movie.image}
                  className=" h-4/5 object-cover w-full"
                  alt={movie.title}
                  width={105} 
                height={105} 
                layout="responsive"
                />
              </div>
            ))}

          </div>

        </section>
      ))}
    </>
  );
};

export default CategoryWiseMovies;

Now ready home page. If we are hit http://localhost:3000/ then we can see our home page.

If your database is empty then you don't see any movie 😊

Next we set up AI Prompt. Here is this Tutorial-

AI Prompt setup on Nextjs. Link

full Project github
Node
https://github.com/kamruzzamanripon/node-movie-api
NextJs
https://github.com/kamruzzamanripon/next-movie-ui-with-node-api
NextJs UI
https://github.com/kamruzzamanripon/next-movie-ui

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

Scaffolding redux-toolkit in NextJs

syed kamruzzaman — Sun, 17 Dec 2023 19:41:25 +0000

Previously you saw, how to make API via Node. Here is this tutorial. Now in this tutorial, we are focused on integrating this API in our Next.js App. Let's dive in!

UI Design
Basic UI design I am already done for easy our task. Below is this UI project link. Here we use TailwindCss.

https://github.com/kamruzzamanripon/next-movie-ui

In this UI app, we can see the app folder, in which you see the page.js file. This is the home page and the other page shows folder-wise. Like make-category it means create category and its URL is /make-category. I was trying to make it simple to understand.

Step-1 : Install reduxt toolkit and other packages

npm install @reduxjs/toolkit
npm install react-redux

Step-2 : Configure API Url
Open your next.config and do this

module.exports = {
    reactStrictMode: true,
    images:{
      domains:['images.unsplash.com', 'via.placeholder.com', '127.0.0.1', 'laravelapi.kamruzzaman.xyz'],
    },
    env: {
      API_ROOT_URL:'http://localhost:8000/api',
      baseUrl:'http://127.0.0.1:8000/api/v1/frontend',


    },
  }

Here we defined API_ROOT_URL and setup domains '127.0.0.1' for image.

Step-3 : Make some folder

In app folder we create reduxStore folder and in this folder we create below file

provider.js
store.js

and make another folder like features And this inside this folder create the below folder and file

api [Folder]
- apiSlice.js
auth [Folder]
- authApi.js
- authSlice.js
category [Folder]
- categoryApi.js
- categorySlice.js
movie [Folder]
- moviesApi.js
- movieSlice.js

Now we copy and paste the corresponding file of code

Store.js

'use client';

import { configureStore } from "@reduxjs/toolkit";
import { apiSlice } from "./features/api/apiSlice";
import authSliceReducer from "./features/auth/authSlice";
import counterReducer from './features/counter/counterSlice';
import movieSliceReducer from "./features/movie/movieSlice";

export const store = configureStore({
    reducer:{
        [apiSlice.reducerPath]: apiSlice.reducer,
        auth: authSliceReducer,
        movies: movieSliceReducer,
        conter: counterReducer
    },
    devTools: process.env.NODE_ENV !== "production",
    middleware: (getDefaultMiddlewares) =>
        getDefaultMiddlewares().concat(apiSlice.middleware),
})

Provider.js
'use client';

import { Provider } from "react-redux";
import { store } from "./store";

export function Providers({children}){
    return (
        <Provider store={store}>
            {children}
        </Provider>
    )
}

apiSlice.js

'use client';
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// Function to get the auth token from localStorage
function getAuthToken() {
  if (typeof window !== 'undefined') {
    const authData = JSON.parse(localStorage.getItem("auth"));
    return authData?.accessToken;
  }
  return undefined;
}

export const apiSlice = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({
        baseUrl: process.env.API_ROOT_URL,
        prepareHeaders: (headers, { getState }) => {
            // Use the token from the state if available, otherwise try to get it from localStorage
            const token = getState()?.auth?.accessToken || getAuthToken();

            if (token) {
                headers.set("Authorization", `Bearer ${token}`);
            }

            return headers;
        },
    }),
    tagTypes: [],
    endpoints: (builder) => ({}),
});

Here baseUrl, we already define in our next.config.js file. Also we set up of Authorization token. If API Url sends an Authorization token then we store headers for access to other pages.
Now we go layout.js file and do this

import { Inter } from 'next/font/google'
import Footer from './Footer'
import Header from './Header'
import './globals.css'
import { Providers } from './reduxStore/provider'

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

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>
        <Header />
        <main>{children}</main>
        <Footer />
        </Providers>
      </body>
    </html>
  )
}

Here we wrapped up redux store in our app.
Next we set up Authentication and Other API. Here is this Tutorial-

API Setup in NextJs. Link

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]

Making API Using Node and Express

syed kamruzzaman — Sun, 17 Dec 2023 19:39:58 +0000

In this tutorial, we are making API for a Movie Portal. Here we use NodeJs, Express-5.0, and other necessary Packages. We are Trying to Follow the MVC Pattern.

Step 1 : Scaffolding
Open your terminal and type

npm init

Fill up your required field. Then open your visual studio or any kind of editor. Create .env file type this-

PORT= 8000
DATABASE_URL = "mongodb://localhost:27017"
IMAGE_BASE_URL = "http://127.0.0.1:8000"

DBNAME = "exress_movie_api"

Then create the following folders-

controllers
db
routes
helpers
middleware
public / uploads
- category
- movie

Now install this app-

express
cors
dotenv
joi
bcryptjs
jsonwebtoken
mongoose
multer
nodemon
uuid

And here, in your package.json file add “type”: “module” because we are using express-5.0. if you don’t do that in your .js file import is not work.
After That, create an app.js file in your root folder. Here you type this –

import cors from 'cors';
import dotenv from 'dotenv';
import express from 'express';
import connectiondb from './db/connectiondb.js';
dotenv.config();

const app = express();
const port = process.env.PORT || 8000;
const DATABASE_URL = process.env.DATABASE_URL || "mongodb:://localhost:27017";

//connection database
connectiondb(DATABASE_URL);

//app use for different purpose
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended:true}))


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

Now create db folder inside connectiondb.js file and type this-

import mongoose from 'mongoose';

//database connection
const connectiondb = async(DATABASE_URL)=>{
    try{
        const options = {
            dbName: process.env.DBNAME
        }

        const connectionResult = await mongoose.connect(DATABASE_URL, options);
        console.log(`connection to mongoDB on database: ${connectionResult.connections[0].name} at ${new Date().toDateString()}`);
    }catch(err){
        console.log(err);
    }
}

export default connectiondb;

Now last. Open your MongoDB and Create a Database. Database Name will be “express_movie_api” and Collection Name is “movies”;
Now open your terminal and type npm run dev. You can see this-

If you see your database name and current date then your connection will be ok. You are now going to the next step.

Step-2 : Model Defined
In your models folder make these files.

User.js
Category.js
Movie.js

And Type this.
User.js

import mongoose from "mongoose";

const DataSchema = new mongoose.Schema({
    name: {
        type: String,
        trim: true,
        required: true,
        maxlength: 32,
    },
    email: {
        type: String,
        trim: true,
        required: true,
        unique: true,
    },
    password: {
        type: String,
        required: true
    },
},{ timestamps: true, versionKey:false })


const User = mongoose.model('User', DataSchema);

export default User;

Category.js

import mongoose from "mongoose";

const DataSchema = new mongoose.Schema({
    name: {
        type: String,
        required: [true, 'Please enter name'],
        trim: true,
        maxLength: [100, 'Category name cannot exceed 100 characters']
    },

    image: { 
        type: Object, 
    },
},{ timestamps: true, versionKey:false })


const Category = mongoose.model('Category', DataSchema);

export default Category;

Movie.js

import mongoose from "mongoose";

const DataSchema = new mongoose.Schema({
    title: {
        type: String,
        required: [true, 'Please enter name'],
        trim: true,
        maxLength: [100, 'Category name cannot exceed 100 characters']
    },
    category_id: {
        type: mongoose.Types.ObjectId,
        ref: "Category",
        required: true
    },
    descriptin: {
        type: String,
        trim: true,
    },
    image: { 
        type: String, 
        required: true
    },
},{ timestamps: true, versionKey:false })


const Movie = mongoose.model('Movie', DataSchema);

export default Movie;

Step-3 : Helpers Function define

Now you create some auxiliary function. This functions as some kind of middleware. Create this-

bcryp.js
jwt.js

bcryp.js Function Helping client password encoded and decoded.

import bcrypt from 'bcryptjs';

export const hashMaker = (str)=> {
    const salt = bcrypt.genSaltSync(10);
    return bcrypt.hashSync(str, salt);
}

export const matchData = (str, hash)=> {
    return bcrypt.compareSync(str, hash);
}

jwt.js function helping Jwt token create and decoded this token.

import jwt from 'jsonwebtoken';
const secret = "@#$%^&*&*"

export const createToken = (payload)=> {
    return jwt.sign(payload, secret, { expiresIn: '1d' }); //1day
}

export const decodeToken = (payload)=> {
    return jwt.verify(payload, secret);
}

Step-4: Making Some Middleware.
In your middleware folder create some middleware file. Like this-

auth.js
fileFolderName.js
fileUpload.js

auth.js

import { decodeToken } from '../helpers/jwt.js';

const auth = (req, res, next)=> {
    try {
        const token = req.headers.authorization.split(' ')[1];
        req.user = decodeToken(token);
        //console.log(req.user)
        next();
    } catch (err) {
        res.status(400).send('Authentication Failed')
    }
}
export default auth;

fileFolderName.js

const fileFloderName = (folderName) =>{
    return ( req, res, next)=>{
        req.folderName = folderName;
        next();
    }
}

export default fileFloderName

fileUpload.js

import multer from 'multer';

const storage = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      const folderName = req.folderName ?? file.fieldname;
      cb(null, `public/uploads/${folderName}`);
    },
    filename: function (req, file, cb) {
      cb(null, `${Date.now()}-${file.originalname}`);
    },
  }),
  fileFilter: function (req, file, cb) {
    const allowedMimeTypes = ['image/jpeg', 'image/png']; // Specify the allowed image file types

    if (allowedMimeTypes.includes(file.mimetype)) {
      cb(null, true); // Accept the file
    } else {
      cb(new Error('Invalid file type. Only JPEG and PNG files are allowed.')); // Reject the file
    }
  },
  limits: {
    fileSize: 2 * 1024 * 1024, // Set the maximum file size (2MB in this example)
  },
});

export default storage;

After that Create validation folder for validation field and then create this file

userSingupValidator.js
categoryStoreValidator.js
movieStoreValidator.js

userSingupValidator.js

import Joi from 'joi';

export const userSignupValidator = (req, res, next) => {
  const schema = Joi.object({
    name: Joi.string().required().messages({
      'any.required': 'Name is required',
    }),
    email: Joi.string().email().required().messages({
      'string.email': 'Email must be a valid email address',
      'any.required': 'Email is required',
    }),
    password: Joi.string()
      .min(6)
      .required()
      .pattern(new RegExp('^[a-zA-Z0-9]{3,30}$'))
      .messages({
        'string.min': 'Password must be at least 6 characters',
        'any.required': 'Password is required',
        'string.pattern.base': 'Password must contain only alphanumeric characters',
      }),
      password_confirmation: Joi.string()
      .valid(Joi.ref('password'))
      .required()
      .messages({
        'any.only': 'Password confirmation must match the password',
        'any.required': 'Password confirmation is required',
      }),
      job: Joi.string().optional(),

  });

  const { error } = schema.validate(req.body);
  if (error) {
    const errorMessage = error.details[0].message;
    return res.status(400).json({ error: errorMessage });
  }

  next();
};

categoryStoreValidator.js

import Joi from 'joi';

export const categoryStoreValidator = (req, res, next) => {
  const schema = Joi.object({

    name: Joi.string()
    .required().
    messages({
        'string.name': 'Name is required'
       }),

  });

  const { error } = schema.validate(req.body);
  if (error) {
    const errorMessage = error.details[0].message;
    return res.status(400).json({ error: errorMessage });
  }

  next();
};

movieStoreValidator.js

import Joi from 'joi';

export const movieStoreValidator = (req, res, next) => {
  const schema = Joi.object({

    title: Joi.string()
    .required().
    messages({
        'string.name': 'Name is required'
       }),
    category_id: Joi.string()
    .required().
    messages({
        'string.category_id': 'Category Name is required'
    }), 
    image: Joi.string()
    .required().
    messages({
        'string.image': 'image is required'
    }), 


  });

  const { error } = schema.validate(req.body);
  if (error) {
    const errorMessage = error.details[0].message;
    return res.status(400).json({ error: errorMessage });
  }

  next();
};

Step-5 : Route define
In your routes folder create this file-

rootRoute.js
authRoute.js
categoryRoute.js
movieRoute.js

rootRoute.js

In this file you add this code-

import express from 'express';
import multer from 'multer';
import CategoryRoute from './CategoryRoute.js';
import authRoute from './authRoute.js';
import movieRoute from './movieRoute.js';

const route = (app)=>{
    app.use(express.static("public/uploads/category"));
    app.use(express.static("public/uploads/movie"));

    app.use("/api", authRoute);
    app.use("/api", CategoryRoute);
    app.use("/api", movieRoute);

    //Multer Error File Handling
    app.use((err, req, res, next) => {
        if (err instanceof multer.MulterError) {
        // Multer-specific errors
        return res.status(418).json({
            err_code: err.code,
            err_message: err.message,
        });
        } else {
        // Handling errors for any other cases from whole application
        return res.status(500).json({
            err_code: 409,
            err_message: "Something went wrong!",
        });
        }
    });

    //unknown route
    app.use('*', (req, res)=>{
        res.status(404).json({status:"fail", data:"Route does not exists"})
    })

}

export default route;

here first we define static folder for save image.

app.use(express.static("public/uploads/category"));
app.use(express.static("public/uploads/movie"));

Like category image and movie image. Then write error handling image function-

//Multer Error File Handling
    app.use((err, req, res, next) => {
        if (err instanceof multer.MulterError) {
        // Multer-specific errors
        return res.status(418).json({
            err_code: err.code,
            err_message: err.message,
        });
        } else {
        // Handling errors for any other cases from whole application
        return res.status(500).json({
            err_code: 409,
            err_message: "Something went wrong!",
        });
        }
    });

At the end we write unknown route handler function. If user didn’t write proper url then show message “Route does not exists”

//unknown route
    app.use('*', (req, res)=>{
        res.status(404).json({status:"fail", data:"Route does not exists"})
    })

Now go to app.js file and add this line-

import rootRoute from './routes/rootRoute.js';
rootRoute(app);

like this way-

import cors from 'cors';
import dotenv from 'dotenv';
import express from 'express';
import connectiondb from './db/connectiondb.js';
import rootRoute from './routes/rootRoute.js';
dotenv.config();

const app = express();
const port = process.env.PORT || 8000;
const DATABASE_URL = process.env.DATABASE_URL || "mongodb:://localhost:27017";

//connection database
connectiondb(DATABASE_URL);

//app use for different purpose
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended:true}))

rootRoute(app);

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

Again we go to rootRoute.js file. Here we first discuss about authRoute which we are importing from this

import authRoute from './authRoute.js';

so, create authRoute.js file in the routes folder and write this code-

import express from 'express';
import AuthController from '../controllers/AuthController.js';
import auth from '../middleware/auth.js';
import { userSignupValidator } from '../middleware/validation/userSingupValidator.js';

const router = express.Router();

router.post('/register', userSignupValidator, AuthController.registration);
router.post('/login', AuthController.login);
router.post('/logout', AuthController.logout);
router.post('/change-password', auth, AuthController.changePassword);

export default router;

Then go to the controllers folder create AuthController.js file and write this-

import { hashMaker, matchData } from "../helpers/bcryp.js";
import { createToken } from "../helpers/jwt.js";
import User from "../models/User.js";

class UserController {

  static registration = async (req, res) => {
    try {
      const { name, email, password, password_confirmation } = req.body;
      const existEmail = await User.findOne({ email }).lean().exec();
      if (existEmail) {
        return res.status(413).json({
          code: 201,
          message: "This Email is already used.",
        });
      }

      const hashPassword = hashMaker(password);
      const registerUser = await new User({
        name: name,
        email: email,
        password: hashPassword,
      }).save();
      console.log("userEmail", hashPassword);

      res.status(201).json({
        code: 201,
        message: "User registration Successfully.",
        payload: registerUser,
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  }

  static login = async (req, res) =>{
    try {
        const { email, password } = req.body;
        const existEmail = await User.findOne({ email }).lean().exec();
        //mail check
        if (!existEmail) {
          return res.status(413).json({
            code: 201,
            message: "crediential didn't match",
          });
        }

        const hashPassword = matchData(password, existEmail.password);
        //password check
        if(!hashPassword){
            return res.status(413).json({
                code: 201,
                message: "crediential didn't match",
              });
        } 

       const {_id, name} = existEmail
        const payload ={
            name,
            email,
            token: "Bearer " + createToken({ _id, email })
        }

        res.status(200).json({
            code: 200,
            message: "User Login Successfully.",
            payload
        });
      } catch (err) {
        console.log(err);
        res.status(500).json({
          code: 500,
          message: "Internal server error.",
        });
      }
  }

  static logout = (req, res)=>{
      try {
        // Clear the token from the cookie
        res.clearCookie('token');

        res.status(200).json({
          code: 200,
          message: 'User logged out successfully.',
        });
      } catch (err) {
        console.log(err);
        res.status(500).json({
          code: 500,
          message: "Internal server error.",
        });
      }

  }

  static changePassword = async(req, res)=>{
    const {password, password_confirmation } = req.body;
    try{
      const {_id} = req.user;
      if (password !== password_confirmation) {
        return res.status(413).json({
          code: 201,
          message: "crediential didn't match",
        });
      }
      const userInfo = await User.findById(_id);
      const hashPassword = hashMaker(password);
      userInfo.password = hashPassword;
      await userInfo.save();
      console.log(userInfo)
      //await User.updateOne({ _id: _id }, { $set: payload }, { upsert: false });

      res.status(200).json({
        code: 200,
        message: "passwrod Change Successfully.",

    });

    }catch(err){
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  }

}

export default UserController;

Is your output similar to this congratulation, you have successfully user registration. Now we are testing the login route.

If you log in successfully then we can see the token. This token is a jwt token. We can now use this token as an authentication.

Now we go to again rootRoute.js and this time we are talking about CategoryRoute.js. So create this file and write this

CategoryRoute.js

import express from 'express';
import CategoryController from '../controllers/CategoryController.js';
import fileFolderName from '../middleware/fileFolderName.js';
import storage from '../middleware/fileUpload.js';
import { categoryStoreValidator } from "../middleware/validation/categoryStoreValidator.js";

const router = express.Router();

router.get("/all-category", CategoryController.allCategory);
router.get("/category-wise-movies", CategoryController.categoryWiseMovie);
router.get("/single-category/:categoryId", CategoryController.singleCategory);

router.post(
  "/category-store",
  //auth,
  categoryStoreValidator,
  fileFolderName("category"),
  storage.fields([{ name: "image", maxCount: 1 }]),
  CategoryController.store
);

router.put(
  "/category-update/:categoryId",
  //auth,
  categoryStoreValidator,
  fileFolderName("category"),
  storage.fields([{ name: "image", maxCount: 1 }]),
  CategoryController.update
);

router.delete(
  "/category-delete/:categoryId",
  //auth,
  //categoryStoreValidator,
  fileFolderName("category"),
  storage.fields([{ name: "image", maxCount: 1 }]),
  CategoryController.delete
);

// //find product by id
router.param("categoryId", CategoryController.categoryById);

export default router;

Here you see, we write router.param("categoryId", CategoryController.categoryById). This route is a special route, like when we call single route –
router.get("/single-category/:categoryId", CategoryController.singleCategory);

here this route we passed categoryId param. So this param first calls router. param route and after that call single-category route. It helps for reduce query.

Now we go to the controllers folder create CategoryController.js and write this

import fs from "fs";
import Category from "../models/Category.js";
import Movie from "../models/Movie.js";

class CategoryController {
  //find a Category by  id
  static categoryById = async (req, res, next, id) => {
    const category = await Category.findById(id);

    if (!category) {
      return res.status(404).json({
        code: 404,
        message: "Category not found.",
      });
    }

    req.category = category;
    // console.log('cat result', req.category)
    next();
  };

  //all Category
  static allCategory = async (req, res) => {
    try {
      const imageBaseURL = process.env.IMAGE_BASE_URL;
      const allCategory = await Category.find();

      // Update the image URL for each category
      const updatedCategoryList = allCategory.map((category) => {
        return {
          ...category._doc,
          image: `${imageBaseURL}/${category.image}`,
        };
      });

      res.status(200).json({
        message: "All Category",
        data: updatedCategoryList,
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //Category wise movies
  static categoryWiseMovie = async (req, res) => {
    try {
      const imageBaseURL = process.env.IMAGE_BASE_URL;
      const allCategories = await Category.find();

      // Update the image URL for each category
      const updatedCategoryList = await Promise.all(allCategories.map(async (category) => {
        // Find all movies related to this category
        const movies = await Movie.find({ category_id: category._id });

        // Update the image URL for each movie
        const updatedMovies = movies.map((movie) => {
          return {
            ...movie._doc,
            image: `${imageBaseURL}/${movie.image}`,
          };
        });

        return {
          ...category._doc,
          image: category.image ? `${imageBaseURL}/${category.image}` : null,
          movies: updatedMovies,
        };
      }));

      res.status(200).json({
        message: "Category-wise Movies",
        data: updatedCategoryList,
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
};

  //singel Category
  static singleCategory = async (req, res) => {
    const imageBaseURL = process.env.IMAGE_BASE_URL;
    const category = req.category;
    category.image = `${imageBaseURL}/${category.image}`;
    res.status(200).json({
      message: "Single Category",
      data: category,
    });
  };

  //store category
  static store = async (req, res) => {
    const { name } = req.body;
    const image = req.files.image[0].filename;

    try {
      // const categoryInfo = await new Category({
      //     name,
      //     image: image ?? ''
      // }).save()
      console.log("controller req", image);

      const categoryInfo = await Category.create({
        name,
        image: image,
      });

      res.status(200).json({
        message: "Category Create Successfully",
        data: categoryInfo,
      });
    } catch (err) {
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //Category update or edit
  static update = async (req, res) => {
    const { name } = req.body;
    const imageBaseURL = process.env.IMAGE_BASE_URL;
    let image = null; // Initialize image as null
    let existingCategory = req.category;
    try {
      if (req.files && req.files.image) {
        // If a new image then delete the old image
        if (existingCategory && existingCategory.image) {
          fs.unlinkSync(`public/uploads/category/${existingCategory.image}`);
        }
        // Save the new image
        image = req.files.image[0].filename;
      }

      existingCategory.name = name ? name : existingCategory.name;
      existingCategory.image = image ? image : existingCategory.image;
      existingCategory.save();

      // Update the image URL with the base URL
      const updateCategory = await Category.findById(existingCategory._id);
      updateCategory.image = `${imageBaseURL}/${updateCategory.image}`;

      res.status(200).json({
        message: "Category updated successfully.",
        data: updateCategory,
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //delete category
  static delete = async (req, res) => {
    try {
      // Find the category by ID
      const category = req.category;

      // Delete the category's image file if it exists
      if (category.image) {
        fs.unlinkSync(`public/uploads/category/${category.image}`);
      }

      // Delete the category from the database
      await Category.deleteOne({ _id: category._id });

      res.status(200).json({
        message: "Category deleted successfully.",
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };
}

export default CategoryController;

Now again open your postman and test this api like this way

Now we are discussing movie route. So go to routes folder and create this-

movieRoute.js

import express from "express";
import MovieController from "../controllers/MovieController.js";
import fileFolderName from "../middleware/fileFolderName.js";
import storage from "../middleware/fileUpload.js";
import { movieStoreValidator } from "../middleware/validation/movieStoreValidator.js";
import auth from '../middleware/auth.js';

const router = express.Router();

router.get("/all-movies", MovieController.allMovie);
router.get("/top-movies", MovieController.topMovie);
router.get("/single-movie/:movieId", MovieController.singleMovie);

  router.post(
    "/movie-store",
    //auth,
    movieStoreValidator,
    fileFolderName("movie"),
    storage.fields([{ name: "image", maxCount: 1 }]),
    MovieController.store
  );

  router.post(
    "/ai-movie-store",
    //auth,
    fileFolderName("movie"),
    storage.fields([{ name: "image", maxCount: 1 }]),
    MovieController.aiStore
  );

  router.put(
    "/movie-update/:movieId",
    //auth,
    fileFolderName("movie"),
    storage.fields([{ name: "image", maxCount: 1 }]),
    MovieController.update
  );

  router.delete(
    "/movie-delete/:movieId",
    //auth,
    MovieController.delete
  );

//   //find product by id
 router.param("movieId", MovieController.movieById);

  export default router;

and then go to controllers folder and create this-
MovieController.js

import fs from "fs";
import { v4 } from "uuid";
import Movie from '../models/Movie.js';

class MovieController{
  //find a movie by  id
  static movieById = async (req, res, next, id) => {
    const movie = await Movie.findById(id);
    console.log('movie info', movie)
    if (!movie) {
      return res.status(404).json({
        code: 404,
        message: "Movie not found.",
      });
    }

    req.movie = movie;
    // console.log('cat result', req.category)
    next();
  };

  //all Movie
  static allMovie = async (req, res) => {
    try {
      const imageBaseURL = process.env.IMAGE_BASE_URL;
      const allMovie = await Movie.find().populate('category_id');

      // Update the image URL for each category
      const updatedMovieList = allMovie.map((movie) => {

        return {
            ...movie._doc,
            image: `${imageBaseURL}/${movie.image}`,
            category_id: {
              ...movie.category_id._doc,
              image: `${imageBaseURL}/${movie.category_id.image}`,
            },
          };
      });

      res.status(200).json({
        message: "All Movie",
        data: updatedMovieList,
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //Top Movie
  static topMovie = async (req, res) => {
    try {
      const imageBaseURL = process.env.IMAGE_BASE_URL;
      const topMovies = await Movie.find()
        .sort({ createdAt: -1 }) 
        .populate('category_id')
        .limit(8); 

      // Update the image URL for each movie
      const updatedTopMovies = topMovies.map((movie) => {
        return {
          ...movie._doc,
          image: `${imageBaseURL}/${movie.image}`,
          category_id: {
            ...movie.category_id._doc,
            image: `${imageBaseURL}/${movie.category_id.image}`,
          },
        };
      });

      res.status(200).json({
        message: "Top 8 Movies",
        data: updatedTopMovies,
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //singel Category
  static singleMovie = async (req, res) => {
    const imageBaseURL = process.env.IMAGE_BASE_URL;
    const movie = req.movie;
    await movie.populate('category_id');
    movie.image = `${imageBaseURL}/${movie.image}`;
    movie.category_id.image = `${imageBaseURL}/${movie.category_id.image}`;
    res.status(200).json({
      message: "Single movie",
      data: movie,
    });
  };

   //store Movie
   static store = async (req, res) => {
    const { title, discription, category_id } = req.body;
    const image = req.files.image[0].filename;

    try {
        const movieInfo = await Movie.create({
        title,
        discription,
        category_id,
        image: image,
      });

      res.status(200).json({
        message: "Movie Create Successfully",
        data: movieInfo,
      });
    } catch (err) {
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //Ai movie store
  static aiStore = async (req, res) => {

    const { title, category_id, description, image } = req.body;

    console.log('node-1', req.body)


    // Convert the base64 image data to a buffer
    const imageBuffer = Buffer.from(image, 'base64');

    // Generate a unique filename for the image using UUID
    const imageName = `${v4()}.jpg`;

    try {
      // Save the image to a directory (you can change the path as needed)
      fs.writeFileSync(`./public/uploads/movie/${imageName}`, imageBuffer);

      // Save the movie information to the database
      const movieInfo = await Movie.create({
        title,
        description,
        category_id,
        image: imageName,
      });

      res.status(200).json({
        message: "Movie Create Successfully",
        data: movieInfo,
      });
    } catch (err) {
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //Category update or edit
  static update = async (req, res) => {
    const { title, discription, category_id } = req.body;
    const imageBaseURL = process.env.IMAGE_BASE_URL;
    let image = null; // Initialize image as null
    let existingMovie = req.movie;
    try {
      if (req.files && req.files.image) {
        // If a new image then delete the old image
        if (existingMovie && existingMovie.image) {
          fs.unlinkSync(`public/uploads/movie/${existingMovie.image}`);
        }
        // Save the new image
        image = req.files.image[0].filename;
      }
      console.log('movie data', title, discription, category_id)
      existingMovie.title = title ? title : existingMovie.title;
      existingMovie.discription = discription ? discription : existingMovie.discription;
      existingMovie.category_id = category_id ? category_id : existingMovie.category_id;
      existingMovie.image = image ? image : existingMovie.image;
      existingMovie.save();

      console.log("existingMovie", existingMovie)
      // Update the image URL with the base URL
      const updateMovie = await Movie.findById(existingMovie._id);
      updateMovie.image = `${imageBaseURL}/${updateMovie.image}`;

      res.status(200).json({
        message: "Movie updated successfully.",
        data: updateMovie,
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

  //delete category
  static delete = async (req, res) => {
    try {
      // Find the category by ID
      const movie = req.movie;

      // Delete the category's image file if it exists
      if (movie.image) {
        fs.unlinkSync(`public/uploads/movie/${movie.image}`);
      }

      // Delete the category from the database
      await movie.deleteOne({ _id: movie._id });

      res.status(200).json({
        message: "movie deleted successfully.",
      });
    } catch (err) {
      console.log(err);
      res.status(500).json({
        code: 500,
        message: "Internal server error.",
      });
    }
  };

}

export default MovieController

Now we do finish touch. Open postman and test it, like this-

So, our 1st part is done. Now we will do 2nd part
Scaffolding redux-toolkit in NextJs. Link

MERN Project: Movie Portal with AI- using Node & Next.js

syed kamruzzaman — Sun, 17 Dec 2023 19:39:53 +0000

Welcome to this tutorial. In this tutorial, we are making MERN Project.

Overview of Project:
Frontend, we used NextJs and Backend used Node. This Project's main feature is, that we are using AI to make a movie portal.
Like In Frontend, We have a form to connect Ai. We Type our idea or story in this form, and then AI will generate 3 things.

Movie Title
Movie Description
Title and Description wise image

Then we saved this information in our database, like MongoDB.

For doing easy our project, we separated Five parts in this project. These are

Making API Using Node and Express. Link
Scaffolding redux-toolkit in NextJs. Link
API Setup in NextJs. Link
AI Prompt setup on Nextjs. Link
Deploy A NextJs App and Node API on a Linux Server. Link

Here this project short video and pictures.

Vidoe Link

Form Page

AI Result Page

Home page

Deploy a NuxtJS App and Laravel API on a Linux Server

syed kamruzzaman — Tue, 31 Oct 2023 21:07:14 +0000

In this tutorial, we will learn how to deploy a NuxtJS app and Laravel on a Linux server. NuxtJS will serve as the frontend view and Laravel as the backend. We have already discussed Laravel API and NuxtJS app in previous articles, which you can find here:

Creating the API # [Tutorial-1]
Configure AI Prompt # [Tutorial-2]
Designing the UI # [Tutorial-3]

Linux is a popular and widely used server operating system. In this tutorial, we will be using Ubuntu 22.04.3. I assume you are familiar with Linux, so let's get started.

Prerequisites Before we begin, ensure you have the following:
1.A remote server (VPS)
2.A domain name

Step 1: Check your VPS for the following software and versions. Install them if they are not already present.
1.nginx -v
2.php -v
3.mysql
4.composer -v
5.phpMyAdmin (optional)
6.node -v
7.npm -v
8.git --version
9.pm2 –version

Step 2: Connect Your Domain to Your Server
Go to your domain manager, then to the DNS Manager, and set up your IP address. First, create a sub-domain for the Laravel API.

Note: Your domain setup page may look different from this.

Then, check your DNS here: https://dnschecker.org/

Step 3: Upload Your Laravel and Nuxt App to GitHub

Step 4: Server SSH Configuration
Go to your server and check if there is an .ssh folder. If not, create one:

sudo mkdir .ssh

Now create a key for your Laravel app:

ssh-keygen -f laravel-movie-api -t ed25519 -C "your_email@example.com"

You should now see two files in your .ssh folder:

laravel-movie-api 2.laravel-movie-api.pub

Open laravel-movie-api.pub and copy the code:

cat laravel-movie-api.pub

Then, go to your GitHub and open your Laravel project. Click the "Settings" button and paste the key in the key field.

Back on your server, create a config file:

touch ~/.ssh/config

and add the following code to the config file:

Host laravel-movie-api
        HostName github.com
        User your_github_username
        IdentityFile ~/.ssh/laravel-movie-api
        IdentitiesOnly yes

Check if your GitHub project connection is okay:

ssh -T git@laravel-movie-api

If you see a message indicating successful authentication, the connection is okay.
Now, go to your home directory and copy the GitHub link.

Modify this link as shown below, due to the created config file in the .ssh folder:

Syntax: git clone git@HOST:GITHUB_USERNAME/REPO_NAME
Example: git clone git@laravel-movie-api:your_github_username/laravel-movie-api.git

Move the cloned project to the /var/www folder:

sudo mv laravel-movie-api /var/www

Navigate to the www folder, then to the laravel-movie-api folder, and execute the following commands:

cp .env.example .env 
composer install --optimize-autoloader --no-dev
npm install
php artisan key:generate

# Set Permission for storage and bootstrap/cache Folder
sudo chown -R www-data:www-data storage
sudo chown -R www-data:www-data bootstrap/cache
# Add your User and web server user to www-data group
sudo usermod -a -G www-data your_username
sudo usermod -a -G www-data nginx
# Set storage's File Permission to 644
sudo find storage -type f -exec chmod 644 {} \;
# Set storage's Folder Permission to 775
sudo find storage -type d -exec chmod 775 {} \;
Or
sudo chmod -R 775 storage/
# Create Symbolic Link at public/storage which points to the storage/app/public directory.
php artisan storage:link

Step 5: Upload Your MySQL Database to the Server

Step 6: Configure Nginx for Laravel
Go to the Nginx folder and create a configuration file for your Laravel app:

cd /etc/nginx/sites-available
sudo nano laravel-movie-api

Add the following configuration

server{
    listen 80;
    listen [::]:80;
    server_name laravel-movie-api.yourdomain.com www.laravel-movie-api.yourdomain.com;
    root /var/www/laravel-movie-api/public;
    index index.php index.html;
    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }
    location ~ \.php$ {
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
    }
}

Enable the virtual host or create a symbolic link of the virtual host file:

sudo ln -s /etc/nginx/sites-available/laravel-movie-api /etc/nginx/sites-enabled/laravel-movie-api

Check if the configuration is correct:

sudo nginx -t

Restart Nginx:

sudo service nginx restart

Step 7: Check Your Sub-Domain
Open your browser and check if your sub-domain is working without errors.
Step 8: Set Up Nuxt App
Go to your domain manager, then to the DNS Manager, and set up your IP address for the NuxtJS app. Use this app on your main domain.

Then check your DNS here: https://dnschecker.org/

Step 9: Server SSH Configuration for Nuxt App

Repeat the SSH key generation and GitHub configuration steps as done for the Laravel app, but this time for your NuxtJS app. Remember to replace the relevant names and paths.

ssh-keygen -f nuxt-movie-ui-with-laravel-api -t ed25519 -C "your_email@example.com"

now you can see two file in your .ssh folder
1.nuxt-movie-ui-with-laravel-api
2.nuxt-movie-ui-with-laravel-api.pub
Now open nuxt-movie-ui-with-laravel-api.pub file and copy code.

cat nuxt-movie-ui-with-laravel-api.pub

Then go to your github and open your Nuxt project. Click Settings button

Go to your server and open config file

Sudo nano ~/.ssh/config

and add this code into config file

Host laravel-movie-api
        HostName github.com
        User kamruzzamanripon
        IdentityFile ~/.ssh/ laravel-movie-api
        IdentitiesOnly yes

Host nuxt_movie
        HostName github.com
        User kamruzzamanripon
        IdentityFile ~/.ssh/nuxt-movie-ui-with-laravel-api
        IdentitiesOnly yes

Now check your github project connection is ok. Here is code

ssh -T git@nuxt_movie

Now go to your Server home directory and copy github link

Past your terminal but don’t press enter. Suppose we got this link

git@github.com:kamruzzamanripon/nuxt-movie-ui-with-laravel-api.git

here we modify this link because we created a config file in .ssh folder. Here is the modified code

Syntax:- git clone git@HOST:GITHUB_USERNAME/REPO_NAME
Example:- git clone git@nuxt_movie: kamruzzamanripon/nuxt-movie-ui-with-laravel-api.git

Your server clones this project. Now you move this file to your /var/www folder

Sudo mv nuxt-movie-ui-with-laravel-api  /var/www

Go to www/folder. And then go nuxt-movie-ui-with-laravel-api folder. Command below line

npm install
npm run build
sudo nano ecosystem.config.js

# Write below code in ecosystem.config.js file

module.exports = {
  apps : [
      {
        name: "myapp",
        script: ".output/server/index.mjs",
        port: 3001
      }
  ]
}

Restart Nginx:

sudo service nginx restart

Start the app using pm2:

pm2 start ecosystem.config.js
pm2 save
pm2 status

Step 11: Configure Nginx for Nuxt App

Go to the Nginx folder and create a configuration file for your Nuxt app:

cd /etc/nginx/sites-available
sudo nano nuxt-movie-ui-with

Add the following configuration:

server {
    listen 80;
    listen [::]:80;
    server_name yourdomain.com www.yourdomain.com;
    location / {
        proxy_pass http://localhost:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Enable the virtual host or create a symbolic link of the virtual host file:

sudo ln -s /etc/nginx/sites-available/nuxt-movie-ui-with-laravel-api /etc/nginx/sites-enabled/nuxt-movie-ui-with-laravel-api

Check if the configuration is correct:

sudo nginx -t

Restart Nginx:

sudo service nginx restart

Step 12: Check Your Domain
Open your browser and check if your domain is working without errors.

Step 13: Update your .env file
Open your laravel-movie-api .env file

update as require
Now open nuxt-movie-ui-with-laravel-api .env file and update

Congratulations! You have successfully deployed a NuxtJS app and Laravel API on a Linux server.

Remark on Git Cloning:
It's important to note that we used SSH for git cloning instead of HTTPS. This choice is strategic for ease of future development. Imagine you've made some changes to your project locally. With SSH, all you need to do to update your project on the server is a simple git push from your local machine, followed by a git pull on the server. This process updates your app with the latest changes. Using HTTPS wouldn't offer this straightforward workflow, as it would require repeating the entire process from the beginning for every update.
Furthermore, you can streamline the process even more by implementing auto-deployment. With this setup, any update you push to GitHub automatically reflects on your server. This automation can be achieved through GitHub Actions. In a subsequent tutorial, I plan to delve into the features of GitHub Actions and how you can use them for auto-deployment.
Stay tuned for that, and in the meantime, enjoy the benefits of easy project updates with SSH!

All Episodes
Creating the API # [Tutorial-1]
Configure AI Prompt # [Tutorial-2]
Designing the UI # [Tutorial-3]
Setting up on an Linux Server # [Tutorial-4]

Laravel API Integration in Nuxt.js

syed kamruzzaman — Tue, 31 Oct 2023 21:07:06 +0000

In this tutorial, we'll integrate a Laravel API into a Nuxt.js application. Let's dive in!

Step 1: Set Up Environment File
First, set up your environment file as shown in the screenshot below:

OPEN_AI_API_KEY=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
API_BASE_URL=http://127.0.0.1:8000/api/
API_ROOT_URL=http://127.0.0.1:8000
VITE_API_URL=http://127.0.0.1:8000/api/

Step 2: Set Up Axios
While there are different ways to set up Axios, in this tutorial, we'll use it as a helper function. Create a folder named helpers, and inside it, create a file named axios.js. Type the configuration as shown in the block:

We've already set up the necessary packages like Axios and Pinia. If you haven't done this yet, follow the instructions in the link below:
Configure AI Prompt : Part-2

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_URL, 
  headers: {
    'Content-Type': 'application/json',
  },
});

axiosInstance.interceptors.request.use(function (config) {
  // Do something before request is sent
  let token = localStorage.getItem("token");
  config.headers["Authorization"] = "Bearer " + token;
  return config;
});

export default axiosInstance;

Step 3: Set Up Pinia Store
Create the following files in your Pinia store:

aiMovieStore.js
categoryStore.js
userStore.js

Now, add code to each file as shown in the block below:

userStore.js

import { defineStore } from 'pinia';
import axios from '../helpers/axios.js';


export const userStore = defineStore('userStore', {
  state: () => ({
    loading: false,
    logInUserInfo: {},
    categories: [],
    isLogIn:false,
  }),

  getters: {
    authCheck() {
      if (process.client) {
        if (this.isLogIn == true) {
           return true;
        }
        if(this.isLogIn == false){
          const token = localStorage.getItem('token');
          return !!token;
        }

        return false;
      }
    },
    token (){
      if (typeof window == undefined) {
        return false;
      }
      const token = localStorage.getItem("token") ?? this.logInUserInfo.data.token
      if(token){
        return token;
      }

      return null;
    }
  },

  actions: {
     async actionLogin(payload, token) {
      try {
        const response = await axios.post('/login', payload);
        this.logInUserInfo = response.data;
        this.isLogIn = true;
        // Save the user data and token in local storage (for page reload)
        localStorage.setItem('user', JSON.stringify(response.data.data));
        localStorage.setItem('token', response.data.data.token);
        navigateTo("/");
      } catch (error) {
        throw new Error('Login failed.', error);
      }
    },

    async actionLogout(payload) {
      const response = await axios.post('/logout');
      localStorage.removeItem('user');
      localStorage.removeItem('token');
      this.logInUserInfo = null;
      this.isLogIn = false;
    },

    async actionRegister(payload){
      console.log('registation', payload)
      try {
        const response = await axios.post('/register', payload);
        navigateTo("/login");
      } catch (error) {
        throw new Error('Registration failed.', error);
      }
    }





  }
});

# categoryStore.js

import { defineStore } from 'pinia';
import { ref } from 'vue';
import axios from "../helpers/axios.js";

export const categoryStore = defineStore('categoryStore', () => {
  const categories = ref([])

  const actionStoreCategory = async(payload)=>{
    console.log('actionStoreCategory', payload)
    const formData = new FormData();
    formData.append("name", payload.name);
    formData.append("image", payload.file);
    //console.log("actionManualMovieDataSendToServer", [...formData]);
    const response = await axios.post("/category-store", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
    navigateTo("/");
  }

  const actionAllCategoryApi = async()=> {
    const config = useRuntimeConfig();
    const data = await axios.get("/all-category");
    console.log("axios data", data);
    categories.value = data.data.data;
    //this.actionAiMovieData = movieData;
  }

    return { actionStoreCategory, actionAllCategoryApi, categories }
  })

# aiMovieStore.js

import axios from "../helpers/axios.js";

import { defineStore } from "pinia";

//define pinia store
export const aiMovieStore = defineStore("aiMovieStore", {

  //initial store
  state: () => ({
    loading: false,
    aiMovieData: {},
    categories: [],
    topMovies: [],
    categoryWiseMovie: [],
  }),

  getters: {},

  actions: {
    async getToken() {
      return await axios.get("/sanctum/csrf-cookie");
    },

    //here payload is ai data. this data store in pinia
    async actionAiMovieData(payload) {
      this.aiMovieData = payload;
      this.loading = false;
    },
    async actionAllCategoryApi() {
      const config = useRuntimeConfig();
      const data = await axios.get("/all-category");
      console.log("axios data", data);
      this.categories = data.data.data;
      //this.actionAiMovieData = movieData;
    },

    //here send ai data to server for save this data in our database
    async actionAiMovieDataSendServer(payload) {
      console.log("actionAiMovieDataSendServer", payload);
      const response = await axios.post("/ai-movie-store", payload);
      navigateTo("/");
    },

    //here menual movie data send to server for save this data in our database
    async actionManualMovieDataSendToServer(payload) {
      console.log("actionManualMovieDataSendToServer", payload);
      const formData = new FormData();
      formData.append("title", payload.title);
      formData.append("description", payload.description);
      formData.append("category_id", payload.category);
      //formData.append('image', payload.file??"")
      if (payload.file) {
        formData.append("image", payload.file);
      }
      console.log("actionManualMovieDataSendToServer", [...formData]);
      const response = await axios.post("/movie-store", formData, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      });
      navigateTo("/");
    },

    //fetch top movies from database
    async actionTopMovie(payload) {
      const data = await axios.get("/top-movies");
      this.topMovies = data.data.data.data;
    },

    //fetch category wise movie list from database
    async actionCategoryWiseMovie() {
      const data = await axios.get("/category-wise-movies");
      console.log("actionCategoryWiseMovie", data);
      this.categoryWiseMovie = data.data.data.data;
    },
  },
});

Step 4: Set Up App Pages

Go to the pages folder. You'll find the following pages

1.index.vue
2.login.vue
3.registration.vue
4.manual-make-movie.vue

index.vue
This page includes three components:

HeroSection
TopMovies
CategoryWiseMovies

In the TopMovies component, add the following code:

<template>
<section class="mt-9 bg-lime-300 dark:bg-rose-500 p-5 rounded-md">
    <div class="flex items-center justify-between">
        <span class="font-semibold text-gray-700 text-base dark:text-white">Top Movies</span>
        <div class="flex items-center space-x-2 fill-gray-500">
            <NavigationArrow />
        </div>
    </div>

    <div class="mt-4 grid grid-cols-2  sm:grid-cols-4 gap-x-5 gap-y-5">
        <div class="flex flex-col rounded-xl overflow-hidden aspect-square border dark:border-zinc-600" v-for="topMovie in aiMOvieStoreInfo.topMovies" :key="topMovie">
            <img :src="topMovie.image" class=" h-4/5 object-cover w-full  " alt="">
            <div class="w-full h-1/5 bg-white dark:bg-zinc-800 dark:text-white px-3 flex items-center justify-between border-t-2 border-t-red-600">
                <span class="capitalize  font-medium truncate">{{ topMovie.title }}</span>
                <div class="flex space-x-2 items-center text-xs">
                    <IconImdbLogo />
                    <span>{{ getRandomRating(topMovie.id) }}</span>
                </div>
            </div>
        </div>
    </div>
</section>
</template>

<script setup>
import { aiMovieStore } from '@/store/aiMovieStore.js';
import IconImdbLogo from '../Icon/ImdbLogo.vue';
import NavigationArrow from '../Icon/NavigationArrow.vue';

const aiMOvieStoreInfo = aiMovieStore();
const randomRating = ref((Math.random() * 4 + 5).toFixed(1));
watchEffect(()=>{
    aiMOvieStoreInfo.actionTopMovie();
},[])
const getRandomRating = (id) => {
  const hashValue = id % 1000; // Use a large enough number for uniqueness, adjust as needed
  const baseRating = (hashValue % 20 + 75) / 10; // Random number between 7.5 and 9.5
  const randomRating = parseFloat((Math.random() * (10 - baseRating) + baseRating).toFixed(1));

  return randomRating > 10 ? 10 : randomRating;
};

</script>

For the CategoryWiseMovies component, add this:

<template>
<section 
    class="mt-9 p-5 rounded-md" 
    v-for="category in aiMOvieStoreInfo.categoryWiseMovie" 
    :key="category"
    :class="getRandomColorClass()"
>
    <div class="flex items-center justify-between">
        <span class="font-semibold text-gray-700 text-base dark:text-white">{{ category.name }}</span>
        <div class="flex items-center space-x-2 fill-gray-500">
            <NavigationArrow />
        </div>
    </div>

    <div class="mt-4 grid grid-cols-2 gap-y-5 sm:grid-cols-3 gap-x-5 ">
        <div class="flex flex-col rounded-xl overflow-hidden aspect-square border dark:border-zinc-600" v-for="movie in getRandomMovies(category.movies)" :key="movie">
            <img :src="getImageUrl(movie.image)" class=" h-4/5 object-cover w-full  " alt="">
            <div class="w-full h-1/5 bg-white dark:bg-zinc-800 dark:text-white px-3 flex items-center justify-between border-t-2 border-t-red-600">
                <span class="capitalize  font-medium truncate">{{ movie.title }}</span>
                <div class="flex space-x-2 items-center text-xs">
                    <IconImdbLogo />
                    <span>7.4</span>
                </div>
            </div>
        </div>
    </div>
</section>
</template>

<script setup>
import { aiMovieStore } from '@/store/aiMovieStore';
import IconImdbLogo from '../Icon/ImdbLogo.vue';
import NavigationArrow from '../Icon/NavigationArrow.vue';
const config = useRuntimeConfig();
const imageRootUrl = config.public.API_ROOT_URL

const aiMOvieStoreInfo = aiMovieStore();
onMounted(()=>{
    aiMOvieStoreInfo.actionCategoryWiseMovie()
})

// For make random color
const getRandomColorClass = () => {
  const randomIndex = Math.floor(Math.random() * colors.length);
  return colors[randomIndex];
};
const colors = [
  'bg-red-400',
  'bg-blue-400',
  'bg-green-400',
  'bg-yellow-400',
  'bg-pink-400',
  'bg-blue-800',
  'bg-black',

];
//image generat url
const getImageUrl = (thumbnail) => {
  const imageUrl = thumbnail ? thumbnail.replace('public', 'storage') : '';
  return `${imageRootUrl}/${imageUrl}`;
};

//random 3 movies generate
const getRandomMovies = (movies) => {
  if (movies.length <= 3) {
    return movies;
  } else {
    const shuffledMovies = [...movies].sort(() => Math.random() - 0.5);
    return shuffledMovies.slice(0, 3);
  }
};
</script>

With that, we've completed the home page, which should look like this:

# registration.vue Page
Add the following lines:

<template>
    <div class="flex h-screen items-center justify-center bg-gray-100">
      <div class="bg-white p-8 shadow-md rounded-lg w-80">
        <h1 class="text-2xl font-semibold mb-4">Register</h1>
        <form @submit.prevent="register">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Name</label>
            <input v-model="userInfo.name" type="text" class="mt-1 block w-full border rounded-md px-3 py-2" required />
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Email</label>
            <input v-model="userInfo.email" type="email" class="mt-1 block w-full border rounded-md px-3 py-2" required />
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Password</label>
            <input v-model="userInfo.password" type="password" class="mt-1 block w-full border rounded-md px-3 py-2" required />
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Confirm Password</label>
            <input v-model="userInfo.password_confirmation" type="password" class="mt-1 block w-full border rounded-md px-3 py-2" required />
          </div>
          <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Register</button>
        </form>
      </div>
    </div>
  </template>

  <script setup>
  import { userStore } from '@/store/userStore.js';
import { ref } from 'vue';

  const userInfo = ref({
    name:"",
    email:"",
    password:"",
    password_confirmation:"",
  })
  const userStoreInfo = userStore()

  const register = async ()=>{
    if(userInfo.value.password != userInfo.value.password_confirmation){
      alert('Password does not match, please check' );
      return;
    }

    await userStoreInfo.actionRegister(userInfo.value)

  }

  </script>

# login.vue page

<template>
    <div class="flex h-screen items-center justify-center bg-gray-100">
      <div class="bg-white p-8 shadow-md rounded-lg w-80">
        <h1 class="text-2xl font-semibold mb-4">Login </h1>
        <form @submit.prevent="login">
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Email</label>
            <input v-model="loginInfo.email" type="email" class="mt-1 block w-full border rounded-md px-3 py-2 text-red-800" required />
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700">Password</label>
            <input v-model="loginInfo.password" type="password" class="mt-1 block w-full border rounded-md px-3 py-2 text-red-800" required />
          </div>
          <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600">Login</button>
        </form>
      </div>
    </div>
  </template>

  <script setup>
 import { ref } from 'vue';
import { userStore } from '../store/userStore.js';

 const userStoreInfo = userStore();
 const loginInfo = ref({
    email:'',
    password:''
 })

 const login = async ()=>{

    if(!loginInfo.value.email || !loginInfo.value.password){
        alert('Please Type input field')
    }

    await userStoreInfo.actionLogin(loginInfo.value,)

 }
  </script>

# manual-make-movie.vue
In this page, navigate to the FormInput component and add the following line:

<template>
    <div class="bg-gray-200 p-5 rounded-md dark:bg-black">

        <div class="text-center mb-8 relative">
            <h1 class="text-2xl font-bold text-gray-700 mb-3 dark:text-white">Manual Movie Maker</h1>
            <img src="/assets/pictures/storytelling-08.gif" alt="" class="rounded-full w-48 h-48 absolute -top-5 right-0 sm::hidden">
        </div>

        <div class="mx-10 px-10 py-16 bg-gray-400 dark:bg-black dark:border rounded-md">
            <div class="mb-6">
                <label for="large-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Movie
                    Title
                </label>
                <input type="text" id="large-input"
                    class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Type your Movie Title..." v-model="movieData.title">
                <p v-if="!movieData.title && isSubmitted" class="text-red-500 mt-2">Movie Title is required.</p>
            </div>
            <div class="mb-6">
                <label for="base-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Movie
                    Category</label>
                <select 
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    v-model="movieData.category"
                    >
                    <option value="">Choose category</option>
                    <option :value="category.id" v-for="category in aiMovieStoreInfo.categories" :key="category">
                        {{ category.name }}
                    </option>
                </select>
                <p v-if="!movieData.category && isSubmitted" class="text-red-500 mt-2">Movie Category is required.</p>
            </div>
            <div class="mb-6">
                <label for="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Movie Short
                    Description</label>
                <textarea id="message" rows="4"
                    class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Type Movie short description..." v-model="movieData.description"></textarea>
                <p v-if="!movieData.description && isSubmitted" class="text-red-500 mt-2">Movie Description is required.</p>
            </div>
            <div class="mb-6">
                <label for="large-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                    Select Movie Poster
                </label>
                <input 
                    type="file" id="large-input"
                    class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-md focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                    placeholder="Type your Movie Title..."
                    @change="handleFileChange"
                >
                <p v-if="!movieData.file && isSubmitted" class="text-red-500 mt-2">Movie Poster is required.</p>
            </div>
            <div class="text-right">
                <button type="submit" class="bg-black text-white p-3 rounded-md dark:border" @click="submitForm">Make
                    Movie
                </button>
            </div>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { aiMovieStore } from '../../store/aiMovieStore.js';

const movieData = ref({
    title: "",
    category: "",
    description: "",
    file:""
})

const aiMovieStoreInfo = aiMovieStore();
const isSubmitted = ref(false);

onMounted(()=>{
    aiMovieStoreInfo.actionAllCategoryApi()
})

//input file handler
function handleFileChange(event) {
  const file = event.target.files[0];
  movieData.value.file = file;
}
//validation input
function validateInputs() {
    const { title, category, description, file } = movieData.value;
    if (!title || !category || !description || !file) {
        //alert('Please fillup the form')
        return false;
    }
    return true;
}

const submitForm = () => {
    isSubmitted.value = true;
    if (validateInputs()) {
        aiMovieStoreInfo.actionManualMovieDataSendToServer(movieData.value)
    }
};


</script>

With that, our API integration is complete. The next step is to deploy this app on our Ubuntu server. Here's the tutorial link for that:
[link]

Here is github link of this project
https://github.com/kamruzzamanripon/nuxt-movie-ui-with-laravel-api

All Episodes
Creating the API # [Tutorial-1]
Configure AI Prompt # [Tutorial-2]
Designing the UI # [Tutorial-3]
Setting up on an Linux Server # [Tutorial-4]

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]