Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/giangartun/Tis-GOAT-Frontend/llms.txt

Use this file to discover all available pages before exploring further.

GOAT Portfolio’s frontend is configured entirely through a .env file at the project root. Vite reads this file at build time and exposes values prefixed with VITE_ to your application code as import.meta.env.VITE_*. No configuration is baked into TypeScript source files — every tuneable value lives in the environment, making it trivial to target different backends (local, staging, production) without changing code.

​
Environment variables

The table below documents every supported variable. Create a .env file in the project root (next to package.json) and set the values appropriate for your environment.
VariableRequiredDefaultDescription
VITE_API_URL✅ Yeshttp://127.0.0.1:8000Base URL of the backend REST API without a trailing slash. The Axios client appends /api to this value, and the Vite dev-server proxy forwards all /api requests here.
Vite will not expose a variable to the browser unless its name starts with VITE_. Any secret that must not reach the client (database credentials, private keys) should never be placed in this file.

​
.env.example

Commit this file to version control so teammates know which variables are needed. Copy it to .env and fill in your own values. 
# API Configuration
VITE_API_URL=http://127.0.0.1:8000

​
Vite dev server

During local development, the Vite dev server acts as a reverse proxy: any request your browser makes to /api/... is transparently forwarded to the backend URL defined in VITE_API_URL. This eliminates CORS errors without requiring any CORS configuration on the backend for local development. The proxy is configured in vite.config.ts: 
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    host: true,
    proxy: {
      "/api": {
        target: (import.meta as any)?.env?.VITE_API_URL?.replace(/\/$/, '') ||
  'http://127.0.0.1:8000',
        changeOrigin: true,
        secure: false,
      },
    },
  },
  preview: {
    host: true,
    allowedHosts: true,
  },
});
Key options explained:
OptionValueEffect
targetVITE_API_URL (trailing slash stripped) or http://127.0.0.1:8000The backend to proxy /api requests to
changeOrigintrueRewrites the Host header to match the target, required for most backends
securefalseAllows proxying to backends with self-signed TLS certificates
hosttrueBinds the dev server to 0.0.0.0, making it reachable on your local network (useful for mobile testing)
In production, there is no Vite proxy — your web server (Nginx, Caddy, etc.) or CDN must handle the CORS policy, or you configure your backend to accept requests from your frontend’s origin directly. The Axios base URL (${VITE_API_URL}/api) is used directly in production builds.

​
Tailwind color tokens

GOAT Portfolio extends Tailwind’s default palette with a set of app.* semantic color tokens defined in tailwind.config.js. Use these tokens in className strings (bg-app-header, text-app-muted, etc.) to keep the UI consistent and to make a global re-theme a one-file change. 
// tailwind.config.js
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter", "sans-serif"],
      },
      colors: {
        app: {
          bg: "#D9D9D9",      // general light background
          header: "#2E3A4D",  // top app bar
          topbar: "#1F4E79",  // primary navigation bar
          sidebar: "#1F4E79", // left sidebar column
          surface: "#F1F5F9", // card surfaces (white-ish)
          card: "#f7f8fa",    // soft card backgrounds
          border: "#ABB2BF",  // borders and dividers
          text: "#000000",    // primary text
          muted: "#6b7280",   // secondary / helper text
        },
      },
    },
  },
  plugins: [],
};

​
Token reference

TokenHex valueTailwind class examplesPurpose
app.bg#D9D9D9bg-app-bgGeneral page background — light grey canvas
app.header#2E3A4Dbg-app-header, text-app-headerTop app bar / navbar background (dark navy)
app.topbar#1F4E79bg-app-topbarPrimary horizontal navigation bar (deep blue)
app.sidebar#1F4E79bg-app-sidebarLeft sidebar column — shares colour with topbar
app.surface#F1F5F9bg-app-surfaceCard and panel surfaces (near-white blue-grey)
app.card#f7f8fabg-app-cardSofter card background for nested content
app.border#ABB2BFborder-app-border, divide-app-borderBorders, dividers, and input outlines
app.text#000000text-app-textPrimary body text
app.muted#6b7280text-app-mutedSecondary / helper text, placeholders
app.topbar and app.sidebar intentionally share the same hex value (#1F4E79). They are defined as separate tokens so that either can be independently recoloured in the future without a find-and-replace across the codebase.

​
Running locally

​
Install dependencies

npm install

​
Start the development server

npm run dev
Vite starts on http://localhost:5173 by default (exact port may vary). The dev server watches for file changes and hot-reloads the browser automatically.

​
Build for production

npm run build
This command runs tsc -b (TypeScript type-checking) followed by vite build. Output is written to the dist/ directory, ready to be served by any static file host or CDN. You can preview the production build locally before deploying: 
npm run preview
Always run npm run build (not just npm run dev) before deploying to make sure there are no TypeScript compilation errors. The dev server transpiles TypeScript without type-checking for speed; the build step enforces strict type safety.

Build docs developers (and LLMs) love

Get started for freeTalk to us