Dictionary Web App - React | TS | Fetch | Tailwind | Mobile-first

This was an enjoyable challenge to solve. Some highlights are:

1. Properly handling asynchronous code.

• this was done by adding fallback UI's for different states.
• there is a loading UI for when the fetch is processing
• there is an error UI for when there is an error with the fetch
• there is the main UI for when the fetch successfully returns data

1. Global state with react

• zustand was the tech stack of choice for this solution
• amongst other things, used to implement theming for entire application

1. Mobile-first design

• styles were written with a mobile-first solution in mind
• used tailwind config to implement multiple breakpoints

I had the following issues with typescript during development:

1. Typescript error 1

• here is my original solution in the App component

const App = () => {
  const theme = useDictionaryStore((state) => state.theme);
  return (
    <>
      <div
        className="w-full h-full flex justify-center items-center"
        style={{
          backgroundColor: theme[theme.active].background,
        }}
      >
        <div className="w-full h-full overflow-x-hidden px-[24px] py-[24px] md:px-[39px] md:py-[58px] lg:max-w-[736px]">
          <Header />
          <Input />
          <Response />
        </div>
      </div>
    </>
  );
};

• theme[theme.active] was getting the following typescript error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ active: string; light: { primary: string; secondary: string; accent: string; background: string; background_alt: string; }; dark: { primary: string; secondary: string; accent: string; background: string; background_alt: string; }; }'. No index signature with a parameter of type 'string' was found on type '{ active: string; light: { primary: string; secondary: string; accent: string; background: string; background_alt: string; }; dark: { primary: string; secondary: string; accent: string; background: string; background_alt: string; }; }'
• I was able to get around this with my current solution, but was wondering if there was a way to resolve using my first solution:

style={{backgroundColor: theme[theme.active].background,}}

1. Typescript error 2

• here is my original solution in Header component

<p
   style={{ fontFamily: "serif" }}
   data-font="serif"
   onClick={(e: React.MouseEvent<HTMLParagraphElement>) => {
      e.stopPropagation();
      setFontFamily(e.target.dataset.font);
      setShowFontSelect((prevState) => {
         return !prevState;
       });
    }}
   >
      Serif
</p>

• e.target.dataset was getting the following typescript error: Property 'dataset' does not exist on type 'EventTarget'
• I was able to get around this with my current solution, but was wondering if there was a way to resolve using my first solution:

setFontFamily(e.target.dataset.font);