Did some changes

.env

@@ -3,4 +3,9 @@ PG_PORT=5432
 PG_USER=postgres
 PG_PWD=secret
 PG_DB=postgres
-PG_HOST=localhost
+PG_HOST=localhost
+
+# PgAdmin
+PG_ADMIN_EMAIL=test123@gmail.com
+PG_ADMIN_PWD=123
+PA_PORT=8081

Bash/PushCode.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+#? add all files and folders
+
+git add .
+
+#? commit those
+echo -e "\nEnter the message before commit"
+read name
+
+git commit -m "$name"
+
+#? push the code
+
+git push -u origin main

Dockerfile

@@ -1,6 +1,6 @@
 FROM node:20-alpine3.19 as builder
 
-WORKDIR /app
+WORKDIR /app/frontend
 
 COPY package.json .
 
@@ -12,3 +12,4 @@ RUN npm run build
 
 EXPOSE 3000
 
+CMD [ "npm", 'start' ]

K8s/deployment-frontend.yml

@@ -0,0 +1,24 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: frontend-deployment
+  labels:
+    app: frontend
+spec:
+  replicas: 3
+  selector:
+    matchLabels:
+      app: frontend-pod
+  template:
+    metadata:
+      labels:
+        app: frontend-pod
+
+    spec:
+      containers:
+        - name: frontend-container
+          image: fradriks/blog-frontend
+          ports:
+            - name: frontend-port
+              containerPort: 3000
+              protocol: TCP

K8s/services-frontend.yml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: frontend-service
+spec:
+  selector:
+    app: frontend-pod
+  type: LoadBalancer
+  ports:
+    - name: service-port
+      port: 3000
+      targetPort: 3000

Query/query.sql

@@ -17,8 +17,7 @@ INSERT INTO
         AUTHOR, TITLE, BLOG_DESCRIPTION, BLOG_CONTENT, EMAIL_ID
     )
 VALUES (
-        'AJI', 'DevOps Life cycle', 'The DevOps lifecycle is an iterative and collaborative process that integrates automation and feedback to deliver high-quality software, tailored to meet business and user requirements.', 'DevOps Lifecycle is the set of phases that includes DevOps for taking part in Development and Operation group duties for quicker software program delivery. DevOps follows positive techniques that consist of code, building, testing, releasing, deploying, operating, displaying, and planning. DevOps lifecycle follows a range of phases such as non-stop development, non-stop integration, non-stop testing, non-stop monitoring, and non-stop feedback. Each segment of the DevOps lifecycle is related to some equipment and applied sciences to obtain the process. Some of the frequently used tools are open source and are carried out primarily based on commercial enterprise requirements. DevOps lifecycle is effortless to manipulate and it helps satisfactory delivery.',
-        'AJI123@GMAIL.COM'
+        'Anu', 'All about Kubernetes', 'Kubernetes is a portable, extensible, open source platform for managing containerized workloads and services, that facilitates both declarative configuration and automation. It has a large, rapidly growing ecosystem. Kubernetes services, support, and tools are widely available.', 'Containers are a good way to bundle and run your applications. In a production environment, you need to manage the containers that run the applications and ensure that there is no downtime. For example, if a container goes down, another container needs to start. Would not it be easier if this behavior was handled by a system? That is how Kubernetes comes to the rescue! Kubernetes provides you with a framework to run distributed systems resiliently. It takes care of scaling and failover for your application, provides deployment patterns, and more. For example: Kubernetes can easily manage a canary deployment for your system.', 'anu123@gmail.com'
     );
 
 -- DELETE FROM BLOG

app/Components/Blog-Card.jsx

@@ -33,23 +33,24 @@ const BlogCard = () => {
                     // console.log(data.created_at);
                     const createdDate = moment(data.created_at).format('MMMM Do YYYY');
                     return (
-                        <div key={data.sr_no} className='bg-[#101010] rounded-lg text-[#bdbbb3] w-[40vw] h-[80vh] flex flex-col justify-start my-5 cursor-pointer' onClick={() => { console.log(data.id) }}>
+                        <div className='bg-[#101010] rounded-lg text-[#bdbbb3] w-[40vw] h-[80vh] flex flex-col justify-start my-5 cursor-pointer' key={data.sr_no} onClick={() => { }}>
                             <Image className='w-full h-[45vh] object-cover rounded-tl-lg rounded-tr-lg' src={CardImg} alt='' height={400} width={400} priority={false} />
                             <div className='my-4 mx-5'>
                                 <h1 className='text-3xl font-semibold text-white'>{data.title}</h1>
                                 <div className='flex text-sm justify-start gap-10 my-5'>
                                     <p>{createdDate}</p> /
                                     <p>Category</p> /
-                                    <p>{ }Comments</p>
+                                    <p>{data.author}</p>
                                 </div>
                                 <p className='leading-7 mt-8 line-clamp-3'>{data.blog_description}</p>
                             </div>
                         </div>
                     );
-                })
+                }
+                )
             }
         </>
-    )
+    );
 }
 
 export default BlogCard;

app/Components/DetailCard.jsx

@@ -1,22 +1,23 @@
 "use client"
-import React, { useState } from 'react'
+import React from 'react'
 import { MdCancel } from "react-icons/md";
 import Image from "next/image";
 import BG from "@/app/Assets/landscape.jpg"
 
 const DetailCard = () => {
-    const [cancel, setCancel] = useState(true);
-
+    let cancel = true;
     return (
         <div className={cancel ? `sticky h-full w-3/4 bg-[#000000d7] rounded-2xl z-0 top-24` : 'hidden'}>
-            <MdCancel className='text-[#ffffffcf] text-4xl absolute right-4 top-2 cursor-pointer' onClick={() => { setCancel(!cancel); }} />
+            <MdCancel className='text-[#ffffffcf] text-4xl absolute right-4 top-2 cursor-pointer' onClick={() => {
+                cancel = false;
+            }} />
             <Image className='w-full rounded-t-2xl h-[60vh] object-cover' src={BG} alt='#' height={100} width={800} />
             <div className='scrollbar text-white px-3 py-5 overflow-y-scroll h-[100vh] snap-y'>
                 <h1 className='text-5xl font-bold'>DevOps Life cycle</h1>
                 <div className='flex text-sm justify-start gap-10 my-5'>
                     <p>December 24, 2023</p> /
                     <p>DevOps</p> /
-                    <p>{ }2 Comments</p>
+                    <p>Author</p>
                 </div>
                 <div className='mt-10 divide-[#bbbbbb33] divide-y-[.5px]'>
                     <div className='flex w-full items-center gap-10'>

docker-compose.yml

@@ -44,3 +44,23 @@ services:
     restart: "always"
     env_file:
       - .env
+
+  # App
+
+  frontend:
+    container_name: frontend-container
+    image: fradriks/blog-frontend
+    restart: always
+    working_dir: /app/frontend
+    build:
+      context: ./
+      dockerfile: Dockerfile
+    volumes:
+      - ./:/app/frontend
+    ports:
+      - 3000:3000
+    expose:
+      - 3000
+
+    depends_on:
+      - pg_db

next.config.mjs

@@ -1,8 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    api: {
-        bodyParser: false,
-    }
 };
 
 export default nextConfig;