RoboTeam Landing Page

Introduction

System Architecture

The landing page consists of these parts:

Which is easier to understand with following diagram:
image.png

Admin Dashboard

Our system implements a two-tier auth system to log in.

  1. The Super User: One hard-coded or environment-variable-based account used for initial setup or emergency access.
  2. Google OAuth 2.0:
    • The Whitelist: Access isn't open to any Google account. Only emails ending with @roboteamtwente.nl are permitted.
    • Logic: When a user logs in, the backend checks if the returned Google email exists in the authorized list. If it’s not there, the Spring Boot Security filter returns a 403 Forbidden.

*Adding new users to authorized list: while everyone is technically allowed to login if they are have a @roboteamtwente.nl email, you still have to add them to website's whitelist. It is done in "User Managing" tab on admin's dashboard. It is possible to have a user listed, though deactivated, for book keeping reasons.
image.png

Admin Panel & Content Management

The website isn't just a static landing page; it’s a dynamic CMS. Almost all pages hold content that you are able to edit and manage through the admin panel.



Deployment

1. Docker Compose Services

Our docker-compose.yml runs four key services

Service

Image/Build

Role

frontend

./frontend/...

Nginx server; handles port 80 and proxies /api to the backend.

backend

./backend/...

The Spring Boot REST API.

postgres

postgres:15

Relational database.

postgres-backup

./db_backup

Custom service that runs automated DB dumps via crontab.

2. Maintenance Commands

To help a new dev manage the site, here are the main commands:

3. Deployment

When you are done developing, please consider building the images of services and push them.
After that you are able to ssh into our VPS that hosts a lot of products (main landing page included).

ssh user@h2960363.stratoserver.net

You have to add your user to that VPS's whitelist beforehand in order to login.
In there:

  1. sudo -i to switch to superuser.
  2. cd docker to the main directory where all containers are started from.
  3. vim docker-compose.yml and edit the used version of desired service(s) to the newest one.
  4. docker pull roboteamtwente/name:version pull desired updated images
  5. docker compose up -d nameOfTheContainer start the container(s)

Frontend Architecture & API Integration

Here, the frontend of our web page is going to be discussed. Please get familiar with VUE.js documentation if you haven't done so yet:

https://vuejs.org/guide/introduction

A RESTful API guide could also be useful:
https://restfulapi.net/

Our frontend is a Single Page Application (SPA) built with Vue.js. We use a modular structure where every page and component encapsulates its own HTML, CSS, and JavaScript logic.

1. Directory Structure & Organization

We separate the code based on its “responsibility” in the app.

Directory

Purpose

src/views/

The main page containers. These are “Smart” components that usually handle data fetching for a whole page (e.g., HomeView.vue).

src/components/

Reusable UI sections. These are “Dumb” or “Presentational” components (e.g., HeroSection.vue, FooterSection.vue).

src/components/admin/

Specialized management modules for the Admin Dashboard. These handle the CRUD logic for news, teams, and members.

src/services/

The API layer. All communication with the Spring Boot backend happens here.

src/router/

The navigation logic. Maps URLs to specific Views.

2. Routing (Adding New Pages)

// src/router/index.js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    // Add new routes here
  ]
})

3. Communication with Backend (API Service)

We never make direct fetch or axios calls inside a .vue component. Instead, we use a centralized service layer in src/services/api.js. This allows us to manage global headers, authentication tokens, and base URLs in one place.

Step 1: Register the API Endpoint

export const aboutUsAPI = {
  get: () => apiRequest("/organization"),
  update: (id, data) =>
    apiRequest(`/organization/${id}`, {
      method: "PUT",
      body: JSON.stringify(data),
    }),
};

Step 2: Use the API in a Component

import { aboutUsAPI } from '@/services/api';

const fetchOrganization = async () => {
  try {
    const data = await aboutUsAPI.get();
    // Do something with data...
  } catch (err) {
    console.error("API Error:", err);
  }
};

4. Admin Panel Architecture

The Admin Panel follows a “Manager” pattern. The AdminView.vue acts as the main wrapper, while the actual editing tools are found in src/components/admin/.

Managers: Components like NewsManager.vue or EventsManager.vue contain the forms and logic needed to edit content.

Data Flow: Typically, a Manager fetches data on mount, allows the user to edit it, and sends a PUT or POST request back through the services/api.js layer.

5. TODO: COOKIES, TOKEN BASED SESSIONS

Backend & Infrastructure


This page covers the core parts of the backend whicih works with Spring Boot.
Consider taking a proper look at the SpringBoot's documentation. It is not hard, most of the backend code are basic spring boot elements and concepts
https://docs.spring.io/spring-boot/index.html

1. Technical Core

2. The Bootstrap Logic (Admin Seeder)

We have a custom safety mechanism called AdminUserSeeder.java.

3. Security & Session Management

We use a hybrid security model to ensure the team can always access the dashboard.

4. Database & Persistence

We use PostgreSQL 15 as our source of truth.