Skip to main content
The Highway frontend is built with Next.js 14, Mantine UI, and TypeScript, providing a modern interface for managing voice verification calls.

​
Installing Dependencies

1

Navigate to frontend directory

cd highway-frontend
2

Install npm packages

npm install
This will install key dependencies:
  • next (v14.2.15) - React framework
  • react & react-dom - React core libraries
  • @mantine/core - UI component library
  • @mantine/* - Mantine ecosystem packages
  • @supabase/supabase-js - Supabase client
  • @tabler/icons-react - Icon library
  • typescript - TypeScript support
3

Configure environment variables

Create a .env.local file in the frontend directory. See Environment Variables for Supabase configuration.

​
Mantine UI Setup

Highway uses Mantine v7 for its UI components. The configuration is handled in the root layout:

​
Theme Configuration

The app uses a dark theme with custom color palette:
src/app/layout.tsx
const theme = createTheme({
  black: "#0c0d21",
  colors: {
    dark: [
      "#d5d7e0",
      "#acaebf",
      "#8c8fa3",
      "#666980",
      "#4d4f66",
      "#34354a",
      "#2b2c3d",
      "#1d1e30",
      "#0c0d21",
      "#01010a",
    ],
  },
  primaryColor: "dark",
});

​
MantineProvider Setup

src/app/layout.tsx
import { MantineProvider, ColorSchemeScript } from "@mantine/core";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript />
      </head>
      <body>
        <MantineProvider theme={theme}>
          {children}
        </MantineProvider>
      </body>
    </html>
  );
}

​
Installed Mantine Packages

Highway includes the full Mantine ecosystem:
  • @mantine/core - Core components
  • @mantine/hooks - Useful React hooks
  • @mantine/form - Form management
  • @mantine/notifications - Toast notifications
  • @mantine/modals - Modal dialogs
  • @mantine/dates - Date picker components
  • @mantine/charts - Chart components (with Recharts)
  • @mantine/carousel - Carousel component
  • @mantine/dropzone - File upload
  • @mantine/spotlight - Command palette
  • @mantine/code-highlight - Code highlighting
  • @mantine/tiptap - Rich text editor
  • @mantine/nprogress - Progress bar

​
Directory Structure

The frontend follows Next.js App Router structure: 
highway-frontend/
├── src/
│   ├── app/              # Next.js app directory
│   │   ├── layout.tsx    # Root layout with Mantine provider
│   │   ├── page.tsx      # Dashboard page
│   │   ├── calls/        # Call logs page
│   │   ├── globals.css   # Global styles
│   │   └── fonts/        # Custom fonts (Geist)
│   ├── components/       # Reusable components
│   └── utils/            # Utility functions
├── public/               # Static assets
├── package.json
├── tsconfig.json         # TypeScript configuration
├── tailwind.config.ts    # Tailwind CSS config
├── postcss.config.cjs    # PostCSS config
└── next.config.mjs       # Next.js configuration

​
Key Directories

src/app/ - Application pages and layouts
  • Uses Next.js 14 App Router
  • Server and client components
  • File-based routing
src/components/ - Reusable React components
  • UI components
  • Shared layout components
src/utils/ - Utility functions and helpers
  • Supabase client configuration (client.ts, server.ts, middleware.ts)
  • API helper functions (api.ts)
The src/utils/api.ts file contains a hardcoded API_BASE_URL. Update this constant to point to your backend server URL:
src/utils/api.ts
const API_BASE_URL = "https://your-backend-url.com";
For development, use http://localhost:3000 (or your backend port).

​
Starting the Dev Server

cd highway-frontend
npm run dev
The dev server will start at: 
http://localhost:3000
The development server includes hot module replacement (HMR) for instant updates.

​
Building for Production

1

Create production build

npm run build
This command:
  • Compiles TypeScript
  • Optimizes React components
  • Generates static pages
  • Creates production bundles
2

Test production build locally

npm run start
Serves the production build at http://localhost:3000
3

Verify build output

Check the .next directory for generated files:
ls -la .next

​
Theme Customization

​
Color Palette

The dark theme uses a custom gray-blue palette:
ShadeColorUsage
0#d5d7e0Lightest text
1#acaebfSecondary text
2#8c8fa3Muted text
6#2b2c3dBorders
7#1d1e30Navbar background
8#0c0d21Main background
9#01010aDarkest shade

​
AppShell Configuration

The layout uses Mantine’s AppShell component: 
<AppShell
  navbar={{
    width: 300,
    breakpoint: "sm",
    collapsed: { mobile: !opened },
  }}
  padding="md"
  styles={(theme) => ({
    main: {
      backgroundColor: theme.colors?.dark?.[8],
      color: theme.colors?.dark?.[0],
    },
    navbar: {
      borderRight: `2px solid ${theme.colors?.dark?.[6]}`,
    },
  })}
>
  <AppShell.Navbar>...</AppShell.Navbar>
  <AppShell.Main>{children}</AppShell.Main>
</AppShell>

​
Custom Fonts

Highway uses Geist fonts:
  • Geist Sans - Primary UI font
  • Geist Mono - Monospace font
Both are configured as variable fonts with weights 100-900.

​
PostCSS Configuration

The app uses PostCSS with Mantine preset:
postcss.config.cjs
module.exports = {
  plugins: {
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {},
  },
};

​
TypeScript Configuration

TypeScript is configured with Next.js-optimized settings:
tsconfig.json
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true
  }
}

​
Linting

Run ESLint to check code quality: 
npm run lint

​
Verification

Test your frontend setup:
1

Check dev server

Navigate to http://localhost:3000 and verify the dashboard loads.
2

Test navigation

  • Click “Dashboard” in the sidebar
  • Click “Verification Call Logs”
  • Verify navigation works correctly
3

Check Mantine theme

  • Verify dark theme is applied
  • Check that colors match the design
  • Test responsive navbar (resize browser)

​
Next Steps

Environment Variables

Configure Supabase and other frontend variables

Deployment

Deploy your frontend to production

Build docs developers (and LLMs) love

Get started for freeTalk to us