# 🚀 FlutterFlow Best Practices Cheat Sheet

## 📁 1. Project Organization

### 1.1 Folder Structure

/lib
├── 📂 pages
│   ├── 🏠 home_page.dart
│   └── 🔐 login_page.dart
├── 📂 widgets
│   └── 🔘 custom_button.dart
├── 📂 backend
│   └── 📂 collections
│       └── 👤 user_collection.dart
├── 📂 custom_code
│   └── 🛠️ custom_functions.dart
└── 📂 constants
    ├── 🎨 colors.dart
    └── 📝 strings.dart

### 1.2 Example Page Structure

/pages
├── 📂 auth
│   ├── 📱 auth_phone.dart
│   ├── ✅ auth_verify.dart
│   ├── ⏳ loading_screen.dart
│   └── 🌟 splash_screen.dart
├── 📂 business
│   ├── 📊 business_overview.dart
│   └── 📋 business_details.dart
├── 📂 client
│   ├── 🗂️ client_category_browse.dart
│   └── 🏠 client_home.dart
├── 📂 onboarding
│   ├── 🚶 onboarding_step2.dart
│   └── ⏰ setup_business_hours.dart
└── 📂 professionals
    ├── 📅 professional_appointments.dart
    ├── 🏠 professional_home.dart
    └── 📈 professional_reports.dart

## 🏷️ 2. Naming Conventions

### 2.1 Page Naming
- 📘 **Descriptive Names**: `login_page.dart`, `profile_page.dart`
- 🚫 **Avoid Numbers**: Use `business_overview.dart` instead of `BusinessPage1`
- 🔡 **Lowercase with Underscores**: `product_details_page.dart`

### 2.2 Widgets and Components
- 🔠 **Class Names (Custom Widgets)**: `CustomButton`, `ProfileAvatar`
- 🔡 **File Names**: `custom_button.dart`, `profile_avatar.dart`
- 🐪 **Variable Names**: `submitButton`, `profileAvatar`

## 🔥 3. Firestore Best Practices

### 3.1 Naming Conventions for Firestore Fields

| Category | Convention | Example |
|----------|------------|---------|
| 🔤 General Fields | camelCase | `firstName`, `emailAddress` |
| 🆔 ID Fields | Specific prefix/suffix | `userId`, `orderId` |
| ⏰ Timestamp Fields | Specific names | `createdAt`, `updatedAt` |
| 👤 User Reference Fields | Specific names | `createdBy`, `updatedBy` |

### 3.2 Lists and References

| Type | Convention | Example |
|------|------------|---------|
| 📚 Lists of Items | Plural camelCase | `tags`, `categories` |
| 🔗 Document References | Singular with Ref suffix | `userRef`, `postRef` |
| 🔢 Lists of Related IDs | Plural with Ids suffix | `userIds`, `productIds` |

### 3.3 Nested Data Types

| Type | Convention | Example |
|------|------------|---------|
| 🗺️ Maps (Objects) | Singular, optional Map suffix | `addressMap`, `settingsMap` |
| 📊 Arrays of Maps | Plural, optional List/Maps/Array suffix | `addresses`, `settingsList` |

### 3.4 Example Firestore Schema

{
  "userId": "abc123",
  "profile": {
    "firstName": "John",
    "lastName": "Doe",
    "age": 30
  },
  "addresses": [
    {
      "street": "123 Main St",
      "city": "Springfield",
      "zip": "12345"
    },
    {
      "street": "456 Elm St",
      "city": "Shelbyville",
      "zip": "67890"
    }
  ],
  "createdAt": "2024-08-21T12:34:56Z",
  "createdBy": "adminUserId"
}

## 🤔 4. Decision-Making for Firestore Schema Design

### 4.1 Sense-Check Questions
- 🔍 Is the Field Name Descriptive?
- 🔢 Should This Be Singular or Plural?
- 🌐 Is There Clarity Across the Database?

### 4.2 Practical Examples
- 🆔 **Naming ID Fields**: Use `cardId` for clarity outside the cards collection
- 🔗 **Choosing Field Names for Relationships**: `userRef` for single references, `userIds` for lists

### 4.3 Things to Avoid
- ⚠️ Reserved Keywords: Avoid `key`, `type`, `ref`
- 🚫 Ambiguous Names: Avoid `data`, `info`, `value`

### 4.4 Summary of Best Practices
- 🔄 Consistency Is Key
- 🔍 Clarity Over Brevity
- 🧘‍♂️ Avoid Over-Complexity

## 🛠️ 5. Custom Functions and Widgets in FlutterFlow

### 5.1 Custom Widgets
- 🔠 **Naming**: PascalCase (`CustomUserCard`, `PrimaryActionButton`)
- 📄 **File Naming**: Lowercase with underscores (`custom_user_card.dart`)

### 5.2 Custom Functions
- 🐪 **Naming**: camelCase (`fetchUserData`, `calculateTotalCost`)
- 📝 **Arguments and Parameters**: camelCase (`userId`, `totalAmount`)

### 5.3 State Variables
- 🔄 **Naming**: camelCase (`isLoading`, `userName`, `itemList`)

### 5.4 Firebase Collections and Fields

| Type | Convention | Example |
|------|------------|---------|
| 📚 Collections | camelCase | `userProfiles`, `orderHistory` |
| 🏷️ Fields | camelCase | `firstName`, `lastLoginTime` |
| 🔤 String | `fieldName: String` | `userName: String` |
| 🔢 Integer | `fieldName: Integer` | `age: Integer` |
| ✅ Boolean | `fieldName: Boolean` | `isActive: Boolean` |
| ⏰ Timestamp | `fieldName: Timestamp` | `createdAt: Timestamp` |

---

🎉 By following these guidelines, even beginners can create clean, maintainable, and scalable app structures in FlutterFlow!