Merge pull request 'feature/frontend-login' (#10) from feature/frontend-login into master

Reviewed-on: #10

.github/workflows/test.yml

@@ -67,6 +67,34 @@ jobs:
       - name: Check code formatting
         run: cargo fmt --all -- --check
 
+  lint-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: 'pnpm'
+          cache-dependency-path: apps/frontend/pnpm-lock.yaml
+
+      - name: Install frontend dependencies
+        run: |
+          cd apps/frontend
+          pnpm install
+      
+      - name: Run frontend linter
+        run: |
+          cd apps/frontend
+          pnpm lint
+
   test-frontend:
     runs-on: ubuntu-latest
     steps:

Cargo.lock

@@ -3975,6 +3975,20 @@ dependencies = [
  "tracing",
 ]
 
+[[package]]
+name = "tower-http"
+version = "0.6.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4e6559d53cc268e5031cd8429d05415bc4cb4aefc4aa5d6cc35fbf5b924a1f8"
+dependencies = [
+ "bitflags 2.10.0",
+ "bytes",
+ "http",
+ "pin-project-lite",
+ "tower-layer",
+ "tower-service",
+]
+
 [[package]]
 name = "tower-layer"
 version = "0.3.3"
@@ -4713,6 +4727,7 @@ dependencies = [
  "serde_json",
  "tokio",
  "tower",
+ "tower-http",
  "tracing",
  "tracing-subscriber",
  "utoipa",

apps/api/Cargo.toml

@@ -27,4 +27,5 @@ once_cell = { version = "1.21.3" }
 argon2 = { version = "0.5.3", features = ["std"] }
 jsonwebtoken = { version = "10.2.0", features = ["rust_crypto"] }
 uuid = { version = "1.19.0", features = ["v4", "serde", "fast-rng"] }
+tower-http = { version = "0.6.8", features = ["cors"] }
 

apps/api/src/cmd/start_server.rs

@@ -88,8 +88,10 @@ pub async fn start_server() {
 
     // build the axum app and run the server...
     info!("Starting application...");
-    let mut app: Router =
+    let mut app: Router = routes::get_root_router(
-        routes::get_root_router(Arc::new(get_app_state(&db_connection, &settings)));
+        Arc::new(get_app_state(&db_connection, &settings)),
+        Arc::new(settings.server.cors.clone()),
+    );
 
     if settings.server.serve_openapi {
         info!("Enabling OpenAPI documentation endpoint at /openapi.json");
@@ -145,6 +147,7 @@ fn get_app_state(
 ) -> AppState {
     AppState {
         database_connection: db_connection.clone(),
+        config: Arc::new(settings.clone()),
         service: Arc::new(AppService {
             server_state: Arc::new(ServerStateService::new(db_connection.clone())),
             settings: Arc::new(SettingsService::new(db_connection.clone())),

apps/api/src/configs.rs

@@ -11,6 +11,8 @@ use tracing::{debug, error};
 pub trait FromConfig: Sized {
     fn from_config(config: &Config) -> Result<Self, String>;
     fn validate(&self) -> Result<(), String>;
+    #[cfg(test)]
+    fn mock() -> Self;
 }
 
 #[derive(Debug, Clone)]
@@ -40,6 +42,16 @@ impl FromConfig for ProgramSettings {
         self.auth.validate()?;
         Ok(())
     }
+
+    #[cfg(test)]
+    fn mock() -> Self {
+        ProgramSettings {
+            logging: logging::LoggingSettings::mock(),
+            database: database::DatabaseSettings::mock(),
+            server: server::ServerSettings::mock(),
+            auth: auth::AuthSettings::mock(),
+        }
+    }
 }
 
 pub fn get_program_settings() -> ProgramSettings {

apps/api/src/configs/auth.rs

@@ -48,4 +48,13 @@ impl FromConfig for AuthSettings {
     fn validate(&self) -> Result<(), String> {
         Ok(())
     }
+
+    #[cfg(test)]
+    fn mock() -> Self {
+        AuthSettings {
+            jwt_secret: Some("mock_jwt_secret".to_string()),
+            default_admin_username: Some("admin".to_string()),
+            default_admin_password: Some("password".to_string()),
+        }
+    }
 }

apps/api/src/configs/database.rs

@@ -50,4 +50,13 @@ impl FromConfig for DatabaseSettings {
     fn validate(&self) -> Result<(), String> {
         Ok(())
     }
+
+    #[cfg(test)]
+    fn mock() -> Self {
+        DatabaseSettings {
+            url: "sqlite::memory:".to_string(),
+            max_connections: 5,
+            migrate_on_startup: true,
+        }
+    }
 }

apps/api/src/configs/key.rs

@@ -4,6 +4,8 @@ pub(crate) const LOGGING_UTC_KEY: &str = "LOGGING.UTC";
 pub(crate) const SERVER_ADDRESS_KEY: &str = "SERVER.ADDRESS";
 pub(crate) const SERVER_PORT_KEY: &str = "SERVER.PORT";
 pub(crate) const SERVER_SERVE_OPENAPI_KEY: &str = "SERVER.SERVE_OPENAPI";
+pub(crate) const SERVER_CORS_ALLOWED_ORIGINS_KEY: &str = "SERVER.CORS.ALLOWED_ORIGINS";
+pub(crate) const SERVER_COOKIES_SECURE_KEY: &str = "SERVER.COOKIES.SECURE";
 //
 pub(crate) const DATABASE_URL_KEY: &str = "DATABASE.URL";
 pub(crate) const DATABASE_MAX_CONNECTIONS_KEY: &str = "DATABASE.MAX_CONNECTIONS";

apps/api/src/configs/logging.rs

@@ -49,4 +49,12 @@ impl FromConfig for LoggingSettings {
     fn validate(&self) -> Result<(), String> {
         Ok(())
     }
+
+    #[cfg(test)]
+    fn mock() -> Self {
+        LoggingSettings {
+            level: Level::INFO,
+            utc: false,
+        }
+    }
 }

apps/api/src/configs/server.rs

@@ -3,7 +3,9 @@ use std::net::IpAddr;
 use config::{Config, ConfigError};
 use tracing::warn;
 
-use crate::configs::key::SERVER_SERVE_OPENAPI_KEY;
+use crate::configs::key::{
+    SERVER_COOKIES_SECURE_KEY, SERVER_CORS_ALLOWED_ORIGINS_KEY, SERVER_SERVE_OPENAPI_KEY,
+};
 
 use super::{
     FromConfig,
@@ -15,6 +17,18 @@ pub struct ServerSettings {
     pub address: IpAddr,
     pub port: u16,
     pub serve_openapi: bool,
+    pub cors: CORSSettings,
+    pub cookies: CookiesSettings,
+}
+
+#[derive(Debug, Clone)]
+pub struct CORSSettings {
+    pub allowed_origins: Vec<String>,
+}
+
+#[derive(Debug, Clone)]
+pub struct CookiesSettings {
+    pub secure: bool,
 }
 
 impl FromConfig for ServerSettings {
@@ -57,6 +71,42 @@ impl FromConfig for ServerSettings {
                     );
                     DEFAULT_SERVE_OPENAPI
                 }),
+
+            cors: CORSSettings {
+                allowed_origins: _config
+                    .get_array(SERVER_CORS_ALLOWED_ORIGINS_KEY)
+                    .unwrap_or_else(|_| vec![])
+                    .into_iter()
+                    .filter_map(|val| match val.into_string() {
+                        Ok(s) => Some(s),
+                        Err(e) => {
+                            warn!(
+                                "Invalid origin in {} configuration: {}",
+                                SERVER_CORS_ALLOWED_ORIGINS_KEY, e
+                            );
+                            None
+                        }
+                    })
+                    .collect(),
+            },
+
+            cookies: CookiesSettings {
+                secure: _config
+                    .get_bool(SERVER_COOKIES_SECURE_KEY)
+                    .inspect(|is_secure| {
+                        if !*is_secure {
+                            warn!("Cookie 'secure' flag is disabled; this is not recommended in production environments.");
+                        }
+                    })
+                    .unwrap_or_else(|err| {
+                        const DEFAULT_COOKIES_SECURE: bool = true;
+                        warn!(
+                            "{} not set or invalid in configuration, defaulting to {}. Error: {}",
+                            SERVER_COOKIES_SECURE_KEY, DEFAULT_COOKIES_SECURE, err
+                        );
+                        DEFAULT_COOKIES_SECURE
+                    }),
+            },
         })
     }
 
@@ -67,4 +117,17 @@ impl FromConfig for ServerSettings {
         }
         Ok(())
     }
+
+    #[cfg(test)]
+    fn mock() -> Self {
+        ServerSettings {
+            address: "0.0.0.0".parse().unwrap(),
+            port: 8080,
+            serve_openapi: false,
+            cors: CORSSettings {
+                allowed_origins: vec![],
+            },
+            cookies: CookiesSettings { secure: true },
+        }
+    }
 }

apps/api/src/middlewares.rs

@@ -6,25 +6,55 @@ use std::{sync::Arc, time::Duration};
 use axum::{
     BoxError, Router,
     error_handling::HandleErrorLayer,
-    http::{Method, StatusCode, Uri},
+    http::{HeaderValue, Method, StatusCode, Uri},
 };
 use tower::{ServiceBuilder, timeout::TimeoutLayer};
+use tower_http::cors::{AllowHeaders, AllowOrigin, CorsLayer};
 use tracing::warn;
 
-use crate::routes::AppState;
+use crate::{configs::server::CORSSettings, routes::AppState};
 
 pub const TIMEOUT_DURATION_SECS: u64 = 30;
 
-pub fn apply_root_middleware(router: Router, _state: Arc<AppState>) -> Router {
+pub fn apply_root_middleware(
+    router: Router,
+    _state: Arc<AppState>,
+    cors_settings: Arc<CORSSettings>,
+) -> Router {
     let timeout_layer = TimeoutLayer::new(Duration::from_secs(TIMEOUT_DURATION_SECS));
 
     let service_builder = ServiceBuilder::new()
         .layer(HandleErrorLayer::new(handle_timeout_error))
-        .layer(timeout_layer);
+        .layer(timeout_layer)
+        .layer(get_cors_layer(cors_settings));
 
     router.layer(service_builder)
 }
 
+pub fn get_cors_layer(cors_settings: Arc<CORSSettings>) -> CorsLayer {
+    let mut cors_layer = CorsLayer::new()
+        .allow_credentials(true)
+        .allow_headers(AllowHeaders::mirror_request());
+
+    let allowed_origins = &cors_settings.allowed_origins;
+    if allowed_origins.contains(&"*".to_string()) {
+        cors_layer = cors_layer.allow_origin(AllowOrigin::mirror_request());
+        warn!(
+            "Wildcard origin is found in allowed origins. CORS is configured to allow requests from any origin. Only use this setting in development or if you understand the security implications."
+        );
+    } else {
+        for origin in allowed_origins {
+            if let Ok(header_value) = HeaderValue::from_str(origin) {
+                cors_layer = cors_layer.allow_origin(AllowOrigin::exact(header_value));
+            } else {
+                warn!("Invalid CORS origin: {}", origin);
+            }
+        }
+    }
+
+    cors_layer
+}
+
 pub async fn handle_timeout_error(
     method: Method,
     uri: Uri,

apps/api/src/middlewares/require_auth.rs

@@ -7,6 +7,7 @@ use axum::{
     response::Response,
 };
 use axum_extra::extract::cookie::CookieJar;
+use tracing::debug;
 use uuid::Uuid;
 
 use crate::{
@@ -25,6 +26,7 @@ pub async fn require_auth(
     let token = if let Some(cookie) = cookies.get(JWT_COOKIE_NAME) {
         cookie.value().to_string()
     } else {
+        debug!("No JWT cookie found. cookies: {:?}", cookies);
         return handle_unauthenticated().await;
     };
 

apps/api/src/routes.rs

@@ -9,6 +9,7 @@ use axum::{Extension, Router};
 use migration::sea_orm::DatabaseConnection;
 
 use crate::{
+    configs::{ProgramSettings, server::CORSSettings},
     middlewares,
     services::{
         auth::{
@@ -22,10 +23,9 @@ use crate::{
 
 #[derive(Clone)]
 pub struct AppState {
-    #[allow(dead_code)]
     pub database_connection: Arc<DatabaseConnection>,
-    #[allow(dead_code)]
     pub service: Arc<AppService>,
+    pub config: Arc<ProgramSettings>,
 }
 
 pub type ServiceState<T> = Arc<T>;
@@ -46,7 +46,10 @@ pub struct AppService {
     pub server_state: ServiceState<dyn ServerStateStore>,
 }
 
-pub fn get_root_router(state: impl Into<Arc<AppState>>) -> Router {
+pub fn get_root_router(
+    state: impl Into<Arc<AppState>>,
+    cors_settings: Arc<CORSSettings>,
+) -> Router {
     let mut router = Router::new();
     let state = state.into();
 
@@ -54,7 +57,7 @@ pub fn get_root_router(state: impl Into<Arc<AppState>>) -> Router {
         .nest("/api", api::get_api_router(state.clone()))
         .merge(view::get_view_router());
 
-    router = middlewares::apply_root_middleware(router, state.clone());
+    router = middlewares::apply_root_middleware(router, state.clone(), cors_settings);
 
     router = router.layer(Extension(state.clone()));
 

apps/api/src/routes/api/auth/login.rs

@@ -11,7 +11,10 @@ use serde::{Deserialize, Serialize};
 use serde_json::{Value, from_value};
 use tracing::{error, warn};
 
-use crate::routes::{AppState, api::openapi::tag::AUTH_TAG};
+use crate::{
+    helpers::constants::JWT_COOKIE_NAME,
+    routes::{AppState, api::openapi::tag::AUTH_TAG},
+};
 
 /// Login request payload
 #[derive(Serialize, Deserialize, utoipa::ToSchema)]
@@ -81,9 +84,15 @@ pub async fn login(State(state): State<Arc<AppState>>, Json(payload): Json<Value
         .header(
             SET_COOKIE,
             format!(
-                "token={}; HttpOnly; Path=/; Max-Age={}; SameSite=Strict;",
+                "{}={}; HttpOnly; Path=/; Max-Age={}; SameSite=Strict;{}",
+                JWT_COOKIE_NAME,
                 jwt,
-                claims.exp - claims.iat
+                claims.exp - claims.iat,
+                if state.config.server.cookies.secure {
+                    " Secure;"
+                } else {
+                    ""
+                }
             ),
         )
         .body(Body::from(()));

apps/api/src/routes/api/health/info.rs

@@ -78,6 +78,7 @@ pub async fn get_health_info(
 
 #[cfg(test)]
 mod test {
+    use crate::configs::FromConfig;
     use crate::{
         routes::{AppState, api::health::state::HealthState},
         services::{
@@ -112,6 +113,7 @@ mod test {
 
         let app_state = Arc::new(AppState {
             database_connection: db.clone(),
+            config: Arc::new(crate::configs::ProgramSettings::mock()),
             service: Arc::new(crate::routes::AppService {
                 settings: Arc::new(SettingsService::new(db.clone())),
                 auth_state: crate::routes::AuthState {

apps/api/src/routes/api/openapi.rs

@@ -2,6 +2,7 @@ pub mod tag {
     /// Health tag constant
     pub const HEALTH_TAG: &str = "Health";
     pub const AUTH_TAG: &str = "Authentication";
+    pub const USER_TAG: &str = "User";
 }
 
 #[derive(utoipa::OpenApi)]
@@ -11,16 +12,21 @@ pub mod tag {
     // Authentication paths
     crate::routes::api::auth::login::login,
     crate::routes::api::auth::init_admin::init_admin,
+    // User management paths
+    crate::routes::api::restricted::user::me::get_user_info,
   ),
   components(
       schemas(crate::routes::api::health::info::HealthInfo),
       // Authentication schemas
       schemas(crate::routes::api::auth::login::LoginRequest),
       schemas(crate::routes::api::auth::init_admin::AdminInitRequest),
+      // User management schemas
+      schemas(crate::routes::api::restricted::user::me::UserInfo),
   ),
   tags(
       (name = tag::HEALTH_TAG, description = "Health information API"),
-      (name = tag::AUTH_TAG, description = "Authentication API")
+      (name = tag::AUTH_TAG, description = "Authentication API"),
+      (name = tag::USER_TAG, description = "User management API")
   )
 )]
 pub struct ApiDoc;

apps/api/src/routes/api/restricted.rs

@@ -1,3 +1,5 @@
+pub mod user;
+
 use std::sync::Arc;
 
 use axum::Router;
@@ -6,8 +8,7 @@ use crate::{middlewares::require_auth::require_auth, routes::AppState};
 
 pub fn get_restricted_router(state: Arc<AppState>) -> Router {
     Router::new()
-        //
+        .nest("/user", user::get_user_router(state.clone()))
-        //
         .layer(axum::middleware::from_fn_with_state(
             state.clone(),
             require_auth,

apps/api/src/routes/api/restricted/user.rs

@@ -0,0 +1,13 @@
+pub mod me;
+
+use std::sync::Arc;
+
+use axum::Router;
+
+use crate::routes::AppState;
+
+pub fn get_user_router(state: Arc<AppState>) -> Router {
+    Router::new()
+        .route("/me", axum::routing::get(me::get_user_info))
+        .with_state(state)
+}

apps/api/src/routes/api/restricted/user/me.rs

@@ -0,0 +1,64 @@
+use std::sync::Arc;
+
+use axum::{
+    Extension, Json,
+    extract::State,
+    http::StatusCode,
+    response::{IntoResponse, Response},
+};
+use serde::{Deserialize, Serialize};
+use tracing::error;
+
+use crate::{
+    middlewares::request_info::RequestInfo,
+    routes::{AppState, api::openapi::tag::USER_TAG},
+};
+
+/// System health information
+#[derive(Serialize, Deserialize, utoipa::ToSchema)]
+pub struct UserInfo {
+    /// User ID
+    pub id: uuid::Uuid,
+    /// Username
+    pub username: String,
+}
+
+/// Get current user information
+///
+/// Returns the information of the currently authenticated user.
+#[utoipa::path(
+        get,
+        path = "/api/user/me",
+        responses(
+            (status = 200, description = "User information retrieved successfully", body = UserInfo),
+            (status = 401, description = "Unauthorized"),
+            (status = 500, description = "Internal server error"),
+        ),
+        tag = USER_TAG,
+    )]
+pub async fn get_user_info(
+    State(app_state): State<Arc<AppState>>,
+    request_info: Extension<Arc<RequestInfo>>,
+) -> Response {
+    let user_id = match request_info.user_id {
+        Some(id) => id,
+        None => {
+            error!("User ID not found in request info");
+            return (StatusCode::UNAUTHORIZED).into_response();
+        }
+    };
+
+    match app_state.service.user.get_user_by_id(user_id, None).await {
+        Ok(user) => {
+            let user_info = UserInfo {
+                id: user.id,
+                username: user.username,
+            };
+            (StatusCode::OK, Json(user_info)).into_response()
+        }
+        Err(err) => {
+            error!("Error fetching user info: {}", err);
+            (StatusCode::INTERNAL_SERVER_ERROR).into_response()
+        }
+    }
+}

apps/api/src/services/auth/authentication.rs

@@ -5,7 +5,7 @@ use std::{collections::HashSet, sync::Arc};
 use argon2::password_hash::{SaltString, rand_core::OsRng};
 use jsonwebtoken::{
     DecodingKey, EncodingKey, Header, Validation, decode, encode,
-    errors::ErrorKind::{ExpiredSignature, InvalidSubject, InvalidToken},
+    errors::ErrorKind::{ExpiredSignature, InvalidSignature, InvalidSubject, InvalidToken},
 };
 use sea_orm::prelude::Uuid;
 use serde::{Deserialize, Serialize};
@@ -124,7 +124,7 @@ impl AuthenticationService for AuthenticationServiceImpl {
         match decode::<Claims>(token, &decoding_key, &validation) {
             Ok(data) => Ok(Some(data.claims)),
             Err(err) => match *err.kind() {
-                InvalidToken | InvalidSubject | ExpiredSignature => Ok(None),
+                InvalidToken | InvalidSubject | ExpiredSignature | InvalidSignature => Ok(None),
                 _ => Err(ServiceError::InternalError(format!(
                     "JWT validation error: {}",
                     err

apps/api/src/services/auth/user.rs

@@ -51,7 +51,6 @@ pub trait UserService: Send + Sync {
 
 pub struct User {
     pub id: Uuid,
-    #[allow(dead_code)] // TODO: remove when used
     pub username: String,
     #[allow(dead_code)] // TODO: remove when used
     pub is_admin: bool,

apps/api/src/services/settings.rs

@@ -11,14 +11,11 @@ use crate::errors::service_error::ServiceError;
 
 #[async_trait::async_trait]
 pub trait SettingsStore: Send + Sync {
-    #[allow(dead_code)] // TODO: remove when used
     async fn get_setting(&self, key: &str) -> Result<String, ServiceError>;
-    #[allow(dead_code)] // TODO: remove when used
     async fn set_setting(&self, key: &str, value: String) -> Result<(), ServiceError>;
 }
 
 pub struct SettingsService {
-    #[allow(dead_code)] // TODO: remove when used
     connection: Arc<DatabaseConnection>,
 }
 

apps/api/swagger.json

@@ -105,6 +105,34 @@
           }
         }
       }
+    },
+    "/api/user/me": {
+      "get": {
+        "tags": [
+          "User"
+        ],
+        "summary": "Get current user information",
+        "description": "Returns the information of the currently authenticated user.",
+        "operationId": "get_user_info",
+        "responses": {
+          "200": {
+            "description": "User information retrieved successfully",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/UserInfo"
+                }
+              }
+            }
+          },
+          "401": {
+            "description": "Unauthorized"
+          },
+          "500": {
+            "description": "Internal server error"
+          }
+        }
+      }
     }
   },
   "components": {
@@ -183,6 +211,25 @@
             "type": "string"
           }
         }
+      },
+      "UserInfo": {
+        "type": "object",
+        "description": "System health information",
+        "required": [
+          "id",
+          "username"
+        ],
+        "properties": {
+          "id": {
+            "type": "string",
+            "format": "uuid",
+            "description": "User ID"
+          },
+          "username": {
+            "type": "string",
+            "description": "Username"
+          }
+        }
       }
     }
   },
@@ -194,6 +241,10 @@
     {
       "name": "Authentication",
       "description": "Authentication API"
+    },
+    {
+      "name": "User",
+      "description": "User management API"
     }
   ]
 }

apps/frontend/app/app.css

@@ -1,15 +1,9 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html,
 body {
-  @apply bg-white dark:bg-gray-950;
-
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
-  }
 }

apps/frontend/app/components/Form/Button.tsx

@@ -0,0 +1,46 @@
+import { Button, type ButtonProps } from '@radix-ui/themes';
+import { LoaderCircle } from 'lucide-react';
+
+export type SubmitButtonProps = {
+  loading?: boolean;
+  label?:
+    | {
+        default?: string;
+        loading?: string;
+      }
+    | string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> &
+  ButtonProps;
+
+export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
+  return (
+    <Button
+      type="submit"
+      disabled={loading}
+      style={{
+        padding: '10px 14px',
+        borderRadius: 6,
+        border: 'none',
+        backgroundColor: 'var(--iris-9)',
+      }}
+      size="3"
+      {...props}
+    >
+      {loading
+        ? typeof label === 'string'
+          ? label
+          : label?.loading ?? <LoaderCircle className="animate-spin" style={{ width: 24, height: 24, marginRight: 4, verticalAlign: 'middle', color: 'white' }} />
+        : typeof label === 'string'
+        ? label
+        : label?.default ?? 'Submit'}
+    </Button>
+  );
+}
+
+export function ResetButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button type="reset" {...props} style={{ padding: '10px 14px', borderRadius: 6, border: '1px solid var(--gray-5)', background: 'white', ...props.style }}>
+      {props.children ?? 'Reset'}
+    </button>
+  );
+}

apps/frontend/app/components/Form/TextField.tsx

@@ -0,0 +1,103 @@
+import type { AnyFieldMeta } from '@tanstack/react-form';
+import { LucideEye, LucideEyeClosed } from 'lucide-react';
+import { useCallback, useId, useState } from 'react';
+import { InfoIcon, type InfoIconProps } from '../info';
+import { Text } from '@radix-ui/themes';
+
+export type TextFieldProps = {
+  label?: string;
+  value?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
+  labelDivProps?: React.HTMLAttributes<HTMLDivElement>;
+  infoIconProps?: InfoIconProps;
+} & React.InputHTMLAttributes<HTMLInputElement> & {
+    type?: 'password';
+    showPasswordToggle?: boolean;
+  };
+
+export function TextField({ label, value, onChange, labelProps, labelDivProps, showPasswordToggle, infoIconProps, ...rest }: TextFieldProps) {
+  const id = useId();
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const handlePasswordVisibilitySet = useCallback(
+    (e: React.MouseEvent | React.TouchEvent, visible: boolean) => {
+      if (rest.type !== 'password') return;
+      e.preventDefault();
+      setIsPasswordVisible(() => visible);
+    },
+    [rest.type]
+  );
+
+  return (
+    <label htmlFor={id} style={{ display: 'block', marginBottom: 8 }} {...labelProps}>
+      {label && (
+        <div style={{ fontSize: 12, color: 'var(--gray-9)', marginBottom: 6, display: 'flex', alignItems: 'center' }} {...labelDivProps}>
+          {label}
+          {rest?.required && (
+            <Text size="3" style={{ color: 'var(--red-9)', marginLeft: 2 }}>
+              *
+            </Text>
+          )}
+          {infoIconProps && <InfoIcon {...infoIconProps} style={{ marginLeft: 4, verticalAlign: 'middle' }} />}
+        </div>
+      )}
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 8 }}>
+        <input
+          {...rest}
+          type={rest.type === 'password' ? (isPasswordVisible && showPasswordToggle ? 'text' : 'password') : rest.type}
+          id={id}
+          value={value}
+          onChange={onChange}
+          style={{
+            width: '100%',
+            padding: '10px 12px',
+            borderRadius: 6,
+            border: '1px solid var(--gray-5)',
+            ...rest?.style,
+          }}
+        />
+
+        <div
+          style={{ position: 'absolute', right: 12 }}
+          onMouseDown={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onMouseUp={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onMouseLeave={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+          onTouchStart={(e) => {
+            handlePasswordVisibilitySet(e, true);
+          }}
+          onTouchEnd={(e) => {
+            handlePasswordVisibilitySet(e, false);
+          }}
+        >
+          {showPasswordToggle ? isPasswordVisible ? <LucideEye size={16} /> : <LucideEyeClosed size={16} /> : null}
+        </div>
+      </div>
+    </label>
+  );
+}
+
+export type TextFieldErrorMessageProps = AnyFieldMeta & {
+  errorMessage?: string;
+};
+
+export function TextFieldErrorMessage({ isValid, errors, errorMessage }: TextFieldErrorMessageProps) {
+  return (
+    !isValid && (
+      <div
+        style={{
+          marginTop: 4,
+          fontSize: 12,
+          color: 'var(--red-9)',
+        }}
+      >
+        {errorMessage ?? errors?.reduce((msg, err) => msg + err.message + ' ', '')}
+      </div>
+    )
+  );
+}

apps/frontend/app/components/home/TablePlaceholder.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Flex, Text, Button, Separator, Box, Badge } from '@radix-ui/themes';
+
+export default function TablePlaceholder() {
+  return (
+    <Flex direction="column" gap="3" p="4">
+      <Flex justify="between" align="center">
+        <Text weight="bold">Proxy Hosts</Text>
+        <Button size="1">Add Host</Button>
+      </Flex>
+      <Separator size="4" />
+      {[1, 2, 3].map((i) => (
+        <Flex key={i} justify="between" align="center">
+          <Box>
+            <Text size="2" weight="bold" as="div">
+              {`host-${i}.example.com`}
+            </Text>
+            <Text size="1" color="gray">
+              {`http://10.0.0.${i}:8080`}
+            </Text>
+          </Box>
+          <Badge color="green">Online</Badge>
+        </Flex>
+      ))}
+    </Flex>
+  );
+}

apps/frontend/app/components/info.tsx

@@ -0,0 +1,59 @@
+import { Box } from '@radix-ui/themes';
+import { Info, type LucideProps } from 'lucide-react';
+import { Tooltip } from 'radix-ui';
+import type { PropsWithChildren } from 'react';
+
+export type InfoIconProps = PropsWithChildren<
+  {
+    tooltipContainerProps?: Omit<Tooltip.TooltipContentProps & React.RefAttributes<HTMLDivElement>, 'children'>;
+  } & Omit<LucideProps, 'ref'> &
+    React.RefAttributes<SVGSVGElement>
+>;
+
+export function InfoIcon({ tooltipContainerProps, children, ...iconProps }: InfoIconProps) {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <Info size={16} {...iconProps} />
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          //
+          side="top"
+          align="center"
+          sideOffset={5}
+          alignOffset={0}
+          avoidCollisions={true}
+          style={{
+            color: 'black',
+            backgroundColor: 'white',
+            fontSize: 12,
+            boxShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
+            border: '1px solid var(--gray-5)',
+          }}
+          {...tooltipContainerProps}
+        >
+          {children}
+          <Tooltip.Arrow className="TooltipArrow" fill="white" />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}
+
+export function TooltipContentContainer({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <Box
+      style={{
+        padding: '8px 12px',
+        color: 'black',
+        backgroundColor: 'white',
+        borderRadius: 4,
+        fontSize: 12,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+}

apps/frontend/app/components/layout/SidebarContent.tsx

@@ -0,0 +1,89 @@
+import type React from 'react';
+import { Box, Button, Flex, Heading, Separator, Text } from '@radix-ui/themes';
+import type { NavItem } from './types';
+import { Home, Globe, ArrowRight, Lock, Settings, User } from 'lucide-react';
+import { useLayout } from '../../providers/LayoutProvider';
+
+const navItems: { label: NavItem; icon: React.ReactNode }[] = [
+  { label: 'Dashboard', icon: <Home size={16} /> },
+  { label: 'Proxy Hosts', icon: <Globe size={16} /> },
+  { label: 'Redirection', icon: <ArrowRight size={16} /> },
+  { label: 'SSL', icon: <Lock size={16} /> },
+  { label: 'Settings', icon: <Settings size={16} /> },
+  { label: 'Profile', icon: <User size={16} /> },
+] as const;
+
+export function SidebarContent() {
+  const { activeTab, setActiveTab, setIsMobileMenuOpen } = useLayout();
+
+  return (
+    <Flex direction="column" gap="2" p="4" style={{ height: '100%' }}>
+      <Flex align="center" gap="2" mb="6" px="2">
+        <Box
+          style={{
+            width: 32,
+            height: 32,
+            backgroundColor: 'var(--iris-9)',
+            borderRadius: 'var(--radius-2)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold',
+          }}
+        >
+          Y
+        </Box>
+        <Heading size="4" weight="bold">
+          YANPM
+        </Heading>
+      </Flex>
+
+      <Flex direction="column" gap="1">
+        {navItems.map((item) => (
+          <Button
+            key={item.label}
+            variant={activeTab === item.label ? 'soft' : 'ghost'}
+            color={activeTab === item.label ? 'iris' : 'gray'}
+            onClick={() => {
+              setActiveTab(item.label);
+              setIsMobileMenuOpen(false);
+            }}
+            style={{ cursor: 'pointer', width: '100%', justifyContent: 'flex-start' }}
+          >
+            <Flex align="center" gap="3">
+              {item.icon}
+              <Text size="2" weight={activeTab === item.label ? 'bold' : 'medium'}>
+                {item.label}
+              </Text>
+            </Flex>
+          </Button>
+        ))}
+      </Flex>
+
+      <Box style={{ marginTop: 'auto' }} pt="4">
+        <Separator size="4" mb="4" />
+        <Flex align="center" gap="3" px="2">
+          <Box
+            style={{
+              width: 32,
+              height: 32,
+              backgroundColor: 'var(--gray-5)',
+              borderRadius: '50%',
+            }}
+          />
+          <Box>
+            <Text size="1" weight="bold" as="div">
+              Admin User
+            </Text>
+            <Text size="1" color="gray">
+              admin@example.com
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
+    </Flex>
+  );
+}
+
+export default SidebarContent;

apps/frontend/app/components/layout/types.ts

@@ -0,0 +1 @@
+export type NavItem = 'Dashboard' | 'Proxy Hosts' | 'Redirection' | 'SSL' | 'Settings' | 'Profile';

apps/frontend/app/components/theme.tsx

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { Theme } from '@radix-ui/themes';
+
+export type AppThemeProps = {
+  children: React.ReactNode;
+};
+
+export function AppTheme({ children }: AppThemeProps) {
+  return (
+    <Theme accentColor="iris" grayColor="slate" panelBackground="translucent" radius="large">
+      {children}
+    </Theme>
+  );
+}
+
+export default AppTheme;

apps/frontend/app/empty-toastify.css

@@ -0,0 +1 @@
+/* intentionally empty: used to stub react-toastify CSS in production builds */

apps/frontend/app/generated/api-client/api-client.ts

@@ -9,6 +9,7 @@ export namespace Schemas {
     version: string;
   };
   export type LoginRequest = { password: string; username: string };
+  export type UserInfo = { id: string; username: string };
 
   // </Schemas>
 }
@@ -41,6 +42,13 @@ export namespace Endpoints {
     parameters: never;
     responses: { 200: Schemas.HealthInfo; 404: unknown };
   };
+  export type get_Get_user_info = {
+    method: "GET";
+    path: "/api/user/me";
+    requestFormat: "json";
+    parameters: never;
+    responses: { 200: Schemas.UserInfo; 401: unknown; 500: unknown };
+  };
 
   // </Endpoints>
 }
@@ -53,6 +61,7 @@ export type EndpointByMethod = {
   };
   get: {
     "/api/health/info": Endpoints.get_Get_health_info;
+    "/api/user/me": Endpoints.get_Get_user_info;
   };
 };
 

apps/frontend/app/hooks/ResponseHelper.tsx

@@ -0,0 +1,73 @@
+import { AxiosError } from 'axios';
+import { useLocation, useNavigate } from 'react-router';
+import { SearchParamKeys } from '../lib/constants';
+import { useQueryMessage } from './useQueryMessage';
+import { QueryMessageCode, QueryMessageType } from '../lib/QueryMessages';
+import { useCallback } from 'react';
+import { displayForbiddenErrorToast, displayNetworkErrorToast, displayUnexpectedErrorToast } from '../lib/toasts';
+
+export enum ResponseErrorToastId {
+  NetworkError = 'network-error',
+}
+
+export type DefaultResponseErrorHandlerOptions = {
+  disableUnauthorizedHandling?: boolean;
+  disableHandleUnexpectedErrors?: boolean;
+  disableIgnoreCanceledRequests?: boolean;
+};
+
+/**
+ *
+ * @param err error value
+ * @returns {boolean} true if the error was handled, false otherwise
+ */
+
+export function useResponseErrorHandler(): {
+  defaultResponseErrorHandler: typeof defaultResponseErrorHandler;
+} {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { toSearchParamQueryMessage } = useQueryMessage();
+
+  const defaultResponseErrorHandler = useCallback(
+    (err: unknown, options?: DefaultResponseErrorHandlerOptions): boolean => {
+      if (!(err instanceof AxiosError) && !options?.disableHandleUnexpectedErrors) {
+        displayUnexpectedErrorToast();
+        return true;
+      }
+
+      if (!(err instanceof AxiosError)) return false;
+
+      if (err.message === 'canceled') {
+        // request was aborted, ignore but return true to indicate it was handled
+        return !options?.disableIgnoreCanceledRequests;
+      }
+
+      if (err.message === 'Network Error') {
+        displayNetworkErrorToast();
+        return true;
+      }
+
+      // handle 401 Unauthorized globally
+      if (err.status === 401 && !options?.disableUnauthorizedHandling) {
+        // store current path for redirect after login
+        const currentPath = location.pathname + location.search;
+        const searchParam = new URLSearchParams();
+        searchParam.set(SearchParamKeys.Redirect, currentPath);
+        searchParam.set(SearchParamKeys.Message, toSearchParamQueryMessage(QueryMessageCode.SessionExpired, QueryMessageType.Info));
+        navigate(`/login?${searchParam.toString()}`);
+        return true;
+      }
+
+      if (err.status === 403) {
+        displayForbiddenErrorToast();
+        return true;
+      }
+
+      return false;
+    },
+    [location, navigate, toSearchParamQueryMessage]
+  );
+
+  return { defaultResponseErrorHandler };
+}

apps/frontend/app/hooks/ensureLoggedIn.tsx

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router';
+import { useAuth } from '../providers/AuthProvider';
+import { useApi } from '../providers/ApiProvider';
+import { useQuery } from '@tanstack/react-query';
+import { useResponseErrorHandler } from './ResponseHelper';
+
+export type EnsureLoggedInResult = {
+  checking: boolean;
+  loggedIn: boolean;
+};
+
+export function useEnsureLoggedIn(): EnsureLoggedInResult {
+  const { user, setUser } = useAuth();
+  const navigate = useNavigate();
+  const { tanstackApiClient } = useApi();
+  const { defaultResponseErrorHandler } = useResponseErrorHandler();
+
+  const { queryOptions: currentUserQuery } = tanstackApiClient.get('/api/user/me');
+  const { isFetched, isPending } = useQuery({
+    ...currentUserQuery,
+    queryFn: async (...args) => {
+      try {
+        const data = await currentUserQuery.queryFn!(...args);
+        setUser({
+          id: data.id,
+          name: data.username,
+        });
+        return data;
+      } catch (error) {
+        if (defaultResponseErrorHandler(error)) return {} as never;
+        throw error;
+      }
+    },
+  });
+
+  useEffect(() => {
+    if (user) {
+      navigate('/', { replace: true });
+      return;
+    }
+  }, [user, setUser, navigate]);
+
+  return {
+    checking: isPending,
+    loggedIn: isFetched && !!user,
+  };
+}

apps/frontend/app/hooks/useQueryMessage.tsx

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, type ReactNode } from 'react';
+import { useLocation, useSearchParams } from 'react-router';
+import { toast } from 'react-toastify/unstyled';
+import { SearchParamKeys } from '../lib/constants';
+import { CODE_TO_MESSAGE_MAP, QueryMessageCode, QueryMessageType } from '../lib/QueryMessages';
+
+type QueryMessageString = `${QueryMessageCode}__${QueryMessageType}`;
+
+export type QueryMessage = {
+  type: QueryMessageType;
+  code: QueryMessageCode;
+  message: ReactNode;
+};
+
+export type UseQueryMessageOptions = {
+  displayMessages?: boolean;
+};
+
+export type UseQueryMessageReturn = {
+  setQueryMessage: (messageCode: QueryMessageCode, messageType: QueryMessageType) => void;
+  clearQueryMessage: () => void;
+  toSearchParamQueryMessage: (message: QueryMessageCode, type: QueryMessageType) => QueryMessageString;
+};
+
+export function useQueryMessage(
+  { displayMessages }: UseQueryMessageOptions = {
+    displayMessages: true,
+  }
+): UseQueryMessageReturn {
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const messageStr = useRef<QueryMessageString | null>(null);
+
+  useEffect(() => {
+    // Reset messageStr when location changes to allow re-displaying the same message on navigation
+    messageStr.current = null;
+  }, [location.pathname]);
+
+  useEffect(() => {
+    const queryMessageStr = searchParams.get(SearchParamKeys.Message);
+    if (!(queryMessageStr && queryMessageStr !== messageStr.current)) return;
+    const [queryMessage, queryMessageString] = toQueryMessage(queryMessageStr) ?? [null, null];
+    if (!queryMessage) return;
+
+    messageStr.current = queryMessageString;
+    if (displayMessages) {
+      toast[queryMessage.type](queryMessage.message, {
+        position: 'top-center',
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: false,
+        progress: undefined,
+        theme: 'colored',
+        toastId: 'login-route-info-message',
+      });
+    }
+  }, [displayMessages, searchParams]);
+
+  const setQueryMessage = useCallback(
+    (messageCode: QueryMessageCode, messageType: QueryMessageType) => {
+      const queryMessageString: QueryMessageString = `${messageCode}__${messageType}`;
+      messageStr.current = queryMessageString;
+      setSearchParams((prev) => {
+        prev.set(SearchParamKeys.Message, queryMessageString);
+        return prev;
+      });
+    },
+    [setSearchParams]
+  );
+
+  const clearQueryMessage = useCallback(() => {
+    messageStr.current = null;
+    setSearchParams((prev) => {
+      prev.delete(SearchParamKeys.Message);
+      return prev;
+    });
+  }, [setSearchParams]);
+
+  const toSearchParamQueryMessage = useCallback((message: QueryMessageCode, type: QueryMessageType): QueryMessageString => {
+    return `${message}__${type}`;
+  }, []);
+
+  return {
+    setQueryMessage,
+    clearQueryMessage,
+    toSearchParamQueryMessage,
+  };
+}
+
+function isValidQueryMessageCode(code: string): code is QueryMessageCode {
+  return Object.values(QueryMessageCode).includes(code as QueryMessageCode);
+}
+
+function isValidQueryMessageType(type: string): type is QueryMessageType {
+  return Object.values(QueryMessageType).includes(type as QueryMessageType);
+}
+
+function toQueryMessage(value: string): [QueryMessage, QueryMessageString] | null {
+  const [code, type] = value.split('__');
+  if (!isValidQueryMessageCode(code) || !isValidQueryMessageType(type)) return null;
+  return [
+    {
+      code: code,
+      type: type,
+      message: CODE_TO_MESSAGE_MAP[code],
+    },
+    `${code}__${type}`,
+  ];
+}

apps/frontend/app/lib/QueryMessages.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+export enum QueryMessageType {
+  Info = 'info',
+  Success = 'success',
+  Warning = 'warning',
+  Error = 'error',
+}
+
+export enum QueryMessageCode {
+  SessionExpired = 'SESSION_EXPIRED',
+  InitializationRequired = 'INITIALIZATION_REQUIRED',
+  InitializationSuccessful = 'INITIALIZATION_SUCCESSFUL',
+}
+
+export const CODE_TO_MESSAGE_MAP: Record<QueryMessageCode, ReactNode> = {
+  [QueryMessageCode.SessionExpired]: 'Your session has expired. Please log in again.',
+  [QueryMessageCode.InitializationRequired]: 'The application requires initialization. Please follow the setup instructions.',
+  [QueryMessageCode.InitializationSuccessful]: 'Initialization successful. Please log in.',
+} as const;

apps/frontend/app/lib/api.ts

@@ -65,7 +65,34 @@ function axiosResponseToFetchResponse(response: AxiosResponse): Response {
     }
   });
 
-  return new Response(response.data, {
+  // Normalize Axios response.data to a Fetch-compatible BodyInit
+  let body: BodyInit | null = null;
+  const data = response.data;
+
+  if (data == null) {
+    body = null;
+  } else if (
+    typeof data === 'string' ||
+    data instanceof Blob ||
+    data instanceof ArrayBuffer ||
+    ArrayBuffer.isView(data) ||
+    data instanceof FormData ||
+    data instanceof URLSearchParams
+  ) {
+    body = data as BodyInit;
+  } else {
+    try {
+      body = JSON.stringify(data);
+      if (!headers.has('content-type')) {
+        headers.set('content-type', 'application/json;charset=utf-8');
+      }
+    } catch {
+      console.warn('Failed to stringify response data as JSON, falling back to string conversion.');
+      body = String(data);
+    }
+  }
+
+  return new Response(body, {
     status: response.status,
     statusText: response.statusText,
     headers: headers,

apps/frontend/app/lib/constants.ts

@@ -0,0 +1,4 @@
+export enum SearchParamKeys {
+  Redirect = 'redirect',
+  Message = 'message',
+}

apps/frontend/app/lib/toasts.tsx

@@ -0,0 +1,64 @@
+import { toast, type ToastOptions } from 'react-toastify/unstyled';
+import { Text } from '@radix-ui/themes';
+import { ResponseErrorToastId } from '../hooks/ResponseHelper';
+
+export const displayUnexpectedErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Unexpected Error:</Text>
+      <br /> An unexpected error occurred. Please try again later.
+    </div>,
+    {
+      position: 'top-center',
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};
+
+export const displayNetworkErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Network Error:</Text>
+      <br /> Unable to reach the server. Please check your internet connection and try again.
+    </div>,
+    {
+      toastId: ResponseErrorToastId.NetworkError,
+      position: 'top-center',
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};
+
+export const displayForbiddenErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Forbidden:</Text>
+      <br /> You do not have permission to perform this action.
+    </div>,
+    {
+      position: 'top-center',
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};

apps/frontend/app/providers/ApiHealthProvider.tsx

@@ -0,0 +1,56 @@
+import { useNavigate } from 'react-router';
+import { useQuery } from '@tanstack/react-query';
+import { createContext, use, type PropsWithChildren } from 'react';
+import { useApi } from './ApiProvider';
+import { useResponseErrorHandler } from '../hooks/ResponseHelper';
+import type { Schemas } from '../generated/api-client/api-client';
+
+export type HealthStatus = Schemas.HealthInfo;
+
+export type ApiHealthProviderProps = PropsWithChildren<object>;
+export type ApiHealthContextType = {
+  healthStatus: HealthStatus | undefined;
+};
+
+const ApiHealthContext = createContext<ApiHealthContextType | null>(null);
+
+export const ApiHealthProvider: React.FC<ApiHealthProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
+  const { tanstackApiClient } = useApi();
+  const { defaultResponseErrorHandler } = useResponseErrorHandler();
+
+  const { queryOptions: healthInfoQuery } = tanstackApiClient.get('/api/health/info');
+  const { data } = useQuery({
+    ...healthInfoQuery,
+    queryFn: async (...args) => {
+      try {
+        const data = await healthInfoQuery.queryFn!(...args);
+        if (!data.is_initialized) {
+          navigate('/init');
+        }
+        return data;
+      } catch (error) {
+        if (defaultResponseErrorHandler(error)) return {} as never;
+        throw error;
+      }
+    },
+  });
+
+  return (
+    <ApiHealthContext
+      value={{
+        healthStatus: data,
+      }}
+    >
+      {children}
+    </ApiHealthContext>
+  );
+};
+
+export const useApiHealth = (): ApiHealthContextType => {
+  const context = use(ApiHealthContext);
+  if (!context) {
+    throw new Error('useApiHealth must be used within an ApiHealthProvider');
+  }
+  return context;
+};

apps/frontend/app/providers/ApiProvider.tsx

@@ -1,9 +1,9 @@
-import { createContext, use, useContext, type PropsWithChildren } from 'react';
+import { createContext, use, type PropsWithChildren } from 'react';
 import { createTanstackApi, createApi } from '../lib/api';
 import axios from 'axios';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-type ApiProviderProps = PropsWithChildren<{}>;
+type ApiProviderProps = PropsWithChildren<object>;
 type ApiContextType = {
   apiClient: ReturnType<typeof createApi>;
   tanstackApiClient: ReturnType<typeof createTanstackApi>;
@@ -34,8 +34,14 @@ export const ApiProvider: React.FC<ApiProviderProps> = ({ children }) => {
   const axiosInstance = axios.create({
     withCredentials: true,
   });
+
+  const internalAxiosInstance = axios.create({
+    withCredentials: true,
+  });
+
   const apiClient = createApi(axiosInstance);
-  const tanstackApiClient = createTanstackApi(axiosInstance);
+  const tanstackApiClient = createTanstackApi(internalAxiosInstance);
+
   return (
     <QueryClientProvider client={queryClient}>
       <ApiContext

apps/frontend/app/providers/AuthProvider.tsx

@@ -0,0 +1,47 @@
+import { createContext, use, useCallback, useState, type PropsWithChildren } from 'react';
+
+export type User = {
+  id: string;
+  name: string;
+};
+
+export type AuthProviderProps = PropsWithChildren<object>;
+export type AuthContextType = {
+  setUser: (user: User) => void;
+  logOut: () => void;
+  user: User | null;
+};
+
+const AuthContext = createContext<AuthContextType | null>(null);
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUserState] = useState<User | null>(null);
+
+  const setUser = useCallback((user: User) => {
+    setUserState(user);
+  }, []);
+
+  const logout = useCallback(() => {
+    setUserState(null);
+  }, []);
+
+  return (
+    <AuthContext
+      value={{
+        user: user,
+        logOut: logout,
+        setUser: setUser,
+      }}
+    >
+      {children}
+    </AuthContext>
+  );
+};
+
+export function useAuth() {
+  const context = use(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within a AuthProvider');
+  }
+  return context;
+}

apps/frontend/app/providers/FormProvider.tsx

@@ -0,0 +1,18 @@
+import { createFormHook, createFormHookContexts } from '@tanstack/react-form';
+import { TextField, TextFieldErrorMessage } from '../components/Form/TextField';
+import { ResetButton, SubmitButton } from '../components/Form/Button';
+
+const { fieldContext, formContext } = createFormHookContexts();
+
+export const formHook = createFormHook({
+  fieldComponents: {
+    TextField,
+    TextFieldErrorMessage,
+  },
+  formComponents: {
+    SubmitButton,
+    ResetButton,
+  },
+  fieldContext,
+  formContext,
+});

apps/frontend/app/providers/LayoutProvider.tsx

@@ -0,0 +1,38 @@
+import { createContext, use, useState, type PropsWithChildren } from 'react';
+import type { NavItem } from '../components/layout/types';
+
+type LayoutProviderProps = PropsWithChildren<object>;
+type LayoutContextType = {
+  activeTab: NavItem;
+  setActiveTab: (tab: NavItem) => void;
+  isMobileMenuOpen: boolean;
+  setIsMobileMenuOpen: (open: boolean) => void;
+};
+
+const LayoutContext = createContext<LayoutContextType | null>(null);
+
+export const LayoutProvider: React.FC<LayoutProviderProps> = ({ children }) => {
+  const [activeTab, setActiveTab] = useState<NavItem>('Dashboard');
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  return (
+    <LayoutContext
+      value={{
+        activeTab,
+        setActiveTab,
+        isMobileMenuOpen,
+        setIsMobileMenuOpen,
+      }}
+    >
+      {children}
+    </LayoutContext>
+  );
+};
+
+export function useLayout() {
+  const context = use(LayoutContext);
+  if (!context) {
+    throw new Error('useLayout must be used within a LayoutProvider');
+  }
+  return context;
+}

apps/frontend/app/root.tsx

@@ -1,8 +1,18 @@
 import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
 import type { Route } from './+types/root';
+import '@radix-ui/themes/styles.css';
 import './app.css';
-import { Theme } from '@radix-ui/themes';
+// start: react-toastify special import
+// ! MUST use unstyled version for dev server build, styled version for production build is handled in vite.config.ts
+import { ToastContainer } from 'react-toastify/unstyled';
+import 'react-toastify/ReactToastify.css';
+// end: react-toastify special import
+import AppTheme from './components/theme';
 import { ApiProvider } from './providers/ApiProvider';
+import { LayoutProvider } from './providers/LayoutProvider';
+import { Tooltip } from 'radix-ui';
+import { AuthProvider } from './providers/AuthProvider';
+import { ApiHealthProvider } from './providers/ApiHealthProvider';
 
 export const links: Route.LinksFunction = () => [];
 
@@ -26,11 +36,23 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   return (
-    <Theme>
+    <>
-      <ApiProvider>
+      <AppTheme>
-        <Outlet />
+        <ApiProvider>
-      </ApiProvider>
+          <Tooltip.Provider delayDuration={250}>
-    </Theme>
+            <LayoutProvider>
+              <ApiHealthProvider>
+                <AuthProvider>
+                  <Outlet />
+                </AuthProvider>
+              </ApiHealthProvider>
+            </LayoutProvider>
+          </Tooltip.Provider>
+        </ApiProvider>
+      </AppTheme>
+
+      <ToastContainer />
+    </>
   );
 }
 

apps/frontend/app/routes.ts

@@ -1,7 +1,9 @@
-import { type RouteConfig, index, route } from '@react-router/dev/routes';
+import { type RouteConfig, index, layout, route } from '@react-router/dev/routes';
 
 export default [
-  index('routes/home.tsx'),
+  route('login', 'routes/auth/login.tsx'),
+  route('init', 'routes/init.tsx'),
+  layout('routes/layout.tsx', [index('routes/home.tsx')]),
   // catch-all 404 route
   route('*', 'routes/404.tsx'),
 ] satisfies RouteConfig;

apps/frontend/app/routes/auth/login.tsx

@@ -0,0 +1,153 @@
+import { Box, Container, Flex, Heading } from '@radix-ui/themes';
+import { useMutation } from '@tanstack/react-query';
+import { useLocation, useNavigate } from 'react-router';
+import { toast } from 'react-toastify/unstyled';
+import * as v from 'valibot';
+import { useResponseErrorHandler } from '../../hooks/ResponseHelper';
+import { useApi } from '../../providers/ApiProvider';
+import { formHook } from '../../providers/FormProvider';
+import type { Route } from './+types/login';
+import { SearchParamKeys } from '../../lib/constants';
+import { AxiosError } from 'axios';
+import { useQueryMessage } from '../../hooks/useQueryMessage';
+
+const loginFormSchema = v.object({
+  username: v.pipe(v.string(), v.trim(), v.minLength(1, 'Username is required')),
+  password: v.pipe(v.string(), v.minLength(1, 'Password is required')),
+});
+
+// eslint-disable-next-line no-empty-pattern
+export function meta({}: Route.MetaArgs): Route.MetaDescriptors {
+  return [{ title: 'Login | YANPM' }];
+}
+
+// TODO: remember me
+export default function LoginRoute() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { tanstackApiClient } = useApi();
+  const { defaultResponseErrorHandler } = useResponseErrorHandler();
+  useQueryMessage();
+
+  const { mutateAsync: login, isPending } = useMutation({
+    ...tanstackApiClient.mutation('post', '/api/auth/login').mutationOptions,
+    onSuccess: async () => {
+      const searchParams = new URLSearchParams(location.search);
+      const redirectTo = searchParams.get(SearchParamKeys.Redirect);
+      if (redirectTo) {
+        navigate(redirectTo);
+        return;
+      }
+      navigate('/');
+    },
+    onError: (error) => {
+      if (defaultResponseErrorHandler(error, { disableUnauthorizedHandling: true })) return;
+      if (error instanceof AxiosError && error.status === 401) {
+        toast.error('Invalid username or password.', {
+          position: 'top-center',
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: false,
+          progress: undefined,
+          theme: 'colored',
+        });
+        return;
+      }
+      console.error('Login failed:', error);
+    },
+  });
+
+  const form = formHook.useAppForm({
+    defaultValues: {
+      username: '',
+      password: '',
+    },
+    validators: {
+      onBlur: loginFormSchema,
+      onSubmit: loginFormSchema,
+    },
+
+    onSubmit: async ({ value }) => {
+      toast.dismiss();
+      return await login({ body: { password: value.password, username: value.username } }).catch(() => {});
+    },
+  });
+
+  return (
+    <>
+      <Flex align="center" justify="center" style={{ minHeight: 'calc(100vh - 64px)' }}>
+        <Container size="3" p="0">
+          <Box
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              maxWidth: 420,
+              margin: '40px auto',
+              backgroundColor: 'white',
+              padding: 24,
+              borderRadius: 8,
+              boxShadow: '0 6px 18px rgba(15,23,42,0.2)',
+            }}
+          >
+            <Heading size="6" style={{ marginBottom: 16, alignSelf: 'center' }}>
+              Sign In
+            </Heading>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                form.handleSubmit();
+              }}
+            >
+              <form.AppField
+                name="username"
+                children={(field) => (
+                  <>
+                    <field.TextField
+                      label={'Username'}
+                      value={field.state.value}
+                      autoComplete="username"
+                      spellCheck={false}
+                      required
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <field.TextFieldErrorMessage {...field.state.meta} />
+                  </>
+                )}
+              />
+
+              <form.AppField
+                name="password"
+                children={(field) => (
+                  <>
+                    <field.TextField
+                      label={'Password'}
+                      value={field.state.value}
+                      type="password"
+                      required
+                      autoComplete="current-password"
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      showPasswordToggle
+                    />
+                    <field.TextFieldErrorMessage {...field.state.meta} />
+                  </>
+                )}
+              />
+
+              <div style={{ marginTop: 18, display: 'flex', gap: 8, justifySelf: 'center' }}>
+                <form.SubmitButton
+                  loading={isPending}
+                  label={{
+                    default: 'Sign In',
+                    loading: 'Signing In…',
+                  }}
+                />
+              </div>
+            </form>
+          </Box>
+        </Container>
+      </Flex>
+    </>
+  );
+}

apps/frontend/app/routes/home.tsx

@@ -1,13 +1,75 @@
-import { Text } from '@radix-ui/themes';
+import { Box, Button, Card, Flex, Grid, Heading, Text } from '@radix-ui/themes';
 import type { Route } from './+types/home';
-import { useContext } from 'react';
+import TablePlaceholder from '../components/home/TablePlaceholder';
-import { useApi } from '../providers/ApiProvider';
+import { useLayout } from '../providers/LayoutProvider';
-import { useQuery } from '@tanstack/react-query';
+import { useEnsureLoggedIn } from '../hooks/ensureLoggedIn';
 
+// eslint-disable-next-line no-empty-pattern
 export function meta({}: Route.MetaArgs) {
-  return [{ title: 'YANPM' }, { name: 'description', content: 'Welcome to Yet Another Nginx Proxy Manager!' }];
+  return [{ title: 'Proxy Host Demo | YANPM' }, { name: 'description', content: 'Demo of the unified navigation paradigm.' }];
 }
 
-export default function Home() {
+export default function ProxyHostDemo() {
-  return <Text>Welcome to Yet Another Nginx Proxy Manager!</Text>;
+  useEnsureLoggedIn();
+  const { activeTab } = useLayout();
+  return (
+    <Box>
+      <Heading size="7" mb="1">
+        {activeTab}
+      </Heading>
+      <Text color="gray" mb="4" as="p">
+        This is the {activeTab.toLowerCase()} page demo.
+      </Text>
+
+      <Grid columns={{ initial: '1', sm: '2', lg: '3' }} gap="4">
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Status Overview
+            </Text>
+            <Text size="2" color="gray">
+              Everything is running smoothly in your {activeTab.toLowerCase()} section.
+            </Text>
+            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
+              View Details
+            </Button>
+          </Flex>
+        </Card>
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Recent Activity
+            </Text>
+            <Text size="2" color="gray">
+              No recent changes detected in the last 24 hours.
+            </Text>
+            <Button variant="surface" size="1" style={{ width: 'fit-content' }} mt="1">
+              Refresh
+            </Button>
+          </Flex>
+        </Card>
+        <Card size="2">
+          <Flex direction="column" gap="2">
+            <Text size="2" weight="bold">
+              Quick Actions
+            </Text>
+            <Text size="2" color="gray">
+              Common tasks related to {activeTab.toLowerCase()} are available here.
+            </Text>
+            <Button variant="solid" size="1" style={{ width: 'fit-content' }} mt="1">
+              Get Started
+            </Button>
+          </Flex>
+        </Card>
+      </Grid>
+
+      {activeTab === 'Proxy Hosts' && (
+        <Box mt="6">
+          <Card variant="surface">
+            <TablePlaceholder />
+          </Card>
+        </Box>
+      )}
+    </Box>
+  );
 }

apps/frontend/app/routes/init.tsx

@@ -0,0 +1,161 @@
+import { Box, Container, Flex, Heading, Text } from '@radix-ui/themes';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
+import { toast } from 'react-toastify/unstyled';
+import * as v from 'valibot';
+import { useResponseErrorHandler } from '../hooks/ResponseHelper';
+import { useApi } from '../providers/ApiProvider';
+import { formHook } from '../providers/FormProvider';
+import { TooltipContentContainer } from '../components/info';
+import { SearchParamKeys } from '../lib/constants';
+import { useQueryMessage } from '../hooks/useQueryMessage';
+import { QueryMessageCode, QueryMessageType } from '../lib/QueryMessages';
+
+const initFormSchema = v.object({
+  username: v.pipe(v.string(), v.trim(), v.minLength(1, 'Username is required')),
+  password: v.pipe(v.string(), v.minLength(1, 'Password is required')),
+  setup_secret: v.pipe(v.string(), v.minLength(1, 'Setup secret is required')),
+});
+
+export default function InitRoute() {
+  const navigate = useNavigate();
+  const { tanstackApiClient } = useApi();
+  const { defaultResponseErrorHandler } = useResponseErrorHandler();
+  const { toSearchParamQueryMessage } = useQueryMessage();
+
+  const { mutateAsync: initAdmin, isPending } = useMutation({
+    ...tanstackApiClient.mutation('post', '/api/auth/init_admin').mutationOptions,
+    onSuccess: async () => {
+      const searchParams = new URLSearchParams();
+      searchParams.set(SearchParamKeys.Message, toSearchParamQueryMessage(QueryMessageCode.InitializationSuccessful, QueryMessageType.Success));
+      navigate(`/login?${searchParams.toString()}`);
+    },
+    onError: (error) => {
+      if (defaultResponseErrorHandler(error)) return;
+      console.error('Init failed:', error);
+    },
+  });
+
+  const { queryOptions: healthInfoQuery } = tanstackApiClient.get('/api/health/info');
+  useQuery({
+    ...healthInfoQuery,
+    queryFn: async (...args) => {
+      try {
+        const data = await healthInfoQuery.queryFn!(...args);
+        if (data.is_initialized) {
+          navigate('/login', { replace: true });
+          return data;
+        }
+        return data;
+      } catch (error) {
+        if (defaultResponseErrorHandler(error)) return {} as never;
+        throw error;
+      }
+    },
+  });
+
+  const form = formHook.useAppForm({
+    defaultValues: { username: '', password: '', setup_secret: '' },
+    validators: { onBlur: initFormSchema, onSubmit: initFormSchema },
+    onSubmit: async ({ value }) => {
+      toast.dismiss();
+      return await initAdmin({ body: { username: value.username, password: value.password, setup_secret: value.setup_secret } });
+    },
+  });
+
+  return (
+    <>
+      <Flex align="center" justify="center" style={{ minHeight: 'calc(100vh - 64px)' }}>
+        <Container size="3" p="0">
+          <Box
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              maxWidth: 480,
+              margin: '40px auto',
+              backgroundColor: 'white',
+              padding: 24,
+              borderRadius: 8,
+              boxShadow: '0 6px 18px rgba(15,23,42,0.06)',
+            }}
+          >
+            <Heading size="6" style={{ marginBottom: 12, alignSelf: 'center' }}>
+              Initialize YANPM
+            </Heading>
+
+            <Heading size="3" style={{ marginBottom: 24, color: 'var(--gray-11)', alignSelf: 'center' }}>
+              Create the initial admin user
+            </Heading>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                form.handleSubmit();
+              }}
+            >
+              <form.AppField
+                name="username"
+                children={(field) => (
+                  <>
+                    <field.TextField
+                      label="Username"
+                      value={field.state.value}
+                      autoComplete="username"
+                      spellCheck={false}
+                      required
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <field.TextFieldErrorMessage {...field.state.meta} />
+                  </>
+                )}
+              />
+
+              <form.AppField
+                name="password"
+                children={(field) => (
+                  <>
+                    <field.TextField
+                      label="Password"
+                      value={field.state.value}
+                      type="password"
+                      required
+                      autoComplete="new-password"
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      showPasswordToggle
+                    />
+                    <field.TextFieldErrorMessage {...field.state.meta} />
+                  </>
+                )}
+              />
+
+              <form.AppField
+                name="setup_secret"
+                children={(field) => (
+                  <>
+                    <field.TextField
+                      label="Setup Secret"
+                      value={field.state.value}
+                      required
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      infoIconProps={{
+                        children: (
+                          <TooltipContentContainer>
+                            <Text>This secret is provided when the API server is first started. Refer to your server logs to find it.</Text>
+                          </TooltipContentContainer>
+                        ),
+                      }}
+                    />
+                    <field.TextFieldErrorMessage {...field.state.meta} />
+                  </>
+                )}
+              />
+
+              <div style={{ marginTop: 18, display: 'flex', gap: 8, justifySelf: 'center' }}>
+                <form.SubmitButton loading={isPending} label={{ default: 'Initialize' }} />
+              </div>
+            </form>
+          </Box>
+        </Container>
+      </Flex>
+    </>
+  );
+}

apps/frontend/app/routes/layout.tsx

@@ -0,0 +1,88 @@
+import { Flex, Box, Container, Dialog, Heading, IconButton, TextField } from '@radix-ui/themes';
+import SidebarContent from '../components/layout/SidebarContent';
+import { useLayout } from '../providers/LayoutProvider';
+import { Menu, Search, Bell } from 'lucide-react';
+import { Outlet } from 'react-router';
+
+export default function LayoutContainer() {
+  const { activeTab, isMobileMenuOpen, setIsMobileMenuOpen } = useLayout();
+  return (
+    <Flex style={{ minHeight: '100vh', backgroundColor: 'var(--gray-2)' }}>
+      {/* Desktop Sidebar */}
+      <Box
+        display={{ initial: 'none', md: 'block' }}
+        style={{
+          width: '260px',
+          backgroundColor: 'white',
+          borderRight: '1px solid var(--gray-4)',
+          position: 'sticky',
+          top: 0,
+          minHeight: '100vh',
+          overflowY: 'auto',
+        }}
+      >
+        <SidebarContent />
+      </Box>
+
+      {/* Main Content Area */}
+      <Box style={{ flex: 1, minWidth: 0 }}>
+        {' '}
+        {/* Top Header (Mobile & Desktop) */}
+        <Flex
+          align="center"
+          justify="between"
+          px="4"
+          style={{
+            height: '64px',
+            backgroundColor: 'white',
+            borderBottom: '1px solid var(--gray-4)',
+            position: 'sticky',
+            top: 0,
+            zIndex: 10,
+          }}
+        >
+          <Flex align="center" gap="3">
+            <Box display={{ md: 'none' }}>
+              <Dialog.Root open={isMobileMenuOpen} onOpenChange={setIsMobileMenuOpen}>
+                <Dialog.Trigger>
+                  <IconButton variant="ghost" color="gray">
+                    <Menu />
+                  </IconButton>
+                </Dialog.Trigger>
+                <Dialog.Content
+                  style={{
+                    position: 'fixed',
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    margin: 0,
+                    width: '280px',
+                    borderRadius: 0,
+                    padding: 0,
+                  }}
+                >
+                  <SidebarContent />
+                </Dialog.Content>
+              </Dialog.Root>
+            </Box>
+            <Heading size="4">{activeTab}</Heading>
+          </Flex>
+
+          <Flex align="center" gap="3">
+            <TextField.Root placeholder="Search..." size="2">
+              <TextField.Slot>
+                <Search />
+              </TextField.Slot>
+            </TextField.Root>
+            <IconButton variant="ghost" color="gray">
+              <Bell />
+            </IconButton>
+          </Flex>
+        </Flex>
+        <Container size="4" p="5" style={{ paddingTop: 20 }}>
+          <Outlet />
+        </Container>
+      </Box>
+    </Flex>
+  );
+}

apps/frontend/app/vite-env.d.ts

@@ -1,7 +1,6 @@
 interface ViteTypeOptions {
-  // By adding this line, you can make the type of ImportMetaEnv strict
+  // disallow unknown keys.
-  // to disallow unknown keys.
+  strictImportMetaEnv: unknown;
-  // strictImportMetaEnv: unknown
 }
 
 interface ImportMetaEnv {

apps/frontend/eslint.config.ts

@@ -0,0 +1,42 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+
+export default tseslint.config(
+  {
+    // Ignore files and directories
+    ignores: ['node_modules', 'app/generated', 'build', '.react-router'],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+      parserOptions: {
+        project: ['./tsconfig.json', './tsconfig.node.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+    rules: {},
+  },
+  {
+    ...pluginReact.configs.flat.recommended, // Enables core React rules
+    ...pluginReactHooks.configs.flat.recommended, // Enables React Hooks rules
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+      },
+    },
+  }
+);

apps/frontend/package.json

@@ -7,32 +7,45 @@
     "dev": "react-router dev",
     "start": "react-router-serve ./build/server/index.js",
     "typecheck": "react-router typegen && tsc",
+    "lint": "eslint .",
     "test": "echo \"No tests specified\" && exit 0",
     "generate:openapi": "typed-openapi ../api/swagger.json --tanstack tanstack-client.ts -o ./app/generated/api-client/api-client.ts"
   },
   "dependencies": {
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/themes": "^3.2.1",
     "@react-router/node": "^7.9.2",
     "@react-router/serve": "^7.9.2",
+    "@tanstack/react-form": "^1.27.5",
     "@tanstack/react-query": "^5.90.12",
     "axios": "^1.13.2",
+    "globals": "^16.5.0",
     "isbot": "^5.1.31",
+    "lucide-react": "^0.562.0",
     "radix-ui": "^1.4.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.9.2"
+    "react-router": "^7.9.2",
+    "react-toastify": "^11.0.5",
+    "valibot": "^1.2.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.39.2",
     "@react-router/dev": "^7.9.2",
     "@tailwindcss/vite": "^4.1.13",
     "@types/node": "^22",
     "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "dotenv": "^17.2.3",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "tailwindcss": "^4.1.13",
     "typed-openapi": "^2.2.3",
     "typescript": "^5.9.2",
+    "typescript-eslint": "^8.50.0",
     "vite": "^7.1.7",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }

apps/frontend/vite.config.ts

@@ -2,8 +2,37 @@ import { reactRouter } from '@react-router/dev/vite';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
+// @ts-expect-error vite-plugin-eslint has no types
+import eslint from 'vite-plugin-eslint';
 
-export default defineConfig({
+export default defineConfig(({ command }) => {
-  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+  const isBuild = command === 'build';
-  appType: 'spa',
+
+  return {
+    plugins: [
+      tailwindcss(),
+      reactRouter(),
+      tsconfigPaths(),
+      eslint({
+        failOnError: false,
+      }),
+    ],
+    resolve: {
+      alias: isBuild
+        ? [
+            {
+              // replace unstyled import with styled for SPA build
+              find: 'react-toastify/unstyled',
+              replacement: 'react-toastify',
+            },
+            {
+              // point to the empty CSS file to stub out the import during build, SPA build does not require extra CSS imports
+              find: 'react-toastify/ReactToastify.css',
+              replacement: '~/empty-toastify.css',
+            },
+          ]
+        : [],
+    },
+    appType: 'spa',
+  };
 });