ADD: card component and login behavior

backend/cmd/cli/user/get.go

@@ -33,7 +33,7 @@ var getCmd = &cobra.Command{
 		}
 
 		fmt.Printf("ID: %d\nEmail: %s\nName: %s\n",
-			user.ID, user.Email, user.Name)
+			user.ID, user.Email, user.Username)
 		return nil
 	},
 }

backend/db/schema.sql

@@ -7,10 +7,10 @@ CREATE TABLE IF NOT EXISTS public.users
 (
     id character varying(255) COLLATE pg_catalog."default" NOT NULL DEFAULT uuid_generate_v4(),
     email character varying(255) COLLATE pg_catalog."default" NOT NULL,
-    name character varying(255) COLLATE pg_catalog."default" NOT NULL,
+    username character varying(255) COLLATE pg_catalog."default" NOT NULL,
     password_hash character varying(255) COLLATE pg_catalog."default" NOT NULL,
     created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP,
-    updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP,
+    updated_at timestamp with time zone ,
     CONSTRAINT users_pkey PRIMARY KEY (id),
     CONSTRAINT users_email_key UNIQUE (email)
 )

backend/internal/auth/handler.go

@@ -2,7 +2,9 @@ package auth
 
 import (
 	"database/sql"
+	"errors"
 	"net/http"
+	"studia/internal/logger"
 	"studia/internal/user"
 	"time"
 
@@ -11,70 +13,77 @@ import (
 )
 
 type LoginRequest struct {
-	Email    string `json:"email"`
+	Email    string
-	Password string `json:"password"`
+	Password string
 }
 
 type RegisterRequest struct {
-	Email    string `json:"email"`
+	Email    string
-	Password string `json:"password"`
+	Password string
-	Username string `json:"username"`
+	Username string
 }
 
 const defaultRole = "user"
 
 var secret = []byte("secret")
 
-func Login(c *gin.Context, db *sql.DB) {
+func Login(c *gin.Context, db *sql.DB) error {
 	var req LoginRequest
 	if err := c.ShouldBindJSON(&req); err != nil {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request"})
-		return
+		return err
 	}
 
 	if req.Email == "" || req.Password == "" {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "Email and password are required"})
-		return
+		return errors.New("Email and password are required")
 	}
 
 	User, err := user.GetUserByEmail(db, req.Email)
 	if err != nil {
-		c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid email or password"})
+		c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid email "})
-		return
+		return err
 	}
+	logger.Log.Info().Msgf("User: %+v", User)
 
-	if !user.CheckPasswordHash(db, User.Email, req.Password) {
+	err = user.CheckPasswordHash(db, User.Email, req.Password)
-		c.JSON(http.StatusUnauthorized, gin.H{"error": "Invalid email or password"})
+	if err != nil {
-		return
+		return err
 	}
 
 	token, err := GenerateJWT(User.ID, User.Email, User.Role)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, gin.H{"error": "Could not generate token"})
-		return
+		return err
 	}
 	c.JSON(http.StatusOK, gin.H{"token": token})
-
+	return nil
 }
 
-func Register(c *gin.Context, db *sql.DB) {
+func Register(c *gin.Context, db *sql.DB) error {
 	var req RegisterRequest
 	if err := c.ShouldBindJSON(&req); err != nil {
+		// Log the error for debugging purposes
+		logger.Log.Error().Err(err).Msg("Failed to bind JSON for registration")
+		// Respond with a bad request status and an error message
 		c.JSON(http.StatusBadRequest, gin.H{"error": "Invalid request"})
-		return
+		return errors.New("Invalid request")
 	}
+	logger.Log.Info().Msgf("Register Request: %+v", req)
 	if req.Email == "" || req.Password == "" || req.Username == "" {
 		c.JSON(http.StatusBadRequest, gin.H{"error": "Email and password are required"})
-		return
+		return errors.New("Email and password are required")
 	}
 
-	error := user.CreateUser(db, req.Email, req.Username, req.Password, []string{defaultRole})
+	err := user.CreateUser(db, req.Email, req.Username, req.Password, []string{defaultRole})
-	if error != nil {
+	if err != nil {
-		c.JSON(http.StatusBadRequest, gin.H{"error": error.Error()})
+		logger.Log.Error().Err(err).Msg("Failed to create user")
-		return
+		c.JSON(http.StatusBadRequest, gin.H{"error": err})
+		return err
 	}
 	c.JSON(http.StatusOK, gin.H{"message": "User created successfully"})
 
+	return nil
 }
 
 func GenerateJWT(uuid string, email string, roles []string) (any, error) {

backend/internal/server/server.go

@@ -24,6 +24,7 @@ func StartServer(cfg *config.Config) {
 	// Lokaler Fallback (wichtig für die Entwicklung)
 	allowedOrigins := []string{
 		"http://localhost:5173", // Gängiger Vite-Dev-Port
+		"http://127.0.0.1:5173",
 	}
 
 	if cfg.FrontendURL != "" {
@@ -50,11 +51,18 @@ func StartServer(cfg *config.Config) {
 	router.Use(cors.New(config))
 
 	router.POST("/login", func(c *gin.Context) {
-		auth.Login(c, db) // Pass the actual DB connection instead of nil
+		err := auth.Login(c, db)
+		if err != nil {
+			logger.Log.Error().Msg(err.Error())
+		}
 	})
 
 	router.POST("/register", func(c *gin.Context) {
-		auth.Register(c, db)
+		er := auth.Register(c, db)
+		if er != nil {
+			logger.Log.Error().Msg("register error")
+		}
+
 	})
 
 	router.Run(":" + cfg.Port)

backend/internal/user/model.go

@@ -2,6 +2,7 @@ package user
 
 import (
 	"database/sql"
+	"studia/internal/logger"
 	"time"
 
 	"golang.org/x/crypto/bcrypt"
@@ -10,7 +11,7 @@ import (
 type User struct {
 	ID           string    `json:"id"`
 	Email        string    `json:"email"`
-	Name         string    `json:"name"`
+	Username     string    `json:"username"`
 	PasswordHash string    `json:"-"`
 	CreatedAt    time.Time `json:"created_at"`
 	UpdatedAt    time.Time `json:"updated_at"`
@@ -28,26 +29,33 @@ type User struct {
 // }
 
 func GetUserByEmail(db *sql.DB, email string) (*User, error) {
-	row := db.QueryRow("SELECT id, email, password_hash, role FROM users WHERE email=$1", email)
+	row := db.QueryRow("SELECT id, email, username FROM users WHERE email=$1", email)
 	var user User
-	err := row.Scan(&user.ID, &user.Email, &user.PasswordHash, &user.Role)
+	err := row.Scan(&user.ID, &user.Email, &user.Username)
 	if err != nil {
 		return nil, err
 	}
 	return &user, nil
 }
 
-func CheckPasswordHash(db *sql.DB, email string, password string) bool {
+func CheckPasswordHash(db *sql.DB, email string, password string) error {
 	row := db.QueryRow("SELECT password_hash FROM users WHERE email=$1", email)
-	var hash string
+	var hash []byte
 	if err := row.Scan(&hash); err != nil {
-		return false
+		return err
 	}
-	UserPasswordHash, error := bcrypt.GenerateFromPassword([]byte(password), bcrypt.DefaultCost)
+	UserPasswordHash, err := bcrypt.GenerateFromPassword([]byte(password), bcrypt.DefaultCost)
-	if error != nil {
+	if err != nil {
-		return false
+		return err
 	}
-	return bcrypt.CompareHashAndPassword([]byte(hash), []byte(UserPasswordHash)) == nil
+	logger.Log.Info().Msgf("UserPasswordHash: %s", UserPasswordHash)
+	logger.Log.Info().Msgf("hash: %s", hash)
+	logger.Log.Info().Msgf("password: %s", []byte(password))
+	logger.Log.Info().Msgf("email: %s", []byte(email))
+
+	err = bcrypt.CompareHashAndPassword(hash, []byte(password))
+
+	return err
 }
 
 func CreateUser(db *sql.DB, email string, name string, password string, role []string) error {
@@ -56,7 +64,7 @@ func CreateUser(db *sql.DB, email string, name string, password string, role []s
 		return err
 	}
 
-	_, err = db.Exec("INSERT INTO users (email, name, password_hash, role, created_at, updated_at) VALUES ($1, $2, $3, $4, $5, $6)",
+	_, err = db.Exec("INSERT INTO users (email, username, password_hash) VALUES ($1, $2, $3)",
-		email, name, string(passwordHash), role, time.Now(), time.Now())
+		email, name, string(passwordHash))
 	return err
 }

frontend/studia/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
+        "framer-motion": "^12.23.26",
         "jwt-decode": "^4.0.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
@@ -2553,6 +2554,33 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.26",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.26.tgz",
+      "integrity": "sha512-cPcIhgR42xBn1Uj+PzOyheMtZ73H927+uWPDVhUMqxy8UHt6Okavb6xIz9J/phFUHUj0OncR6UvMfJTXoc/LKA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.23",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -3116,6 +3144,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.23",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.23.tgz",
+      "integrity": "sha512-n5yolOs0TQQBRUFImrRfs/+6X4p3Q4n1dUEqt/H58Vx7OW6RF+foWEgmTVDhIWJIMXOuNNL0apKH2S16en9eiA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3568,6 +3611,12 @@
         "typescript": ">=4.8.4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",

frontend/studia/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.18",
+    "framer-motion": "^12.23.26",
     "jwt-decode": "^4.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",

frontend/studia/src/App.tsx

@@ -1,29 +1,39 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { AuthProvider } from "./components/AuthContext";
+import { AuthProvider, useAuth } from "./components/AuthContext";
 import ProtectedRoute from "./components/ProtectedRoute";
 
 import Landing from "./pages/Landing";
 import Dashboard from "./pages/Dashboard"
 import LoginModal from "./components/LoginModal";
+import Navigation from "./components/Navigation";
 
 export default function App() {
-  const [token] = useState(localStorage.getItem("token"));
+  // const [token] = useState(localStorage.getItem("token"));
   // const [showLogin, setShowLogin] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
+    // const {token, logout } = useAuth();
 
-  if (!token)
+  // useEffect(() => {
+  //   if (token) {
+  //     // setShowLogin(false);
+  //     setModalOpen(false);
+  //   }
+  // }, [token]);
+
+
+  // if (!token)
     return (
     <AuthProvider>
           <BrowserRouter>
+            <Navigation  onLogin={() => setModalOpen(true)}  />
             <LoginModal isOpen={modalOpen} onClose={() => setModalOpen(false)} />
+            
             <Routes>
               <Route path="/" element={<Landing onLogin={() => setModalOpen(true)} />} />
               {/* <Route path="/signup" element={<SignUp/>} /> */}
 
-              <Route path="/dashboard" element={ <ProtectedRoute><Dashboard /></ProtectedRoute>   }
+              <Route path="/dashboard" element={ <ProtectedRoute><Dashboard /></ProtectedRoute>   } />
-
-              />
             </Routes>
           </BrowserRouter>
         </AuthProvider>
@@ -36,5 +46,5 @@ export default function App() {
       // </>
     );
 
-  return <Dashboard />;
+  // return <Dashboard />;
 }

frontend/studia/src/api/user.tsx

@@ -1,24 +1,24 @@
 const API_URL = 'http://localhost:8080';
 
 
-export async function loginUser(email:string, password: string) {
+export async function loginUser(Email:string, Password: string) {
     const res = await fetch(`${API_URL}/login`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ email, password }),
+    body: JSON.stringify({ Email, Password }),
   });
-  if (!res.ok) throw new Error('Login fehlgeschlagen');
+  return res;
-  return res.json(); // { token: string }
 }
 
-export async function registerUser(email:string, username:string, password: string){
+export async function registerUser(request: { Email: string; Username: string; Password: string; }){
+  console.log(request);
   const res = await fetch(`${API_URL}/register`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ email,username, password }),
+    body: JSON.stringify(request),
   });
-  if (!res.ok) throw new Error('Registrierung fehlgeschlagen');
+  
-  return res.json(); // { token: string }
+  return res; 
 }
     
 export async function fetchUserProfile(token: string) {

frontend/studia/src/components/AuthContext.tsx

@@ -13,38 +13,74 @@ type AuthContextType = {
 
 const AuthContext = createContext<AuthContextType | null>(null);
 
-export const AuthProvider = ({ children }: { children: JSX.Element }) => {
+export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+// export const AuthProvider = ({ children }: { children: JSX.Element }) => {
   const [token, setToken] = useState<string | null>(null);
   const [userId, setUserId] = useState<string | null>(null);
   // const [userEmail, setuserEmail] = useState<string | null>(null);
 
+  // useEffect(() => {
+  //   const storedToken = localStorage.getItem('token');
+  //   console.log(storedToken);
+  //   const storedUserId = localStorage.getItem('userId');
+  //   if (!storedToken) {
+  //     return;
+  //   }
+  //   // if (storedToken && storedUserId) {
+  //   //   setToken(storedToken);
+  //   //   setUserId(storedUserId);
+  //   // }
+  //   if (storedToken!==null) {
+  //     setToken(storedToken);
+  //   }
+  //   if (storedUserId) {
+  //     setUserId(storedUserId);
+  //   }
+  //   console.log(token);
+
+
+  //   const user = getUserFromToken(storedToken);
+  //   if (!user) {
+  //     logout(); // z. B. localStorage.clear() + navigate("/login")
+  //     return;
+  //   }
+  //   // ⏳ Logout bei Ablauf
+  //   const timeout = setTimeout(() => {
+  //     logout();
+  //   }, user.exp * 1000 - Date.now());
+
+  //   return () => clearTimeout(timeout);
+  // }, [token]);
+
   useEffect(() => {
     const storedToken = localStorage.getItem('token');
     const storedUserId = localStorage.getItem('userId');
     if (!storedToken) {
-      return;
+      return
     }
     if (storedToken && storedUserId) {
       setToken(storedToken);
       setUserId(storedUserId);
     }
 
-    const user = getUserFromToken(storedToken);
+  const user = getUserFromToken(storedToken);
-    if (!user) {
+  if (!user) {
-      logout(); // z. B. localStorage.clear() + navigate("/login")
+    logout(); // z.B. localStorage.clear() + navigate("/login")
-      return;
+    return;
-    }
+  }
     // ⏳ Logout bei Ablauf
-    const timeout = setTimeout(() => {
+  const timeout = setTimeout(() => {
-      logout();
+    logout();
-    }, user.exp * 1000 - Date.now());
+  }, user.exp * 1000 - Date.now());
+
+  return () => clearTimeout(timeout);
 
-    return () => clearTimeout(timeout);
   }, []);
 
   const login = (token: string, userId: string, role: string[] = []) => {
     setToken(token);
     setUserId(userId);
+    
     localStorage.setItem('token', token);
     localStorage.setItem('userId', userId);
     localStorage.setItem('role', JSON.stringify(role)); // Store array as string
@@ -55,6 +91,7 @@ export const AuthProvider = ({ children }: { children: JSX.Element }) => {
     setUserId(null);
     localStorage.removeItem('token');
     localStorage.removeItem('userId');
+    localStorage.clear();
   };
 
   return (
@@ -64,4 +101,9 @@ export const AuthProvider = ({ children }: { children: JSX.Element }) => {
   );
 };
 
-export const useAuth = () => useContext(AuthContext);
+	export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) throw new Error('useAuth must be used within AuthProvider');
+  return context;
+  }
+// export const useAuth = () => useContext(AuthContext);

frontend/studia/src/components/Card.tsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { motion } from "framer-motion";
+
+export default function FlipCard({ front, back }: { front: string; back: string }) {
+  const [flipped, setFlipped] = useState(false);
+
+  return (
+    <div
+      className="w-80 h-52 perspective cursor-pointer"
+      onClick={() => setFlipped(!flipped)}
+      onKeyDown={(e) => e.key === " " && setFlipped(!flipped)}
+      tabIndex={0}
+      role="button"
+      aria-label="Flip card"
+    >
+      <motion.div
+        className="relative w-full h-full"
+        animate={{ rotateY: flipped ? 180 : 0 }}
+        transition={{ duration: 0.45, ease: "easeInOut" }}
+        style={{ transformStyle: "preserve-3d" }}
+      >
+        {/* Front */}
+        <div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-white shadow-lg backface-hidden">
+          <p className="text-xl font-semibold text-center px-4 text-black ">
+            {front}
+          </p>
+        </div>
+
+        {/* Back */}
+        <div className="absolute inset-0 flex items-center justify-center rounded-2xl bg-white shadow-lg backface-hidden rotate-y-180">
+          <p className="text-xl text-center px-4 text-black">
+            {back}
+          </p>
+        </div>
+      </motion.div>
+
+      {/* Tailwind can't handle these directly */}
+      <style>{`
+        .perspective {
+          perspective: 1000px;
+        }
+        .backface-hidden {
+          backface-visibility: hidden;
+        }
+        .rotate-y-180 {
+          transform: rotateY(180deg);
+        }
+      `}</style>
+    </div>
+  );
+}
+
+/*
+USAGE (Vite + Tailwind):
+
+<FlipCard
+  front="What is the capital of France?"
+  back="Paris"
+/>
+
+Stack:
+- Vite
+- React
+- Tailwind CSS
+- Framer Motion
+
+Behavior:
+- Quizlet-style flip
+- Click or spacebar to flip
+- Smooth 3D animation
+*/

frontend/studia/src/components/LoginModal.tsx

@@ -1,7 +1,11 @@
 import {loginUser, registerUser} from "../api/user";
 import { useState } from "react";
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from './AuthContext';
 
 export default function LoginModal({ isOpen, onClose, onSuccess }: any) {
+  const navigate = useNavigate(); // ← Navigation-Hook
+  const { login } = useAuth();
   const [isRegistering, setIsRegistering] = useState(false);
   if (!isOpen) return null; // 👈 THIS is the key
 
@@ -35,8 +39,10 @@ export default function LoginModal({ isOpen, onClose, onSuccess }: any) {
             return;
           }
 
-          // TODO: Call registerUser API
+          const res = await registerUser(
-          const res = await registerUser(email as string, username as string, password as string);
+            { Email: email as string, Username: username as string, Password: password as string }
+          );
+          console.log(res);
           if (!res.ok) {
             alert("Registration failed!");
             return;
@@ -98,12 +104,18 @@ export default function LoginModal({ isOpen, onClose, onSuccess }: any) {
           const fd = new FormData(e.currentTarget);
           const email = fd.get("email");
           const password = fd.get("password");
-
           const res = await loginUser(email as string, password as string);
-
+          if (!res.ok) {
+            alert("Login failed!");
+            return;
+          }
           const data = await res.json();
-          localStorage.setItem("token", data.token);
+          console.log(data);
-          onSuccess(data.token);
+          login(data.token, data.userId,[]);
+          // localStorage.setItem("token", data.token);
+          
+          onClose();
+          navigate("/");
         }}
         className="space-y-4"
       >

frontend/studia/src/components/Navigation.tsx

@@ -0,0 +1,39 @@
+import { Link } from 'react-router-dom';
+import { useAuth } from './AuthContext';
+
+export default function Navigation({ onLogin }: { onLogin: () => void }) {
+  const { token, logout } = useAuth();
+
+  return (
+     <nav className="bg-white shadow p-4 flex justify-between items-center">
+        <div className="text-2xl font-bold text-indigo-700"><Link to="/">Studia</Link></div>
+        <div className="flex items-center space-x-4">
+          {token && (
+            <>
+              <a href="/dashboard" className="text-gray-600 hover:text-indigo-700">
+                Dashboard
+              </a>
+              <a href="#" className="text-gray-600 hover:text-indigo-700">
+                Settings
+              </a>
+            </>
+          )}
+          {token ? (
+          <button
+            onClick={logout}
+            className="bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition"
+          >
+            Logout
+          </button>
+          ) : (
+            <button
+              onClick={onLogin}
+              className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"
+            >
+              Login
+            </button>
+          )}
+        </div>
+      </nav>
+  );
+}

frontend/studia/src/components/ProtectedRoute.tsx

@@ -3,8 +3,15 @@ import { useAuth } from "../components/AuthContext";
 import type { JSX } from 'react';
 
 const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
-  const { token } = useAuth() as { token?: string | null };
+  // const { token } = useAuth();
-  return token ? children : <Navigate to="/" />;
+const token = localStorage.getItem('token');
+  // console.log(token);
+  if(token!=null)
+    return children;
+  else
+    console.log(token)
+    return <Navigate to="/" />;
+  // return token ? children : <Navigate to="/" />;
 };
 
 export default ProtectedRoute;

frontend/studia/src/pages/Dashboard.tsx

@@ -1,14 +1,17 @@
 import Builder from "./Builder";
 import Learn from "./Learn";
 import Admin from "./Admin";
-
+// import { useAuth } from "../components/AuthContext";
 
 export default function Dashboard() {
+
   return (
-    <div className="min-h-screen bg-gray-100 p-6 space-y-10">
+    <div className="min-h-screen bg-gray-100">
-      <Builder />
+      <div className="p-6 space-y-10">
-      <Learn />
+        <Builder />
-      <Admin />
+        <Learn />
+        <Admin />
+      </div>
     </div>
   );
 }

frontend/studia/src/pages/Landing.tsx

@@ -1,27 +1,42 @@
+import { useEffect } from "react";
+import { useAuth } from "../components/AuthContext";
+import Card from "../components/Card"
+
 export default function Landing({ onLogin }: { onLogin: () => void }) {
+    const {token} = useAuth();
+
+    useEffect(() => {
+     console.log(token)
+    }, []);
+  
   return (
     <div className="min-h-screen bg-gradient-to-br from-indigo-600 to-purple-700 text-white">
       <div className="max-w-6xl mx-auto px-6 py-24 text-center">
-        <h1 className="text-5xl font-bold mb-6">Cardify</h1>
+        <h1 className="text-5xl font-bold mb-6">Studia</h1>
         <p className="text-xl opacity-90 mb-12">
           Learn smarter with flashcards & spaced repetition
         </p>
 
         <div className="grid md:grid-cols-3 gap-6 mb-12">
           {["HTTP", "JWT", "REST"].map(t => (
-            <div key={t} className="bg-white/10 p-6 rounded-xl backdrop-blur">
+            // <div key={t} className="bg-white/10 p-6 rounded-xl backdrop-blur">
-              <h3 className="font-semibold text-lg">{t}</h3>
+            //   <h3 className="font-semibold text-lg">{t}</h3>
-              <p className="opacity-80 mt-2">Sample definition</p>
+            //   <p className="opacity-80 mt-2">Sample definition</p>
-            </div>
+            // </div> 
+            <Card front={t} back="Sample definition"></Card>
           ))}
         </div>
-
+          {token? (
-        <button
+            <div> </div>
+       ) :  
+        ( 
+           <button
           onClick={onLogin}
           className="bg-white text-indigo-700 px-8 py-3 rounded-xl font-semibold hover:scale-105 transition"
         >
           Get Started
         </button>
+        ) }
       </div>
     </div>
   );