full upgrade (#31)

* ✨ chore: update CI workflow to include testing and multi-arch build (#29)

* ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30)

* ✨ test: add unit tests

* ✨ test: add unit tests for whole project

* ✨ feat: add whatwg-fetch for improved fetch support

* ✨ chore: update Node.js version to 22 in workflow

* ✨ refactor: update types and improve email handling tests

* ✨ refactor: remove unused imports

* ✨ fix: normalize image name to lowercase in workflows

* ✨ fix: ensure Docker image names are consistently lowercase

* ✨ chore: update

* ✨ chore: update base URL to use secret variable

* ✨ chore: update to login to ghcr

* ✨ fix: add missing 'fi' to close if statement in workflow

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: Deploy Next.js to Raspberry Pi
+name: CI and Deploy to Raspberry Pi
 
 on:
   push:
@@ -8,11 +8,43 @@ on:
       - preview
 
 jobs:
-  deploy:
-    runs-on: self-hosted # Der Runner sollte auf dem Raspberry Pi laufen
-
+  test_and_build:
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout Code
+      - name: Check Out Code
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '22'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Run Tests
+        run: npm run test
+
+      - name: Log in to GHCR
+        run: |
+          echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.repository_owner }} --password-stdin
+
+      - name: Build and Push Multi-Arch Docker Image
+        run: |
+          IMAGE_NAME="ghcr.io/${{ github.repository_owner }}/my-nextjs-app:${{ github.ref_name }}"
+          IMAGE_NAME=$(echo "$IMAGE_NAME" | tr '[:upper:]' '[:lower:]')
+          docker buildx create --use
+          docker buildx build \
+            --platform linux/arm64,linux/amd64 \
+            -t "$IMAGE_NAME" \
+            --push \
+            .
+
+  deploy:
+    runs-on: self-hosted
+    needs: test_and_build
+    steps:
+      - name: Check Out Code
         uses: actions/checkout@v4
 
       - name: Set Environment Variables
@@ -28,52 +60,59 @@ jobs:
             echo "PORT=4002" >> $GITHUB_ENV
           fi
 
-      - name: Build Docker Image
+      - name: Log in to GHCR
         run: |
-          IMAGE_NAME="my-nextjs-app:$DEPLOY_ENV"
-          docker build -t $IMAGE_NAME .
+          echo "${{ secrets.GITHUB_TOKEN }}" | docker login ghcr.io -u ${{ github.repository_owner }} --password-stdin
+
+      - name: Pull Docker Image
+        run: |
+          IMAGE_NAME="ghcr.io/${{ github.repository_owner }}/my-nextjs-app:${{ github.ref_name }}"
+          IMAGE_NAME=$(echo "$IMAGE_NAME" | tr '[:upper:]' '[:lower:]')
+          docker pull "$IMAGE_NAME"
 
       - name: Deploy on Raspberry Pi (Zero-Downtime)
         run: |
+          IMAGE_NAME="ghcr.io/${{ github.repository_owner }}/my-nextjs-app:${{ github.ref_name }}"
+          IMAGE_NAME=$(echo "$IMAGE_NAME" | tr '[:upper:]' '[:lower:]')
           CONTAINER_NAME="nextjs-$DEPLOY_ENV"
-          IMAGE_NAME="my-nextjs-app:$DEPLOY_ENV"
           NEW_CONTAINER_NAME="$CONTAINER_NAME-new"
-          NETWORK_NAME="big-bear-ghost_ghost-network"
 
           # Remove existing temporary container, if any
           if [ "$(docker ps -aq -f name=$NEW_CONTAINER_NAME)" ]; then
-            echo "Removing existing new container ($NEW_CONTAINER_NAME)..."
             docker rm -f "$NEW_CONTAINER_NAME" || true
           fi
 
-          # Start the new container on a temporary internal port
-          docker run -d --name "$NEW_CONTAINER_NAME" --network $NETWORK_NAME -p 40000:3000 \
+          # Start new container on a temporary internal port
+          docker run -d --name "$NEW_CONTAINER_NAME" -p 40000:3000 \
             -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
-            -e NEXT_PUBLIC_BASE_URL="https://dki.one" \
-            $IMAGE_NAME
+            -e NEXT_PUBLIC_BASE_URL="${{ secrets.NEXT_PUBLIC_BASE_URL }}" \
+            -e MY_EMAIL="${{ secrets.MY_EMAIL }}" \
+            -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
+            -e GHOST_API_URL="${{ secrets.GHOST_API_URL }}" \
+            "$IMAGE_NAME"
 
-          # Wait to ensure the new container is running
+          # Wait for the new container to start
           sleep 10
 
-          # Check if the new container is running successfully
-          if [ "$(docker inspect --format='{{.State.Running}}' $NEW_CONTAINER_NAME)" == "true" ]; then
-            # Stop and remove the old container, if any
+          if [ "$(docker inspect --format='{{.State.Running}}' $NEW_CONTAINER_NAME)" = "true" ]; then
+            # Stop/remove the old container
             if [ "$(docker ps -aq -f name=$CONTAINER_NAME)" ]; then
               docker stop "$CONTAINER_NAME" || true
               docker rm   "$CONTAINER_NAME" || true
             fi
 
-            # Stop and remove the temporary new container
+            # Replace the new container with final name/port
             docker stop  "$NEW_CONTAINER_NAME" || true
             docker rm    "$NEW_CONTAINER_NAME" || true
-
-            # Start the container with the desired name and port
-            docker run -d --name "$CONTAINER_NAME" --network $NETWORK_NAME -p $PORT:3000 \
+            docker run -d --name "$CONTAINER_NAME" -p $PORT:3000 \
               -e GHOST_API_KEY="${{ secrets.GHOST_API_KEY }}" \
-              -e NEXT_PUBLIC_BASE_URL="https://dki.one" \
-              $IMAGE_NAME
+              -e NEXT_PUBLIC_BASE_URL="${{ secrets.NEXT_PUBLIC_BASE_URL }}" \
+              -e MY_EMAIL="${{ secrets.MY_EMAIL }}" \
+              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
+              -e GHOST_API_URL="${{ secrets.GHOST_API_URL }}" \
+              "$IMAGE_NAME"
           else
             echo "New container failed to start."
-            docker logs $NEW_CONTAINER_NAME
+            docker logs "$NEW_CONTAINER_NAME"
             exit 1
           fi

app/__tests__/__mocks__/mock-fetch-img.ts

@@ -0,0 +1,12 @@
+export function mockFetch(data: Record<string, unknown>) {
+  return jest.fn().mockImplementation(() =>
+    Promise.resolve({
+      ok: true,
+      headers: {
+        get: jest.fn().mockReturnValue('image/jpeg'),
+      },
+      arrayBuffer: jest.fn().mockResolvedValue(new ArrayBuffer(8)),
+      json: () => data,
+    }),
+  );
+}

app/__tests__/__mocks__/mock-fetch-sitemap.ts

@@ -0,0 +1,12 @@
+export function mockFetch(responseText: string) {
+  return jest.fn().mockImplementation((url: string) => {
+    // Check if the URL being requested is our sitemap endpoint.
+    if (url.includes('/api/sitemap')) {
+      return Promise.resolve({
+        ok: true,
+        text: () => Promise.resolve(responseText),
+      });
+    }
+    return Promise.reject(new Error(`Unknown URL: ${url}`));
+  });
+}

app/__tests__/__mocks__/mock-fetch.ts

@@ -0,0 +1,8 @@
+export function mockFetch(data: Record<string, unknown>) {
+  return jest.fn().mockImplementation(() => {
+    return Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve(data),
+    });
+  });
+}

app/__tests__/__mocks__/nodemailer.js

@@ -0,0 +1,9 @@
+/**
+ * Jest Mock
+ * ./__mocks__/nodemailer.js
+ **/
+import nodemailer from 'nodemailer';
+import { getMockFor } from 'nodemailer-mock';
+
+const nodemailermock = getMockFor(nodemailer);
+export default nodemailermock;

app/__tests__/api/email.test.tsx

@@ -0,0 +1,83 @@
+import { POST } from '@/app/api/email/route';
+import { NextRequest, NextResponse } from 'next/server';
+import nodemailermock from '@/app/__tests__/__mocks__/nodemailer';
+
+jest.mock('next/server', () => ({
+  NextResponse: {
+    json: jest.fn(),
+  },
+}));
+
+beforeEach(() => {
+  nodemailermock.mock.reset();
+  process.env.MY_EMAIL = 'test@dki.one';
+  process.env.MY_PASSWORD = 'test-password';
+});
+
+describe('POST /api/email', () => {
+  it('should send an email', async () => {
+    const mockRequest = {
+      json: jest.fn().mockResolvedValue({
+        email: 'test@example.com',
+        name: 'Test User',
+        message: 'Hello!',
+      }),
+    } as unknown as NextRequest;
+
+    await POST(mockRequest);
+
+    expect(NextResponse.json).toHaveBeenCalledWith({ message: 'Email sent' });
+
+    const sentEmails = nodemailermock.mock.getSentMail();
+    expect(sentEmails.length).toBe(1);
+    expect(sentEmails[0].to).toBe('test@dki.one');
+    expect(sentEmails[0].text).toBe('Hello!\n\n' + 'test@example.com');
+  });
+
+  it('should return an error if EMAIL or PASSWORD is missing', async () => {
+    delete process.env.MY_EMAIL;
+    delete process.env.MY_PASSWORD;
+
+    const mockRequest = {
+      json: jest.fn().mockResolvedValue({
+        email: 'test@example.com',
+        name: 'Test User',
+        message: 'Hello!',
+      }),
+    } as unknown as NextRequest;
+
+    await POST(mockRequest);
+
+    expect(NextResponse.json).toHaveBeenCalledWith({ error: 'Missing EMAIL or PASSWORD' }, { status: 500 });
+  });
+
+  it('should return an error if request body is invalid', async () => {
+    const mockRequest = {
+      json: jest.fn().mockResolvedValue({
+        email: '',
+        name: 'Test User',
+        message: 'Test message',
+      }),
+    } as unknown as NextRequest;
+
+    await POST(mockRequest);
+
+    expect(NextResponse.json).toHaveBeenCalledWith({ error: 'Invalid request body' }, { status: 400 });
+  });
+
+  it('should return an error if sending email fails', async () => {
+    nodemailermock.mock.setShouldFail(true);
+
+    const mockRequest = {
+      json: jest.fn().mockResolvedValue({
+        email: 'test@example.com',
+        name: 'Test User',
+        message: 'Hello!',
+      }),
+    } as unknown as NextRequest;
+
+    await POST(mockRequest);
+
+    expect(NextResponse.json).toHaveBeenCalledWith({ error: 'Failed to send email' }, { status: 500 });
+  });
+});

app/__tests__/api/fetchAllProjects.test.tsx

@@ -0,0 +1,57 @@
+import { GET } from '@/app/api/fetchAllProjects/route';
+import { NextResponse } from 'next/server';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+
+jest.mock('next/server', () => ({
+  NextResponse: {
+    json: jest.fn(),
+  },
+}));
+
+describe('GET /api/fetchAllProjects', () => {
+  beforeAll(() => {
+    process.env.GHOST_API_URL = 'http://localhost:2368';
+    process.env.GHOST_API_KEY = 'some-key';
+    global.fetch = mockFetch({
+      posts: [
+        {
+          id: '67ac8dfa709c60000117d312',
+          title: 'Just Doing Some Testing',
+          meta_description: 'Hello bla bla bla bla',
+          slug: 'just-doing-some-testing',
+          updated_at: '2025-02-13T14:25:38.000+00:00',
+        },
+        {
+          id: '67aaffc3709c60000117d2d9',
+          title: 'Blockchain Based Voting System',
+          meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+          slug: 'blockchain-based-voting-system',
+          updated_at: '2025-02-13T16:54:42.000+00:00',
+        },
+      ],
+    });
+  });
+
+  it('should return a list of projects', async () => {
+    await GET();
+
+    expect(NextResponse.json).toHaveBeenCalledWith({
+      posts: [
+        {
+          id: '67ac8dfa709c60000117d312',
+          title: 'Just Doing Some Testing',
+          meta_description: 'Hello bla bla bla bla',
+          slug: 'just-doing-some-testing',
+          updated_at: '2025-02-13T14:25:38.000+00:00',
+        },
+        {
+          id: '67aaffc3709c60000117d2d9',
+          title: 'Blockchain Based Voting System',
+          meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+          slug: 'blockchain-based-voting-system',
+          updated_at: '2025-02-13T16:54:42.000+00:00',
+        },
+      ],
+    });
+  });
+});

app/__tests__/api/fetchImage.test.tsx

@@ -0,0 +1,53 @@
+import { GET } from '@/app/api/fetchImage/route';
+import { NextRequest } from 'next/server';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch-img';
+
+jest.mock('next/server', () => {
+  class NextResponseClass {
+    body: unknown;
+    init: unknown;
+    constructor(body: unknown, init?: unknown) {
+      this.body = body;
+      this.init = init;
+    }
+    static json(body: unknown, init?: unknown) {
+      return new NextResponseClass(body, init);
+    }
+    static from(body: unknown, init?: unknown) {
+      return new NextResponseClass(body, init);
+    }
+  }
+  return { NextResponse: NextResponseClass };
+});
+
+global.fetch = mockFetch({
+  ok: true,
+  headers: {
+    get: jest.fn().mockReturnValue('image/jpeg'),
+  },
+  arrayBuffer: jest.fn().mockResolvedValue(new ArrayBuffer(8)),
+});
+
+describe('GET /api/fetchImage', () => {
+  it('should return an error if no image URL is provided', async () => {
+    const mockRequest = {
+      url: 'http://localhost/api/fetchImage',
+    } as unknown as NextRequest;
+
+    const response = await GET(mockRequest);
+
+    expect(response.body).toEqual({ error: 'Missing URL parameter' });
+    expect(response.init.status).toBe(400);
+  });
+
+  it('should fetch an image if URL is provided', async () => {
+    const mockRequest = {
+      url: 'http://localhost/api/fetchImage?url=https://example.com/image.jpg',
+    } as unknown as NextRequest;
+
+    const response = await GET(mockRequest);
+
+    expect(response.body).toBeDefined();
+    expect(response.init.headers['Content-Type']).toBe('image/jpeg');
+  });
+});

app/__tests__/api/fetchProject.test.tsx

@@ -0,0 +1,47 @@
+import { GET } from '@/app/api/fetchProject/route';
+import { NextRequest, NextResponse } from 'next/server';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+
+jest.mock('next/server', () => ({
+  NextResponse: {
+    json: jest.fn(),
+  },
+}));
+
+describe('GET /api/fetchProject', () => {
+  beforeAll(() => {
+    process.env.GHOST_API_URL = 'http://localhost:2368';
+    process.env.GHOST_API_KEY = 'some-key';
+    global.fetch = mockFetch({
+      posts: [
+        {
+          id: '67aaffc3709c60000117d2d9',
+          title: 'Blockchain Based Voting System',
+          meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+          slug: 'blockchain-based-voting-system',
+          updated_at: '2025-02-13T16:54:42.000+00:00',
+        },
+      ],
+    });
+  });
+
+  it('should fetch a project by slug', async () => {
+    const mockRequest = {
+      url: 'http://localhost/api/fetchProject?slug=blockchain-based-voting-system',
+    } as unknown as NextRequest;
+
+    await GET(mockRequest);
+
+    expect(NextResponse.json).toHaveBeenCalledWith({
+      posts: [
+        {
+          id: '67aaffc3709c60000117d2d9',
+          title: 'Blockchain Based Voting System',
+          meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+          slug: 'blockchain-based-voting-system',
+          updated_at: '2025-02-13T16:54:42.000+00:00',
+        },
+      ],
+    });
+  });
+});

app/__tests__/api/og.test.tsx

@@ -0,0 +1,14 @@
+import { GET } from '@/app/api/og/route';
+import { ImageResponse } from 'next/og';
+
+jest.mock('next/og', () => ({
+  ImageResponse: jest.fn(),
+}));
+
+describe('GET /api/og', () => {
+  it('should return an Open Graph image', async () => {
+    await GET();
+
+    expect(ImageResponse).toHaveBeenCalled();
+  });
+});

app/__tests__/api/sitemap.test.tsx

@@ -0,0 +1,44 @@
+import { GET } from '@/app/api/sitemap/route';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+
+jest.mock('next/server', () => ({
+  NextResponse: jest.fn().mockImplementation((body, init) => ({ body, init })),
+}));
+
+describe('GET /api/sitemap', () => {
+  beforeAll(() => {
+    process.env.GHOST_API_URL = 'http://localhost:2368';
+    process.env.GHOST_API_KEY = 'test-api-key';
+    process.env.NEXT_PUBLIC_BASE_URL = 'https://dki.one';
+    global.fetch = mockFetch({
+      posts: [
+        {
+          id: '67ac8dfa709c60000117d312',
+          title: 'Just Doing Some Testing',
+          meta_description: 'Hello bla bla bla bla',
+          slug: 'just-doing-some-testing',
+          updated_at: '2025-02-13T14:25:38.000+00:00',
+        },
+        {
+          id: '67aaffc3709c60000117d2d9',
+          title: 'Blockchain Based Voting System',
+          meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+          slug: 'blockchain-based-voting-system',
+          updated_at: '2025-02-13T16:54:42.000+00:00',
+        },
+      ],
+    });
+  });
+
+  it('should return a sitemap', async () => {
+    const response = await GET();
+
+    expect(response.body).toContain('<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">');
+    expect(response.body).toContain('<loc>https://dki.one/</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/legal-notice</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/privacy-policy</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/projects/just-doing-some-testing</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/projects/blockchain-based-voting-system</loc>');
+    expect(response.init.headers['Content-Type']).toBe('application/xml');
+  });
+});

app/__tests__/components/Contact.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import Contact from '@/app/components/Contact';
+import '@testing-library/jest-dom';
+
+// Mock the fetch function
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({ message: 'Email sent' }),
+  })
+) as jest.Mock;
+
+describe('Contact', () => {
+  it('renders the contact form', () => {
+    render(<Contact />);
+    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Message')).toBeInTheDocument();
+  });
+
+  it('submits the form', async () => {
+    render(<Contact />);
+    fireEvent.change(screen.getByPlaceholderText('Name'), { target: { value: 'John Doe' } });
+    fireEvent.change(screen.getByPlaceholderText('Email'), { target: { value: 'john@example.com' } });
+    fireEvent.change(screen.getByPlaceholderText('Message'), { target: { value: 'Hello!' } });
+    fireEvent.click(screen.getByText('Send'));
+
+    expect(await screen.findByText('Email sent')).toBeInTheDocument();
+  });
+});

app/__tests__/components/Footer.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import Footer from '@/app/components/Footer';
+import '@testing-library/jest-dom';
+
+describe('Footer', () => {
+  it('renders the footer', () => {
+    render(<Footer />);
+    expect(screen.getByText('Connect with me on social platforms:')).toBeInTheDocument();
+  });
+});

app/__tests__/components/Header.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import Header from '@/app/components/Header';
+import '@testing-library/jest-dom';
+
+describe('Header', () => {
+  it('renders the header', () => {
+    render(<Header />);
+    expect(screen.getByText('Dennis Konkol')).toBeInTheDocument();
+    
+    const aboutButtons = screen.getAllByText('About');
+    expect(aboutButtons.length).toBeGreaterThan(0);
+
+    const projectsButtons = screen.getAllByText('Projects');
+    expect(projectsButtons.length).toBeGreaterThan(0);
+
+    const contactButtons = screen.getAllByText('Contact');
+    expect(contactButtons.length).toBeGreaterThan(0);
+  });
+
+  it('renders the mobile header', () => {
+    render(<Header />);
+    const openMenuButton = screen.getByLabelText('Open menu');
+    expect(openMenuButton).toBeInTheDocument();
+
+    const closeMenuButton = screen.getByLabelText('Close menu');
+    expect(closeMenuButton).toBeInTheDocument();
+  });
+});

app/__tests__/components/Hero.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import Hero from '@/app/components/Hero';
+import '@testing-library/jest-dom';
+
+describe('Hero', () => {
+  it('renders the hero section', () => {
+    render(<Hero />);
+    expect(screen.getByText('Hi, I’m Dennis')).toBeInTheDocument();
+    expect(screen.getByText('Student & Software Engineer')).toBeInTheDocument();
+    expect(screen.getByText('Based in Osnabrück, Germany')).toBeInTheDocument();
+    expect(screen.getByText('Passionate about technology, coding, and solving real-world problems. I enjoy building innovative solutions and continuously expanding my knowledge.')).toBeInTheDocument();
+    expect(screen.getByText('Currently working on exciting projects that merge creativity with functionality. Always eager to learn and collaborate!')).toBeInTheDocument();
+    expect(screen.getByAltText('Image of Dennis')).toBeInTheDocument();
+  });
+});

app/__tests__/components/Projects.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import Projects from '@/app/components/Projects';
+import '@testing-library/jest-dom';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+
+
+describe('Projects', () => {
+    beforeAll(() => {
+      process.env.GHOST_API_URL = 'http://localhost:2368';
+      process.env.GHOST_API_KEY = 'some-key';
+      global.fetch = mockFetch({
+        posts: [
+          {
+            id: '67ac8dfa709c60000117d312',
+            title: 'Just Doing Some Testing',
+            meta_description: 'Hello bla bla bla bla',
+            slug: 'just-doing-some-testing',
+            updated_at: '2025-02-13T14:25:38.000+00:00',
+          },
+          {
+            id: '67aaffc3709c60000117d2d9',
+            title: 'Blockchain Based Voting System',
+            meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+            slug: 'blockchain-based-voting-system',
+            updated_at: '2025-02-13T16:54:42.000+00:00',
+          },
+        ],
+      });
+    });
+
+  it('renders the projects section', async () => {
+    render(<Projects />);
+    
+    expect(await screen.findByText('Projects')).toBeInTheDocument();
+    
+    await waitFor(() => {
+      expect(screen.getByText('Just Doing Some Testing')).toBeInTheDocument();
+      expect(screen.getByText('Hello bla bla bla bla')).toBeInTheDocument();
+      expect(screen.getByText('Blockchain Based Voting System')).toBeInTheDocument();
+      expect(screen.getByText('This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.')).toBeInTheDocument();
+      expect(screen.getByText('More to come')).toBeInTheDocument();
+    });
+  });
+});

app/__tests__/legal-notice/page.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import LegalNotice from '@/app/legal-notice/page';
+import '@testing-library/jest-dom';
+
+describe('LegalNotice', () => {
+  it('renders the legal notice page', () => {
+    render(<LegalNotice />);
+    expect(screen.getByText('Impressum')).toBeInTheDocument();
+  });
+});

app/__tests__/not-found.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import NotFound from '@/app/not-found';
+import '@testing-library/jest-dom';
+
+describe('NotFound', () => {
+  it('renders the 404 page', () => {
+    render(<NotFound />);
+    expect(screen.getByText("Oops! The page you're looking for doesn't exist.")).toBeInTheDocument();
+  });
+});

app/__tests__/page.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import Home from '@/app/page';
+import '@testing-library/jest-dom';
+
+describe('Home', () => {
+  it('renders the home page', () => {
+    render(<Home />);
+    expect(screen.getByText('Hi, I’m Dennis')).toBeInTheDocument();
+  });
+});

app/__tests__/privacy-policy/page.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import PrivacyPolicy from '@/app/privacy-policy/page';
+import '@testing-library/jest-dom';
+
+describe('PrivacyPolicy', () => {
+  it('renders the privacy policy page', () => {
+    render(<PrivacyPolicy />);
+    expect(screen.getByText('Datenschutzerklärung')).toBeInTheDocument();
+  });
+});

app/__tests__/projects/[slug]/page.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import ProjectDetails from '@/app/projects/[slug]/page';
+import '@testing-library/jest-dom';
+import { useRouter, useSearchParams, useParams, usePathname } from 'next/navigation';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+
+jest.mock('next/navigation', () => ({
+  useRouter: jest.fn(),
+  useSearchParams: jest.fn(),
+  useParams: jest.fn(),
+  usePathname: jest.fn(),
+}));
+
+describe('ProjectDetails', () => {
+  beforeAll(() => {
+    process.env.GHOST_API_URL = 'http://localhost:2368';
+    process.env.GHOST_API_KEY = 'some-key';
+    global.fetch = mockFetch({
+      posts: [
+        {
+          id: '67aaffc3709c60000117d2d9',
+          title: 'Blockchain Based Voting System',
+          description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+          html: '<p>This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.</p>',
+          slug: 'blockchain-based-voting-system',
+          updated_at: '2025-02-13T16:54:42.000+00:00',
+        },
+      ],
+    });
+  });
+
+  it('renders the project details page', async () => {
+    (useRouter as jest.Mock).mockReturnValue({});
+    (useSearchParams as jest.Mock).mockReturnValue(new URLSearchParams());
+    (useParams as jest.Mock).mockReturnValue({ slug: 'blockchain-based-voting-system' });
+    (usePathname as jest.Mock).mockReturnValue('/projects/blockchain-based-voting-system');
+
+    render(<ProjectDetails />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Blockchain Based Voting System')).toBeInTheDocument();
+      expect(screen.getByText('This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.')).toBeInTheDocument();
+    });
+  });
+});

app/__tests__/sitemap.xml/page.test.tsx

@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom';
+import { GET } from '@/app/sitemap.xml/route';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch-sitemap';
+
+jest.mock('next/server', () => ({
+  NextResponse: jest.fn().mockImplementation((body, init) => ({ body, init })),
+}));
+
+describe('Sitemap Component', () => {
+  beforeAll(() => {
+    process.env.NEXT_PUBLIC_BASE_URL = 'https://dki.one';
+    global.fetch = mockFetch(`
+      <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
+        <url>
+          <loc>https://dki.one/</loc>	
+        </url>
+        <url>
+          <loc>https://dki.one/legal-notice</loc>
+        </url>
+        <url>
+          <loc>https://dki.one/privacy-policy</loc>
+        </url>
+        <url>
+          <loc>https://dki.one/projects/just-doing-some-testing</loc>
+        </url>
+        <url>
+          <loc>https://dki.one/projects/blockchain-based-voting-system</loc>
+        </url>
+      </urlset>
+    `);
+  });
+
+  it('should render the sitemap XML', async () => {
+    const response = await GET();
+
+    expect(response.body).toContain('<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">');
+    expect(response.body).toContain('<loc>https://dki.one/</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/legal-notice</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/privacy-policy</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/projects/just-doing-some-testing</loc>');
+    expect(response.body).toContain('<loc>https://dki.one/projects/blockchain-based-voting-system</loc>');
+    expect(response.init.headers['Content-Type']).toBe('application/xml');
+  });
+});

app/api/email/route.tsx

@@ -2,9 +2,6 @@ import {type NextRequest, NextResponse} from "next/server";
 import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
-import dotenv from "dotenv";
-
-dotenv.config();
 
 export async function POST(request: NextRequest) {
     const body = (await request.json()) as {
@@ -20,11 +17,19 @@ export async function POST(request: NextRequest) {
     if (!user || !pass) {
         console.error("Missing email/password environment variables");
         return NextResponse.json(
-            {error: "Internal server error"},
+            { error: "Missing EMAIL or PASSWORD" },
             { status: 500 },
         );
     }
 
+    if (!email || !name || !message) {
+        console.error("Invalid request body");
+        return NextResponse.json(
+            { error: "Invalid request body" },
+            { status: 400 },
+        );
+    }
+
     const transportOptions: SMTPTransport.Options = {
         host: "smtp.ionos.de",
         port: 587,
@@ -64,6 +69,6 @@ export async function POST(request: NextRequest) {
         return NextResponse.json({ message: "Email sent" });
     } catch (err) {
         console.error("Error sending email:", err);
-        return NextResponse.json({error: err}, {status: 500});
+        return NextResponse.json({ error: "Failed to send email" }, { status: 500 });
     }
 }

app/api/fetchAllProjects/route.tsx

@@ -2,7 +2,7 @@ import {NextResponse} from "next/server";
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://192.168.179.31:2368";
+const GHOST_API_URL = process.env.GHOST_API_URL || "http://192.168.179.31:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 export async function GET() {

app/api/fetchProject/route.tsx

@@ -2,7 +2,7 @@ import { NextResponse } from "next/server";
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://big-bear-ghost:2368";
+const GHOST_API_URL = process.env.GHOST_API_URL || "http://192.168.179.31:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 export async function GET(request: Request) {

app/api/projects/route.tsx

@@ -1,34 +0,0 @@
-import {NextResponse} from 'next/server';
-import fs from 'fs';
-import path from 'path';
-import matter from 'gray-matter';
-
-export async function GET() {
-    try {
-        const projectsDirectory = path.join(process.cwd(), 'public/projects');
-        const filenames = fs.readdirSync(projectsDirectory);
-
-        const projects = filenames
-            .filter((filename) => {
-                const filePath = path.join(projectsDirectory, filename);
-                return fs.statSync(filePath).isFile();
-            })
-            .map((filename) => {
-                const filePath = path.join(projectsDirectory, filename);
-                const fileContents = fs.readFileSync(filePath, 'utf8');
-                const {data} = matter(fileContents);
-
-                return {
-                    id: data.id,
-                    title: data.title,
-                    description: data.description,
-                    slug: filename.replace('.md', ''),
-                };
-            });
-
-        return NextResponse.json(projects);
-    } catch (error) {
-        console.error("Failed to fetch projects:", error);
-        return NextResponse.json({error: 'Failed to fetch projects'}, {status: 500});
-    }
-}

app/api/sitemap/route.tsx

@@ -9,17 +9,18 @@ interface ProjectsData {
   posts: Project[];
 }
 
-export const dynamic = 'force-dynamic';
+export const dynamic = "force-dynamic";
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = "http://192.168.179.31:2368";
+const GHOST_API_URL = process.env.GHOST_API_URL || "http://192.168.179.31:2368";
 const GHOST_API_KEY = process.env.GHOST_API_KEY;
 
 // Funktion, um die XML für die Sitemap zu generieren
 function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
   const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>';
-    const urlsetOpen = '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">';
-    const urlsetClose = '</urlset>';
+  const urlsetOpen =
+    '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">';
+  const urlsetClose = "</urlset>";
 
   const urlEntries = sitemapRoutes
     .map(
@@ -29,7 +30,7 @@ function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
       <lastmod>${route.lastModified}</lastmod>
       <changefreq>monthly</changefreq>
       <priority>0.8</priority>
-    </url>`
+    </url>`,
     )
     .join("");
 
@@ -41,22 +42,37 @@ export async function GET() {
 
   // Statische Routen
   const staticRoutes = [
-        {url: `${baseUrl}/`, lastModified: new Date().toISOString(), priority: 1, changeFreq: "weekly"},
-        {url: `${baseUrl}/legal-notice`, lastModified: new Date().toISOString(), priority: 0.5, changeFreq: "yearly"},
-        {url: `${baseUrl}/privacy-policy`, lastModified: new Date().toISOString(), priority: 0.5, changeFreq: "yearly"},
+    {
+      url: `${baseUrl}/`,
+      lastModified: new Date().toISOString(),
+      priority: 1,
+      changeFreq: "weekly",
+    },
+    {
+      url: `${baseUrl}/legal-notice`,
+      lastModified: new Date().toISOString(),
+      priority: 0.5,
+      changeFreq: "yearly",
+    },
+    {
+      url: `${baseUrl}/privacy-policy`,
+      lastModified: new Date().toISOString(),
+      priority: 0.5,
+      changeFreq: "yearly",
+    },
   ];
 
   try {
     const response = await fetch(
-            `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`
+      `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
     );
     if (!response.ok) {
       console.error(`Failed to fetch posts: ${response.statusText}`);
       return new NextResponse(generateXml(staticRoutes), {
         headers: { "Content-Type": "application/xml" },
-            })
+      });
     }
-        const projectsData = await response.json() as ProjectsData;
+    const projectsData = (await response.json()) as ProjectsData;
     const projects = projectsData.posts;
 
     // Dynamische Projekt-Routen generieren
@@ -76,9 +92,8 @@ export async function GET() {
     return new NextResponse(generateXml(allRoutes), {
       headers: { "Content-Type": "application/xml" },
     });
-
   } catch (error) {
-        console.error("Failed to fetch posts from Ghost:", error);
+    console.log("Failed to fetch posts from Ghost:", error);
     // Rückgabe der statischen Routen, falls Fehler auftritt
     return new NextResponse(generateXml(staticRoutes), {
       headers: { "Content-Type": "application/xml" },

app/components/ClientCookieConsentBanner.tsx

@@ -1,13 +0,0 @@
-// app/components/ClientCookieConsentBanner.tsx
-
-"use client";
-
-import dynamic from 'next/dynamic';
-
-const CookieConsentBanner = dynamic(() => import('./CookieConsentBanner'), {ssr: false});
-
-const ClientCookieConsentBanner = ({onConsentChange}: { onConsentChange: (consent: string) => void }) => {
-    return <CookieConsentBanner onConsentChange={onConsentChange}/>;
-};
-
-export default ClientCookieConsentBanner;

app/components/CookieConsentBanner.tsx

@@ -1,98 +0,0 @@
-import React, {useEffect, useState} from "react";
-import CookieConsent from "react-cookie-consent";
-import Link from "next/link";
-
-const CookieConsentBanner = ({onConsentChange}: { onConsentChange: (consent: string) => void }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [isFadingIn, setIsFadingIn] = useState(false);
-
-    useEffect(() => {
-        const consent = localStorage.getItem("CookieConsent");
-        if (!consent) {
-            setIsVisible(true);
-            setTimeout(() => setIsFadingIn(true), 10); // Delay to trigger CSS transition
-        }
-    }, []);
-
-    const handleAccept = () => {
-        setIsFadingIn(false);
-        setTimeout(() => {
-            localStorage.setItem("CookieConsent", "accepted");
-            setIsVisible(false);
-            onConsentChange("accepted");
-        }, 500); // Match the duration of the fade-out transition
-    };
-
-    const handleDecline = () => {
-        setIsFadingIn(false);
-        setTimeout(() => {
-            localStorage.setItem("CookieConsent", "declined");
-            setIsVisible(false);
-            onConsentChange("declined");
-        }, 500); // Match the duration of the fade-out transition
-    };
-
-    if (!isVisible) {
-        return null;
-    }
-
-    return (
-        <CookieConsent
-            location="bottom"
-            buttonText="Accept All"
-            declineButtonText="Decline"
-            enableDeclineButton
-            cookieName="CookieConsent"
-            containerClasses={`${isFadingIn ? 'fade-in' : 'fade-out'}`}
-            style={{
-                background: "rgba(211,211,211,0.44)",
-                color: "#333",
-                boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-                padding: "1rem",
-                borderRadius: "8px",
-                backdropFilter: "blur(10px)",
-                margin: "2rem",
-                width: "calc(100% - 4rem)",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                textAlign: "left",
-                transition: "opacity 0.5s ease",
-                opacity: isFadingIn ? 1 : 0,
-            }}
-            buttonWrapperClasses="button-wrapper"
-            buttonStyle={{
-                backgroundColor: "#4CAF50",
-                color: "#FFF",
-                fontSize: "14px",
-                borderRadius: "4px",
-                padding: "0.5rem 1rem",
-                margin: "0.5rem",
-                width: "100%",
-                maxWidth: "200px",
-            }}
-            declineButtonStyle={{
-                backgroundColor: "#f44336",
-                color: "#FFF",
-                fontSize: "14px",
-                borderRadius: "4px",
-                padding: "0.5rem 1rem",
-                margin: "0.5rem",
-                width: "100%",
-                maxWidth: "200px",
-            }}
-            expires={90}
-            onAccept={handleAccept}
-            onDecline={handleDecline}
-        >
-            <div className="content-wrapper text-xl">
-                This website uses cookies to enhance your experience. By using our website, you consent to the use of
-                cookies.
-                You can read more in our <Link href="/" className="text-blue-800 transition-underline">privacy
-                policy</Link>.
-            </div>
-        </CookieConsent>
-    );
-};
-
-export default CookieConsentBanner;

app/sitemap.xml/route.tsx

@@ -3,7 +3,7 @@ import {NextResponse} from "next/server";
 export const dynamic = 'force-dynamic';
 
 export async function GET() {
-    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://dki.one"; // Stelle sicher, dass die Base-URL korrekt ist
+    const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "https://dki.one";
     const apiUrl = `${baseUrl}/api/sitemap`; // Verwende die vollständige URL zur API
 
     try {

jest.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from 'jest'
+import nextJest from 'next/jest.js'
+ 
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+ 
+// Add any custom config to be passed to Jest
+const config: Config = {
+  coverageProvider: 'babel',
+  testEnvironment: 'jsdom',
+  // Add more setup options before each test is run
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  // Ignore tests inside __mocks__ directory
+  testPathIgnorePatterns: ['/node_modules/', '/__mocks__/'],
+}
+ 
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

jest.setup.ts

@@ -0,0 +1 @@
+import 'whatwg-fetch';

next.config.ts

@@ -6,6 +6,10 @@ dotenv.config();
 const nextConfig: NextConfig = {
   env: {
     GHOST_API_KEY: process.env.GHOST_API_KEY,
+    GHOST_API_URL: process.env.GHOST_API_URL,
+    MY_EMAIL: process.env.MY_EMAIL,
+    MY_PASSWORD: process.env.MY_PASSWORD,
+    NEXT_PUBLIC_BASE_URL: process.env.NEXT_PUBLIC_BASE_URL,
   },
 };
 

package.json

@@ -3,41 +3,47 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "buildAnalyze": "cross-env ANALYZE=true next build"
+    "buildAnalyze": "cross-env ANALYZE=true next build",
+    "test": "jest"
   },
   "dependencies": {
     "@next/bundle-analyzer": "^15.1.7",
-    "@prisma/client": "^6.1.0",
+    "@prisma/client": "^6.3.1",
     "@tryghost/content-api": "^1.11.21",
     "@vercel/og": "^0.6.5",
     "dotenv": "^16.4.7",
     "gray-matter": "^4.0.3",
-    "next": "15.1.3",
+    "next": "15.1.7",
     "node-fetch": "^3.3.2",
     "nodemailer": "^6.10.0",
-    "prisma": "^6.1.0",
     "react": "^19.0.0",
-    "react-cookie-consent": "^9.0.0",
-    "react-dom": "^19.0.0",
-    "react-markdown": "^9.0.3",
-    "rehype-raw": "^7.0.0",
-    "remark-gfm": "^4.0.0"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@types/node": "^20",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22",
     "@types/nodemailer": "^6.4.17",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "cross-env": "^7.0.3",
     "eslint": "^9",
-    "eslint-config-next": "15.1.3",
+    "eslint-config-next": "15.1.7",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "nodemailer-mock": "^2.0.8",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.7.3"
+    "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.3",
+    "whatwg-fetch": "^3.6.20"
   }
 }