Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Daniel-Stojanovski/finkiopendesk/llms.txt

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

The FinkiOpenDesk frontend is a React 19 single-page application built with Vite and TypeScript. During local development it proxies API requests to a backend running on localhost:8080. For production it is compiled into a static dist/ directory that can be hosted on any static file host, CDN, or object storage bucket.

Prerequisites

  • Node.js v18 or later
  • npm v9 or later (bundled with Node.js)

Running locally

1

Clone the repository and enter the frontend directory

git clone https://github.com/Daniel-Stojanovski/finkiopendesk.git
cd finkiopendesk/finkiopendesk-fe
2

Install dependencies

npm install
3

Start the development server

npm run dev
Vite starts a hot-reloading dev server, typically at http://localhost:5173. Any request matching /api/* is proxied to http://localhost:8080 so you can develop against a locally running backend without CORS issues.

Dev server proxy

The vite.config.ts defines a proxy rule for local development:
vite.config.ts
server: {
    proxy: {
        "/api": {
            target: "http://localhost:8080",
            changeOrigin: true,
            secure: false
        }
    }
}
This proxy is only active during npm run dev. In the production build, all API calls go directly to the configured backend URL.

Production build

1

Run the build command

npm run build
The build script runs tsc && vite build. TypeScript compiles and type-checks the project first; Vite then bundles and minifies the output into the dist/ directory.
2

Preview the build locally (optional)

npm run preview
Serves the contents of dist/ using Vite’s built-in preview server so you can verify the production bundle before deploying.
3

Deploy the dist/ directory

Upload the contents of dist/ to your static hosting provider. Because FinkiOpenDesk uses client-side routing via React Router, configure your host to serve index.html for all routes (often called “SPA fallback” or “rewrite all to index.html”).
dist/
├── index.html
├── assets/
│   ├── index-[hash].js
│   └── index-[hash].css
└── ...
If your static host does not support SPA fallback rewrites, users who navigate directly to a deep link (e.g., /careers/roadmap/backend) will receive a 404. Check your host’s documentation for how to configure this.

Backend URL configuration

In production, the frontend communicates with the backend through three Axios instances defined in src/shared/axios.ts. All three point to the deployed Render service:
src/shared/axios.ts
export const backapi = axios.create({
    baseURL: "https://finkiopendesk-be.onrender.com/api",
    headers: { "Content-Type": "application/json" }
});

export const authpublic = axios.create({
    baseURL: "https://finkiopendesk-be.onrender.com/auth",
    headers: { "Content-Type": "application/json" }
});

export const authprivate = axios.create({
    baseURL: "https://finkiopendesk-be.onrender.com/auth",
    headers: { "Content-Type": "application/json" }
});
To point the frontend at a different backend (e.g., a self-hosted instance), update the baseURL values in src/shared/axios.ts before running npm run build.
The local api instance (baseURL /api) uses the Vite proxy and is only active during development. Production code should use backapi, authpublic, or authprivate.

Build docs developers (and LLMs) love