App Development LA: Complete Technical Guide to Building Scalable Mobile Applications in Los Angeles

Introduction to App Development LA: Market Overview and Technical Landscape

The Los Angeles mobile application development market has experienced unprecedented growth, with the region generating over $47 billion in technology revenue as of 2024. App development LA represents a significant portion of this ecosystem, driven by the city's unique position as both an entertainment capital and emerging Silicon Beach technology hub. The convergence of creative industries with technical innovation has created distinct requirements for mobile applications that serve diverse user bases across entertainment, logistics, lifestyle, and enterprise sectors.

Current market analysis reveals that app development LA projects typically demand 40% faster time-to-market compared to national averages, primarily due to competitive pressure from established tech giants and venture-backed startups. This accelerated timeline necessitates sophisticated development methodologies and robust technical architectures that can scale rapidly without sacrificing quality or security.

Los Angeles-based app development companies have specialized across various domains, with notable concentrations in social media platforms, on-demand services, entertainment applications, and location-based services. Companies like Snap Inc., headquartered in Santa Monica, demonstrate the scale achievable through strategic app development LA initiatives, supporting over 400 million daily active users through advanced computer vision and augmented reality technologies.

The technical landscape for app development LA has evolved to prioritize cross-platform solutions that maximize market reach while minimizing development overhead. Native development remains crucial for applications requiring deep platform integration or premium user experiences, particularly in the entertainment and media sectors where Los Angeles companies excel. However, hybrid and cross-platform approaches using React Native, Flutter, and Kotlin Multiplatform have gained significant traction for rapid prototyping and cost-effective scaling.

Essential technology stack considerations for app development LA ventures include robust cloud infrastructure capable of handling traffic spikes, real-time data processing capabilities for location-based services, and comprehensive analytics platforms for user behavior analysis. The prevalence of content-heavy applications in the LA market also demands sophisticated content delivery networks and media processing capabilities that can handle high-resolution video and interactive content efficiently.

Architecture Patterns for Scalable App Development LA Projects

Implementing scalable architecture patterns forms the foundation of successful app development LA projects, particularly when targeting the diverse and demanding Los Angeles market. The Model-View-ViewModel (MVVM) architecture has emerged as the preferred pattern for both iOS and Android app development LA initiatives due to its clear separation of concerns and testability advantages.

MVVM implementation in app development LA projects typically involves creating distinct layers that handle data management, business logic, and user interface presentation independently. This separation proves crucial when scaling teams across multiple time zones, as different developers can work on specific layers without creating dependencies or conflicts. The ViewModel layer acts as a binding mechanism between the data models and user interface, enabling reactive programming patterns that respond efficiently to user interactions and data changes.

Clean Architecture principles have become increasingly important for Los Angeles mobile app development workflows, especially for applications that must integrate with multiple third-party services common in the entertainment and logistics industries. Clean Architecture emphasizes dependency inversion, ensuring that core business logic remains independent of external frameworks, databases, and user interfaces. This approach proves particularly valuable for app development LA teams working on applications that must adapt quickly to changing business requirements or integrate with evolving external APIs.

Microservices architecture design has proven essential for enterprise app development LA solutions, particularly for companies managing multiple applications or serving diverse user segments. By decomposing applications into smaller, independently deployable services, development teams can scale specific components based on demand while maintaining overall system reliability. This approach aligns well with the fast-paced nature of LA's tech ecosystem, where rapid iteration and feature deployment provide competitive advantages.

Event-driven architecture patterns have become increasingly relevant for real-time LA mobile applications, particularly those serving the transportation, entertainment, and social media sectors. Event-driven systems enable loose coupling between application components while supporting real-time data synchronization and responsive user experiences. This architecture pattern proves especially valuable for app development LA projects that must handle unpredictable traffic patterns or integrate with real-time data sources like location services or live streaming platforms.

Modular architecture strategies enable large-scale app development LA teams to work efficiently across complex applications. By organizing code into discrete, reusable modules, teams can develop features in parallel while maintaining code quality and reducing integration complexity. This approach supports the collaborative development environments common in Los Angeles, where teams often span multiple disciplines including design, engineering, and product management.

Technology Stack Selection for App Development LA: Framework Analysis

Strategic technology stack selection directly impacts the success and scalability of app development LA projects, with framework choices influencing development velocity, maintenance overhead, and long-term technical debt. React Native has gained substantial adoption for cross-platform app development LA projects due to its ability to leverage JavaScript expertise while delivering near-native performance across iOS and Android platforms.

React Native implementation for app development LA initiatives provides several advantages, including shared business logic between platforms, hot reloading for rapid development cycles, and extensive third-party library ecosystems. The framework's component-based architecture aligns well with modern development practices, enabling teams to build reusable UI components that maintain consistency across different screens and user flows.

// React Native navigation setup for app development LA projects
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { SafeAreaProvider } from 'react-native-safe-area-context';

interface LAAppNavigationProps {
  initialRoute?: string;
}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const LAAppNavigation: React.FC<LAAppNavigationProps> = ({ 
  initialRoute = 'Home' 
}) => {
  const handleNavigationError = (error: Error) => {
    console.error('Navigation error in app development LA project:', error);
    // Analytics tracking for LA market insights
    trackNavigationError(error.message, error.stack);
  };

  return (
    <SafeAreaProvider>
      <NavigationContainer
        onError={handleNavigationError}
        initialState={undefined}
      >
        <Stack.Navigator
          initialRouteName={initialRoute}
          screenOptions={{
            headerStyle: {
              backgroundColor: '#1a1a2e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}
        >
          <Stack.Screen 
            name="MainTabs" 
            component={MainTabNavigator}
            options={{ headerShown: false }}
          />
          <Stack.Screen 
            name="Profile" 
            component={ProfileScreen}
            options={{ title: 'User Profile' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

const MainTabNavigator = () => (
  <Tab.Navigator
    screenOptions={{
      tabBarStyle: {
        backgroundColor: '#16213e',
      },
      tabBarActiveTintColor: '#e74c3c',
      tabBarInactiveTintColor: '#95a5a6',
    }}
  >
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Services" component={ServicesScreen} />
    <Tab.Screen name="Location" component={LocationScreen} />
  </Tab.Navigator>
);

// Error tracking function for LA market analysis
const trackNavigationError = (message: string, stack?: string) => {
  // Implementation would integrate with analytics service
  // for app development LA performance monitoring
};

export default LAAppNavigation;

Flutter framework advantages for rapid app development LA prototyping include exceptional performance through compiled native ARM code, comprehensive widget libraries, and excellent tooling for debugging and profiling. Flutter's declarative UI approach enables developers to build complex interfaces efficiently while maintaining pixel-perfect consistency across platforms. The framework's hot reload capability significantly accelerates development cycles, particularly important for app development LA projects operating under tight deadlines.

Native iOS development with Swift remains essential for premium app development LA solutions that require deep integration with iOS-specific features or optimal performance characteristics. Swift's type safety, memory management, and extensive iOS SDK integration provide advantages for applications that push platform boundaries or require sophisticated user interactions. Core Data implementation represents a crucial component of native iOS app development LA strategies.

// iOS Core Data implementation for premium app development LA solutions
import CoreData
import UIKit

class LAAppDataManager {
    static let shared = LAAppDataManager()
    private init() {}
    
    // Core Data stack for app development LA projects
    lazy var persistentContainer: NSPersistentContainer = {
        let container = NSPersistentContainer(name: "LAAppDataModel")
        
        container.loadPersistentStores { _, error in
            if let error = error as NSError? {
                // Error handling for app development LA reliability
                self.handleCoreDataError(error)
                fatalError("Core Data error in LA app: \(error.localizedDescription)")
            }
        }
        
        container.viewContext.automaticallyMergesChangesFromParent = true
        container.viewContext.mergePolicy = NSMergeByPropertyObjectTrumpMergePolicy
        
        return container
    }()
    
    var context: NSManagedObjectContext {
        return persistentContainer.viewContext
    }
    
    // Save context with error handling for LA app development
    func saveContext() throws {
        guard context.hasChanges else { return }
        
        do {
            try context.save()
            trackDataSaveSuccess()
        } catch {
            handleCoreDataError(error as NSError)
            throw error
        }
    }
    
    // Fetch request builder for LA app data models
    func fetchLAAppEntities<T: NSManagedObject>(
        entityType: T.Type,
        predicate: NSPredicate? = nil,
        sortDescriptors: [NSSortDescriptor]? = nil,
        limit: Int? = nil
    ) throws -> [T] {
        let request = NSFetchRequest<T>(entityName: String(describing: entityType))
        request.predicate = predicate
        request.sortDescriptors = sortDescriptors
        
        if let limit = limit {
            request.fetchLimit = limit
        }
        
        do {
            let results = try context.fetch(request)
            trackDataFetchSuccess(entityType: String(describing: entityType))
            return results
        } catch {
            handleCoreDataError(error as NSError)
            throw error
        }
    }
    
    // Background context for heavy operations
    func performBackgroundTask(_ block: @escaping (NSManagedObjectContext) -> Void) {
        persistentContainer.performBackgroundTask { backgroundContext in
            backgroundContext.mergePolicy = NSMergeByPropertyObjectTrumpMergePolicy
            block(backgroundContext)
            
            do {
                try backgroundContext.save()
            } catch {
                self.handleCoreDataError(error as NSError)
            }
        }
    }
    
    private func handleCoreDataError(_ error: NSError) {
        // Analytics tracking for app development LA error monitoring
        print("Core Data error in LA app development: \(error.localizedDescription)")
        // Integration with crash reporting service
    }
    
    private func trackDataSaveSuccess() {
        // Performance monitoring for app development LA projects
    }
    
    private func trackDataFetchSuccess(entityType: String) {
        // Usage analytics for LA app development optimization
    }
}

// Extension for common LA app development data operations
extension LAAppDataManager {
    func createUserProfile(name: String, email: String, location: String) -> UserProfile? {
        let userProfile = UserProfile(context: context)
        userProfile.name = name
        userProfile.email = email
        userProfile.location = location
        userProfile.createdAt = Date()
        userProfile.id = UUID()
        
        do {
            try saveContext()
            return userProfile
        } catch {
            return nil
        }
    }
}

Kotlin Multiplatform benefits for enterprise app development LA initiatives include shared business logic across platforms while maintaining native user interface implementation. This approach provides a balanced solution for organizations requiring native performance and platform-specific features while optimizing development resources. Kotlin's interoperability with Java and modern language features make it particularly suitable for enterprise applications requiring robust error handling and maintainable code structures.

Backend technology selection for scalable app development LA infrastructure typically involves cloud-native solutions that can handle variable traffic patterns and integrate with content delivery networks. Node.js with Express or TypeScript, Python with Django or FastAPI, and Go-based microservices have proven effective for different application types and scaling requirements within the Los Angeles market.

Development Methodologies and Team Structure for App Development LA

Agile development practices optimized for app development LA timelines emphasize rapid iteration cycles and continuous stakeholder feedback, essential for competing in Los Angeles's fast-paced technology market. Scrum methodologies adapted for mobile development typically involve two-week sprints with specific emphasis on user experience validation and performance optimization. Sprint planning for app development LA projects must account for both technical requirements and market feedback loops, ensuring that feature development aligns with evolving user expectations and competitive pressures.

Sprint retrospectives in app development LA environments focus heavily on development velocity metrics, code quality indicators, and user engagement data from previously released features. Teams typically track story points completed per sprint, bug discovery rates, and technical debt accumulation to maintain sustainable development practices while meeting aggressive market demands.

DevOps implementation for continuous integration in LA mobile app projects requires sophisticated pipeline automation that can handle multiple deployment targets while maintaining code quality standards. Automated testing suites must validate functionality across different device configurations, operating system versions, and network conditions representative of Los Angeles's diverse user base.

// Android Room database configuration for scalable app development LA backend integration
import androidx.room.*
import kotlinx.coroutines.flow.Flow
import java.util.*

@Entity(tableName = "la_app_users")
data class LAAppUser(
    @PrimaryKey val id: String = UUID.randomUUID().toString(),
    @ColumnInfo(name = "user_name") val userName: String,
    @ColumnInfo(name = "email") val email: String,
    @ColumnInfo(name = "location") val location: String,
    @ColumnInfo(name = "created_at") val createdAt: Long = System.currentTimeMillis(),
    @ColumnInfo(name = "last_active") val lastActive: Long = System.currentTimeMillis(),
    @ColumnInfo(name = "is_premium") val isPremium: Boolean = false
)

@Entity(tableName = "app_sessions")
data class AppSession(
    @PrimaryKey val sessionId: String = UUID.randomUUID().toString(),
    @ColumnInfo(name = "user_id") val userId: String,
    @ColumnInfo(name = "start_time") val startTime: Long,
    @ColumnInfo(name = "end_time") val endTime: Long? = null,
    @ColumnInfo(name = "session_duration") val sessionDuration: Long? = null,
    @ColumnInfo(name = "location_lat") val locationLat: Double? = null,
    @ColumnInfo(name = "location_lng") val locationLng: Double? = null
)

@Dao
interface LAAppUserDao {
    @Query("SELECT * FROM la_app_users ORDER BY created_at DESC")
    fun getAllUsers(): Flow<List<LAAppUser>>
    
    @Query("SELECT * FROM la_app_users WHERE id = :userId LIMIT 1")
    suspend fun getUserById(userId: String): LAAppUser?
    
    @Query("SELECT * FROM la_app_users WHERE location LIKE '%' || :location || '%'")
    suspend fun getUsersByLocation(location: String): List<LAAppUser>
    
    @Insert(onConflict = OnConflictStrategy.REPLACE)
    suspend fun insertUser(user: LAAppUser): Long
    
    @Update
    suspend fun updateUser(user: LAAppUser)
    
    @Delete
    suspend fun deleteUser(user: LAAppUser)
    
    @Query("UPDATE la_app_users SET last_active = :timestamp WHERE id = :userId")
    suspend fun updateLastActive(userId: String, timestamp: Long)
    
    @Query("SELECT COUNT(*) FROM la_app_users WHERE is_premium = 1")
    suspend fun getPremiumUserCount(): Int
}

@Dao
interface AppSessionDao {
    @Insert
    suspend fun insertSession(session: AppSession): Long
    
    @Query("UPDATE app_sessions SET end_time = :endTime, session_duration = :duration WHERE session_id = :sessionId")
    suspend fun endSession(sessionId: String, endTime: Long, duration: Long)
    
    @Query("SELECT * FROM app_sessions WHERE user_id = :userId ORDER BY start_time DESC LIMIT 10")
    suspend fun getRecentSessions(userId: String): List<AppSession>
    
    @Query("SELECT AVG(session_duration) FROM app_sessions WHERE user_id = :userId AND session_duration IS NOT NULL")
    suspend fun getAverageSessionDuration(userId: String): Double?
}

@Database(
    entities = [LAAppUser::class, AppSession::class],
    version = 1,
    exportSchema = false
)
@TypeConverters(Converters::class)
abstract class LAAppDatabase : RoomDatabase() {
    abstract fun userDao(): LAAppUserDao
    abstract fun sessionDao(): AppSessionDao
    
    companion object {
        @Volatile
        private var INSTANCE: LAAppDatabase? = null
        
        fun getDatabase(context: Context): LAAppDatabase {
            return INSTANCE ?: synchronized(this) {
                val instance = Room.databaseBuilder(
                    context.applicationContext,
                    LAAppDatabase::class.java,
                    "la_app_database"
                )
                    .addCallback(object : RoomDatabase.Callback() {
                        override fun onCreate(db: SupportSQLiteDatabase) {
                            super.onCreate(db)
                            // Initialize database for app development LA requirements
                            initializeDatabase()
                        }
                    })
                    .fallbackToDestructiveMigration()
                    .build()
                INSTANCE = instance
                instance
            }
        }
        
        private fun initializeDatabase() {
            // Database initialization logic for LA app development
            // Could include default data, indexes, or triggers
        }
    }
}

class Converters {
    @TypeConverter
    fun fromTimestamp(value: Long?): Date? {
        return value?.let { Date(it) }
    }
    
    @TypeConverter
    fun dateToTimestamp(date: Date?): Long? {
        return date?.time
    }
}

// Repository pattern implementation for app development LA best practices
class LAAppRepository(
    private val userDao: LAAppUserDao,
    private val sessionDao: AppSessionDao
) {
    fun getAllUsers(): Flow<List<LAAppUser>> = userDao.getAllUsers()
    
    suspend fun createUser(userName: String, email: String, location: String): Result<LAAppUser> {
        return try {
            val user = LAAppUser(
                userName = userName,
                email = email,
                location = location
            )
            userDao.insertUser(user)
            Result.success(user)
        } catch (e: Exception) {
            Result.failure(e)
        }
    }
    
    suspend fun startUserSession(userId: String, lat: Double?, lng: Double?): String {
        val session = AppSession(
            userId = userId,
            startTime = System.currentTimeMillis(),
            locationLat = lat,
            locationLng = lng
        )
        sessionDao.insertSession(session)
        return session.sessionId
    }
    
    suspend fun endUserSession(sessionId: String) {
        val endTime = System.currentTimeMillis()
        // Calculate duration logic would go here
        val duration = calculateSessionDuration(sessionId)
        sessionDao.endSession(sessionId, endTime, duration)
    }
    
    private suspend fun calculateSessionDuration(sessionId: String): Long {
        // Implementation for session duration calculation
        // Important for app development LA analytics
        return 0L
    }
}

Remote development team coordination for distributed app development LA workflows has become increasingly sophisticated, incorporating asynchronous communication tools, shared development environments, and comprehensive documentation systems. Teams utilize tools like Slack for real-time communication, Notion or Confluence for documentation, and GitHub or GitLab for code collaboration and review processes.

Quality assurance protocols specific to app development LA market requirements emphasize user experience testing across diverse demographic segments and device configurations common in the Los Angeles metropolitan area. Testing protocols must account for varying network conditions, from high-speed fiber connections in Santa Monica to cellular networks in more congested areas of the city.

Project management tools and methodologies for successful LA app launches typically integrate Jira for task tracking, Figma for design collaboration, and analytics platforms for post-launch performance monitoring. Gantt charts and milestone tracking become particularly important for coordinating with marketing teams and stakeholder expectations around major Los Angeles events or seasonal market opportunities.

Performance Optimization Strategies for App Development LA Applications

Memory management techniques for high-performance app development LA solutions require careful attention to object lifecycle management and resource allocation patterns. iOS applications must implement proper retain cycle prevention through weak references and automatic reference counting optimization, while Android applications benefit from careful lifecycle-aware component implementation and efficient garbage collection strategies.

Memory profiling tools such as Xcode Instruments for iOS and Android Studio Memory Profiler provide insights into allocation patterns and potential leaks that could impact application performance. App development LA teams typically establish memory usage baselines during development phases and continuously monitor for regressions through automated testing pipelines.

Network optimization strategies for LA mobile connectivity challenges address the varying connectivity conditions across Los Angeles, from high-speed networks in tech-focused areas to congested cellular networks during peak traffic periods. Implementing intelligent retry mechanisms, request prioritization, and adaptive quality settings helps maintain responsive user experiences across diverse network conditions.

// Flutter state management with Provider pattern for efficient app development LA workflows
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';

// State models for app development LA applications
class LAAppUser {
  final String id;
  final String name;
  final String email;
  final String location;
  final bool isPremium;
  
  LAAppUser({
    required this.id,
    required this.name,
    required this.email,
    required this.location,
    this.isPremium = false,
  });
  
  factory LAAppUser.fromJson(Map<String, dynamic> json) {
    return LAAppUser(
      id: json['id'] ?? '',
      name: json['name'] ?? '',
      email: json['email'] ?? '',
      location: json['location'] ?? '',
      isPremium: json['isPremium'] ?? false,
    );
  }
}

class LAAppService {
  final String id;
  final String title;
  final String description;
  final double price;
  final bool available;
  
  LAAppService({
    required this.id,
    required this.title,
    required this.description,
    required this.price,
    this.available = true,
  });
  
  factory LAAppService.fromJson(Map<String, dynamic> json) {
    return LAAppService(
      id: json['id'] ?? '',
      title: json['title'] ?? '',
      description: json['description'] ?? '',
      price: (json['price'] ?? 0).toDouble(),
      available: json['available'] ?? true,
    );
  }
}

// Provider state management for app development LA projects
class LAAppState extends ChangeNotifier {
  LAAppUser? _currentUser;
  List<LAAppService> _services = [];
  bool _isLoading = false;
  String? _error;
  Timer? _refreshTimer;
  
  // Getters
  LAAppUser? get currentUser => _currentUser;
  List<LAAppService> get services => List.unmodifiable(_services);
  bool get isLoading => _isLoading;
  String? get error => _error;
  bool get hasUser => _currentUser != null;
  
  // Loading state management
  void _setLoading(bool loading) {
    _isLoading = loading;
    notifyListeners();
  }
  
  void _setError(String? error) {
    _error = error;
    notifyListeners();
  }
  
  // User authentication for app development LA
  Future<bool> authenticateUser(String email, String password) async {
    _setLoading(true);
    _setError(null);
    
    try {
      final response = await http.post(
        Uri.parse('https://api.laapp.com/auth/login'),
        headers: {'Content-Type': 'application/json'},
        body: json.encode({
          'email': email,
          'password': password,
        }),
      ).timeout(
        Duration(seconds: 10),
        onTimeout: () {
          throw TimeoutException('Login timeout for LA app development');
        },
      );
      
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        _currentUser = LAAppUser.fromJson(data['user']);
        _setupAutoRefresh();
        notifyListeners();
        return true;
      } else {
        _setError('Authentication failed');
        return false;
      }
    } catch (e) {
      _setError('Network error: ${e.toString()}');
      return false;
    } finally {
      _setLoading(false);
    }
  }
  
  // Service loading with error handling
  Future<void> loadServices() async {
    if (_isLoading) return; // Prevent duplicate requests
    
    _setLoading(true);
    _setError(null);
    
    try {
      final response = await http.get(
        Uri.parse('https://api.laapp.com/services'),
        headers: {
          'Authorization': 'Bearer ${_getAuthToken()}',
          'Content-Type': 'application/json',
        },
      ).timeout(
        Duration(seconds: 15),
        onTimeout: () {
          throw TimeoutException('Services loading timeout');
        },
      );
      
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        _services = (data['services'] as List)
            .map((service) => LAAppService.fromJson(service))
            .toList();
        notifyListeners();
      } else if (response.statusCode == 401) {
        _setError('Session expired');
        await logout();
      } else {
        _setError('Failed to load services');
      }
    } catch (e) {
      _setError('Network error loading services: ${e.toString()}');
    } finally {
      _setLoading(false);
    }
  }
  
  // Premium service filtering for LA market
  List<LAAppService> get premiumServices {
    return _services.where((service) => service.price > 100).toList();
  }
  
  List<LAAppService> get availableServices {
    return _services.where((service) => service.available).toList();
  }
  
  // Auto-refresh mechanism for real-time LA data
  void _setupAutoRefresh() {
    _refreshTimer?.cancel();
    _refreshTimer = Timer.periodic(Duration(minutes: 5), (_) {
      if (_currentUser != null) {
        loadServices();
      }
    });
  }
  
  // Logout and cleanup
  Future<void> logout() async {
    _refreshTimer?.cancel();
    _currentUser = null;
    _services.clear();
    _error = null;
    notifyListeners();
  }
  
  String _getAuthToken() {
    // In production, this would retrieve from secure storage
    return 'temp_token_for_la_app_development';
  }
  
  @override
  void dispose() {
    _refreshTimer?.cancel();
    super.dispose();
  }
}

// Widget implementation using Provider for app development LA
class LAAppMainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LA App Development'),
        backgroundColor: Colors.deepPurple,
      ),
      body: Consumer<LAAppState>(
        builder: (context, appState, child) {
          if (appState.isLoading) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  CircularProgressIndicator(),
                  SizedBox(height: 16),
                  Text('Loading LA services...'),
                ],
              ),
            );
          }
          
          if (appState.error != null) {
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.error, size: 64, color: Colors.red),
                  SizedBox(height: 16),
                  Text(
                    appState.error!,
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.red),
                  ),
                  SizedBox(height: 16),
                  ElevatedButton(
                    onPressed: () => appState.loadServices(),
                    child: Text('Retry'),
                  ),
                ],
              ),
            );
          }
          
          if (!appState.hasUser) {
            return LALoginWidget();
          }
          
          return LAServicesListWidget(services: appState.availableServices);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          context.read<LAAppState>().loadServices();
        },
        child: Icon(Icons.refresh),
        tooltip: 'Refresh LA services',
      ),
    );
  }
}

// Login widget for app development LA authentication
class LALoginWidget extends StatefulWidget {
  @override
  _LALoginWidgetState createState() => _LALoginWidgetState();
}

class _LALoginWidgetState extends State<LALoginWidget> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();
  final _formKey = GlobalKey<FormState>();
  
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Welcome to LA App',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
            SizedBox(height: 32),
            TextFormField(
              controller: _emailController,
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(),
              ),
              validator: (value) {
                if (value?.isEmpty ?? true) return 'Email required';
                if (!value!.contains('@')) return 'Invalid email';
                return null;
              },
            ),
            SizedBox(height: 16),
            TextFormField(
              controller: _passwordController,
              decoration: InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
              obscureText: true,
              validator: (value) {
                if (value?.isEmpty ?? true) return 'Password required';
                if (value!.length < 6) return 'Password too short';
                return null;
              },
            ),
            SizedBox(height: 24),
            ElevatedButton(
              onPressed: () async {
                if (_formKey.currentState?.validate() ?? false) {
                  final success = await context.read<LAAppState>().authenticateUser(
                    _emailController.text,
                    _passwordController.text,
                  );
                  if (success) {
                    context.read<LAAppState>().loadServices();
                  }
                }
              },
              child: Text('Login to LA App'),
            ),
          ],
        ),
      ),
    );
  }
  
  @override
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
}

// Services list widget
class LAServicesListWidget extends StatelessWidget {
  final List<LAAppService> services;
  
  const LAServicesListWidget({Key? key, required this.services}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    if (services.isEmpty) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.business, size: 64, color: Colors.grey