## Project Introduction

This tutorial covers integration of an external API (Rick and Morty) to display a list of characters in stylized cards with Luna Park.

## 1. Data Preparation

### Rick and Morty API
1. Go to Rick and Morty API
2. **Characters** section to list all characters
3. Examine the structure: results containing character data
4. Copy the API URL: `https://rickandmortyapi.com/api/character`

## 2. Data Fetching

### Main Page Configuration
1. Create a **Main** page
2. Add logic with **Manual Play** (test button)
3. Create a **Fetch** node with the API URL
4. **Ctrl + Space** after execution to see the data

### Fetch Testing
- Before click: "Undefined" (normal)
- After clicking Manual Play: complete API data visible

## 3. Automatic Data Typing

### Type Generation
1. Click on the **Fetch** block
2. **Custom Types** **Type** **Generate**
3. Automatic type generation for the entire API response

### Character Type Creation
1. Copy the generated structure for one character (object with id, name, status, etc.)
2. **New** **Type** name "Character"
3. **Right-click** **Paste** to paste the copied structure

## 4. Store Configuration

### Global Data Structure
1. In the **Store**, create a "Characters" schema
2. **Type**: Array of Character (array of characters)
3. Empty list by default

### Store Population
1. Return to Main page
2. **Spread** the API JSON to extract "results"
3. **GetNewStore** **SetProperty**
4. Target: store, Property: "Characters", Value: results
5. Connect to execution with Manual Play

## 5. Card Component

### Basic Properties
1. Create a **Card** component
2. Three properties:
   - **image** (string): image URL
   - **name** (string): character name
   - **status** (string): alive/dead/unknown

### Default Values
Use Rick Sanchez data for testing:
- Image: Rick's image URL
- Name: "Rick Sanchez"
- Status: "Alive"

### Component Structure
1. Main **Block** (container)
2. **Media** for image (source = reactive image property)
3. **Custom Text** for name (variable = name property)
4. **Status Component** (to be created) for status

## 6. Status Component with Conditions

### Status Component Creation
1. New component with **status** property (string, default "Alive")
2. Use **Template** with **If** condition

### Conditional Logic
**Template 1**: `if status equals "Alive"`
- Green background (success lightest)
- Readable white text

**Template 2**: `if status equals "Dead"`
- Red background (error)

**Template 3**: `if status equals "Unknown"`
- Gray background

### Integration in Card
1. Select Status component in Card
2. **status** property reactive link to Card's status property

## 7. Complete List Display

### Loop Over Data
1. Main page **Template** with **For**
2. Iterate over `newstore.characters`
3. **Card** component in the loop

### Dynamic Data Binding
For each Card property:
- **Image**: `template.value.image`
- **Name**: `template.value.name`
- **Status**: `template.value.status`

All cards display with their respective data.

## 8. Advanced Styling

### Card Component Style
**Main Block:**
- Background: lightest token
- Width: 200px, Height: 260px
- Display: flex, Direction: column
- Border radius for rounded corners
- Overflow hidden

**Status Positioning:**
- Card: `position: relative`
- Status: `position: absolute`
- Inset top/left for positioning
- Padding, border radius, slight rotation

**Media and Text:**
- Height/width 100% for image
- Display flex center for name
- Font bold

### Main Grid Style
**Main Page:**
- Display: flex with wrap
- Gap for spacing
- Justify content center
- Padding for breathing room

## Technical Concepts

### API Integration
- **Fetch**: external data retrieval
- **Spread**: object property extraction
- **SetProperty**: global store update

### Types and Store
- **Automatic generation** of types from API
- **Global store** for data sharing
- **Typed arrays** for collections

### Conditional Components
- **Templates with If**: conditional display
- **Reactive properties**: dynamic binding
- **Reusability**: same component, different data

### Loops and Display
- **Template with For**: iteration over collections
- **template.value**: access to current element
- **Responsive grids** with flexbox

## Final Result

Complete application displaying all Rick and Morty characters in a grid of stylized cards, with colored statuses and automatic updates from the API.