ADD: added initial page with login

2025-05-20 22:58:31 +02:00
parent 214ab55ad2
commit a330291456
25 changed files with 1064 additions and 35 deletions
--- a/backend/cmd/main.go
+++ b/backend/cmd/main.go
@@ -1,27 +0,0 @@
-package main
-
-import (
-	"fmt"
-	"volleyball/internal/database"
-)
-
-func main() {
-	// Initialize the database connection
-	var db = database.New("localhost", 5432, "user", "password", "dbname")
-	db.Connect()
-
-	// Initialize the server
-	// server := server.New(db)
-	// server.Start()
-
-	// Initialize the router
-	// router := router.New()
-	// router.Start()
-	// Initialize the logger
-	// logger := logger.New()
-	// logger.Start()
-	// Initialize the config
-	// config := config.New()
-
-	fmt.Println("Hello, World!")
-}
--- a/backend/cmd/server/main.go
+++ b/backend/cmd/server/main.go
@@ -0,0 +1,40 @@
+package main
+
+import (
+	"os"
+	"volleyball/internal/auth"
+	"volleyball/internal/tournament"
+
+	"github.com/gin-contrib/cors"
+	"github.com/gin-gonic/gin"
+)
+
+func main() {
+	r := gin.Default()
+
+	// CORS
+	r.Use(cors.New(cors.Config{
+		AllowOrigins:     []string{"http://localhost:3000"},
+		AllowMethods:     []string{"GET", "POST", "PUT", "DELETE"},
+		AllowHeaders:     []string{"Authorization", "Content-Type"},
+		AllowCredentials: true,
+	}))
+
+	// Public
+	r.POST("/api/login", auth.LoginHandler)
+	r.GET("/api/tournaments", tournament.ListTournaments)
+
+	// Protected API
+	api := r.Group("/api")
+	api.Use(auth.AuthMiddleware())
+
+	api.GET("/tournaments/:id", tournament.GetTournament)
+	api.POST("/tournaments/:id/join", tournament.JoinTournament)
+	api.PUT("/tournaments/:id", tournament.UpdateTournament)
+
+	port := os.Getenv("PORT")
+	if port == "" {
+		port = "8080"
+	}
+	r.Run(":" + port)
+}
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -1,3 +1,42 @@
 module volleyball

-go 1.19
+go 1.23.0
+
+toolchain go1.24.3
+
+require (
+	github.com/gin-contrib/cors v1.7.5
+	github.com/lib/pq v1.10.9
+)
+
+require github.com/kr/text v0.2.0 // indirect
+
+require (
+	github.com/bytedance/sonic v1.13.2 // indirect
+	github.com/bytedance/sonic/loader v0.2.4 // indirect
+	github.com/cloudwego/base64x v0.1.5 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.8 // indirect
+	github.com/gin-contrib/sse v1.0.0 // indirect
+	github.com/gin-gonic/gin v1.10.0
+	github.com/go-playground/locales v0.14.1 // indirect
+	github.com/go-playground/universal-translator v0.18.1 // indirect
+	github.com/go-playground/validator/v10 v10.26.0 // indirect
+	github.com/goccy/go-json v0.10.5 // indirect
+	github.com/golang-jwt/jwt/v4 v4.5.2
+	github.com/json-iterator/go v1.1.12 // indirect
+	github.com/klauspost/cpuid/v2 v2.2.10 // indirect
+	github.com/leodido/go-urn v1.4.0 // indirect
+	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
+	github.com/modern-go/reflect2 v1.0.2 // indirect
+	github.com/pelletier/go-toml/v2 v2.2.3 // indirect
+	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
+	github.com/ugorji/go/codec v1.2.12 // indirect
+	golang.org/x/arch v0.15.0 // indirect
+	golang.org/x/crypto v0.36.0 // indirect
+	golang.org/x/net v0.38.0 // indirect
+	golang.org/x/sys v0.31.0 // indirect
+	golang.org/x/text v0.23.0 // indirect
+	google.golang.org/protobuf v1.36.6 // indirect
+	gopkg.in/yaml.v3 v3.0.1 // indirect
+)
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -0,0 +1,100 @@
+github.com/bytedance/sonic v1.13.2 h1:8/H1FempDZqC4VqjptGo14QQlJx8VdZJegxs6wwfqpQ=
+github.com/bytedance/sonic v1.13.2/go.mod h1:o68xyaF9u2gvVBuGHPlUVCy+ZfmNNO5ETf1+KgkJhz4=
+github.com/bytedance/sonic/loader v0.1.1/go.mod h1:ncP89zfokxS5LZrJxl5z0UJcsk4M4yY2JpfqGeCtNLU=
+github.com/bytedance/sonic/loader v0.2.4 h1:ZWCw4stuXUsn1/+zQDqeE7JKP+QO47tz7QCNan80NzY=
+github.com/bytedance/sonic/loader v0.2.4/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
+github.com/cloudwego/base64x v0.1.5 h1:XPciSp1xaq2VCSt6lF0phncD4koWyULpl5bUxbfCyP4=
+github.com/cloudwego/base64x v0.1.5/go.mod h1:0zlkT4Wn5C6NdauXdJRhSKRlJvmclQ1hhJgA0rcu/8w=
+github.com/cloudwego/iasm v0.2.0/go.mod h1:8rXZaNYT2n95jn+zTI1sDr+IgcD2GVs0nlbbQPiEFhY=
+github.com/creack/pty v1.1.9/go.mod h1:oKZEueFk5CKHvIhNR5MUki03XCEU+Q6VDXinZuGJ33E=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/gabriel-vasile/mimetype v1.4.8 h1:FfZ3gj38NjllZIeJAmMhr+qKL8Wu+nOoI3GqacKw1NM=
+github.com/gabriel-vasile/mimetype v1.4.8/go.mod h1:ByKUIKGjh1ODkGM1asKUbQZOLGrPjydw3hYPU2YU9t8=
+github.com/gin-contrib/cors v1.7.5 h1:cXC9SmofOrRg0w9PigwGlHG3ztswH6bqq4vJVXnvYMk=
+github.com/gin-contrib/cors v1.7.5/go.mod h1:4q3yi7xBEDDWKapjT2o1V7mScKDDr8k+jZ0fSquGoy0=
+github.com/gin-contrib/sse v1.0.0 h1:y3bT1mUWUxDpW4JLQg/HnTqV4rozuW4tC9eFKTxYI9E=
+github.com/gin-contrib/sse v1.0.0/go.mod h1:zNuFdwarAygJBht0NTKiSi3jRf6RbqeILZ9Sp6Slhe0=
+github.com/gin-gonic/gin v1.10.0 h1:nTuyha1TYqgedzytsKYqna+DfLos46nTv2ygFy86HFU=
+github.com/gin-gonic/gin v1.10.0/go.mod h1:4PMNQiOhvDRa013RKVbsiNwoyezlm2rm0uX/T7kzp5Y=
+github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
+github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
+github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
+github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
+github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
+github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
+github.com/go-playground/validator/v10 v10.26.0 h1:SP05Nqhjcvz81uJaRfEV0YBSSSGMc/iMaVtFbr3Sw2k=
+github.com/go-playground/validator/v10 v10.26.0/go.mod h1:I5QpIEbmr8On7W0TktmJAumgzX4CA1XNl4ZmDuVHKKo=
+github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
+github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
+github.com/golang-jwt/jwt/v4 v4.5.2 h1:YtQM7lnr8iZ+j5q71MGKkNw9Mn7AjHM68uc9g5fXeUI=
+github.com/golang-jwt/jwt/v4 v4.5.2/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
+github.com/google/go-cmp v0.5.5 h1:Khx7svrCpmxxtHBq5j2mp/xVjsi8hQMfNLvJFAlrGgU=
+github.com/google/go-cmp v0.5.5/go.mod h1:v8dTdLbMG2kIc/vJvl+f65V22dbkXbowE6jgT/gNBxE=
+github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
+github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
+github.com/klauspost/cpuid/v2 v2.0.9/go.mod h1:FInQzS24/EEf25PyTYn52gqo7WaD8xa0213Md/qVLRg=
+github.com/klauspost/cpuid/v2 v2.2.10 h1:tBs3QSyvjDyFTq3uoc/9xFpCuOsJQFNPiAhYdw2skhE=
+github.com/klauspost/cpuid/v2 v2.2.10/go.mod h1:hqwkgyIinND0mEev00jJYCxPNVRVXFQeu1XKlok6oO0=
+github.com/knz/go-libedit v1.10.1/go.mod h1:MZTVkCWyz0oBc7JOWP3wNAzd002ZbM/5hgShxwh4x8M=
+github.com/kr/pretty v0.3.0 h1:WgNl7dwNpEZ6jJ9k1snq4pZsg7DOEN8hP9Xw0Tsjwk0=
+github.com/kr/pretty v0.3.0/go.mod h1:640gp4NfQd8pI5XOwp5fnNeVWj67G7CFk/SaSQn7NBk=
+github.com/kr/text v0.2.0 h1:5Nx0Ya0ZqY2ygV366QzturHI13Jq95ApcVaJBhpS+AY=
+github.com/kr/text v0.2.0/go.mod h1:eLer722TekiGuMkidMxC/pM04lWEeraHUUmBw8l2grE=
+github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
+github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
+github.com/lib/pq v1.10.9 h1:YXG7RB+JIjhP29X+OtkiDnYaXQwpS4JEWq7dtCCRUEw=
+github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
+github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
+github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
+github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
+github.com/pelletier/go-toml/v2 v2.2.3 h1:YmeHyLY8mFWbdkNWwpr+qIL2bEqT0o95WSdkNHvL12M=
+github.com/pelletier/go-toml/v2 v2.2.3/go.mod h1:MfCQTFTvCcUyyvvwm1+G6H/jORL20Xlb6rzQu9GuUkc=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/rogpeppe/go-internal v1.8.0 h1:FCbCCtXNOY3UtUuHUYaghJg4y7Fd14rXifAYUAtL9R8=
+github.com/rogpeppe/go-internal v1.8.0/go.mod h1:WmiCO8CzOY8rg0OYDC4/i/2WRWAB6poM+XZ2dLUbcbE=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
+github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
+github.com/stretchr/objx v0.5.2/go.mod h1:FRsXN1f5AsAjCGJKqEizvkpNtU+EGNCLh3NxZ/8L+MA=
+github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
+github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/stretchr/testify v1.10.0 h1:Xv5erBjTwe/5IxqUQTdXv5kgmIvbHo3QQyRwhJsOfJA=
+github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
+github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
+github.com/ugorji/go/codec v1.2.12 h1:9LC83zGrHhuUA9l16C9AHXAqEV/2wBQ4nkvumAE65EE=
+github.com/ugorji/go/codec v1.2.12/go.mod h1:UNopzCgEMSXjBc6AOMqYvWC1ktqTAfzJZUZgYf6w6lg=
+golang.org/x/arch v0.15.0 h1:QtOrQd0bTUnhNVNndMpLHNWrDmYzZ2KDqSrEymqInZw=
+golang.org/x/arch v0.15.0/go.mod h1:JmwW7aLIoRUKgaTzhkiEFxvcEiQGyOg9BMonBJUS7EE=
+golang.org/x/crypto v0.36.0 h1:AnAEvhDddvBdpY+uR+MyHmuZzzNqXSe/GvuDeob5L34=
+golang.org/x/crypto v0.36.0/go.mod h1:Y4J0ReaxCR1IMaabaSMugxJES1EpwhBHhv2bDHklZvc=
+golang.org/x/net v0.38.0 h1:vRMAPTMaeGqVhG5QyLJHqNDwecKTomGeqbnfZyKlBI8=
+golang.org/x/net v0.38.0/go.mod h1:ivrbrMbzFq5J41QOQh0siUuly180yBYtLp+CKbEaFx8=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.31.0 h1:ioabZlmFYtWhL+TRYpcnNlLwhyxaM9kWTDEmfnprqik=
+golang.org/x/sys v0.31.0/go.mod h1:BJP2sWEmIv4KK5OTEluFJCKSidICx8ciO85XgH3Ak8k=
+golang.org/x/text v0.23.0 h1:D71I7dUrlY+VX0gQShAThNGHFxZ13dGLBHQLVl1mJlY=
+golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543 h1:E7g+9GITq07hpfrRu66IVDexMakfv52eLZ2CXBWiKr4=
+golang.org/x/xerrors v0.0.0-20191204190536-9bdfabe68543/go.mod h1:I/5z698sn9Ka8TeJc9MKroUUfqBBauWjQqLJ2OPfmY0=
+google.golang.org/protobuf v1.36.6 h1:z1NpPI8ku2WgiWnf+t9wTPsn6eP1L7ksHUlkfLvd9xY=
+google.golang.org/protobuf v1.36.6/go.mod h1:jduwjTPXsFjZGTmRluh+L6NjiWu7pchiJ2/5YcXBHnY=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
+gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+nullprogram.com/x/optparse v1.0.0/go.mod h1:KdyPE+Igbe0jQUrVfMqDMeJQIJZEuyV7pjYmp6pbG50=
--- a/backend/internal/auth/handler.go
+++ b/backend/internal/auth/handler.go
@@ -0,0 +1,38 @@
+package auth
+
+import (
+	"net/http"
+	"time"
+
+	"github.com/gin-gonic/gin"
+)
+
+type LoginRequest struct {
+	Email    string `json:"email"`
+	Password string `json:"password"`
+}
+
+type LoginResponse struct {
+	Token string `json:"token"`
+}
+
+func LoginHandler(c *gin.Context) {
+	var req LoginRequest
+	if err := c.ShouldBindJSON(&req); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "Bad request"})
+		return
+	}
+
+	// Systemnutzer
+	if req.Email == "systemuser@example.com" {
+		token, err := CreateJWT("system-user-id", req.Email, "admin", time.Hour*24*7)
+		if err != nil {
+			c.JSON(http.StatusInternalServerError, gin.H{"error": "Token error"})
+			return
+		}
+		c.JSON(http.StatusOK, LoginResponse{Token: token})
+		return
+	}
+
+	c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid credentials"})
+}
--- a/backend/internal/auth/jwt.go
+++ b/backend/internal/auth/jwt.go
@@ -0,0 +1,47 @@
+package auth
+
+import (
+	"errors"
+	"time"
+
+	"github.com/golang-jwt/jwt/v4"
+)
+
+var jwtSecret = []byte("supersecret")
+
+type Claims struct {
+	UserID string
+	Email  string
+	Role   string
+}
+
+func CreateJWT(userID, email, role string, duration time.Duration) (string, error) {
+	claims := jwt.MapClaims{
+		"userId": userID,
+		"email":  email,
+		"role":   role,
+		"exp":    time.Now().Add(duration).Unix(),
+	}
+
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
+	return token.SignedString(jwtSecret)
+}
+
+func ParseJWT(tokenStr string) (*Claims, error) {
+	token, err := jwt.Parse(tokenStr, func(token *jwt.Token) (interface{}, error) {
+		return jwtSecret, nil
+	})
+	if err != nil || !token.Valid {
+		return nil, errors.New("invalid token")
+	}
+	claims, ok := token.Claims.(jwt.MapClaims)
+	if !ok {
+		return nil, errors.New("invalid claims")
+	}
+
+	return &Claims{
+		UserID: claims["userId"].(string),
+		Email:  claims["email"].(string),
+		Role:   claims["role"].(string),
+	}, nil
+}
--- a/backend/internal/auth/middleware.go
+++ b/backend/internal/auth/middleware.go
@@ -0,0 +1,30 @@
+package auth
+
+import (
+	"net/http"
+	"strings"
+
+	"github.com/gin-gonic/gin"
+)
+
+func AuthMiddleware() gin.HandlerFunc {
+	return func(c *gin.Context) {
+		authHeader := c.GetHeader("Authorization")
+		if !strings.HasPrefix(authHeader, "Bearer ") {
+			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "Missing token"})
+			return
+		}
+		tokenStr := strings.TrimPrefix(authHeader, "Bearer ")
+
+		claims, err := ParseJWT(tokenStr)
+		if err != nil {
+			c.AbortWithStatusJSON(http.StatusUnauthorized, gin.H{"error": "Invalid token"})
+			return
+		}
+
+		c.Set("userId", claims.UserID)
+		c.Set("email", claims.Email)
+		c.Set("role", claims.Role)
+		c.Next()
+	}
+}
--- a/backend/internal/common/response.go
+++ b/backend/internal/common/response.go
@@ -0,0 +1,49 @@
+package common
+
+import (
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+)
+
+// APIResponse strukturiert alle erfolgreichen Antworten
+type APIResponse struct {
+	Data    interface{} `json:"data,omitempty"`
+	Message string      `json:"message,omitempty"`
+}
+
+// APIError strukturiert Fehlerantworten
+type APIError struct {
+	Error   string `json:"error"`
+	Details string `json:"details,omitempty"`
+}
+
+// RespondSuccess sendet 200 OK mit Daten
+func RespondSuccess(c *gin.Context, data interface{}) {
+	c.JSON(http.StatusOK, APIResponse{
+		Data: data,
+	})
+}
+
+// RespondMessage sendet 200 OK mit einer Nachricht
+func RespondMessage(c *gin.Context, message string) {
+	c.JSON(http.StatusOK, APIResponse{
+		Message: message,
+	})
+}
+
+// RespondCreated sendet 201 Created mit Daten
+func RespondCreated(c *gin.Context, data interface{}) {
+	c.JSON(http.StatusCreated, APIResponse{
+		Data: data,
+	})
+}
+
+// RespondError sendet einen Fehler mit Statuscode und Nachricht
+func RespondError(c *gin.Context, code int, message string, details ...string) {
+	errResp := APIError{Error: message}
+	if len(details) > 0 {
+		errResp.Details = details[0]
+	}
+	c.AbortWithStatusJSON(code, errResp)
+}
--- a/backend/internal/database/database.go
+++ b/backend/internal/database/database.go
@@ -4,6 +4,8 @@ import (
 	"database/sql"
 	"fmt"
 	"log"
+
+	_ "github.com/lib/pq" // Import the PostgreSQL driver
 )

 type database struct {
@@ -35,12 +37,14 @@ func (d *database) Connect() error {
 	db, err := sql.Open("postgres", psqlInfo)
 	// Open a new database connection
 	if err != nil {
-		return fmt.Errorf("failed to open database: %w", err)
+		panic("failed to open database: " + err.Error())
+		// return fmt.Errorf("failed to open database: %w", err)
 	}

 	// Test the connection
 	if err := db.Ping(); err != nil {
-		return fmt.Errorf("failed to ping database: %w", err)
+		panic("failed to ping database: " + err.Error())
+		// return fmt.Errorf("failed to ping database: %w", err)
 	}

 	log.Println("Connected to the database successfully")
--- a/backend/internal/database/initTables.go
+++ b/backend/internal/database/initTables.go
@@ -1 +1,32 @@
 package database
+
+import (
+	"database/sql"
+	"fmt"
+	"log"
+
+	_ "github.com/lib/pq" // Import the PostgreSQL driver
+)
+
+const playerTable = `
+	CREATE TABLE IF NOT EXISTS players (
+		id SERIAL PRIMARY KEY,
+		name VARCHAR(100) NOT NULL,
+		age INT NOT NULL,
+		birthday DATE NOT NULL
+	);
+`
+
+func InitTables(db *sql.DB) {
+	tables := []string{
+		playerTable,
+	}
+
+	for _, table := range tables {
+		if _, err := db.Exec(table); err != nil {
+			log.Fatalf("Error creating table: %v", err)
+		}
+	}
+
+	fmt.Println("Tables initialized successfully.")
+}
--- a/backend/internal/tournament/handler.go
+++ b/backend/internal/tournament/handler.go
@@ -0,0 +1,89 @@
+package tournament
+
+import (
+	"net/http"
+	"volleyball/internal/common"
+
+	"github.com/gin-gonic/gin"
+)
+
+var tournaments = []Tournament{
+	{
+		ID:              "1",
+		Name:            "Beach Cup",
+		Location:        "Berlin",
+		MaxParticipants: 8,
+		Teams: []Team{
+			{ID: "t1", Name: "Smasher"},
+			{ID: "t2", Name: "Blockbuster"},
+		},
+		OrganizerId: "system-user-id",
+	},
+	{
+		ID:              "2",
+		Name:            "City Open",
+		Location:        "Hamburg",
+		MaxParticipants: 10,
+		Teams:           []Team{},
+		OrganizerId:     "other-user",
+	},
+}
+
+func ListTournaments(c *gin.Context) {
+	c.JSON(http.StatusOK, tournaments)
+}
+
+func GetTournament(c *gin.Context) {
+	id := c.Param("id")
+	for _, t := range tournaments {
+		if t.ID == id {
+			c.JSON(http.StatusOK, t)
+			return
+		}
+	}
+	common.RespondError(c, http.StatusNotFound, "Tournament not found")
+}
+
+func JoinTournament(c *gin.Context) {
+	id := c.Param("id")
+	var team Team
+	if err := c.ShouldBindJSON(&team); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid team data"})
+		return
+	}
+
+	for i, t := range tournaments {
+		if t.ID == id {
+			tournaments[i].Teams = append(tournaments[i].Teams, team)
+			c.JSON(http.StatusOK, tournaments[i])
+			return
+		}
+	}
+	c.JSON(http.StatusNotFound, gin.H{"error": "Tournament not found"})
+}
+
+func UpdateTournament(c *gin.Context) {
+	id := c.Param("id")
+	userId := c.GetString("userId")
+
+	var updated Tournament
+	if err := c.ShouldBindJSON(&updated); err != nil {
+		c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid data"})
+		return
+	}
+
+	for i, t := range tournaments {
+		if t.ID == id {
+			if t.OrganizerId != userId {
+				c.JSON(http.StatusForbidden, gin.H{"error": "No permission"})
+				return
+			}
+			tournaments[i].Name = updated.Name
+			tournaments[i].Location = updated.Location
+			tournaments[i].MaxParticipants = updated.MaxParticipants
+			c.JSON(http.StatusOK, tournaments[i])
+			return
+		}
+	}
+	c.JSON(http.StatusNotFound, gin.H{"error": "Tournament not found"})
+}
--- a/backend/internal/tournament/model.go
+++ b/backend/internal/tournament/model.go
@@ -0,0 +1,15 @@
+package tournament
+
+type Team struct {
+	ID   string `json:"id"`
+	Name string `json:"name"`
+}
+
+type Tournament struct {
+	ID              string `json:"id"`
+	Name            string `json:"name"`
+	Location        string `json:"location"`
+	MaxParticipants int    `json:"maxParticipants"`
+	Teams           []Team `json:"teams"`
+	OrganizerId     string `json:"organizerId"`
+}
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
        "axios": "^1.9.0",
        "react": "^19.1.0",
        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.6.0",
        "react-scripts": "5.0.1",
        "typescript": "^4.9.5",
        "web-vitals": "^2.1.4"
@@ -12933,6 +12934,50 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.0.tgz",
+      "integrity": "sha512-GGufuHIVCJDbnIAXP3P9Sxzq3UUsddG3rrI3ut1q6m0FI6vxVBF3JoPQ38+W/blslLH4a5Yutp8drkEpXoddGQ==",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.0.tgz",
+      "integrity": "sha512-DYgm6RDEuKdopSyGOWZGtDfSm7Aofb8CCzgkliTjtu/eDuB0gcsv6qdFhhi8HdtmA+KHkt5MfZ5K2PdzjugYsA==",
+      "dependencies": {
+        "react-router": "7.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-router/node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -13770,6 +13815,11 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="
+    },
    "node_modules/set-function-length": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,6 +14,7 @@
    "axios": "^1.9.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,11 +1,27 @@
-import React from 'react';
-import GroupsPage from './pages/GroupsPage';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { AuthProvider } from './pages/AuthContext';
+import ProtectedRoute from './pages/ProtectedRoute';
+import LoginPage from './pages/LoginPage';
+import Dashboard from './pages/Dashboard';
+import TournamentDetails from './pages/TournamentDetails';
+import Players from './pages/Players';
+import Navigation from './pages/Navigation';

 function App() {
  return (
-    <div className="min-h-screen bg-gray-100">
-      <GroupsPage />
-    </div>
+    <AuthProvider>
+      <Router>
+        <Navigation /> {/* Immer sichtbar */}
+        <Routes>
+          <Route path="/" element={<Dashboard />} /> {/* Öffentlich */}
+          <Route path="/login" element={<LoginPage />} />
+
+          {/* Geschützte Routen */}
+          <Route path="/players" element={<ProtectedRoute><Players /></ProtectedRoute>} />
+          <Route path="/tournaments/:id" element={<ProtectedRoute><TournamentDetails /></ProtectedRoute>} />
+        </Routes>
+      </Router>
+    </AuthProvider>
  );
 }

--- a/frontend/src/components/TournamentCard/TournamentCard.tsx
+++ b/frontend/src/components/TournamentCard/TournamentCard.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+interface TournamentCardProps {
+  id: string;
+  name: string;
+  location: string;
+  teams: Team[];
+  maxParticipants: number;
+}
+
+const TournamentCard: React.FC<TournamentCardProps> = ({ id, name, location, teams, maxParticipants }) => {
+  return (
+    <Link to={`/tournaments/${id}`} className="block border rounded-lg p-4 shadow hover:shadow-lg transition cursor-pointer bg-white">
+      <h3 className="text-xl font-semibold mb-2">{name}</h3>
+      <p className="text-gray-700 mb-1">
+        Teilnehmer: {teams.length} / {maxParticipants}
+      </p>
+      <p className="text-gray-600">Ort: {location}</p>
+    </Link>
+  );
+};
+
+export default TournamentCard;
--- a/frontend/src/pages/AuthContext.tsx
+++ b/frontend/src/pages/AuthContext.tsx
@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+interface AuthContextType {
+  token: string | null;
+  userId: string | null;
+  login: (token: string, userId: string) => void;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [token, setToken] = useState<string | null>(null);
+  const [userId, setUserId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const storedToken = localStorage.getItem('token');
+    const storedUserId = localStorage.getItem('userId');
+    if (storedToken && storedUserId) {
+      setToken(storedToken);
+      setUserId(storedUserId);
+    }
+  }, []);
+
+  const login = (token: string, userId: string) => {
+    setToken(token);
+    setUserId(userId);
+    localStorage.setItem('token', token);
+    localStorage.setItem('userId', userId);
+  };
+
+  const logout = () => {
+    setToken(null);
+    setUserId(null);
+    localStorage.removeItem('token');
+    localStorage.removeItem('userId');
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, userId, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) throw new Error('useAuth must be used within AuthProvider');
+  return context;
+}
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { fetchTournaments } from './api';
+import { Link } from 'react-router-dom';
+
+interface Tournament {
+  id: string;
+  name: string;
+  location: string;
+  teams: { id: string; name: string }[];
+  maxParticipants: number;
+}
+
+export default function Dashboard() {
+  const [tournaments, setTournaments] = useState<Tournament[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchTournaments()
+      .then(setTournaments)
+      .catch(() => setError('Fehler beim Laden der Turniere'));
+  }, []);
+
+  return (
+    <div className="p-6 max-w-5xl mx-auto">
+      <h1 className="text-3xl font-bold mb-6">Turniere</h1>
+      {error && <p className="text-red-600">{error}</p>}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {tournaments.map(t => (
+          <div key={t.id} className="border rounded p-4 shadow hover:shadow-lg transition cursor-pointer">
+            <Link to={`/tournaments/${t.id}`}>
+              <h2 className="text-xl font-semibold">{t.name}</h2>
+              <p>{t.teams.length} / {t.maxParticipants} Teilnehmer</p>
+              <p>Ort: {t.location}</p>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { useAuth } from './AuthContext';
+import { login as apiLogin } from './api';
+
+export default function LoginPage() {
+  const { login } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    try {
+      const data = await apiLogin(email, password);
+      console.log(data);
+      // Token aus JWT extrahieren (hier: UserID im Token Payload)
+      // Für Demo: Einfach Dummy UserID setzen, oder später JWT decode implementieren
+      login(data.token, 'user-id-from-token');
+    } catch {
+      setError('Login fehlgeschlagen');
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="max-w-md mx-auto p-6">
+      <h2 className="text-2xl mb-4">Login</h2>
+      {error && <p className="text-red-600 mb-4">{error}</p>}
+      <input type="email" placeholder="E-Mail" required value={email} onChange={e => setEmail(e.target.value)} className="border p-2 w-full mb-4" />
+      <input type="password" placeholder="Passwort" required value={password} onChange={e => setPassword(e.target.value)} className="border p-2 w-full mb-4" />
+      <button type="submit" className="bg-blue-600 text-white p-2 rounded w-full">Einloggen</button>
+    </form>
+  );
+}
--- a/frontend/src/pages/Navigation.tsx
+++ b/frontend/src/pages/Navigation.tsx
@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+
+export default function Navigation() {
+  const { token, logout } = useAuth();
+
+  return (
+    <nav className="bg-blue-600 text-white p-4 flex justify-between">
+      <div className="space-x-4">
+        <Link to="/">Dashboard</Link>
+        {token && <Link to="/players">Spieler</Link>}
+      </div>
+      <div>
+        {token ? (
+          <button onClick={logout} className="bg-red-500 px-3 py-1 rounded">
+            Logout
+          </button>
+        ) : (
+          <Link to="/login" className="px-3 py-1 border rounded">Login</Link>
+        )}
+      </div>
+    </nav>
+  );
+}
--- a/frontend/src/pages/Players.tsx
+++ b/frontend/src/pages/Players.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+
+interface Player {
+  id: number;
+  name: string;
+  position: string;
+}
+
+export default function PlayerManagement() {
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [name, setName] = useState("");
+  const [position, setPosition] = useState("");
+  const [editingId, setEditingId] = useState<number | null>(null);
+
+  const handleAddOrUpdate = () => {
+    if (!name || !position) return;
+
+    if (editingId !== null) {
+      setPlayers(players.map(p =>
+        p.id === editingId ? { ...p, name, position } : p
+      ));
+      setEditingId(null);
+    } else {
+      const newPlayer: Player = {
+        id: Date.now(),
+        name,
+        position,
+      };
+      setPlayers([...players, newPlayer]);
+    }
+
+    setName("");
+    setPosition("");
+  };
+
+  const handleEdit = (player: Player) => {
+    setName(player.name);
+    setPosition(player.position);
+    setEditingId(player.id);
+  };
+
+  const handleDelete = (id: number) => {
+    setPlayers(players.filter(p => p.id !== id));
+  };
+
+  return (
+    <div className="max-w-2xl mx-auto p-6 bg-white rounded-xl shadow-md mt-6">
+      <h1 className="text-2xl font-bold mb-4">🏐 Spielerverwaltung</h1>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+        <input
+          type="text"
+          placeholder="Spielername"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="border p-2 rounded"
+        />
+        <input
+          type="text"
+          placeholder="Position (z. B. Zuspieler)"
+          value={position}
+          onChange={(e) => setPosition(e.target.value)}
+          className="border p-2 rounded"
+        />
+      </div>
+
+      <button
+        onClick={handleAddOrUpdate}
+        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
+      >
+        {editingId !== null ? "Speichern" : "Hinzufügen"}
+      </button>
+
+      <table className="w-full mt-6 table-auto border-collapse">
+        <thead>
+          <tr className="bg-gray-100 text-left">
+            <th className="border px-4 py-2">Name</th>
+            <th className="border px-4 py-2">Position</th>
+            <th className="border px-4 py-2">Aktionen</th>
+          </tr>
+        </thead>
+        <tbody>
+          {players.map(player => (
+            <tr key={player.id}>
+              <td className="border px-4 py-2">{player.name}</td>
+              <td className="border px-4 py-2">{player.position}</td>
+              <td className="border px-4 py-2 space-x-2">
+                <button
+                  onClick={() => handleEdit(player)}
+                  className="bg-yellow-400 text-white px-2 py-1 rounded"
+                >
+                  Bearbeiten
+                </button>
+                <button
+                  onClick={() => handleDelete(player.id)}
+                  className="bg-red-500 text-white px-2 py-1 rounded"
+                >
+                  Löschen
+                </button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
--- a/frontend/src/pages/ProtectedRoute.tsx
+++ b/frontend/src/pages/ProtectedRoute.tsx
@@ -0,0 +1,8 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+import { JSX } from 'react';
+
+export default function ProtectedRoute({ children }: { children: JSX.Element }) {
+  const { token } = useAuth();
+  return token ? children : <Navigate to="/login" replace />;
+}
--- a/frontend/src/pages/TournamentDetails.tsx
+++ b/frontend/src/pages/TournamentDetails.tsx
@@ -0,0 +1,151 @@
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { fetchTournament, updateTournament, registerTeam } from './api';
+import { useAuth } from './AuthContext';
+
+interface Team {
+  id: string;
+  name: string;
+}
+
+interface Tournament {
+  id: string;
+  name: string;
+  location: string;
+  maxParticipants: number;
+  organizerId: string;
+  teams: Team[];
+}
+
+export default function TournamentDetails() {
+  const { id } = useParams<{ id: string }>();
+  const { token, userId } = useAuth();
+  const [tournament, setTournament] = useState<Tournament | null>(null);
+  const [editMode, setEditMode] = useState(false);
+  const [formData, setFormData] = useState({ name: '', location: '', maxParticipants: 0 });
+  const [teamName, setTeamName] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+
+  useEffect(() => {
+    if (!id) return;
+    fetchTournament(id, token ?? undefined)
+      .then((data) => {
+        setTournament(data);
+        setFormData({
+          name: data.name,
+          location: data.location,
+          maxParticipants: data.maxParticipants,
+        });
+      })
+      .catch(() => setError('Fehler beim Laden'));
+  }, [id, token]);
+
+  if (!tournament) return <p className="p-6">Lade Turnier…</p>;
+
+  const isOwner = userId === tournament.organizerId;
+
+  async function saveChanges() {
+    if (!token || !tournament) return;
+    try {
+      await updateTournament(tournament.id, formData, token);
+      setTournament({ ...tournament, ...formData });
+      setEditMode(false);
+      setError(null);
+    } catch {
+      setError('Speichern fehlgeschlagen');
+    }
+  }
+
+  async function handleRegisterTeam() {
+    if (!token) {
+      setError('Bitte einloggen, um Teams anzumelden');
+      return;
+    }
+    if (!teamName.trim()) return;
+    if (!tournament) return;
+
+    try {
+      await registerTeam(tournament.id, { name: teamName }, token);
+      setTournament({
+        ...tournament,
+        teams: [...tournament.teams, { id: Math.random().toString(), name: teamName }],
+      });
+      setTeamName('');
+      setError(null);
+    } catch {
+      setError('Anmeldung fehlgeschlagen');
+    }
+  }
+
+  return (
+    <div className="p-6 max-w-3xl mx-auto">
+      <h2 className="text-2xl font-bold mb-4">Turnierdetails</h2>
+
+      {error && <p className="text-red-600 mb-4">{error}</p>}
+
+      {editMode ? (
+        <>
+          <input
+            className="border p-2 w-full mb-3 rounded"
+            value={formData.name}
+            onChange={e => setFormData({ ...formData, name: e.target.value })}
+            placeholder="Name"
+          />
+          <input
+            className="border p-2 w-full mb-3 rounded"
+            value={formData.location}
+            onChange={e => setFormData({ ...formData, location: e.target.value })}
+            placeholder="Ort"
+          />
+          <input
+            type="number"
+            className="border p-2 w-full mb-3 rounded"
+            value={formData.maxParticipants}
+            onChange={e => setFormData({ ...formData, maxParticipants: parseInt(e.target.value) || 0 })}
+            placeholder="Max. Teilnehmer"
+          />
+          <button onClick={saveChanges} className="bg-blue-600 text-white px-4 py-2 rounded mr-2">
+            Speichern
+          </button>
+          <button onClick={() => setEditMode(false)} className="bg-gray-400 text-white px-4 py-2 rounded">
+            Abbrechen
+          </button>
+        </>
+      ) : (
+        <>
+          <p><strong>Name:</strong> {tournament.name}</p>
+          <p><strong>Ort:</strong> {tournament.location}</p>
+          <p><strong>Teilnehmer:</strong> {tournament.teams.length} / {tournament.maxParticipants}</p>
+
+          {isOwner && (
+            <button onClick={() => setEditMode(true)} className="mt-4 bg-yellow-500 text-white px-4 py-2 rounded">
+              Turnier bearbeiten
+            </button>
+          )}
+
+          <h3 className="mt-8 text-xl font-semibold">Angemeldete Teams</h3>
+          <ul className="list-disc pl-6 mt-2">
+            {tournament.teams.map(team => (
+              <li key={team.id}>{team.name}</li>
+            ))}
+          </ul>
+
+          {token && tournament.teams.length < tournament.maxParticipants && (
+            <div className="mt-6">
+              <input
+                className="border p-2 rounded mr-2"
+                placeholder="Teamname"
+                value={teamName}
+                onChange={e => setTeamName(e.target.value)}
+              />
+              <button onClick={handleRegisterTeam} className="bg-green-600 text-white px-3 py-1 rounded">
+                Team anmelden
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
--- a/frontend/src/pages/Tournaments.tsx
+++ b/frontend/src/pages/Tournaments.tsx
@@ -0,0 +1,20 @@
+import { useLocation } from 'react-router-dom';
+
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
+export default function Tournaments() {
+  const query = useQuery();
+  const type = query.get("type");
+  const location = query.get("location");
+
+  return (
+    <div className="p-6">
+      <h2 className="text-2xl font-bold mb-4">Turniere</h2>
+      {type && <p>Gefiltert nach: <strong>{type}</strong></p>}
+      {location && <p>Standort: <strong>{location}</strong></p>}
+      {/* TODO: Backend-Daten hier anzeigen */}
+    </div>
+  );
+}
--- a/frontend/src/pages/api.tsx
+++ b/frontend/src/pages/api.tsx
@@ -0,0 +1,45 @@
+const API_URL = 'http://localhost:8080/api';
+
+export async function login(email: string, password: string) {
+  const res = await fetch(`${API_URL}/login`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) throw new Error('Login fehlgeschlagen');
+  return res.json(); // { token: string }
+}
+
+export async function fetchTournaments() {
+  const res = await fetch(`${API_URL}/tournaments`);
+  if (!res.ok) throw new Error('Fehler beim Laden der Turniere');
+  return res.json();
+}
+
+export async function fetchTournament(id: string, token?: string) {
+  const res = await fetch(`${API_URL}/tournaments/${id}`, {
+    headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+  });
+  if (!res.ok) throw new Error('Fehler beim Laden des Turniers');
+  return res.json();
+}
+
+export async function updateTournament(id: string, data: any, token: string) {
+  const res = await fetch(`${API_URL}/tournaments/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify(data),
+  });
+  if (!res.ok) throw new Error('Update fehlgeschlagen');
+  return res.json();
+}
+
+export async function registerTeam(id: string, team: { name: string }, token: string) {
+  const res = await fetch(`${API_URL}/tournaments/${id}/register`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify(team),
+  });
+  if (!res.ok) throw new Error('Team-Anmeldung fehlgeschlagen');
+  return res.json();
+}