{
  lib,
  stdenv,
  fetchFromGitHub,
  fetchYarnDeps,
  nodejs,
  yarn,
  fixup_yarn_lock,
  google-fonts,
  api_url ? "http://127.0.0.1:3000"
}:

stdenv.mkDerivation (
  finalAttrs: {
    pname = "crabfit-frontend";
    version = "unstable-2023-08-02";

    src = fetchFromGitHub {
      owner = "GRA0007";
      repo = "crab.fit";
      rev = "628f9eefc300bf1ed3d6cc3323332c2ed9b8a350";
      hash = "sha256-jy8BrJSHukRenPbZHw4nPx3cSi7E2GSg//WOXDh90mY=";
    };

    sourceRoot = "source/frontend";

    patches = [
      ./01-privacy.patch
      ./02-karla.patch
      ./03-standalone.patch
    ];

    offlineCache = fetchYarnDeps {
      yarnLock = "${finalAttrs.src}/frontend/yarn.lock";
      hash = "sha256-jkyQygwHdLlEZ1tlSQOh72nANp2F29rZbTXvKQStvGc=";
    };

    nativeBuildInputs = [
      nodejs
      yarn
      fixup_yarn_lock
    ];

    configurePhase = ''
      runHook preConfigure

      export HOME="$PWD"

      echo 'NEXT_PUBLIC_API_URL="${api_url}"' > .env.local

      fixup_yarn_lock yarn.lock
      yarn config --offline set yarn-offline-mirror ${finalAttrs.offlineCache}
      yarn install --offline --frozen-lockfile --ignore-platform --ignore-scripts --no-progress --non-interactive
      patchShebangs node_modules

      mkdir -p src/app/fonts
      cp "${
        google-fonts.override { fonts = [ "Karla" ]; }
      }/share/fonts/truetype/Karla[wght].ttf" src/app/fonts/karla.ttf

      runHook postConfigure
    '';

    buildPhase = ''
      runHook preBuild

      NODE_ENV=production yarn build

      runHook postBuild
    '';

    installPhase = ''
      mkdir $out
      cp -R .next/* $out
      cp -R public $out/standalone/
      cp -R .next/static $out/standalone/.next

      ln -s /var/cache/crabfit $out/standalone/.next/cache
    '';

    meta = with lib; {
      description = "Enter your availability to find a time that works for everyone";
      homepage = "https://github.com/GRA0007/crab.fit";
      license = licenses.gpl3;
      maintainers = with maintainers; [ thubrecht ];
    };
  }
)