Skip to main content
The frontend requires a running instance of the kilometracker-backend API. Configure its URL via the API_BASE_URL environment variable before starting the dev server. See Environment variables for details.

Prerequisites

Before you begin, make sure you have the following installed:
  • Node.js >= 18 — nodejs.org
  • npm (bundled with Node.js) or pnpm
  • A running KilomeTracker backend — local or hosted (e.g., Railway, Render)

Setup steps

1

Clone the repository

git clone https://github.com/javierhrzgt/kilometracker-front.git && cd kilometracker-front
2

Install dependencies

npm install
3

Create the environment file

Create a .env.local file in the project root with the backend URL:
# .env.local

# Backend API base URL (no trailing slash)
API_BASE_URL=https://your-backend-url.com
See Environment variables for a full reference of all variables and how to configure them for production.
4

Start the development server

npm run dev
The app will be available at http://localhost:3000.Authenticated users are automatically redirected to /dashboard. Unauthenticated requests to protected routes are redirected to / (login).

Available scripts

CommandDescription
npm run devStart the Next.js development server on http://localhost:3000
npm run buildCompile a production build
npm startStart the production server (requires a prior build)
npm run lintRun ESLint across the codebase
npm testRun Vitest unit tests (single run)
npm run test:watchRun Vitest in watch mode
npm run test:coverageRun Vitest with a V8 coverage report
npm run test:e2eRun Playwright end-to-end tests

TypeScript path aliases

The project uses a @/* path alias that maps to ./src/*. Always use this alias for imports — never use relative paths.
// Correct
import { FilterPanel } from "@/components/ui/FilterPanel";
import { useUser } from "@/contexts/UserContext";
import type { Vehicle } from "@/Types";

// Avoid
import { FilterPanel } from "../../components/ui/FilterPanel";
This alias is configured in tsconfig.json and works across all files in src/.

Build docs developers (and LLMs) love