From 0e7ab1fd65ada7f6e32dacc69c8bdfd056b81815 Mon Sep 17 00:00:00 2001 From: jaimeeg5 Date: Fri, 28 Aug 2026 13:01:28 +0200 Subject: [PATCH 1/7] fix: run backend on port 443 instead of 8443 --- .github/workflows/complete-workflow.yml | 4 ++-- backend/pcmod/pom.xml | 2 +- backend/pcmod/src/main/resources/application.properties | 2 +- docs/DEVELOPMENT-GUIDE.md | 8 ++++---- docs/api/api-docs.html | 2 +- docs/api/api-docs.yaml | 2 +- docs/api/postman/PCMod.postman_collection.json | 4 ++-- frontend/app/services/components-service.ts | 2 +- .../tests/integration/Components.integration.test.tsx | 2 +- frontend/vite.config.ts | 4 ++-- 10 files changed, 16 insertions(+), 16 deletions(-) diff --git a/.github/workflows/complete-workflow.yml b/.github/workflows/complete-workflow.yml index 3b6efec..3bdd4ce 100644 --- a/.github/workflows/complete-workflow.yml +++ b/.github/workflows/complete-workflow.yml @@ -115,7 +115,7 @@ jobs: cd ../backend/pcmod ./mvnw spring-boot:run > /dev/null 2>&1 < /dev/null & - npx wait-on https-get://localhost:8443/api/v1/components/ + npx wait-on https-get://localhost:443/api/v1/components/ cd ../../frontend npm run test:coverage @@ -188,7 +188,7 @@ jobs: cd ../backend/pcmod ./mvnw spring-boot:run > /dev/null 2>&1 < /dev/null & - npx wait-on http-get://localhost:5173 https-get://localhost:8443/api/v1/components/ + npx wait-on http-get://localhost:5173 https-get://localhost:443/api/v1/components/ ./mvnw test -Dgroups="client-system" diff --git a/backend/pcmod/pom.xml b/backend/pcmod/pom.xml index 7828959..ac5a7e0 100644 --- a/backend/pcmod/pom.xml +++ b/backend/pcmod/pom.xml @@ -224,7 +224,7 @@ - http://127.0.0.1:8443/v3/api-docs.yaml + http://127.0.0.1:443/v3/api-docs.yaml api-docs.yaml ${project.basedir}/docs/api diff --git a/backend/pcmod/src/main/resources/application.properties b/backend/pcmod/src/main/resources/application.properties index 7633fb9..72145b3 100644 --- a/backend/pcmod/src/main/resources/application.properties +++ b/backend/pcmod/src/main/resources/application.properties @@ -1,6 +1,6 @@ spring.application.name=pcmod -server.port=8443 +server.port=443 server.ssl.enabled=true server.ssl.key-store=classpath:keystore.jks server.ssl.key-store-password=password diff --git a/docs/DEVELOPMENT-GUIDE.md b/docs/DEVELOPMENT-GUIDE.md index 7d40520..597ce7b 100644 --- a/docs/DEVELOPMENT-GUIDE.md +++ b/docs/DEVELOPMENT-GUIDE.md @@ -257,7 +257,7 @@ This section describes the tools used to develop the PCMod application. PCMod is divided into three processes: * Client (Frontend): A React SPA available on port 5173 that communicates with the REST API through HTTP requests. It allows users to interact with the application. -* Server (Backend): A Spring Boot REST API available on port 8443 that communicates with the frontend via HTTP and with the database via TCP. It contains the business logic and operate with the database. +* Server (Backend): A Spring Boot REST API available on port 443 that communicates with the frontend via HTTP and with the database via TCP. It contains the business logic and operate with the database. * Database: A MySQL database available on port 3306, that communicates with the backend via TCP. It is a relational database that ensures data integrity and persistence. Communication between the frontend and backend is carried out using JSON format. @@ -559,7 +559,7 @@ cd backend/pcmod mvn spring-boot:run ``` -Open a browser and navigate to https://localhost:8443/. +Open a browser and navigate to https://localhost:443/. #### 🛑 Stop application @@ -638,7 +638,7 @@ cd frontend npm install cd ../backend/pcmod ./mvnw spring-boot:run > /dev/null 2>&1 < /dev/null & -npx wait-on https-get://localhost:8443/api/v1/components/ +npx wait-on https-get://localhost:443/api/v1/components/ cd ../../frontend npm run test ``` @@ -649,7 +649,7 @@ cd frontend npm run dev > /dev/null 2>&1 < /dev/null & cd ../backend/pcmod ./mvnw spring-boot:run > /dev/null 2>&1 < /dev/null & -npx wait-on http-get://localhost:5173 https-get://localhost:8443/api/v1/components/ +npx wait-on http-get://localhost:5173 https-get://localhost:443/api/v1/components/ ./mvnw test -Dgroups="client-system" ``` diff --git a/docs/api/api-docs.html b/docs/api/api-docs.html index 4b1cb13..eee544f 100644 --- a/docs/api/api-docs.html +++ b/docs/api/api-docs.html @@ -1056,7 +1056,7 @@

Usage and SDK Samples

curl -X GET \
  -H "Accept: */*" \
- "http://127.0.0.1:8443/api/v1/components/?pageable="
+ "http://127.0.0.1:443/api/v1/components/?pageable="
diff --git a/docs/api/api-docs.yaml b/docs/api/api-docs.yaml index 656e9a3..6557f3a 100644 --- a/docs/api/api-docs.yaml +++ b/docs/api/api-docs.yaml @@ -3,7 +3,7 @@ info: title: OpenAPI definition version: v0 servers: -- url: http://127.0.0.1:8443 +- url: http://127.0.0.1:443 description: Generated server url paths: /api/v1/components/: diff --git a/docs/api/postman/PCMod.postman_collection.json b/docs/api/postman/PCMod.postman_collection.json index 0e0c67b..9191642 100644 --- a/docs/api/postman/PCMod.postman_collection.json +++ b/docs/api/postman/PCMod.postman_collection.json @@ -16,12 +16,12 @@ "method": "GET", "header": [], "url": { - "raw": "https://localhost:8443/api/v1/components/?page=0&size=10", + "raw": "https://localhost:443/api/v1/components/?page=0&size=10", "protocol": "https", "host": [ "localhost" ], - "port": "8443", + "port": "443", "path": [ "api", "v1", diff --git a/frontend/app/services/components-service.ts b/frontend/app/services/components-service.ts index a71f0cc..7033dbb 100644 --- a/frontend/app/services/components-service.ts +++ b/frontend/app/services/components-service.ts @@ -12,7 +12,7 @@ export async function getComponents(page: number): Promise const baseUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin - : "https://localhost:8443"; + : "https://localhost:443"; const url = new URL(`${API_URL}/?page=${page}&size=${PAGE_SIZE}`, baseUrl); diff --git a/frontend/tests/integration/Components.integration.test.tsx b/frontend/tests/integration/Components.integration.test.tsx index a6321bc..99ed297 100644 --- a/frontend/tests/integration/Components.integration.test.tsx +++ b/frontend/tests/integration/Components.integration.test.tsx @@ -10,7 +10,7 @@ describe("ComponentsPageIntegration", () => { const user = userEvent.setup(); - const initialData = await clientLoader({ request: new Request("https://localhost:8443/?page=0") }); + const initialData = await clientLoader({ request: new Request("https://localhost:443/?page=0") }); render(); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 5888a5a..b40c6de 100644 --- a/frontend/vite.config.ts +++ b/frontend/vite.config.ts @@ -8,7 +8,7 @@ export default defineConfig(({ mode }) => ({ server: { proxy: { "/api": { - target: "https://localhost:8443/api", + target: "https://localhost:443/api", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), secure: false, @@ -26,7 +26,7 @@ export default defineConfig(({ mode }) => ({ environment: "jsdom", environmentOptions: { jsdom: { - url: "https://localhost:8443", + url: "https://localhost:443", }, }, env: { From 31e2ffd760ecf7dee6886399ed4b8bc6feee39ba Mon Sep 17 00:00:00 2001 From: jaimeeg5 Date: Sat, 29 Aug 2026 14:17:42 +0200 Subject: [PATCH 2/7] feat: add header, footer, and basic CSS --- frontend/app/app.css | 146 ++++++- frontend/app/components/footer.tsx | 31 ++ frontend/app/components/header.tsx | 20 + frontend/app/routes/home.tsx | 4 + frontend/package-lock.json | 595 +++++++++++++++++++++++++---- frontend/package.json | 9 +- frontend/public/Full_Logo.png | Bin 0 -> 71840 bytes frontend/public/Small_Logo.png | Bin 0 -> 53806 bytes 8 files changed, 717 insertions(+), 88 deletions(-) create mode 100644 frontend/app/components/footer.tsx create mode 100644 frontend/app/components/header.tsx create mode 100644 frontend/public/Full_Logo.png create mode 100644 frontend/public/Small_Logo.png diff --git a/frontend/app/app.css b/frontend/app/app.css index 12f820e..25abf16 100644 --- a/frontend/app/app.css +++ b/frontend/app/app.css @@ -1,17 +1,141 @@ -@theme { - --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -} - html, body { - @apply bg-white dark:bg-gray-950; + margin: 0; + padding: 0; + min-height: 100vh; + display: flex; + flex-direction: column; +} + +:root { + --font-sans: "Trebuchet MS", "Segoe UI", ui-sans-serif, sans-serif; + --color-ink: #1b2b1d; + --color-muted: #66564c; + --color-surface: #ffffff; + --color-page: #fff8f2; + --color-line: #f0d8c5; + --color-brand: #c45116; + --color-brand-dark: #8f350d; + --color-principal: #f95e00; + --color-footer-muted: #f5d9c5; +} + +/* Header */ + +.header { + font-family: var(--font-sans); + position: sticky; + top: 0; + z-index: 10; + min-height: 76px; + border-bottom: 1px solid var(--color-line); + background: var(--color-principal); + box-shadow: 0 3px 16px rgb(84 37 20 / 10%); + backdrop-filter: blur(12px); +} + +.header-content { + display: flex; + align-items: center; + flex-wrap: nowrap; + gap: 1.5rem; + max-width: 1180px; + margin-left: 0; + padding: 0.5rem 1rem; +} + +.header .logo img { + display: block; + width: min(250px, 52vw); + height: auto; + max-height: 64px; + object-fit: contain; +} + +.header-content>a:not(.logo) { + position: relative; + padding: 0.65rem 0.1rem; + color: #ffffff; + font-size: 0.96rem; + font-weight: 700; + text-decoration: none; + transition: color 160ms ease; +} + +.header-content>a:not(.logo)::after { + position: absolute; + right: 0; + bottom: 0.3rem; + left: 0; + height: 3px; + border-radius: 999px; + background: var(--color-brand); + content: ""; + transform: scaleX(0); + transform-origin: center; + transition: transform 160ms ease; +} + +.header-content>a:not(.logo):hover, +.header-content>a:not(.logo):focus-visible { + color: #f0d8c5; +} + +.header-content>a:not(.logo):hover::after, +.header-content>a:not(.logo):focus-visible::after { + transform: scaleX(1); +} + +/* Footer */ + +.footer { + font-family: var(--font-sans); + flex-shrink: 0; + margin-top: auto; + background: var(--color-principal); + color: #ffffff; +} + +.social-container { + display: flex; + align-items: center; + justify-content: center; + gap: 2.5rem; + max-width: 500px; + margin: 0 auto; + padding: 1.5rem; +} + +.social-link { + display: inline-flex; + align-items: center; + gap: 0.55rem; + color: #ffffff; + font-size: 1.2rem; + text-decoration: none; + transition: color 160ms ease; +} + +.social-link:hover, +.social-link:focus-visible { + color: #f0d8c5; +} + +.footer-bottom { + border-top: 1px solid rgb(245 217 197 / 24%); +} - @media (prefers-color-scheme: dark) { - color-scheme: dark; - } +.footer-bottom-content { + max-width: 1180px; + margin: 0 auto; + padding: 0.5rem; + color: var(--color-principal-muted); + font-size: 1.0rem; + text-align: center; } -.component-description { - white-space: pre-line; +.sitename { + color: #ffffff; + font-weight: 1000; + letter-spacing: 0.1em; } \ No newline at end of file diff --git a/frontend/app/components/footer.tsx b/frontend/app/components/footer.tsx new file mode 100644 index 0000000..722c7cd --- /dev/null +++ b/frontend/app/components/footer.tsx @@ -0,0 +1,31 @@ +import { Envelope, Youtube } from 'react-bootstrap-icons'; + +export default function Footer() { + return <> + + +} \ No newline at end of file diff --git a/frontend/app/components/header.tsx b/frontend/app/components/header.tsx new file mode 100644 index 0000000..3b3c103 --- /dev/null +++ b/frontend/app/components/header.tsx @@ -0,0 +1,20 @@ +import { useEffect, useState } from "react"; +import { Link } from "react-router"; +import { Image } from "react-bootstrap"; + +export default function Header() { + + return <> + + ; +} \ No newline at end of file diff --git a/frontend/app/routes/home.tsx b/frontend/app/routes/home.tsx index ea24b61..60e3809 100644 --- a/frontend/app/routes/home.tsx +++ b/frontend/app/routes/home.tsx @@ -1,11 +1,15 @@ import { Outlet } from "react-router"; +import Footer from "~/components/footer"; +import Header from "~/components/header"; export default function Home() { return ( <> +
+