Creating the system’s frontend

As we have prepared the client and the GraphQL layer together with selectors and TypeScript types, we can now code the components, routing, and application logic. In this section, we will set up the frontend and make a publicly visible Home page.

Setting up the frontend

In this project, we will mostly use the Shadcn UI for the visual part of our frontend. It looks nice, doesn’t need any additional styling work for its components, and offers full customizability.

First of all, we can generate components for our UI (later on, we can use those components to compose full layouts out of them):

npx shadcn-ui@latest add input button label card textarea sonner

Next, we need to set up the main app file and the routing structure. So, inside the src/main.tsx file, insert the following content:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import &quot...