Technical Blog Article — App 59: CRM Visual with React, Fluent UI, TypeScript, and Vite

Introduction

Modern enterprise systems rely heavily on CRM interfaces. CRM stands for:

Customer Relationship Management

These systems are used to manage:

• customers
• leads
• sales opportunities
• contracts
• support relationships
• account history
• business workflows

Applications such as:

• Microsoft Dynamics
• Salesforce
• SAP
• HubSpot
• ServiceNow

all depend on enterprise dashboard architecture and visual information organization.

In App 59 — CRM Visual, we create a professional Microsoft-style CRM interface using:

• React
• TypeScript
• Vite
• Fluent UI

This application belongs to Block 3 — Professional Fluent UI Applications, where the ReactLab roadmap evolves into enterprise-level component architecture and Microsoft-inspired UI systems.

The main objective of this app is understanding how React components compose together to build:

• enterprise dashboards
• CRM interfaces
• reusable business cards
• data-driven layouts
• professional Fluent UI systems

This app intentionally focuses on:

• architecture
• composition
• visual organization
• declarative rendering

without introducing:

• APIs
• reducers
• authentication
• backend systems
• effects

because mastering visual architecture first is extremely important before moving into complex enterprise data systems.

Understanding the React Mental Model

This app reinforces one of the most important React ideas:

UI = function(data)

The interface is not manually manipulated.

Instead:

• data exists
• React renders components
• components derive UI from data
• React updates the browser DOM automatically

The CRM dashboard becomes:

Customer data
→ React components
→ Enterprise CRM interface

This is declarative UI rendering.

Official documentation:

• Thinking in React

Why CRM Interfaces Matter

CRM interfaces are ideal for React learning because they naturally require:

• reusable components
• list rendering
• enterprise layouts
• visual status indicators
• dashboard composition
• responsive grids
• consistent design systems

This makes CRM systems one of the best real-world examples of component architecture.

In this app, we introduce:

• customer cards
• enterprise dashboard spacing
• Fluent UI enterprise components
• responsive layout composition
• typed business models

Creating the Project

Create the app

cd C:\ReactApps
New-Item bloco03 -ItemType Directory
cd bloco03
npm create vite@latest app59-crm-visual -- --template react-ts
cd app59-crm-visual
npm install

Installing Fluent UI

npm install @fluentui/react-components @fluentui/react-icons

Fluent UI is the official Microsoft design system for enterprise applications.

It provides:

• accessible UI controls
• enterprise spacing
• Microsoft typography
• keyboard navigation
• professional visual consistency

Official documentation:

• Fluent UI React Components

Creating the Folder Structure

New-Item src\components -ItemType Directory
New-Item src\data -ItemType Directory
New-Item src\models -ItemType Directory
New-Item src\styles -ItemType Directory

Create files:

New-Item src\models\Customer.ts -ItemType File
New-Item src\data\customers.ts -ItemType File
New-Item src\components\CRMHeader.tsx -ItemType File
New-Item src\components\CustomerCard.tsx -ItemType File
New-Item src\components\CustomerGrid.tsx -ItemType File
New-Item artigo.md -ItemType File

Final Project Structure

app59-crm-visual/
  src/
    components/
      CRMHeader.tsx
      CustomerCard.tsx
      CustomerGrid.tsx
    data/
      customers.ts
    models/
      Customer.ts
    styles/
    App.tsx
    main.tsx
    index.css

This separation is critical in enterprise React development because:

• models define business structure
• data provides rendering sources
• components render UI
• styles centralize visual behavior

Creating the Customer Model

src\models\Customer.ts

export type CustomerStatus =
  | "Active"
  | "Pending"
  | "Inactive";
export interface Customer {
  id: number;
  company: string;
  contact: string;
  email: string;
  status: CustomerStatus;
  revenue: string;
}

Why TypeScript Models Matter

This interface guarantees that every customer object has a predictable structure.

Benefits:

• autocomplete
• safer refactoring
• maintainability
• scalability
• type safety
• enterprise consistency

Without TypeScript:

• objects become unpredictable
• rendering bugs become easier to create
• large React apps become difficult to maintain

Official documentation:

• TypeScript Documentation

Creating CRM Data

src\data\customers.ts

import type { Customer } from "../models/Customer";
export const customers: Customer[] = [
  {
    id: 1,
    company: "Contoso Ltd",
    contact: "John Carter",
    email: "john@contoso.com",
    status: "Active",
    revenue: "$120,000",
  },
  {
    id: 2,
    company: "Northwind Group",
    contact: "Sarah Johnson",
    email: "sarah@northwind.com",
    status: "Pending",
    revenue: "$48,000",
  },
  {
    id: 3,
    company: "Fabrikam Inc",
    contact: "Michael Adams",
    email: "michael@fabrikam.com",
    status: "Inactive",
    revenue: "$12,000",
  },
];

Why Static Data Is Important

At this stage of the roadmap, the goal is mastering:

• rendering
• composition
• layout architecture
• reusable UI

before introducing:

• APIs
• effects
• async workflows

Learning progression matters.

The ReactLab roadmap evolves gradually:

Static UI
→ Composition
→ State
→ Effects
→ APIs
→ Enterprise systems

Creating the Header Component

src\components\CRMHeader.tsx

import {
  Text,
  Title1,
} from "@fluentui/react-components";
export function CRMHeader() {
  return (
    <header
      style={{
        marginBottom: "32px",
      }}
    >
      <Title1>
        CRM Visual Dashboard
      </Title1>
      <Text>
        Enterprise customer relationship management interface.
      </Text>
    </header>
  );
}

Understanding Component Responsibility

A React component should answer:

What part of the UI am I responsible for?

This component is responsible only for:

• dashboard identity
• title
• subtitle

Small focused components improve:

• reuse
• maintainability
• readability

Official documentation:

• Your First Component

Creating the Customer Card

src\components\CustomerCard.tsx

import {
  Badge,
  Body1,
  Card,
  CardHeader,
  Caption1,
  Text,
  Title3,
} from "@fluentui/react-components";
import {
  Person24Regular,
} from "@fluentui/react-icons";
import type { Customer } from "../models/Customer";
interface CustomerCardProps {
  customer: Customer;
}
function getBadgeAppearance(
  status: Customer["status"]
) {
  if (status === "Active") {
    return "filled" as const;
  }
  if (status === "Pending") {
    return "tint" as const;
  }
  return "outline" as const;
}
export function CustomerCard({
  customer,
}: CustomerCardProps) {
  return (
    <Card
      style={{
        padding: "20px",
      }}
    >
      <CardHeader
        image={<Person24Regular />}
        header={
          <Title3>
            {customer.company}
          </Title3>
        }
        description={
          <Caption1>
            {customer.contact}
          </Caption1>
        }
      />
      <Body1>
        {customer.email}
      </Body1>
      <div
        style={{
          marginTop: "16px",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Badge
          appearance={getBadgeAppearance(
            customer.status
          )}
        >
          {customer.status}
        </Badge>
        <Text weight="semibold">
          {customer.revenue}
        </Text>
      </div>
    </Card>
  );
}

Understanding Props

The component receives:

customer: Customer

through props.

Props are inputs passed into components.

This allows:

• reuse
• configurability
• composition

The same component renders different results depending on the data received.

Official documentation:

• Passing Props to a Component

Why Fluent UI Card Matters

<Card>

The Fluent UI Card component provides:

• enterprise spacing
• Microsoft styling
• accessible structure
• professional visual hierarchy

Cards are heavily used in:

• dashboards
• CRM systems
• admin panels
• analytics systems
• SharePoint-style interfaces

Official documentation:

• Fluent UI Card

Understanding Badge Appearance

This function:

getBadgeAppearance(status)

maps business status into visual representation.

Conceptually:

Business state
→ visual appearance

This is declarative UI.

React encourages:

• deriving UI from data
• avoiding duplicated logic
• predictable rendering

Creating the Grid Component

src\components\CustomerGrid.tsx

import { customers } from "../data/customers";
import { CustomerCard } from "./CustomerCard";
export function CustomerGrid() {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns:
          "repeat(auto-fit, minmax(320px, 1fr))",
        gap: "24px",
      }}
    >
      {customers.map((customer) => (
        <CustomerCard
          key={customer.id}
          customer={customer}
        />
      ))}
    </div>
  );
}

Understanding map() Rendering

The key React rendering pattern is:

customers.map(...)

React transforms arrays into UI.

Conceptually:

Customer data
→ React components
→ rendered dashboard

This is one of the core React patterns.

Official documentation:

• Rendering Lists

Why Keys Matter

key={customer.id}

Keys help React:

• identify elements
• optimize rendering
• update lists efficiently

Without keys:

• React shows warnings
• rendering becomes less predictable

Creating App.tsx

src\App.tsx

import {
  FluentProvider,
  webLightTheme,
} from "@fluentui/react-components";
import { CRMHeader } from "./components/CRMHeader";
import { CustomerGrid } from "./components/CustomerGrid";
function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      <main
        style={{
          minHeight: "100vh",
          backgroundColor: "#f5f5f5",
          padding: "48px",
          boxSizing: "border-box",
        }}
      >
        <section
          style={{
            maxWidth: "1200px",
            margin: "0 auto",
          }}
        >
          <CRMHeader />
          <CustomerGrid />
        </section>
      </main>
    </FluentProvider>
  );
}
export default App;

Understanding FluentProvider

<FluentProvider theme={webLightTheme}>

This activates the Microsoft Fluent UI design system globally.

It provides:

• colors
• typography
• spacing
• accessibility
• visual consistency

Without FluentProvider, Fluent UI components lose their enterprise theme behavior.

Creating main.tsx

src\main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
ReactDOM.createRoot(
  document.getElementById("root")!
).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Creating index.css

src\index.css

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}

Running the Application

Development

npm run dev

Production Validation

npm run build

Preview Production Build

npm run preview

Complete Rendering Flow

main.tsx
  renders App
App
  renders CRMHeader and CustomerGrid
CustomerGrid
  loops through customers
CustomerCard
  renders one enterprise CRM card
ReactDOM
  updates the browser DOM

This is modern component architecture.

Why This App Matters

This app introduces the architecture used in:

• CRM systems
• enterprise dashboards
• Microsoft admin panels
• SharePoint portals
• business analytics systems

The same patterns later scale into:

• APIs
• reducers
• routing
• authentication
• DataGrid systems
• enterprise workflows

Technical Summary

Concept Table

Official Documentation

React

• React Learn
• Thinking in React
• Rendering Lists
• Passing Props to a Component

Fluent UI

• Fluent UI React Components
• Fluent UI Card
• Fluent UI Badge

Tooling

• Vite Guide
• TypeScript Documentation

Final Architectural Insight

The most important lesson from App 59 is:

Enterprise applications are component systems driven by business data.

The CRM dashboard is not manually constructed item by item.

Instead:

Data
→ Components
→ Declarative Rendering
→ Enterprise UI

This same architecture appears in:

• CRM systems
• Microsoft dashboards
• SharePoint portals
• admin systems
• analytics applications
• enterprise business platforms

Mastering this pattern prepares you for large-scale React enterprise development.

Current Project Progress