Build a custom Front App with React, Vite & Shadcn#

#Objective

This guide introduces the React Shadcn Vite application template, a developer-oriented starter kit for building fully custom front-end applications on top of the Data Platform Front API.

This template gives full control over application code, allowing developers to build tailored data applications using modern front-end technologies. For a low-code drag-and-drop experience, use the visual app builder.

#Requirements

To use this template, first complete the following steps on the Platform:

• A Lakehouse Manager schema has been built and populated.
• A Data Processing Engine workflow has been executed successfully.
• Queries have been created in the Analytics Manager.
• A Front API has been deployed and is running.
• Node.js (v22 or above) has been installed on your machine.

#What's included

#Tech stack

#Modules

The template comes with three built-in modules:

#ts-sdk: Data Platform SDK

The core module that handles communication with the Platform. It provides:

• DataPlatformApi: An API service that manages two Axios instances, one for the Identity Access Manager (IAM) and one for the Front API.
• Automatic token injection via Axios interceptors on every request.
• Query execution through POST /qb/query to retrieve data from your Analytics Manager queries.
• Application preferences fetching for branding and authentication configuration.
• Environment configuration loaded from public/environments-vars.json.

#rts-authentication: Authentication

A complete authentication system providing:

• Login page with support for standard credentials and OAuth providers.
• Multi-Factor Authentication (MFA): email, SMS, and authenticator app.
• Session management with automatic refresh (every 15 minutes) and token expiration handling.
• Password change flow with strength validation.
• Zustand-based session store persisted in localStorage.

#rts-charts: Chart components

Ready-to-use data visualization components built on Recharts:

• <Chart />: A wrapper component that accepts a QueryRequest, executes the query against the Front API, and renders the result.
• Supported chart types: Bar chart, Line chart, Pie chart.
• <Table />: A data table component for tabular query results.
• Built-in loading and error states.
• Dictionary support for translating field values into readable labels.

#Project structure

├── public/
│   └── environments-vars.json          # API & IAM endpoints configuration
├── src/
│   ├── main.tsx                        # Application entry point
│   ├── routes.tsx                      # Route definitions
│   ├── components/
│   │   └── ui/                         # Shadcn/UI components
│   ├── config/
│   │   └── i18n/                       # Translation files (EN/FR)
│   ├── contexts/                       # React contexts (Auth, Dictionaries, etc.)
│   ├── forepaas/                       # Data Platform modules
│   │   ├── ts-sdk/                     # SDK module
│   │   ├── rts-authentication/         # Authentication module
│   │   └── rts-charts/                 # Charts module
│   └── pages/
│       ├── Home.tsx                    # Landing page
│       └── dashboard/
│           ├── DashboardOne.tsx        # Example dashboard with PieChart + BarChart
│           └── DashboardTwo.tsx        # Example dashboard with LineChart + BarChart + Table
├── forepaas.json                       # Data Platform deployment configuration
├── vite.config.ts                      # Vite configuration
└── tailwind.config.ts                  # Tailwind CSS theming

#Getting started

#1. Create the application on the Platform

From your Project's home page, open Application Services and click Create an application.

Select the React Shadcn Vite template from the store, fill in the application name, and confirm.

#2. Configure the environment

The template connects to the Platform through two endpoints defined in public/environments-vars.json:

{
  "IAM_URL": "https://<PROJECT_NAME>.eu.dataplatform.ovh.net/cam?app_id=<APP_ID>",
  "API_URL": "https://<PROJECT_NAME>.eu.dataplatform.ovh.net/<API_ID>"
}

#3. Run locally

npm install
npm run dev

The dev server starts on http://localhost:3333.

#4. Build and deploy

npm run build

This generates a production-ready bundle in the /production folder. You can also use npm run zip to create a deployable archive.

On the Platform, the build and deploy process works the same way as described in the app deployment guide.

#Working with queries

The template uses QueryRequest objects to fetch data from the Front API. A query request contains:

#Example: using the Chicago dataset

If you followed the Getting Started tutorial, the template includes example dashboards compatible with the Chicago bike rides dataset.

Average rides per day of the week (PieChart):

const query: QueryRequest = {
  data: {
    fields: { avg_rides_per_day_per_station: ["select"] }
  },
  scale: {
    fields: ["week_day"]
  },
  filter: {},
  dynamic_parameters: []
};

Top 5 stations by total rides (BarChart):

const query: QueryRequest = {
  data: {
    fields: { rides: ["sum"] },
    limit: 5
  },
  scale: {
    fields: ["station_name"]
  },
  order: { rides: "desc" },
  filter: {},
  dynamic_parameters: []
};

These queries are rendered using the <Chart /> component:

<Chart
  title="Average rides per day"
  type="pie"
  query={query}
  dictionary={weekDayDictionary}
/>

#Customizing the template

This template is a starting point. You are expected to develop your own pages, components, and business logic on top of it. Here are a few common tasks:

#Add a new page

1. Create your component in src/pages/.
2. Add a route in src/routes.tsx.
3. Add a navigation link in src/components/Menu.tsx.

#Add a new chart

Use the <Chart /> component with your own QueryRequest:

import Chart from "@forepaas/rts-charts/components/Chart";

<Chart
  title="My custom chart"
  type="bar"
  query={myQueryRequest}
/>

Supported types: bar, line, pie. For tabular data, use the <Table /> component.

#Add translations

Translation files are located in src/config/i18n/. Add your keys to both en.json and fr.json, then use them with the useTranslation hook from i18next:

const { t } = useTranslation();
return <h1>{t("my.translation.key")}</h1>;

#Customize the theme

Tailwind CSS theming is configured in tailwind.config.ts. The template uses CSS variables (HSL-based) for colors, supporting both light and dark modes.

Shadcn/UI components can be customized or extended using the Shadcn CLI.

#Go further

• Front API documentation: Learn how to customize and extend your API.
• Identity Access Manager: Configure authentication providers and access rights.
• Analytics Manager: Create and manage your queries.
• Apps documentation: Learn about the visual no-code alternative.

If you need training or technical assistance to implement our solutions, contact your sales representative or click on this link to get a quote and ask our Professional Services experts for a custom analysis of your project.

Ask questions, give your feedback and interact directly with the team building the Data Platform on the dedicated Discord channel.

If you need support with your OVHcloud services, create a request in our Help Centre.

Join our community of users.