# React Router Frontend A frontend can be added using the `add-frontend` tool, either manually or via the coding agent. This frontend serves as the main user-facing entry point to the distributed system. It is primarily used for user interaction and for visualizing backend functionality. The frontend typically triggers requests to API endpoints to fetch or submit data and then displays the results. We use **React** as the frontend framework, with development commonly involving **HTML**, **TypeScript**, and **CSS**. For routing, we use **React Router 17**, chosen for its predictable and easy-to-understand structure for both humans and AI. The routes you can navigate to are defined under: ``` modules/your-frontend-name/app/routes ``` We also integrate **shadcn/ui** components, so neither you nor the AI needs to build UI components from scratch. These components are easy to customize, and all their source code lives directly in your project under: ``` modules/your-frontend-name/components/ui ``` Instead of installing dependencies manually, you (or the coding agent) should use the `add-dependencies` tool, which installs and validates them automatically. The frontend is configured for hot reload, which allows you to review changes as soon as you save them. This also raises errors early during development for timely fixes. Furthermore, the feature makes manual container restarts obsolete for most use cases. To view the frontend, open the following URL in your browser: ``` http://localhost:51732 ``` Bluetext uses the bun runtime environment for fast start-up times and an excellent developer experience. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.bluetext.dev/tech-stack-overview/react-router-frontend.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.