Chapter 1: Emotional Intelligence (EI) Content Model

Welcome to the app tutorial! We're thrilled to have you here. Over the next few chapters, we'll explore the core concepts that make this application work, piece by piece. Let's start with the very foundation of our platform: its educational structure.

Imagine you want to build an educational app to teach a big, complex subject like "Emotional Intelligence." Where would you even begin? You can't just give users a giant encyclopedia and hope for the best. They need a clear path, a structured journey from one concept to the next.

This is the exact problem our Emotional Intelligence (EI) Content Model solves. It's the educational blueprint for our entire app.

Think of it like building a library for Emotional Intelligence:

• Modules: These are the main sections or "bookshelves" in our library. Each shelf is dedicated to one of the 16 core EI skills, like "Self Regard" or "Conflict Handling."
• Lessons: These are the individual "books" on each shelf. They break down a big topic (a Module) into small, easy-to-understand chapters.
• Assessments: These are the "final exams" for the library. They test your overall knowledge across all the shelves to see how much you've learned.

This model gives our app a logical flow, ensuring that every user has a clear, guided, and effective learning experience.

The Three Pillars of Learning

Let's look a little closer at the three main parts of our content model.

1. Modules: The Big Picture

Modules are the highest-level categories. Our app is built on a proven framework of 16 core EI scales. Each of these scales is a Module. When a user navigates to the "Learning Modules" page, they are seeing a list of all the available Modules.

The code that displays these modules is quite simple. It fetches the list of modules and "maps" over them, creating a card for each one.

// client/src/pages/lessons.tsx

// ...
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  {modules.map((module) => (
    <Card key={module.id}>
      {/* ... code to display the module title and description ... */}
      <CardTitle>{module.title}</CardTitle>
      <p>{module.description}</p>
    </Card>
  ))}
</div>
// ...

This snippet takes an array of modules and creates a Card for each one, showing its title and description. This turns our structured data into a user-friendly, browsable list.

2. Lessons: The Stepping Stones

You can't learn "Self Regard" all at once. It's too big! That's why each Module is broken down into several smaller Lessons. If a Module is a textbook, then a Lesson is a single chapter. It focuses on a specific, digestible piece of information, making learning feel manageable and rewarding.

When a user clicks on a Module, they see the list of Lessons inside it.

3. Assessments: Measuring Your Growth

Learning is great, but how do you know if you're actually improving? That's where Assessments come in. An Assessment is a set of questions that covers all 16 EI scales. It gives users a snapshot of their emotional intelligence, highlighting their strengths and areas for growth.

The "Assessments" page lists the available tests a user can take.

// client/src/pages/assessments.tsx

// ...
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
  {assessments.map((assessment) => (
    <Card key={assessment.id}>
      <CardTitle>{assessment.title}</CardTitle>
      {/* ... button to start or view results ... */}
    </Card>
  ))}
</div>
// ...

Just like with modules, this code simply loops through the available assessments and displays them, giving the user a clear entry point to measure their skills.

Under the Hood: The Source of Truth

You might be wondering, "Where does all this content come from?" To ensure our educational material is authentic and consistent, the structure is defined on our server.

The master blueprint for our 16 Modules is stored in a special, locked-down file.

// server/content-validation.ts

// This defines what a real EI Scale must look like.
export const AUTHENTIC_EI_SCALES: readonly EiScaleDefinition[] = [
  { 
    id: 1, 
    title: "Self Regard", 
    description: "Understanding and valuing yourself", 
    totalLessons: 6, // Each module must have 6 lessons
    locked: true     // This content cannot be changed
  },
  // ... 15 more scales defined here
] as const;

This file acts as our "rulebook." It guarantees that the core curriculum is based on Jim Rees's established 16-scale framework and can't be accidentally modified.

From this rulebook, we create the actual module data that gets sent to the user's browser. This data includes friendlier descriptions and icons.

// server/data/seeds/modules.ts

export const moduleSeeds = [
  {
    id: 1,
    title: "Self Regard",
    description: "Recognition of your intrinsic self worth...",
    icon: "❤️",
    // ... other display details
  },
  // ... other modules
];

When you open the "Learning Modules" page, a simple process happens behind the scenes.

The user's browser asks our server for the list of modules. The server grabs that information (which originated from our moduleSeeds file) and sends it back. The browser then uses this data to draw the Card components you see on the screen.

The data fetching itself is handled by a powerful tool called React Query, which we will cover in detail in the Server State Management (React Query) chapter. The communication happens through API Endpoints & Session Management, which defines the URLs like /api/modules.

Conclusion

The EI Content Model is the backbone of our app's educational experience. By organizing content into a clear hierarchy of Modules, Lessons, and Assessments, we provide users with a structured path to learn and grow. This model ensures that the content is consistent, authentic, and easy to navigate.

Now that we understand what content we're showing the user, let's explore how we build the beautiful, interactive components to display it.

In the next chapter, we'll dive into the visual building blocks of our application: the Reusable UI System (Shadcn/ui).

---

Documented by [Jonny Scott]