Connect your data

The demo pages use sample data. Connect your backend by replacing the functions that read those samples with database queries or API calls, while keeping the data the screen needs.

How data flows today

Open a page's page.tsx and find the function it calls to load data. For data loaded with the page, these functions commonly live in src/actions/ and read records from src/mocks/.

Start with the function's return value and the components that use it. Together, they show which fields the screen needs and whether it expects an array, a single record or an object containing several values.

Swap in a database or API

Replace the sample-data read in the loading function with your database query or server-side API call.

Check how the page uses the returned data. If your backend uses different field names or organizes records differently, adapt its response before returning it. This lets the existing components continue to work with your new data source.

Use any inputs the function receives when querying the backend, so the page's existing controls still affect the results. Remove a mock file only after checking that no other code imports it.

Data fetched in the browser

Interactive features may make additional requests through functions in src/services/. A service function sends an HTTP request to an endpoint and returns data for the feature to use.

Existing services use the shared Axios client in src/utils/axios/. Its base URL is configured through appConfig.api.baseUrl in src/configs/app.config.ts. Update the relevant service to call your endpoint and return the expected data.

Server endpoints

Server-side loading functions can query a database or call another API directly. For browser requests, use an existing backend endpoint or add a Next.js route handler under src/app/api/<name>/route.ts, which handles /api/<name>.

Implement the database query or API call in that handler. Keep database connections and private API credentials on the server.

Saving changes

Loading real records connects the read operation. Connect create, edit and delete handlers separately; some demo forms update the screen without saving to a backend.

Replace their submit or mutation handlers with calls to your save function or API. Wait for the save to succeed before showing success or closing the form, then update the displayed data or fetch it again. If saving fails, show an error and keep the entered values available.

Types

Keep route-specific data types beside the route in types.ts and shared types in src/types/. If you change the data structure the screen uses, update its types and components together.