feat: docker dev setup

Reviewed-on: #12

README.md

@@ -0,0 +1,87 @@
+# Docker Setup (Backend + Frontend + PostgreSQL)
+
+This project provides a complete development environment using **Docker Compose** for:
+
+- Backend (Node.js / Express / Prisma)
+- Frontend (Vite / React)
+- PostgreSQL Database
+
+---
+
+## Project Structure
+
+```
+.
+├── backend/
+├── frontend/
+├── docker/
+│   └── dev/
+│       ├── Dockerfile.main
+│       └── Dockerfile.frontend
+├── docker-compose.dev.yml
+```
+
+---
+
+## Prerequisites
+
+Make sure you have installed:
+
+- Docker
+- Docker Compose
+
+---
+
+## Environment Variables
+
+### Backend (`backend/.env`)
+
+```env
+DATABASE_URL=postgresql://user:password@db:5432/mydb
+PORT=3000
+JWT_SECRET=your_secret_here
+
+CORS_ALLOWED_ORIGINS=http://localhost:5173
+
+BYTESCALE_SECRET_API_KEY=your_key
+POSTMARK_API_KEY=your_key
+EMAIL_FROM=admin@example.com
+```
+
+### Frontend (`frontend/.env`)
+
+```env
+VITE_API_BASE_URL=http://localhost:5000
+```
+
+---
+
+## Running the Project
+
+### Start containers
+
+```bash
+docker compose -f docker-compose.dev.yml up --build
+```
+
+---
+
+### Stop containers
+
+```bash
+docker compose -f docker-compose.dev.yml down
+```
+
+---
+
+## Database (PostgreSQL)
+
+- User: `user`
+- Password: `password`
+- DB: `mydb`
+
+Data is persisted using Docker volume:
+
+```
+postgres_data
+```

backend/README.md

@@ -0,0 +1,59 @@
+**GG-Node-Backend**
+
+## Tech Stack
+
+Runtime: Node.js (ES Modules)
+Framework: Express.js (v5.x)
+ORM: Prisma (PostgreSQL)
+Storage: Bytescale (Image uploads)
+Auth: JSON Web Tokens (JWT) & Bcrypt
+Email: Postmark
+
+## Project Structure
+
+backend/
+├── prisma/
+│ └── schema.prisma  
+├──── src/
+│ ├── app.js  
+│ ├── controllers/  
+│ ├── middlewares/  
+│ ├── routes/  
+│ ├── prisma/  
+│ └── utils/  
+├── .env  
+└── package.json
+
+## Installation & Setup
+
+**1. Prerequisites**
+Node.js (v18+)
+PostgreSQL Database
+
+**2. Environment Variables**
+DATABASE_URL=""
+PORT=3000
+JWT_SECRET=""
+CORS_ALLOWED_ORIGINS=http://localhost:3001 http://localhost:3003 http://localhost:5174 http://localhost:5173
+BYTESCALE_SECRET_API_KEY=""
+POSTMARK_API_KEY=""
+
+**3. Install Dependencies**
+npm install
+
+**4. Database Initialization**
+
+# Generate Prisma Client
+
+npm run generate
+
+# Run migrations to create database tables
+
+npm run migrate
+
+## Scripts
+
+1. npm start: Runs the server in production mode.
+2. npm run migrate: Syncs your local database with the current Prisma schema.
+3. npm run generate: Regenerates the Prisma Client (run this after schema changes).
+4. npx prisma studio: Opens a visual editor to view and manage your database data.

backend/package-lock.json

@@ -9,6 +9,7 @@
 			"version": "1.0.0",
 			"license": "ISC",
 			"dependencies": {
+				"@bytescale/sdk": "^3.53.0",
 				"@editorjs/editorjs": "^2.31.4",
 				"@editorjs/header": "^2.8.8",
 				"@editorjs/list": "^2.0.9",
@@ -21,13 +22,21 @@
 				"express-session": "^1.19.0",
 				"jsonwebtoken": "^9.0.3",
 				"multer": "^2.1.1",
+				"node-fetch": "^3.3.2",
 				"postmark": "^4.0.7",
-				"prisma": "^6.19.2"
+				"prisma": "^6.19.2",
+				"slugify": "^1.6.9"
 			},
 			"devDependencies": {
 				"nodemon": "^3.1.11"
 			}
 		},
+		"node_modules/@bytescale/sdk": {
+			"version": "3.53.0",
+			"resolved": "https://registry.npmjs.org/@bytescale/sdk/-/sdk-3.53.0.tgz",
+			"integrity": "sha512-qCeNup3pSjaklXuBrO9JeKbozZEs/PjQEvuqCiOAWLBRl6lDjd0V9gRVYqyttPimXYFoV+J/7dmPWtK6RfOABQ==",
+			"license": "MIT"
+		},
 		"node_modules/@codexteam/icons": {
 			"version": "0.0.5",
 			"resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.0.5.tgz",
@@ -599,6 +608,15 @@
 				"url": "https://opencollective.com/express"
 			}
 		},
+		"node_modules/data-uri-to-buffer": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+			"integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 12"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.4.3",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -899,6 +917,29 @@
 				"node": ">=8.0.0"
 			}
 		},
+		"node_modules/fetch-blob": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+			"integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "paypal",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"node-domexception": "^1.0.0",
+				"web-streams-polyfill": "^3.0.3"
+			},
+			"engines": {
+				"node": "^12.20 || >= 14.13"
+			}
+		},
 		"node_modules/fill-range": {
 			"version": "7.1.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -990,6 +1031,18 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/formdata-polyfill": {
+			"version": "4.0.10",
+			"resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+			"integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+			"license": "MIT",
+			"dependencies": {
+				"fetch-blob": "^3.1.2"
+			},
+			"engines": {
+				"node": ">=12.20.0"
+			}
+		},
 		"node_modules/forwarded": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -1521,6 +1574,44 @@
 				"node": "^18 || ^20 || >= 21"
 			}
 		},
+		"node_modules/node-domexception": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+			"integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+			"deprecated": "Use your platform's native DOMException instead",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/jimmywarting"
+				},
+				{
+					"type": "github",
+					"url": "https://paypal.me/jimmywarting"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=10.5.0"
+			}
+		},
+		"node_modules/node-fetch": {
+			"version": "3.3.2",
+			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+			"integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+			"license": "MIT",
+			"dependencies": {
+				"data-uri-to-buffer": "^4.0.0",
+				"fetch-blob": "^3.1.4",
+				"formdata-polyfill": "^4.0.10"
+			},
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/node-fetch"
+			}
+		},
 		"node_modules/node-fetch-native": {
 			"version": "1.6.7",
 			"resolved": "https://registry.npmjs.org/node-fetch-native/-/node-fetch-native-1.6.7.tgz",
@@ -1727,7 +1818,6 @@
 			"integrity": "sha512-XTKeKxtQElcq3U9/jHyxSPgiRgeYDKxWTPOf6NkXA0dNj5j40MfEsZkMbyNpwDWCUv7YBFUl7I2VK/6ALbmhEg==",
 			"hasInstallScript": true,
 			"license": "Apache-2.0",
-			"peer": true,
 			"dependencies": {
 				"@prisma/config": "6.19.2",
 				"@prisma/engines": "6.19.2"
@@ -2064,6 +2154,15 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/slugify": {
+			"version": "1.6.9",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.9.tgz",
+			"integrity": "sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=8.0.0"
+			}
+		},
 		"node_modules/statuses": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
@@ -2207,6 +2306,15 @@
 				"node": ">= 0.8"
 			}
 		},
+		"node_modules/web-streams-polyfill": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
+			"integrity": "sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
 		"node_modules/wrappy": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

backend/package.json

@@ -15,6 +15,7 @@
 	"license": "ISC",
 	"type": "module",
 	"dependencies": {
+		"@bytescale/sdk": "^3.53.0",
 		"@editorjs/editorjs": "^2.31.4",
 		"@editorjs/header": "^2.8.8",
 		"@editorjs/list": "^2.0.9",
@@ -27,8 +28,10 @@
 		"express-session": "^1.19.0",
 		"jsonwebtoken": "^9.0.3",
 		"multer": "^2.1.1",
+		"node-fetch": "^3.3.2",
 		"postmark": "^4.0.7",
-		"prisma": "^6.19.2"
+		"prisma": "^6.19.2",
+		"slugify": "^1.6.9"
 	},
 	"devDependencies": {
 		"nodemon": "^3.1.11"

backend/prisma/migrations/20260414083619_added_slug/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - Added the required column `slug` to the `Blog` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Blog" ADD COLUMN     "slug" TEXT NOT NULL;

backend/prisma/migrations/20260414091055/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - A unique constraint covering the columns `[slug]` on the table `Blog` will be added. If there are existing duplicate values, this will fail.
+
+*/
+-- CreateIndex
+CREATE UNIQUE INDEX "Blog_slug_key" ON "Blog"("slug");

backend/prisma/schema.prisma

@@ -96,6 +96,7 @@ model Blog {
   image    String?
   content  Json
   isActive Boolean @default(true)
+  slug     String @unique
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -178,7 +179,6 @@ model AcademicsResearch {
   updatedAt DateTime @updatedAt
 }
 
-
 model EmailConfig {
   id       Int     @id @default(autoincrement())
   name     String
@@ -192,6 +192,7 @@ model EmailConfig {
 
 model NewsMedia {
   id Int @id @default(autoincrement())
+
   headline   String
   content    String?
   firstPara  String?

backend/src/controllers/blog.controller.js

@@ -1,4 +1,5 @@
 import prisma from "../prisma/client.js";
+import slugify from "slugify";
 
 /* CREATE BLOG */
 
@@ -13,6 +14,7 @@ export async function createBlog(req, res) {
 				image,
 				content,
 				isActive,
+				slug: slugify(title),
 			},
 		});
 
@@ -54,6 +56,26 @@ export async function getAllBlogs(req, res) {
 /* GET SINGLE BLOG */
 
 export async function getBlog(req, res) {
+	try {
+		const slug = req.params.slug;
+
+		const blog = await prisma.blog.findUnique({
+			where: {slug},
+		});
+
+		if (!blog) {
+			return res.status(404).json({error: "Blog not found"});
+		}
+
+		res.json(blog);
+	} catch (error) {
+		res.status(500).json({error: error.message});
+	}
+}
+
+/* GET SINGLE BLOG (ADMIN)*/
+
+export async function getBlogForAdmin(req, res) {
 	try {
 		const id = Number(req.params.id);
 

backend/src/routes/blog.routes.js

@@ -6,6 +6,7 @@ import {
 	updateBlog,
 	deleteBlog,
 	getAllBlogs,
+	getBlogForAdmin,
 } from "../controllers/blog.controller.js";
 
 import jwtAuthMiddleware from "../middleware/auth.js";
@@ -15,11 +16,14 @@ const router = express.Router();
 /* PUBLIC */
 
 router.get("/", getBlogs);
-router.get("/:id", getBlog);
+router.get("/:slug", getBlog);
 
 // Protected
 
 router.get("/admin/all", jwtAuthMiddleware, getAllBlogs);
+
+router.get("/admin/:id", jwtAuthMiddleware, getBlogForAdmin);
+
 router.post("/", jwtAuthMiddleware, createBlog);
 router.put("/:id", jwtAuthMiddleware, updateBlog);
 router.delete("/:id", jwtAuthMiddleware, deleteBlog);

backend/src/routes/upload.routes.js

@@ -1,15 +1,35 @@
 import express from "express";
-import {upload} from "../controllers/upload.controller.js";
+import * as Bytescale from "@bytescale/sdk";
+import multer from "multer";
 
 const router = express.Router();
 
-router.post("/image", upload.single("image"), (req, res) => {
-	res.json({
-		success: 1,
-		file: {
-			url: `http://localhost:3000/uploads/blog/${req.file.filename}`,
+const uploadManager = new Bytescale.UploadManager({
+	apiKey: process.env.BYTESCALE_SECRET_API_KEY,
+});
+
+const storage = multer.memoryStorage();
+const upload = multer({storage});
+
+router.post("/", upload.single("file"), async (req, res) => {
+	try {
+		const file = req.file;
+		const {folderPath} = req.body;
+
+		const result = await uploadManager.upload({
+			data: file.buffer,
+			name: file.originalname,
+			mime: file.mimetype,
+			path: {
+				folderPath: folderPath || "/general",
 			},
 		});
+
+		res.json({fileUrl: result.fileUrl});
+	} catch (error) {
+		console.error(error);
+		res.status(500).json({error: "Upload failed"});
+	}
 });
 
 export default router;

docker-compose.dev.yml

@@ -0,0 +1,44 @@
+version: "3.8"
+
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: docker/dev/Dockerfile.main
+    ports:
+      - "5000:3000"
+    env_file:
+      - ./backend/.env
+    depends_on:
+      db:
+        condition: service_healthy
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: .
+      dockerfile: docker/dev/Dockerfile.frontend
+    ports:
+      - "5173:5173"
+    env_file:
+      - ./frontend/.env
+    restart: unless-stopped
+
+  db:
+    image: postgres:15-alpine
+    container_name: postgres_db
+    environment:
+      POSTGRES_USER: user
+      POSTGRES_PASSWORD: password
+      POSTGRES_DB: mydb
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U user -d mydb"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+    restart: unless-stopped
+
+volumes:
+  postgres_data:

docker/dev/Dockerfile.frontend

@@ -0,0 +1,17 @@
+ARG NODE_VERSION=22.11.0
+FROM node:${NODE_VERSION}-alpine
+
+WORKDIR /usr/src/app
+
+COPY ./frontend/package*.json ./
+RUN npm ci
+
+COPY ./frontend .
+
+# Build the app
+RUN npm run build
+
+EXPOSE 5173
+
+# Serve built app (no hot reload)
+CMD ["npm", "run", "preview", "--", "--host", "0.0.0.0"]

docker/dev/Dockerfile.main

@@ -0,0 +1,24 @@
+ARG NODE_VERSION=22.11.0
+FROM node:${NODE_VERSION}-alpine
+
+WORKDIR /usr/src/app
+
+# Use cache mounts for faster installs
+RUN --mount=type=bind,source=backend/package.json,target=package.json \
+    --mount=type=bind,source=backend/package-lock.json,target=package-lock.json \
+    --mount=type=cache,target=/root/.npm \
+    npm ci
+
+# Copy the backend source
+COPY ./backend .
+
+# Copy and setup entrypoint
+COPY ./docker/entrypoint.sh /usr/local/bin/entrypoint.sh
+RUN chmod +x /usr/local/bin/entrypoint.sh
+
+EXPOSE 5000
+
+ENTRYPOINT [ "entrypoint.sh" ]
+
+# This '$@' will be replaced by the CMD
+CMD ["npm", "run", "dev"]

docker/entrypoint.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+set -e  # Exit immediately if a command exits with a non-zero status
+
+echo "Generating Prisma Client..."
+npx prisma generate
+
+# echo "Running migrate..."
+# npx prisma migrate deploy
+echo "Running PUSH..."
+npx prisma db push
+
+echo "Executing command: $@"
+exec "$@"
+

frontend/.gitignore

@@ -22,3 +22,8 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+#env files
+.env
+.env.*.local
+

frontend/README.md

@@ -1,73 +1,47 @@
-# React + TypeScript + Vite
+**GG-Dashboard**
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Tech Stack
 
-Currently, two official plugins are available:
+Framework: React 19
+Build Tool: Vite + TypeScript
+Styling: Tailwind CSS 4 + shadcn/ui
+Rich Text: Editor.js
+State/Fetch: Axios + React Hooks
+Export: XLSX + File-saver
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Project Structure
 
-## React Compiler
+frontend/
+├── src/
+│ ├── api/  
+│ ├── assets/  
+│ ├── components/  
+│ ├── context/  
+│ ├── lib/  
+│ ├── layout/  
+│ ├── pages/  
+│ ├── services/  
+│ ├── utils/  
+│ └── App.tsx  
+├── .env  
+├── index.html
+└── package.json
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Installation & Setup
 
-## Expanding the ESLint configuration
+**1. Prerequisites**
+Node.js (v20+)
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+**2. Environment Variables**
+VITE_API_URL="http://localhost:3000/api"
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+**3. Install Dependencies**
+npm install
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+**4. Development**
+npm run dev
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+## Scripts
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
+npm run dev: Starts the Vite development server with Hot Module Replacement.
+npm run build: Compiles TypeScript and builds the production-ready assets.

frontend/package-lock.json

@@ -8,7 +8,6 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "@bytescale/sdk": "^3.53.0",
         "@editorjs/code": "^2.9.4",
         "@editorjs/delimiter": "^1.4.2",
         "@editorjs/editorjs": "^2.31.5",
@@ -525,12 +524,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@bytescale/sdk": {
-      "version": "3.53.0",
-      "resolved": "https://registry.npmjs.org/@bytescale/sdk/-/sdk-3.53.0.tgz",
-      "integrity": "sha512-qCeNup3pSjaklXuBrO9JeKbozZEs/PjQEvuqCiOAWLBRl6lDjd0V9gRVYqyttPimXYFoV+J/7dmPWtK6RfOABQ==",
-      "license": "MIT"
-    },
     "node_modules/@codexteam/icons": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/@codexteam/icons/-/icons-0.3.3.tgz",

frontend/package.json

@@ -10,7 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@bytescale/sdk": "^3.53.0",
     "@editorjs/code": "^2.9.4",
     "@editorjs/delimiter": "^1.4.2",
     "@editorjs/editorjs": "^2.31.5",

frontend/src/App.tsx

@@ -20,6 +20,7 @@ import CandidatePage from "./pages/candidates";
 import InquiryPage from "./pages/inquiry";
 import AcademicsPage from "./pages/Academics";
 import NewsPage from "./pages/newsMedia";
+import BlogDetail from "./pages/BlogDetails";
 
 export default function App() {
 	return (
@@ -35,6 +36,7 @@ export default function App() {
 							<Route path="/department" element={<Department />} />
 							<Route path="/doctor" element={<Doctor />} />
 							<Route path="/blog" element={<Blog />} />
+							<Route path="/blog/:id" element={<BlogDetail />} />
 							<Route path="/blog/create" element={<BlogEditorPage />} />
 							<Route path="/blog/edit/:id" element={<BlogEditorPage />} />
 							<Route path="/appointment" element={<Appointment />} />

frontend/src/api/blog.ts

@@ -14,7 +14,7 @@ export const getAllBlogsApi = async () => {
 };
 
 export const getBlogByIdApi = async (id: number) => {
-	const res = await apiClient.get(`/blogs/${id}`);
+	const res = await apiClient.get(`/blogs/admin/${id}`);
 	return res.data;
 };
 

frontend/src/api/client.ts

@@ -1,10 +1,10 @@
 import axios from "axios";
 import type {InternalAxiosRequestConfig} from "axios";
 
-const BASE_URL: string = "http://localhost:3000/api";
+const baseURL: string = import.meta.env.VITE_API_URL;
 
 const apiClient = axios.create({
-	baseURL: BASE_URL,
+	baseURL: baseURL,
 	headers: {
 		"Content-Type": "application/json",
 	},

frontend/src/components/BytescaleUploader/BytescaleUploader.tsx

@@ -1,19 +1,20 @@
 import {useState, useRef} from "react";
-import * as Bytescale from "@bytescale/sdk";
 import {Button} from "@/components/ui/button";
 import {User, X, Loader2} from "lucide-react";
+import axios from "axios";
 
 interface BytescaleUploaderProps {
 	value: string;
 	onChange: (url: string) => void;
-	folderPath: "/doctors" | "/departments" | "/news";
+	folderPath: "/doctors" | "/departments" | "/news" | "/blog";
 }
 
-const uploadManager = new Bytescale.UploadManager({
-	apiKey: "public_223k2cv3MyaAxBeyALCfJa8EMLek",
-});
-
-export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
+export function BytescaleUploader({
+	value,
+	onChange,
+	folderPath,
+}: BytescaleUploaderProps) {
+	const baseURL = import.meta.env.VITE_API_URL;
 	const [isUploading, setIsUploading] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -21,19 +22,31 @@ export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
 		const file = event.target.files?.[0];
 		if (!file) return;
 
+		if (file.size > 5 * 1024 * 1024) {
+			alert("File is too large (Max 5MB)");
+			return;
+		}
+
 		setIsUploading(true);
+
+		const formData = new FormData();
+		formData.append("file", file);
+		formData.append("folderPath", folderPath);
+
 		try {
-			const { fileUrl } = await uploadManager.upload({
-				data: file,
-				path: {
-					folderPath: "/doctors",
+			const response = await axios.post(`${baseURL}/upload`, formData, {
+				headers: {
+					"Content-Type": "multipart/form-data",
 				},
 			});
 
+			const {fileUrl} = response.data;
 			onChange(fileUrl);
 		} catch (e: any) {
 			console.error("Upload Error:", e);
-			alert(`Error:\n${e.message}`);
+			const errorMessage =
+				e.response?.data?.error || e.message || "Upload failed";
+			alert(`Upload Error: ${errorMessage}`);
 		} finally {
 			setIsUploading(false);
 			if (fileInputRef.current) fileInputRef.current.value = "";
@@ -49,7 +62,7 @@ export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
 							<img
 								src={value}
 								className="w-16 h-16 rounded-full object-cover border-2 border-primary/20"
-								alt="Doctor Profile"
+								alt="Preview"
 							/>
 							<button
 								type="button"
@@ -100,8 +113,8 @@ export function BytescaleUploader({ value, onChange }: BytescaleUploaderProps) {
 
 			{value && (
 				<p className="text-xs text-amber-600 pl-[72px]">
-					⚠️ Make sure to save the changes by clicking the "Save Changes" button
-					at the bottom.
+					⚠️ Make sure to save the changes by clicking the "Save Changes"
+					button.
 				</p>
 			)}
 		</div>

frontend/src/pages/Blog.tsx

@@ -17,7 +17,7 @@ import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
 import {Button} from "@/components/ui/button";
 import {Input} from "@/components/ui/input";
 
-import {Loader2, RefreshCw, Plus, Pencil, Trash} from "lucide-react";
+import {Loader2, RefreshCw, Plus, Pencil, Trash, Eye} from "lucide-react";
 
 interface Blog {
 	id: number;
@@ -161,6 +161,13 @@ export default function BlogPage() {
 													<Pencil className="h-4 w-4" />
 												</Button>
 
+												<Button
+													size="sm"
+													variant="secondary"
+													onClick={() => navigate(`/blog/${blog.id}`)}
+												>
+													<Eye className="h-4 w-4" />
+												</Button>
 												<Button
 													size="sm"
 													variant="destructive"

frontend/src/pages/BlogDetails.tsx

@@ -0,0 +1,204 @@
+import React, {useEffect, useState} from "react";
+import {useParams, useNavigate} from "react-router-dom";
+
+import {Button} from "@/components/ui/button";
+import {getBlogByIdApi} from "@/api/blog";
+
+/* ---------------- LIST RENDERER ---------------- */
+const renderList = (items, style) => {
+	// ✅ Checklist
+	if (style === "checklist") {
+		return (
+			<div className="mb-4 space-y-2">
+				{items.map((item, i) => (
+					<div key={i} className="flex items-center gap-2">
+						<input
+							type="checkbox"
+							checked={item.meta?.checked || false}
+							readOnly
+						/>
+						<span
+							className={item.meta?.checked ? "line-through opacity-60" : ""}
+							dangerouslySetInnerHTML={{
+								__html: item.content || "",
+							}}
+						/>
+					</div>
+				))}
+			</div>
+		);
+	}
+
+	// ✅ Ordered / Unordered
+	const ListTag = style === "ordered" ? "ol" : "ul";
+
+	return (
+		<ListTag
+			className={`pl-6 mb-4 ${
+				style === "ordered" ? "list-decimal" : "list-disc"
+			}`}
+		>
+			{items
+				.filter((item) => item.content)
+				.map((item, i) => (
+					<li key={i}>
+						<span
+							dangerouslySetInnerHTML={{
+								__html: item.content,
+							}}
+						/>
+						{item.items?.length > 0 && renderList(item.items, style)}
+					</li>
+				))}
+		</ListTag>
+	);
+};
+
+/* ---------------- BLOCK RENDERER ---------------- */
+const renderBlock = (block, index) => {
+	switch (block.type) {
+		case "paragraph":
+			return (
+				<p
+					key={index}
+					className="mb-4 leading-7 text-gray-800"
+					dangerouslySetInnerHTML={{__html: block.data.text}}
+				/>
+			);
+
+		case "header":
+			return (
+				<h2
+					key={index}
+					className="text-2xl font-semibold mb-4"
+					dangerouslySetInnerHTML={{__html: block.data.text}}
+				/>
+			);
+
+		case "image":
+			return (
+				<img
+					key={index}
+					src={block.data.file?.url}
+					alt={block.data.caption || "blog-image"}
+					className="w-full rounded-lg mb-4"
+				/>
+			);
+
+		case "list":
+			return (
+				<div key={index}>{renderList(block.data.items, block.data.style)}</div>
+			);
+
+		case "quote":
+			return (
+				<blockquote
+					key={index}
+					className="border-l-4 border-gray-300 pl-4 italic my-4 text-gray-600"
+				>
+					{block.data.text}
+				</blockquote>
+			);
+
+		case "code":
+			return (
+				<pre
+					key={index}
+					className="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm mb-4"
+				>
+					<code>{block.data.code}</code>
+				</pre>
+			);
+
+		case "table":
+			return (
+				<div key={index} className="overflow-x-auto mb-6">
+					<table className="w-full border border-gray-200">
+						<tbody>
+							{block.data.content.map((row, i) => (
+								<tr key={i}>
+									{row.map((cell, j) => (
+										<td
+											key={j}
+											className="border px-3 py-2"
+											dangerouslySetInnerHTML={{
+												__html: cell,
+											}}
+										/>
+									))}
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			);
+
+		case "delimiter":
+			return <hr key={index} className="my-6 border-gray-300" />;
+
+		default:
+			return null;
+	}
+};
+
+/* ---------------- MAIN COMPONENT ---------------- */
+const BlogDetail = () => {
+	const {id} = useParams();
+	const navigate = useNavigate();
+	const [blog, setBlog] = useState(null);
+
+	const fetchBlog = async () => {
+		try {
+			const res = await getBlogByIdApi(Number(id));
+			console.log({res});
+			setBlog(res);
+		} catch (err) {
+			console.error("Error fetching blog", err);
+		}
+	};
+
+	useEffect(() => {
+		fetchBlog();
+	}, [id]);
+
+	if (!blog) {
+		return <p className="mt-40 text-center">Loading...</p>;
+	}
+
+	return (
+		<div className="mx-auto flex flex-col ">
+			{/* Back Button */}
+			<Button
+				variant="ghost"
+				className="mb-4 w-fit text-black px-0"
+				onClick={() => navigate(-1)}
+			>
+				← Back
+			</Button>
+
+			{/* Title */}
+			<h1 className="text-3xl md:text-5xl font-bold mb-2">{blog.title}</h1>
+
+			{/* Meta */}
+			<p className="text-gray-500 mb-4">
+				{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
+			</p>
+
+			{/* Image (only if exists) */}
+			{blog.image?.trim() && (
+				<img
+					src={blog.image}
+					alt="blog"
+					className="w-full h-[220px] md:h-[400px] object-cover rounded-lg mb-6"
+				/>
+			)}
+
+			{/* Content */}
+			<div>
+				{blog.content?.blocks?.map((block, index) => renderBlock(block, index))}
+			</div>
+		</div>
+	);
+};
+
+export default BlogDetail;

frontend/src/pages/BlogEditor.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from "react";
 import {useNavigate, useParams} from "react-router-dom";
-
+import {BytescaleUploader} from "@/components/BytescaleUploader/BytescaleUploader";
 import EditorJS, {OutputData} from "@editorjs/editorjs";
 import Header from "@editorjs/header";
 import List from "@editorjs/list";
@@ -117,18 +117,6 @@ export default function BlogEditorPage() {
 		initEditor();
 	}, [id, isEdit]);
 
-	const handleCoverUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-		const file = e.target.files?.[0];
-		if (!file) return;
-
-		try {
-			const res = await uploadImageApi(file);
-			setCoverImage(res.file.url);
-		} catch (err) {
-			console.error(err);
-		}
-	};
-
 	const handleSave = async () => {
 		if (!editorRef.current) return;
 
@@ -182,7 +170,11 @@ export default function BlogEditorPage() {
 					<div className="space-y-2">
 						<label className="text-sm font-medium">Cover Image</label>
 
-						<Input type="file" onChange={handleCoverUpload} />
+						<BytescaleUploader
+							value={coverImage}
+							folderPath="/blog"
+							onChange={(url) => setCoverImage(url)}
+						/>
 
 						{coverImage && (
 							<img

frontend/src/pages/Department.tsx

@@ -457,7 +457,7 @@ export default function DepartmentPage() {
 							Cancel
 						</Button>
 						<Button onClick={handleSubmit}>
-							{editing ? "Update" : "Create"}
+							{editing ? "Save Changes" : "Create"}
 						</Button>
 					</DialogFooter>
 				</DialogContent>

frontend/src/services/api.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const api = axios.create({
-	baseURL: "http://localhost:3000/api",
+	baseURL: import.meta.env.VITE_API_URL,
 });
 
 api.interceptors.request.use((config) => {

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />