Multi-tenant applications in Remix - Mini Project: Build & Apply

Multi-tenant Application Setup with Remix

📖 Scenario: You are building a simple multi-tenant web application using Remix. Each tenant has its own set of users and data. You want to set up the basic structure to handle multiple tenants by storing tenant information and selecting the current tenant based on a tenant ID.

🎯 Goal: Build a basic multi-tenant setup in Remix where you create tenant data, configure a current tenant ID, filter tenant-specific users, and display the tenant's name in a component.

📋 What You'll Learn

Create a dictionary called tenants with two tenants: 'tenant1' and 'tenant2', each having a name and a list of users.

Create a variable called currentTenantId and set it to 'tenant1'.

Create a variable called currentUsers that holds the list of users for the currentTenantId tenant.

Create a React functional component called TenantInfo that displays the current tenant's name inside an <h1> tag.

💡 Why This Matters

🌍 Real World

Multi-tenant applications are common in SaaS products where one app serves many customers, each with their own data and settings.

💼 Career

Understanding multi-tenant data handling is important for building scalable web apps that serve multiple clients securely and efficiently.

1

Create tenant data structure

Create a constant called tenants that is an object with two keys: 'tenant1' and 'tenant2'. Each key should map to an object with a name string and a users array of strings. Use exactly these values: 'tenant1' has name 'Alpha Corp' and users ['Alice', 'Bob']; 'tenant2' has name 'Beta LLC' and users ['Carol', 'Dave'].

Remix

# Create the tenants object with two tenants and their users
# Your code here

Hint

Use a JavaScript object with keys tenant1 and tenant2. Each key maps to an object with name and users properties.

2

Set current tenant ID

Create a constant called currentTenantId and set it to the string 'tenant1'.

Remix

const tenants = {
  tenant1: { name: 'Alpha Corp', users: ['Alice', 'Bob'] },
  tenant2: { name: 'Beta LLC', users: ['Carol', 'Dave'] }
};

// Set the current tenant ID
// Your code here

Hint

Just create a constant string variable named currentTenantId with value 'tenant1'.

3

Get users for current tenant

Create a constant called currentUsers and set it to the users array of the tenant in tenants matching currentTenantId.

Remix

const tenants = {
  tenant1: { name: 'Alpha Corp', users: ['Alice', 'Bob'] },
  tenant2: { name: 'Beta LLC', users: ['Carol', 'Dave'] }
};

const currentTenantId = 'tenant1';

// Get the users for the current tenant
// Your code here

Hint

Access the users property of the tenant using bracket notation with currentTenantId.

4

Create TenantInfo component

Create a React functional component called TenantInfo that returns an <h1> element displaying the current tenant's name from the tenants object using currentTenantId.

Remix

const tenants = {
  tenant1: { name: 'Alpha Corp', users: ['Alice', 'Bob'] },
  tenant2: { name: 'Beta LLC', users: ['Carol', 'Dave'] }
};

const currentTenantId = 'tenant1';

const currentUsers = tenants[currentTenantId].users;

// Create TenantInfo component
// Your code here

Hint

Define a function named TenantInfo that returns JSX with an <h1> showing the tenant's name. Export it as default.