A modern React-based character sheet application for TaleSpire, specifically designed for the DSA5 (Das Schwarze Auge 5) roleplaying game system. This digital character sheet helps players manage their DSA5 characters within the TaleSpire virtual tabletop environment.

Features

Complete Character Management: Track attributes, skills, combat stats, equipment, magic, religion, and more
Modern UI: Clean, responsive interface built with React and TailwindCSS
TaleSpire Integration: Optimized for seamless use with TaleSpire virtual tabletop
Import/Export: Save and load character data (via the header component)
Modular Architecture: Well-organized codebase with separation of concerns
Type Safety: Built with TypeScript for enhanced code quality and developer experience
Fast Development: Powered by Vite for quick iteration and hot module replacement

Character Sheet Sections

Attributes: Manage core character attributes
Skills: Track character skills and abilities
Combat: Handle combat-related stats and actions
Equipment: Manage character inventory and items
Magic: Track spells and magical abilities
Religion: Manage religious aspects of your character
Notes: Keep track of important character information

Tech Stack

Frontend: React 19.1.0 + TypeScript 5.8.3
Build Tool: Vite 7.0.0
Styling: TailwindCSS 4.1.11
Linting: ESLint 9.29.0 with React hooks support
Package Manager: npm

Getting Started

Prerequisites

Node.js (LTS version recommended)
npm package manager
TaleSpire (for actual use in-game)

Installation

# Clone the repository
git clone <repository-url>
cd talespire-dsa5-charactersheet

# Install dependencies
npm install

# Start development server
npm run dev

Development

Available Scripts

npm run dev - Start the development server with hot reload
npm run build - Build the application for production
npm run preview - Preview the production build locally
npm run lint - Run ESLint to check code quality

Project Structure

src/
├── api/            # API interactions
├── assets/         # Static assets
├── configs/        # Configuration files
├── modules/        # Feature modules
│   ├── footer/     # Footer components
│   ├── header/     # Header components with import/export
│   └── main/       # Main content
│       ├── components/     # UI components
│       ├── design-system/  # Design tokens and UI primitives
│       ├── hooks/          # Custom React hooks
│       ├── modules/        # Feature sub-modules
│       │   ├── attributes/ # Character attributes
│       │   ├── combat/     # Combat features
│       │   ├── equipment/  # Inventory management
│       │   ├── magic/      # Magic and spells
│       │   ├── notes/      # Character notes
│       │   ├── religion/   # Religious aspects
│       │   └── skills/     # Character skills
│       ├── services/       # Service layer
│       ├── states/         # State management
│       └── utils/          # Utility functions
└── App.tsx         # Main application component

Building for Production

To build the application for production:

npm run build

This will create a dist directory with the compiled assets ready for deployment.

To preview the production build locally:

npm run preview

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

License

This project currently does not specify a license. It is recommended to add a LICENSE file to clarify the terms under which the code can be used.

Screenshots

Coming soon

Built with ❤️ for the DSA5 and TaleSpire communities