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.

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
+## Project Structure
-- [@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
 
-## 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
+**3. Install Dependencies**
-export default defineConfig([
+npm install
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
 
-      // Remove tseslint.configs.recommended and replace with this
+**4. Development**
-      tseslint.configs.recommendedTypeChecked,
+npm run dev
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
 
-      // Other configs...
+## Scripts
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
-```
 
-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:
+npm run dev: Starts the Vite development server with Hot Module Replacement.
-
+npm run build: Compiles TypeScript and builds the production-ready assets.
-```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...
-    },
-  },
-])
-```

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/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

@@ -6,7 +6,7 @@ import axios from "axios";
 interface BytescaleUploaderProps {
 	value: string;
 	onChange: (url: string) => void;
-	folderPath: "/doctors" | "/departments" | "/news";
+	folderPath: "/doctors" | "/departments" | "/news" | "/blog";
 }
 
 export function BytescaleUploader({
@@ -14,6 +14,7 @@ export function BytescaleUploader({
 	onChange,
 	folderPath,
 }: BytescaleUploaderProps) {
+	const baseURL = import.meta.env.VITE_API_URL;
 	const [isUploading, setIsUploading] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -33,15 +34,11 @@ export function BytescaleUploader({
 		formData.append("folderPath", folderPath);
 
 		try {
-			const response = await axios.post(
+			const response = await axios.post(`${baseURL}/upload`, formData, {
-				"http://localhost:3000/api/upload",
-				formData,
-				{
 				headers: {
 					"Content-Type": "multipart/form-data",
 				},
-				},
+			});
-			);
 
 			const {fileUrl} = response.data;
 			onChange(fileUrl);

frontend/src/pages/BlogDetails.tsx

@@ -1,72 +1,202 @@
 import React, {useEffect, useState} from "react";
 import {useParams, useNavigate} from "react-router-dom";
-import axios from "axios";
 
 import {Button} from "@/components/ui/button";
-import {Card, CardContent} from "@/components/ui/card";
 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<any>(null);
+	const [blog, setBlog] = useState(null);
 
-	const fetchBlogById = async () => {
+	const fetchBlog = async () => {
 		try {
-			const response = await getBlogByIdApi(Number(id));
+			const res = await getBlogByIdApi(Number(id));
-
+			console.log({res});
-			setBlog(response);
+			setBlog(res);
-		} catch (error) {
+		} catch (err) {
-			console.error("Error fetching blog", error);
+			console.error("Error fetching blog", err);
 		}
 	};
 
 	useEffect(() => {
-		fetchBlogById();
+		fetchBlog();
-	}, [id]); // ✅ FIXED dependency
+	}, [id]);
 
 	if (!blog) {
-		return <div className="mt-40 text-center text-gray-500">Loading...</div>;
+		return <p className="mt-40 text-center">Loading...</p>;
 	}
 
 	return (
-		<div className=" mx-auto flex flex-col ">
+		<div className="mx-auto flex flex-col ">
-			<Card>
+			{/* Back Button */}
-				<CardContent className="p-6 space-y-4">
-					{/* Back */}
 			<Button
 				variant="ghost"
-						className="text-black-600 p-0"
+				className="mb-4 w-fit text-black px-0"
 				onClick={() => navigate(-1)}
 			>
 				← Back
 			</Button>
 
 			{/* Title */}
-					<h1 className="text-2xl md:text-4xl lg:text-5xl font-bold">
+			<h1 className="text-3xl md:text-5xl font-bold mb-2">{blog.title}</h1>
-						{blog.title}
-					</h1>
 
 			{/* Meta */}
-					<p className="text-gray-500 text-sm">
+			<p className="text-gray-500 mb-4">
 				{blog.writer} • {new Date(blog.createdAt).toLocaleDateString()}
 			</p>
 
-					{/* Image */}
+			{/* Image (only if exists) */}
+			{blog.image?.trim() && (
 				<img
 					src={blog.image}
-						alt={blog.title}
+					alt="blog"
-						className="w-full h-[220px] md:h-[400px] object-cover rounded-md"
+					className="w-full h-[220px] md:h-[400px] object-cover rounded-lg mb-6"
 				/>
+			)}
 
 			{/* Content */}
-					<div className="space-y-3 text-gray-800 leading-relaxed">
+			<div>
-						{blog.content?.blocks?.map((block: any, index: number) => (
+				{blog.content?.blocks?.map((block, index) => renderBlock(block, index))}
-							<p key={index}>{block.data?.text}</p>
-						))}
 			</div>
-				</CardContent>
-			</Card>
 		</div>
 	);
 };

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/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" />