Technical Blog Article — App 51: Enterprise Notification Center with React, TypeScript, Fluent UI, and Vite

Introduction

Modern enterprise systems are heavily driven by notifications. Every corporate platform needs a way to communicate information to users:

• system alerts
• workflow approvals
• deployment updates
• security warnings
• ticket updates
• SharePoint events
• Microsoft Teams activities
• audit messages
• business alerts
• operational status

This is why notification systems are one of the most important UI patterns in enterprise frontend engineering.

In App 51 — Notification Center, we build a Microsoft-style enterprise notification system using:

• React
• TypeScript
• Vite
• Fluent UI

This application belongs to Block 3 — Professional Fluent UI Applications, where the focus evolves from basic React rendering into enterprise UI architecture and Microsoft design patterns.

The goal of this app is not just visual styling. The real objective is understanding how React transforms structured data into reusable enterprise interfaces.

This app introduces:

• data-driven rendering
• reusable card systems
• notification modeling
• conditional rendering
• Fluent UI enterprise components
• visual hierarchy
• Microsoft design system principles
• enterprise composition patterns

The React mental model reinforced here is:

Structured data
→ component rendering
→ enterprise UI

This is one of the most important ideas in React architecture.

Why Notification Systems Matter

Notification systems appear everywhere in modern enterprise software.

Examples:

• Microsoft 365
• SharePoint Online
• Teams
• Azure Portal
• Admin Centers
• CRM platforms
• ERP systems
• monitoring dashboards
• DevOps systems
• analytics platforms

A notification center is essentially:

• a structured collection of messages
• rendered dynamically
• visually categorized
• prioritized
• reusable

This makes notification systems perfect for learning React composition.

What This App Teaches

1. Creating the Project

The project begins using Vite with React TypeScript.

Vite is one of the fastest modern frontend build tools and development servers available today.

Project creation:

mkdir bloco03
cd bloco03
npm create vite@latest app51-notification-center -- --template react-ts
cd app51-notification-center
npm install
npm install @fluentui/react-components @fluentui/react-icons

Why Vite Matters

Vite improves development speed significantly because it:

• uses native ES Modules
• provides instant startup
• supports Hot Module Replacement
• compiles TypeScript efficiently
• handles React JSX automatically

Official documentation:

• Vite Guide

2. Creating the Folder Structure

Professional React applications should always separate responsibilities.

Create folders:

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

Create files:

New-Item src\models\NotificationItem.ts -ItemType File
New-Item src\data\notifications.ts -ItemType File
New-Item src\components\NotificationCard.tsx -ItemType File
New-Item src\components\NotificationList.tsx -ItemType File
New-Item artigo.md -ItemType File

Final Project Structure

app51-notification-center/
  src/
    components/
      NotificationCard.tsx
      NotificationList.tsx
    data/
      notifications.ts
    models/
      NotificationItem.ts
    styles/
    App.tsx
    main.tsx
    index.css

Each file has one responsibility.

This separation becomes critical in enterprise React architecture.

3. Understanding the Notification Model

src\models\NotificationItem.ts

export type NotificationType =
  | "success"
  | "warning"
  | "error"
  | "info";
export interface NotificationItem {
  id: number;
  title: string;
  message: string;
  type: NotificationType;
  createdAt: string;
  read: boolean;
}

This file defines the shape of a notification.

The model guarantees every notification has:

• unique identifier
• title
• message
• type
• creation timestamp
• read/unread status

This is extremely important in TypeScript.

Without models:

• data becomes unpredictable
• rendering becomes unsafe
• refactoring becomes difficult

Enterprise React applications should always use typed models.

Why NotificationType Matters

This construction:

type NotificationType =
  | "success"
  | "warning"
  | "error"
  | "info";

creates a restricted union type.

This means the notification type can ONLY be:

• success
• warning
• error
• info

If you accidentally write:

type: "banana"

TypeScript immediately shows an error.

This is one of the biggest advantages of TypeScript in enterprise systems.

Official documentation:

• TypeScript Docs

4. Understanding the Data Layer

src\data\notifications.ts

This file stores static enterprise notification data.

export const notifications: NotificationItem[] = [...]

The important part is:

NotificationItem[]

This means:

• the variable is an array
• every item must follow the NotificationItem structure

This guarantees consistency across the application.

Why Static Data First?

This app intentionally uses static data because the focus is:

• rendering
• composition
• UI architecture

NOT:

• APIs
• async behavior
• useEffect
• backend integration

The React Learn philosophy encourages mastering rendering first before introducing external systems.

Official React documentation:

• Describing the UI

5. Understanding the Notification Card

src\components\NotificationCard.tsx

This component renders one notification.

This is the heart of reusable React architecture.

The component receives props:

interface NotificationCardProps {
  notification: NotificationItem;
}

This means:

• the card is reusable
• the card does not own data
• the parent passes the notification

This is component composition.

Understanding React Props

Props are inputs for components.

Conceptually:

Parent component
→ sends data through props
→ child component renders UI

This is one of React’s most important ideas.

Official documentation:

• Passing Props to a Component

6. Understanding Conditional Rendering

The app uses helper functions:

function getNotificationIcon(type)

and:

function getBadgeAppearance(type)

These functions change the UI depending on notification type.

Example:

success → success icon
warning → warning icon
error → error icon
info → info icon

This is conditional rendering.

React allows the interface to adapt dynamically based on data.

Official documentation:

• Conditional Rendering

7. Understanding Fluent UI

The app uses:

• Card
• Badge
• Text
• Typography
• Fluent icons

Fluent UI provides:

• Microsoft design consistency
• accessibility
• keyboard navigation
• spacing system
• typography system
• enterprise layout behavior

Official documentation:

• Fluent UI React Components

Why Card Matters

The Card component acts as the notification container.

It automatically provides:

• spacing
• border behavior
• visual hierarchy
• enterprise styling

Without Fluent UI, all this would require manual CSS.

Why Badge Matters

The Badge visually categorizes the notification.

Example:

• SUCCESS
• WARNING
• ERROR
• INFO

Enterprise applications rely heavily on visual categorization because users need to identify information quickly.

8. Understanding NotificationList.tsx

This component renders the collection of notifications.

The key section is:

notifications.map((notification) => (
  <NotificationCard
    key={notification.id}
    notification={notification}
  />
))

This is one of the most important React patterns.

Why map() Is Critical in React

map() transforms data into UI.

Conceptually:

notification 1 → NotificationCard 1
notification 2 → NotificationCard 2
notification 3 → NotificationCard 3

React applications are fundamentally:

• data
• transformed into UI

Official documentation:

• Rendering Lists

Why key={notification.id} Matters

React requires stable keys for list rendering.

The key helps React:

• identify items
• optimize rendering
• update the correct DOM nodes

Without keys:

• React shows warnings
• rendering becomes less predictable

The key should always be:

• unique
• stable

9. Understanding the Root App

src\App.tsx

This file defines the enterprise layout.

The structure is:

App
  NotificationList
    NotificationCard

The root layout creates:

• centered container
• enterprise spacing
• dashboard-style composition

Why the Layout Uses maxWidth

maxWidth: "900px"

This prevents the notification center from stretching infinitely on large monitors.

Enterprise layouts usually use:

• content width constraints
• spacing systems
• readable line lengths

This improves UX significantly.

10. Understanding main.tsx

The file:

src/main.tsx

connects React to the browser.

Important section:

<FluentProvider theme={webLightTheme}>

This activates:

• Microsoft theme
• Fluent typography
• design tokens
• enterprise styling

Without FluentProvider, Fluent UI components lose their visual system.

11. Why There Is No useState

This app intentionally does NOT use:

• useState
• useEffect

Why?

Because this app is focused on:

• rendering
• composition
• visual architecture

NOT interactivity.

This follows React Learn:

• first learn rendering
• then learn state
• then learn effects

Official documentation:

• Keeping Components Pure

12. Why There Is No useEffect

There is no:

• API
• timer
• external synchronization

Therefore:

• useEffect is unnecessary

This is extremely important.

React Learn strongly recommends avoiding unnecessary effects.

Official documentation:

• You Might Not Need an Effect

13. Complete Rendering Flow

main.tsx
  renders App
App
  renders NotificationList
NotificationList
  loops through notification data
NotificationCard
  renders each enterprise notification

This is declarative rendering.

14. Enterprise UI Mental Model

The notification system reinforces the React mental model:

Data
→ Components
→ UI

NOT:

manually create DOM elements
manually update HTML
manually manipulate UI

React handles DOM synchronization automatically.

15. Technical Summary

16. Concept Table

17. Official Documentation

React

• React Learn
• Describing the UI
• Rendering Lists
• Passing Props to a Component
• Conditional Rendering
• Keeping Components Pure
• You Might Not Need an Effect

Fluent UI

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

Vite

• Vite Guide

TypeScript

• TypeScript Documentation

18. Final Architectural Insight

This application may look visually simple, but architecturally it introduces one of the most important frontend patterns in enterprise systems:

Structured enterprise data
→ reusable components
→ scalable UI architecture

This same pattern will later evolve into:

• live notifications
• API-driven dashboards
• Teams-like activity feeds
• SharePoint alert systems
• monitoring systems
• audit centers
• enterprise admin portals

Mastering this pattern is critical because large React applications are fundamentally:

• data
• rendered through reusable components
• composed into scalable UI systems

Current Project Progress