Character Creation Tool

This project originated as a hobby project within Google Sheets, where I created a template for character creation in fictional settings and showcased these characters in a list. The primary goal was to provide an overview and support the organization of characters for use cases such as Dungeons & Dragons or other settings. I’ve since remade this setup using React and implemented similar features, which in turn gave me an avenue to gain more experience with React itself, data manipulation, state management.

Currently, it features a home page where all existing categories are shown, a character overview list with detailed information of the selected character, a character creation form, and a category creation form. Due to the ‘modular’ nature where each page has its own focus on a primary feature the project gave me opportunities to explore additional features and allows me to continue building upon it in the future.

Tech Stack

The following technologies were used:

Front-End

Vite, React, TypeScript, Chakra UI, Axios

Back-End

Back-end

For the back-end it was important for me to set up my relational database in such a way that it supports multiple categories so that each character can have a category assigned to it. Further choices for what races (fantasy species) and classes are available can then be determined by what category has been chosen. In addition, data types are further validated by the backend as well. Within the data models above, it can be further noticed that the Characters table is central to how the database is set up, where foreign keys from other tables are used as reference (through their IDs) and used to retrieve more corresponding data from their tables.

Features

Sidebar

The first thing I started to work on was the sidebar, where I created various states for when content should be visible on the “main page” through a switch. This switch effectively simulates pages, where clicking the button now correctly loops through by updating an activePage variable. This code can all be found within app.tsx.

Page Content Switch

Copy to Clipboard

const renderPageContent = () => {
    switch (activePage) {
      case 1:
        return (
          <Flex...
          </Flex>
        );
      case 2:
        return (
          <Flex
            alignSelf="flex-start"
            h="100%"
            w="100%"
            ml="100px"
            justifyContent="flex-start"
            overflowY="hidden"
          >
            <CharacterList />
          </Flex>
        );
      case 3:
        return (
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            h="100%"
            mb="100px"
          >
            <Text
              color="var(--chakra-colors-gray-200)"
              textAlign="center"
              fontSize="var(--chakra-fontSizes-xl)"
              fontWeight="var(--chakra-fontWeights-medium)"
            >
              CREATE NEW CHARACTER
            </Text>
            <CharacterForm />
          </Flex>
        );
      case 4:
        return (
          <Flex
            flexDir="column"
            alignItems="center"
            justifyContent="center"
            h="100%"
          >
            <Text
              color="var(--chakra-colors-gray-200)"
              textAlign="center"
              fontSize="var(--chakra-fontSizes-xl)"
              fontWeight="var(--chakra-fontWeights-medium)"
            >
              CREATE NEW CATEGORY
            </Text>
            <CategoryForm />
          </Flex>
        );
      default:
        return <Text color="white">Please pick a page</Text>;
    }
  };

handlePageChange

Copy to Clipboard

Character creation form

Within the character creation form, the select input values for races and classes are retrieved by selecting the category at the top and referencing its ID, ensuring that the correct choices are always presented to the user. In addition to back-end, validation is also done on the front-end, where certain fields of the form are mandatory or character limits and types are enforced. The form listens for input through a change event and updates the values that will be submitted to the database.

handleChange

Copy to Clipboard

The code for the create character page can be found in components/createCharacterForm.tsx

Character overview list

This page is perhaps the most important page of the app. Upon first opening it, the user is prompted to select a category, which will load the list of characters belonging to the selected category. A selectedCharacter variable determines which character’s data is displayed as main content of the page.

Selected Character

Copy to Clipboard

const [categoryData, setCategoryData] = useState([]);
  const [characterData, setCharacterData] = useState([]);
  const [selectedCategory, setselectedCategory] = useState<categoryId>({
    id: null,
  });
  const [selectedCharacter, setSelectedCharacter] =
    useState<CharacterData | null>(null);

// Retrieve category data
  const getCategoryData = async () => {
    try {
      const res = await axios.get(
        "http://localhost:3000/categories?select==id,name&order=name.asc"
      );
      setCategoryData(res.data);
    } catch (error) {
      console.error("Failed to fetch category data:", error);
    }
  };

// Retrieve all characters from selected category and select first character
  const getCharacterData = useCallback(async () => {
    try {
      if (selectedCategory.id !== null) {
        const res = await axios.get(
          `http://localhost:3000/characters?select=*,races(name),classes(name)&order=name.asc&category=eq.${selectedCategory.id}`
        );
        setCharacterData(res.data);

if (res.data.length > 0) {
          setSelectedCharacter(res.data[0]);
        } else {
          setSelectedCharacter(null);
        }
      }
    } catch (error) {
      console.error("Failed to fetch character data:", error);
    }
  }, [selectedCategory.id]);

// Change category ID value to number
  const handleChangeToNumber = (
    e: ChangeEvent<HTMLSelectElement | HTMLInputElement>
  ) => {
    setselectedCategory({
      ...selectedCategory,
      [e.target.name]: Number(e.target.value),
    });
  };

useEffect(() => {
    const fetchData = async () => {
      await getCategoryData();
      await getCharacterData();
    };
    fetchData();
  }, [getCharacterData, selectedCategory.id]);

Another important function of this page is the ability to delete characters, which takes the ID of the selected character and dynamically inserts into the REST API’s URL parameters so that the appropriate character gets deleted. This then retrieves the category’s character data again, essentially refreshing the list of existing characters.

The page itself is divided into three components:

characterList, the main page component where the character and category data gets fetched and passed on to the other two components.
characterCard, small character preview cards showcasing a character’s name, race (fantasy species), and class
characterSection, where the character’s detailed information gets displayed, such as a description, age, place of origin, etc

For the rest of the code, see the repository on GitLab:
https://gitlab.com/SemDerksen/character-creator-react