Developer Setup

Relevant source files

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

• package.json
• vite.config.ts
• tsconfig.app.json
• eslint.config.js
• src/main.tsx
• index.html
• src/App.tsx

This document provides a technical overview of the project's setup, dependencies, build process, and configuration. It is intended for developers who wish to contribute to the Character-Sheet-Maker project or understand its underlying architecture. The project is a "Local-First" web application built with React, TypeScript, and Vite, designed for creating custom RPG character sheets.

The setup is based on modern frontend tooling, including Vite for the development server and build process, TypeScript for type safety, and Tailwind CSS for styling. State management is handled by Zustand, and the grid-based layout is powered by React Grid Layout.

Sources: README.md:10, package.json, vite.config.ts

Prerequisites

The project relies on Node.js and its ecosystem. While specific versions are not enforced, the setup uses modern features. The core dependencies and scripts are managed via a package manager (e.g., npm, yarn).

Sources: package.json

Core Technologies and Dependencies

The project is built on a foundation of React 19 and TypeScript 5. Vite serves as the build tool, configured with the SWC plugin for fast compilation.

Sources: package.json:15, package.json:20, package.json:49, vite.config.ts:2

The following diagram illustrates the relationship between the main technologies used in the project.

Runtime Dependencies

These packages are required for the application to run in production.

Package	Version	Description
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 server renderers for React.
react-router-dom	^7.9.6	Handles client-side routing.
zustand	^5.0.8	A small, fast, and scalable state-management solution. Used for global state.
react-grid-layout	^1.5.2	A draggable and resizable grid layout for React.
vite	npm:rolldown-vite@7.2.5	Next-generation frontend tooling (overridden to use Rolldown).
tailwindcss	^4.1.17	A utility-first CSS framework for styling.
@radix-ui/*	*	A collection of unstyled, accessible UI components.
lucide-react	^0.554.0	A library of simply beautiful open-source icons.
html-to-image	^1.11.13	Used for exporting the character sheet to an image.
jspdf	^3.0.4	Used for exporting the character sheet to a PDF.

Sources: package.json:14-31

Development Dependencies

These packages are only needed for local development and testing.

Package	Version	Description
typescript	~5.9.3	Superset of JavaScript that adds static types.
@vitejs/plugin-react-swc	^4.2.2	Vite plugin that uses SWC for extremely fast React refreshes.
eslint	^9.39.1	Pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript.
typescript-eslint	^8.46.4	ESLint plugin which provides linting rules for TypeScript.
@types/*	*	Type definitions for various libraries.

Sources: package.json:33-49

Available Scripts

The package.json file defines scripts for common development tasks.

Script	Command	Description
dev	vite	Starts the Vite development server with Hot Module Replacement (HMR).
build	tsc -b && vite build	First, runs the TypeScript compiler to check for errors, then bundles the application for production.
lint	eslint .	Runs ESLint to analyze the code for potential errors and style issues.
preview	vite preview	Serves the production build locally to preview it.

Sources: package.json:6-11

The development and build workflow can be visualized as follows:

Configuration

The project contains several configuration files that define how the tools and compiler behave.

Vite Configuration

The vite.config.ts file configures the Vite build tool.

• Plugins: It uses @vitejs/plugin-react-swc for React integration and @tailwindcss/vite for Tailwind CSS processing.
• Path Aliases: It sets up a path alias @{} to resolve to the ./src directory, which simplifies import statements.

// vite.config.ts
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Sources: vite.config.ts:6-13

TypeScript Configuration

The TypeScript setup is split into multiple files, with tsconfig.json acting as the root file that references tsconfig.app.json and tsconfig.node.json.

The main application configuration is in tsconfig.app.json:

• Target: Compiles to ES2022 JavaScript.
• Module Resolution: Uses bundler mode, which is optimized for modern bundlers like Vite.
• JSX: Configured for react-jsx transform.
• Strict Mode: strict mode is enabled for strong type-checking.
• Path Aliases: Mirrors the Vite configuration, mapping @/* to ./src/*. This is crucial for both the compiler and editor intellisense to resolve module paths correctly.

// tsconfig.app.json
{
  "compilerOptions": {
    "target": "ES2022",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

Sources: tsconfig.app.json:3-26, tsconfig.json:9-11

Linting Configuration

Linting is configured in eslint.config.js. It uses a flat config format and combines recommended rules from:

• @eslint/js
• typescript-eslint
• eslint-plugin-react-hooks
• eslint-plugin-react-refresh

The configuration applies to all .ts and .tsx files and ignores the dist directory.

Sources: eslint.config.js:1-19

Application Entrypoint

The application bootstrap process starts from index.html, which is the main entry point for the browser.

1. The browser loads index.html.
2. The HTML contains a div with the ID root.
3. A script tag points to /src/main.tsx, which Vite processes and serves.
4. src/main.tsx uses ReactDOM.createRoot to take control of the #root element.
5. It then renders the main <App /> component, wrapped in <React.StrictMode>.
6. The <App /> component sets up react-router-dom to handle page routing, such as the home page (/) and the editor page (/editor/:sheetId).

This flow is visualized below: