added guest support in the API and started the StartPageView layout

front/API.ts

@@ -127,12 +127,24 @@ export default class API {
 			body: registrationInput,
 			method: "POST",
 		});
+		// In the Future we should move autheticate out of this function 
+		// and maybe create a new function to create and login in one go
 		return API.authenticate({
 			username: registrationInput.username,
 			password: registrationInput.password,
 		});
 	}
 
+	public static async createAndGetGuestAccount(): Promise<AccessToken> {
+		let response = await API.fetch({
+			route: "/auth/guest",
+			method: "POST",
+		});
+		if (!response.ok) throw new APIError("Error while creating guest account", response.status, "guestAccountCreationError");
+		if (!response.access_token) throw new APIError("No access token", response.status);
+		return response.access_token;
+	}
+
 	/***
 	 * Retrieve information of the currently authentified user
 	 */

front/Navigation.tsx

@@ -6,6 +6,7 @@ import { RootState, useSelector } from './state/Store';
 import { translate } from './i18n/i18n';
 import SongLobbyView from './views/SongLobbyView';
 import AuthenticationView from './views/AuthenticationView';
+import StartPageView from './views/StartPageView';
 import HomeView from './views/HomeView';
 import SearchView from './views/SearchView';
 import SetttingsNavigator from './views/settings/SettingsView';
@@ -29,6 +30,7 @@ const protectedRoutes = () => ({
 }) as const;
 
 const publicRoutes = () => ({
+	Start: { component: StartPageView, options: { title: translate('welcome') } },
 	Login: { component: AuthenticationView, options: { title: translate('signInBtn') } },
 }) as const;
 

front/models/User.ts

@@ -5,6 +5,7 @@ import UserSettings from "./UserSettings";
 interface User extends Model {
 	name: string;
 	email: string;
+	isGuest: boolean;
 	xp: number;
 	premium: boolean;
 	metrics: Metrics;

front/views/StartPageView.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { View, Text, Stack, Box, Button, Pressable, useBreakpointValue } from "native-base";
+import { useNavigation } from "../Navigation";
+
+const StartPageView = () => {
+	const navigation = useNavigation();
+	const screenSize = useBreakpointValue({ base: "small", md: "big" });
+	return (
+		<View>
+			<Text>StartPage</Text>
+			<Stack
+				direction={ screenSize === "small" ? "column" : "row" }
+				style={{
+					width: "100%",
+					justifyContent: "center",
+					alignItems: "center",
+				}}
+			>
+				<Pressable
+					style={{
+						width: "clamp(100px, 33.3%, 250px)",
+						height: "250px",
+						margin: "clamp(10px, 2%, 50px)",
+					}}
+				>
+					<Box
+						style={{
+							width: "100%",
+							height: "100%",
+							backgroundColor: "red",
+						}}
+					>
+						<Text>Login</Text>
+					</Box>
+				</Pressable>
+				<Pressable
+					style={{
+						width: "clamp(100px, 33.3%, 250px)",
+						height: "250px",
+						margin: "clamp(10px, 2%, 50px)",
+					}}
+				>
+					<Box
+						style={{
+							width: "100%",
+							height: "100%",
+							backgroundColor: "blue",
+						}}
+					>
+						<Text>Guest</Text>
+					</Box>
+				</Pressable>
+			</Stack>
+		</View>
+	);
+};
+
+export default StartPageView;