Multi-tenant applications in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to get the tenant ID from the request URL in a Remix loader.

Remix

export async function loader({ request }) {
  const url = new URL(request.url);
  const tenantId = url.pathname.split('/')[[1]];
  return { tenantId };
}

Drag options to blanks, or click blank then click option'

A1

B2

C3

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using index 0 which is empty string due to leading slash

Using index 2 which is usually the next segment

Using index 3 which is usually the next segment

The tenant ID is usually the first segment after the domain, which is at index 1 in the pathname split array.

2fill in blank

medium

Complete the code to create a Remix route that uses the tenant ID as a dynamic segment.

Remix

export const loader = async ({ params }) => {
  const tenantId = params.[1];
  return { tenantId };
};

Drag options to blanks, or click blank then click option'

Aslug

BuserId

CtenantId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' when the segment is named 'tenantId'

Using 'slug' or 'userId' which are unrelated

The dynamic segment in the route file should be named $tenantId, so the param key is 'tenantId'.

3fill in blank

hard

Fix the error in this Remix loader to correctly fetch tenant-specific data.

Remix

export async function loader({ params }) {
  const tenant = params.[1];
  const data = await fetch(`/api/data?tenant=${tenant}`);
  return data.json();
}

Drag options to blanks, or click blank then click option'

Aid

BtenantId

Ctenant

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'tenant' instead of 'tenantId'

Using 'id' or 'user' which are unrelated

The param key must match the dynamic segment name, which is 'tenantId' in this case.

4fill in blank

hard

Fill both blanks to create a tenant-aware API route handler in Remix.

Remix

export async function loader({ request, params }) {
  const tenantId = params.[1];
  const url = new URL(request.url);
  const resource = url.searchParams.get('[2]');
  return fetch(`https://api.example.com/${tenantId}/${resource}`);
}

Drag options to blanks, or click blank then click option'

AtenantId

Bresource

Cid

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' instead of 'tenantId' for params

Using 'data' instead of 'resource' for query param

The param key is 'tenantId' and the query parameter to get is 'resource' to build the API URL correctly.

5fill in blank

hard

Fill all three blanks to implement tenant-specific context in a Remix root component.

Remix

import { createContext, useContext } from 'react';

const TenantContext = createContext(null);

export function TenantProvider({ children, [1] }) {
  return <TenantContext.Provider value=[2]>[3]</TenantContext.Provider>;
}

export function useTenant() {
  return useContext(TenantContext);
}

Drag options to blanks, or click blank then click option'

AtenantId

Cchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'children' and 'tenantId' props

Not passing the tenant ID as context value

The provider receives tenantId as a prop, passes it as the context value, and renders children inside.