backend setup in fastapi and authentication in neon for postfres

backend/.env

@@ -0,0 +1,3 @@
+DATABASE_URL=postgresql+asyncpg://neondb_owner:npg_hWF9zPurf2OS@ep-twilight-resonance-ah9o88p9-pooler.c-3.us-east-1.aws.neon.tech/neondb?ssl=require
+JWT_SECRET=ed8afd14a1500cd9d2359010fece9e6f
+FRONTEND_ORIGIN=http://localhost:5174

backend/.env.example

@@ -0,0 +1,3 @@
+DATABASE_URL=postgresql+asyncpg://username:password@your-neon-host.neon.tech/neondb?sslmode=require
+JWT_SECRET=your-super-secret-jwt-key-change-this-in-production
+FRONTEND_ORIGIN=http://localhost:5173

backend/app/db.py

@@ -0,0 +1,15 @@
+from sqlalchemy.ext.asyncio import create_async_engine, AsyncSession, async_sessionmaker
+from sqlalchemy.orm import declarative_base
+from app.settings import settings
+
+engine = create_async_engine(settings.database_url, echo=False)
+async_session_maker = async_sessionmaker(engine, class_=AsyncSession, expire_on_commit=False)
+Base = declarative_base()
+
+async def get_db():
+    async with async_session_maker() as session:
+        yield session
+
+async def init_db():
+    async with engine.begin() as conn:
+        await conn.run_sync(Base.metadata.create_all)

backend/app/main.py

@@ -0,0 +1,28 @@
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from contextlib import asynccontextmanager
+from app.settings import settings
+from app.db import init_db
+from app.routes import auth
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    await init_db()
+    yield
+
+app = FastAPI(title="Co-Code GGW Auth API", lifespan=lifespan)
+
+# CORS configuration to allow frontend requests
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=[settings.frontend_origin],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(auth.router)
+
+@app.get("/")
+async def root():
+    return {"message": "Co-Code GGW Auth API"}

backend/app/models.py

@@ -0,0 +1,24 @@
+from sqlalchemy import Column, String, DateTime, ForeignKey
+from sqlalchemy.dialects.postgresql import UUID
+from datetime import datetime
+import uuid
+from app.db import Base
+
+class User(Base):
+    __tablename__ = "users"
+
+    id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    full_name = Column(String, nullable=False)
+    email = Column(String, unique=True, nullable=False, index=True)
+    password_hash = Column(String, nullable=False)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    last_login_at = Column(DateTime, nullable=True)
+
+class LoginEvent(Base):
+    __tablename__ = "login_events"
+
+    id = Column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    user_id = Column(UUID(as_uuid=True), ForeignKey("users.id"), nullable=False)
+    ip = Column(String, nullable=True)
+    user_agent = Column(String, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)

backend/app/routes/auth.py

@@ -0,0 +1,94 @@
+from fastapi import APIRouter, Depends, HTTPException, Request
+from fastapi.security import HTTPBearer, HTTPAuthorizationCredentials
+from sqlalchemy.ext.asyncio import AsyncSession
+from sqlalchemy import select
+from datetime import datetime
+from app.db import get_db
+from app.models import User, LoginEvent
+from app.schemas import UserCreate, UserLogin, TokenResponse, UserResponse
+from app.security import hash_password, verify_password, create_access_token, decode_access_token
+
+router = APIRouter(prefix="/auth", tags=["auth"])
+security = HTTPBearer()
+
+@router.post("/signup", response_model=TokenResponse)
+async def signup(user_data: UserCreate, db: AsyncSession = Depends(get_db)):
+    result = await db.execute(select(User).where(User.email == user_data.email))
+    existing_user = result.scalar_one_or_none()
+    
+    if existing_user:
+        raise HTTPException(status_code=400, detail="Email already registered")
+    
+    new_user = User(
+        full_name=user_data.full_name,
+        email=user_data.email,
+        password_hash=hash_password(user_data.password)
+    )
+    
+    db.add(new_user)
+    await db.commit()
+    await db.refresh(new_user)
+    
+    access_token = create_access_token({"sub": str(new_user.id)})
+    
+    return TokenResponse(
+        access_token=access_token,
+        user=UserResponse.model_validate(new_user)
+    )
+
+@router.post("/login", response_model=TokenResponse)
+async def login(
+    login_data: UserLogin,
+    request: Request,
+    db: AsyncSession = Depends(get_db)
+):
+    result = await db.execute(select(User).where(User.email == login_data.email))
+    user = result.scalar_one_or_none()
+    
+    if not user or not verify_password(login_data.password, user.password_hash):
+        raise HTTPException(status_code=401, detail="Invalid email or password")
+    
+    user.last_login_at = datetime.utcnow()
+    
+    login_event = LoginEvent(
+        user_id=user.id,
+        ip=request.client.host if request.client else None,
+        user_agent=request.headers.get("user-agent")
+    )
+    db.add(login_event)
+    
+    await db.commit()
+    await db.refresh(user)
+    
+    access_token = create_access_token({"sub": str(user.id)})
+    
+    return TokenResponse(
+        access_token=access_token,
+        user=UserResponse.model_validate(user)
+    )
+
+async def get_current_user(
+    credentials: HTTPAuthorizationCredentials = Depends(security),
+    db: AsyncSession = Depends(get_db)
+) -> User:
+    token = credentials.credentials
+    payload = decode_access_token(token)
+    
+    if not payload:
+        raise HTTPException(status_code=401, detail="Invalid or expired token")
+    
+    user_id = payload.get("sub")
+    if not user_id:
+        raise HTTPException(status_code=401, detail="Invalid token payload")
+    
+    result = await db.execute(select(User).where(User.id == user_id))
+    user = result.scalar_one_or_none()
+    
+    if not user:
+        raise HTTPException(status_code=401, detail="User not found")
+    
+    return user
+
+@router.get("/me", response_model=UserResponse)
+async def get_me(current_user: User = Depends(get_current_user)):
+    return UserResponse.model_validate(current_user)

backend/app/schemas.py

@@ -0,0 +1,25 @@
+from pydantic import BaseModel, EmailStr
+from datetime import datetime
+from uuid import UUID
+
+class UserBase(BaseModel):
+    email: EmailStr
+    full_name: str
+
+class UserCreate(UserBase):
+    password: str
+
+class UserLogin(BaseModel):
+    email: EmailStr
+    password: str
+
+class UserResponse(UserBase):
+    id: UUID
+    created_at: datetime
+
+    class Config:
+        from_attributes = True
+
+class TokenResponse(BaseModel):
+    access_token: str
+    user: UserResponse

backend/app/security.py

@@ -0,0 +1,25 @@
+from passlib.context import CryptContext
+from jose import jwt, JWTError
+from datetime import datetime, timedelta
+from app.settings import settings
+
+pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
+
+def hash_password(password: str) -> str:
+    return pwd_context.hash(password)
+
+def verify_password(plain_password: str, hashed_password: str) -> bool:
+    return pwd_context.verify(plain_password, hashed_password)
+
+def create_access_token(data: dict) -> str:
+    to_encode = data.copy()
+    expire = datetime.utcnow() + timedelta(minutes=settings.access_token_expire_minutes)
+    to_encode.update({"exp": expire})
+    return jwt.encode(to_encode, settings.jwt_secret, algorithm=settings.jwt_algorithm)
+
+def decode_access_token(token: str) -> dict:
+    try:
+        payload = jwt.decode(token, settings.jwt_secret, algorithms=[settings.jwt_algorithm])
+        return payload
+    except JWTError:
+        return None

backend/app/settings.py

@@ -0,0 +1,13 @@
+from pydantic_settings import BaseSettings
+
+class Settings(BaseSettings):
+    database_url: str
+    jwt_secret: str
+    frontend_origin: str = "http://localhost:5173"
+    jwt_algorithm: str = "HS256"
+    access_token_expire_minutes: int = 10080
+
+    class Config:
+        env_file = ".env"
+
+settings = Settings()

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.115.0
+uvicorn[standard]==0.31.0
+sqlalchemy==2.0.35
+asyncpg==0.29.0
+passlib[bcrypt]==1.7.4
+python-jose[cryptography]==3.3.0
+python-multipart==0.0.12
+pydantic-settings==2.6.0
+python-dotenv==1.0.1

backend/start.bat

@@ -0,0 +1,29 @@
+@echo off
+echo Starting Co-Code GGW Backend...
+echo.
+
+if not exist venv (
+    echo Creating virtual environment...
+    python -m venv venv
+    echo.
+)
+
+echo Activating virtual environment...
+call venv\Scripts\activate
+echo.
+
+if not exist app\__pycache__ (
+    echo Installing dependencies...
+    pip install -r requirements.txt
+    echo.
+)
+
+if not exist .env (
+    echo ERROR: .env file not found!
+    echo Please copy .env.example to .env and configure your database settings.
+    pause
+    exit /b 1
+)
+
+echo Starting FastAPI server...
+uvicorn app.main:app --reload --port 8000

frontend/package-lock.json

@@ -8,13 +8,15 @@
       "name": "co-code-ggw",
       "version": "1.0.0",
       "dependencies": {
+        "axios": "^1.13.4",
         "framer-motion": "^12.29.2",
         "gsap": "^3.14.2",
         "i18next": "^25.8.0",
         "i18next-browser-languagedetector": "^8.2.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-i18next": "^16.5.4"
+        "react-i18next": "^16.5.4",
+        "react-router-dom": "^7.13.0"
       },
       "devDependencies": {
         "@types/react": "^18.2.0",
@@ -1214,6 +1216,23 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.4.tgz",
+      "integrity": "sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.9.18",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.18.tgz",
@@ -1258,6 +1277,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001766",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
@@ -1279,6 +1311,18 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1286,6 +1330,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1311,6 +1368,29 @@
         }
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.279",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.279.tgz",
@@ -1318,6 +1398,51 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1367,6 +1492,42 @@
         "node": ">=6"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.29.2",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.29.2.tgz",
@@ -1409,6 +1570,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -1419,12 +1589,100 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gsap": {
       "version": "3.14.2",
       "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.14.2.tgz",
       "integrity": "sha512-P8/mMxVLU7o4+55+1TCnQrPmgjPKnwkzkXOK1asnR9Jg2lna4tEY5qBJjMmAaOBDDZWtlRjBXjLa0w53G/uBLA==",
       "license": "Standard 'no charge' license: https://gsap.com/standard-license."
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/html-parse-stringify": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
@@ -1528,6 +1786,36 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/motion-dom": {
       "version": "12.29.2",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.29.2.tgz",
@@ -1612,6 +1900,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -1674,6 +1968,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.13.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
+      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "license": "MIT",
+      "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.13.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
+      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.13.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.57.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.0.tgz",
@@ -1738,6 +2070,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",

frontend/package.json

@@ -9,13 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.13.4",
     "framer-motion": "^12.29.2",
     "gsap": "^3.14.2",
     "i18next": "^25.8.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^16.5.4"
+    "react-i18next": "^16.5.4",
+    "react-router-dom": "^7.13.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

frontend/src/App.tsx

@@ -1,27 +1,18 @@
-import Header from './components/Header'
-import Hero from './components/Hero'
-import ServicesSection from './components/ServicesSection'
-import HowWeCanHelp from './components/HowWeCanHelp'
-import BeliefStatement from './components/BeliefStatement'
-import Testimonials from './components/Testimonials'
-import ArtOfNaturalRemedies from './components/ArtOfNaturalRemedies'
-import Footer from './components/Footer'
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
+import HomePage from './pages/HomePage'
+import Login from './pages/Login'
+import Signup from './pages/Signup'
 import './App.css'
 
 function App() {
   return (
-    <div className="app">
-      <Header />
-      <main>
-        <Hero />
-        <ServicesSection />
-        <HowWeCanHelp />
-        <BeliefStatement />
-        <Testimonials />
-        <ArtOfNaturalRemedies />
-      </main>
-      <Footer />
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<Signup />} />
+      </Routes>
+    </Router>
   )
 }
 

frontend/src/components/AuthShell.css

@@ -0,0 +1,184 @@
+.auth-shell {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f1e8 0%, #e8e0d5 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.auth-container {
+  width: 100%;
+  max-width: 480px;
+}
+
+.auth-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.auth-logo {
+  display: inline-flex;
+  flex-direction: column;
+  text-decoration: none;
+  color: #2d3e2f;
+}
+
+.logo-main {
+  font-family: 'DM Serif Display', serif;
+  font-size: 2rem;
+  font-weight: 400;
+  letter-spacing: 0.02em;
+}
+
+.logo-sub {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.875rem;
+  letter-spacing: 0.15em;
+  opacity: 0.7;
+  margin-top: -0.25rem;
+}
+
+.auth-card {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 24px;
+  padding: 3rem 2.5rem;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+  backdrop-filter: blur(10px);
+}
+
+.auth-title {
+  font-family: 'DM Serif Display', serif;
+  font-size: 2rem;
+  font-weight: 400;
+  color: #2d3e2f;
+  margin: 0 0 0.5rem 0;
+  text-align: center;
+}
+
+.auth-subtitle {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9375rem;
+  color: #6b7b6d;
+  margin: 0 0 2rem 0;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-label {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #2d3e2f;
+  letter-spacing: 0.01em;
+}
+
+.form-input {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9375rem;
+  padding: 0.875rem 1rem;
+  border: 1.5px solid #d8d0c4;
+  border-radius: 12px;
+  background: #ffffff;
+  color: #2d3e2f;
+  transition: all 0.3s ease;
+  outline: none;
+}
+
+.form-input:focus {
+  border-color: #7ba88a;
+  box-shadow: 0 0 0 3px rgba(123, 168, 138, 0.1);
+}
+
+.form-input::placeholder {
+  color: #a8b5aa;
+}
+
+.form-error {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.8125rem;
+  color: #d64545;
+  margin-top: -0.5rem;
+  padding-left: 0.25rem;
+}
+
+.auth-button {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  padding: 1rem 2rem;
+  background: linear-gradient(135deg, #7ba88a 0%, #5d8a6f 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 0.5rem;
+  letter-spacing: 0.02em;
+}
+
+.auth-button:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(123, 168, 138, 0.3);
+}
+
+.auth-button:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.auth-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.auth-footer {
+  margin-top: 2rem;
+  padding-top: 2rem;
+  border-top: 1px solid #e8e0d5;
+  text-align: center;
+}
+
+.auth-footer p {
+  font-family: 'DM Sans', sans-serif;
+  font-size: 0.875rem;
+  color: #6b7b6d;
+  margin: 0;
+}
+
+.auth-link {
+  color: #7ba88a;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.auth-link:hover {
+  color: #5d8a6f;
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .auth-shell {
+    padding: 1rem;
+  }
+
+  .auth-card {
+    padding: 2rem 1.5rem;
+  }
+
+  .auth-title {
+    font-size: 1.75rem;
+  }
+}

frontend/src/components/AuthShell.jsx

@@ -0,0 +1,46 @@
+import { motion } from 'framer-motion'
+import { Link } from 'react-router-dom'
+import './AuthShell.css'
+
+function AuthShell({ children, title, subtitle, footerText, footerLink, footerLinkText }) {
+  return (
+    <div className="auth-shell">
+      <div className="auth-container">
+        <motion.div
+          className="auth-header"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <Link to="/" className="auth-logo">
+            <span className="logo-main">Co-Code</span>
+            <span className="logo-sub">GGW</span>
+          </Link>
+        </motion.div>
+
+        <motion.div
+          className="auth-card"
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+        >
+          <h1 className="auth-title">{title}</h1>
+          <p className="auth-subtitle">{subtitle}</p>
+          
+          {children}
+
+          <div className="auth-footer">
+            <p>
+              {footerText}{' '}
+              <Link to={footerLink} className="auth-link">
+                {footerLinkText}
+              </Link>
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default AuthShell

frontend/src/components/AuthShell.tsx

@@ -0,0 +1,56 @@
+import { motion } from 'framer-motion'
+import { Link } from 'react-router-dom'
+import { ReactNode } from 'react'
+import './AuthShell.css'
+
+interface AuthShellProps {
+  children: ReactNode
+  title: string
+  subtitle: string
+  footerText: string
+  footerLink: string
+  footerLinkText: string
+}
+
+function AuthShell({ children, title, subtitle, footerText, footerLink, footerLinkText }: AuthShellProps) {
+  return (
+    <div className="auth-shell">
+      <div className="auth-container">
+        <motion.div
+          className="auth-header"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <Link to="/" className="auth-logo">
+            <span className="logo-main">Co-Code</span>
+            <span className="logo-sub">GGW</span>
+          </Link>
+        </motion.div>
+
+        <motion.div
+          className="auth-card"
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+        >
+          <h1 className="auth-title">{title}</h1>
+          <p className="auth-subtitle">{subtitle}</p>
+          
+          {children}
+
+          <div className="auth-footer">
+            <p>
+              {footerText}{' '}
+              <Link to={footerLink} className="auth-link">
+                {footerLinkText}
+              </Link>
+            </p>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
+export default AuthShell

frontend/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 import LanguageSwitcher from './LanguageSwitcher'
 import './Header.css'
 
@@ -63,15 +64,15 @@ function Header() {
           transition={{ delay: 0.5, duration: 0.6 }}
         >
           <LanguageSwitcher />
-          <motion.a 
-            href="#" 
-            className="book-session-btn"
+          <motion.div
             whileHover={{ scale: 1.08, boxShadow: '0 8px 25px rgba(74, 124, 89, 0.3)' }}
             whileTap={{ scale: 0.95 }}
             transition={{ type: 'spring', stiffness: 400, damping: 10 }}
           >
-            {t('header.cta')}
-          </motion.a>
+            <Link to="/login" className="book-session-btn">
+              {t('header.cta')}
+            </Link>
+          </motion.div>
         </motion.div>
       </div>
     </motion.header>

frontend/src/components/Hero.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react'
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
 import gsap from 'gsap'
 import './Hero.css'
 
@@ -95,32 +96,32 @@ function Hero() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 1.3, duration: 0.8 }}
           >
-            <motion.a 
-              href="#" 
-              className="btn-primary"
+            <motion.div
               whileHover={{ scale: 1.1, y: -3, boxShadow: '0 10px 30px rgba(74, 124, 89, 0.4)' }}
               whileTap={{ scale: 0.95 }}
               transition={{ type: 'spring', stiffness: 400, damping: 10 }}
             >
-              {t('hero.cta.upload')}
-            </motion.a>
-            <motion.a 
-              href="#" 
-              className="btn-secondary"
+              <Link to="/login" className="btn-primary">
+                {t('hero.cta.upload')}
+              </Link>
+            </motion.div>
+            <motion.div
               whileHover={{ scale: 1.05, x: 10 }}
               whileTap={{ scale: 0.95 }}
             >
-              <motion.span 
-                className="btn-icon"
-                whileHover={{ rotate: 90 }}
-                transition={{ type: 'spring', stiffness: 300 }}
-              >
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M6 1L11 6M11 6L6 11M11 6H1" stroke="#2d2d2d" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                </svg>
-              </motion.span>
-              {t('hero.cta.howItWorks')}
-            </motion.a>
+              <Link to="/login" className="btn-secondary">
+                <motion.span 
+                  className="btn-icon"
+                  whileHover={{ rotate: 90 }}
+                  transition={{ type: 'spring', stiffness: 300 }}
+                >
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6 1L11 6M11 6L6 11M11 6H1" stroke="#2d2d2d" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                </motion.span>
+                {t('hero.cta.howItWorks')}
+              </Link>
+            </motion.div>
           </motion.div>
         </motion.div>
         <div className="hero-images">

frontend/src/pages/HomePage.tsx

@@ -0,0 +1,27 @@
+import Header from '../components/Header'
+import Hero from '../components/Hero'
+import ServicesSection from '../components/ServicesSection'
+import HowWeCanHelp from '../components/HowWeCanHelp'
+import BeliefStatement from '../components/BeliefStatement'
+import Testimonials from '../components/Testimonials'
+import ArtOfNaturalRemedies from '../components/ArtOfNaturalRemedies'
+import Footer from '../components/Footer'
+
+function HomePage() {
+  return (
+    <div className="app">
+      <Header />
+      <main>
+        <Hero />
+        <ServicesSection />
+        <HowWeCanHelp />
+        <BeliefStatement />
+        <Testimonials />
+        <ArtOfNaturalRemedies />
+      </main>
+      <Footer />
+    </div>
+  )
+}
+
+export default HomePage

frontend/src/pages/Login.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import AuthShell from '../components/AuthShell'
+import { login } from '../services/auth'
+
+function Login() {
+  const navigate = useNavigate()
+  const [formData, setFormData] = useState({
+    email: '',
+    password: ''
+  })
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+    setError('')
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      const data = await login(formData.email, formData.password)
+      localStorage.setItem('access_token', data.access_token)
+      navigate('/')
+    } catch (err) {
+      setError(err.response?.data?.detail || 'Login failed. Please check your credentials.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <AuthShell
+      title="Welcome Back"
+      subtitle="Sign in to continue your health journey"
+      footerText="Don't have an account?"
+      footerLink="/signup"
+      footerLinkText="Sign up"
+    >
+      <form onSubmit={handleSubmit} className="auth-form">
+        <div className="form-group">
+          <label htmlFor="email" className="form-label">
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            value={formData.email}
+            onChange={handleChange}
+            className="form-input"
+            placeholder="you@example.com"
+            disabled={loading}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="password" className="form-label">
+            Password
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            value={formData.password}
+            onChange={handleChange}
+            className="form-input"
+            placeholder="Enter your password"
+            disabled={loading}
+          />
+        </div>
+
+        {error && <div className="form-error">{error}</div>}
+
+        <button type="submit" className="auth-button" disabled={loading}>
+          {loading ? 'Signing in...' : 'Sign In'}
+        </button>
+      </form>
+    </AuthShell>
+  )
+}
+
+export default Login

frontend/src/pages/Signup.tsx

@@ -0,0 +1,111 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import AuthShell from '../components/AuthShell'
+import { signup } from '../services/auth'
+
+function Signup() {
+  const navigate = useNavigate()
+  const [formData, setFormData] = useState({
+    fullName: '',
+    email: '',
+    password: ''
+  })
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+    setError('')
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+
+    try {
+      const data = await signup(formData.fullName, formData.email, formData.password)
+      localStorage.setItem('access_token', data.access_token)
+      navigate('/')
+    } catch (err) {
+      setError(err.response?.data?.detail || 'Signup failed. Please try again.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <AuthShell
+      title="Create Account"
+      subtitle="Start your preventive health journey today"
+      footerText="Already have an account?"
+      footerLink="/login"
+      footerLinkText="Sign in"
+    >
+      <form onSubmit={handleSubmit} className="auth-form">
+        <div className="form-group">
+          <label htmlFor="fullName" className="form-label">
+            Full Name
+          </label>
+          <input
+            id="fullName"
+            name="fullName"
+            type="text"
+            required
+            value={formData.fullName}
+            onChange={handleChange}
+            className="form-input"
+            placeholder="John Doe"
+            disabled={loading}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="email" className="form-label">
+            Email
+          </label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            required
+            value={formData.email}
+            onChange={handleChange}
+            className="form-input"
+            placeholder="you@example.com"
+            disabled={loading}
+          />
+        </div>
+
+        <div className="form-group">
+          <label htmlFor="password" className="form-label">
+            Password
+          </label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            required
+            minLength={8}
+            value={formData.password}
+            onChange={handleChange}
+            className="form-input"
+            placeholder="At least 8 characters"
+            disabled={loading}
+          />
+        </div>
+
+        {error && <div className="form-error">{error}</div>}
+
+        <button type="submit" className="auth-button" disabled={loading}>
+          {loading ? 'Creating account...' : 'Create Account'}
+        </button>
+      </form>
+    </AuthShell>
+  )
+}
+
+export default Signup

frontend/src/services/auth.js

@@ -0,0 +1,44 @@
+import axios from 'axios'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+const api = axios.create({
+  baseURL: API_URL,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+api.interceptors.request.use(config => {
+  const token = localStorage.getItem('access_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+export const signup = async (fullName, email, password) => {
+  const response = await api.post('/auth/signup', {
+    full_name: fullName,
+    email,
+    password
+  })
+  return response.data
+}
+
+export const login = async (email, password) => {
+  const response = await api.post('/auth/login', {
+    email,
+    password
+  })
+  return response.data
+}
+
+export const getMe = async () => {
+  const response = await api.get('/auth/me')
+  return response.data
+}
+
+export const logout = () => {
+  localStorage.removeItem('access_token')
+}

frontend/src/services/auth.ts

@@ -0,0 +1,68 @@
+import axios from 'axios'
+
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+const api = axios.create({
+  baseURL: API_URL,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+})
+
+api.interceptors.request.use(config => {
+  const token = localStorage.getItem('access_token')
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`
+  }
+  return config
+})
+
+interface SignupResponse {
+  access_token: string
+  user: {
+    id: string
+    email: string
+    full_name: string
+  }
+}
+
+interface LoginResponse {
+  access_token: string
+  user: {
+    id: string
+    email: string
+    full_name: string
+  }
+}
+
+interface MeResponse {
+  id: string
+  email: string
+  full_name: string
+}
+
+export const signup = async (fullName: string, email: string, password: string): Promise<SignupResponse> => {
+  const response = await api.post<SignupResponse>('/auth/signup', {
+    full_name: fullName,
+    email,
+    password
+  })
+  return response.data
+}
+
+export const login = async (email: string, password: string): Promise<LoginResponse> => {
+  const response = await api.post<LoginResponse>('/auth/login', {
+    email,
+    password
+  })
+  return response.data
+}
+
+export const getMe = async (): Promise<MeResponse> => {
+  const response = await api.get<MeResponse>('/auth/me')
+  return response.data
+}
+
+export const logout = () => {
+  localStorage.removeItem('access_token')
+}