Home

Relevant source files

The following files were used as context for generating this wiki page:

• src/App.tsx
• README.md
• index.html
• src/pages/Editor.tsx
• package.json
• src/components/layout/TopBar.tsx

The Home page serves as the primary entry point for the RPG Character Sheet Builder application. It is a simple, minimalist landing page designed to direct users immediately toward the core functionality of the application: creating a new character sheet. Its main purpose is to provide a clear starting point before transitioning the user to the main Editor interface.

This page is part of a "Local-First" web application built with React, TypeScript, and Vite, intended for designing, customizing, and exporting character sheets for any tabletop role-playing game. The Home page itself does not contain any complex logic; it is a stateless functional component focused on navigation.

Sources: src/App.tsx:8-15, README.md:1-12

Application Routing and Component Definition

The application's routing is managed by react-router-dom. The main App component defines the available routes, mapping the root path (/) to the Home component.

Sources: src/App.tsx:17-24

Home Component

The Home component is a simple functional component defined directly within App.tsx. Its structure consists of a main div that centers its children, a heading (h1), and a Link component from react-router-dom that wraps a Button UI component.

// src/App.tsx:8-15
const Home = () => (
  <div className="flex flex-col items-center justify-center h-screen gap-4">
    <h1 className="text-4xl font-bold">RPG Sheet Builder</h1>
    <Link to="/editor/new">
      <Button size="lg">Crear Nueva Hoja</Button>
    </Link>
  </div>
);

Sources: src/App.tsx:8-15

Routing Configuration

The routing is configured inside the App function using the <Routes> and <Route> components. The application defines two primary routes.

Path	Component	Description
/	Home	The main landing page of the application.
/editor/:sheetId	Editor	The main editor interface for creating and modifying character sheets. The :sheetId is an optional parameter.

Sources: src/App.tsx:19-23

The following diagram illustrates the basic routing flow.

Sources: src/App.tsx:19-23

User Interaction and Navigation Flow

The user journey begins at the Home page. The only interactive element is the "Crear Nueva Hoja" (Create New Sheet) button. When a user clicks this button, react-router-dom handles the navigation.

1. The user loads the application, and the Home component is rendered for the / path.
2. The user clicks the Button component.
3. The Link component triggers a navigation event to the /editor/new path.
4. The router matches this new path and renders the Editor component, loading the main character sheet creation interface.

*Sources: src/App.tsx:11-13, src/pages/Editor.tsx *

This sequence diagram visualizes the user's navigation from the Home page to the Editor.

Sources: src/App.tsx:11-15, src/pages/Editor.tsx:8-25

Application Bootstrap

The application's lifecycle starts with the index.html file, which serves as the static entry point.

1. The browser loads index.html.
2. This file contains a single <div id="root"></div>.
3. A script tag, <script type="module" src="/src/main.tsx"></script>, loads the main TypeScript/React module.
4. The main.tsx file (not provided, but inferred from standard React setup and index.html) uses React DOM to render the <App /> component into the root div.
5. The <App /> component, with its router, then displays the Home component by default.

<!-- index.html:9-11 -->
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>

Sources: index.html:9-12

This flow is supported by the project's dependencies, which include react, react-dom, and react-router-dom.

Dependency	Version	Purpose
react	^19.2.0	Core library for building the user interface.
react-dom	^19.2.0	Serves as the entry point to the DOM and for rendering the React tree.
react-router-dom	^7.9.6	Handles client-side routing for the application.

Sources: package.json:15-26