Why Firebase provides mobile backend services in iOS Swift - Build It to Prove It

Build: Firebase Backend Info

This screen explains why Firebase is used as a mobile backend service. It shows simple points in a list to help beginners understand the benefits.

Target UI

-------------------------
| Firebase Backend Info  |
|-----------------------|
| Why use Firebase?      |
|                       |
| - Easy data storage    |
| - User authentication  |
| - Real-time updates    |
| - Scalable backend     |
|                       |
| [Close]               |
-------------------------

Show a title at the top: 'Firebase Backend Info'

Display a short list of 4 reasons why Firebase is useful for mobile apps

Add a Close button at the bottom that dismisses the screen

Use simple text and a clean layout suitable for beginners

Starter Code

iOS Swift

import SwiftUI

struct FirebaseInfoView: View {
    var body: some View {
        VStack {
            Text("Firebase Backend Info")
                .font(.title)
                .padding()
            // TODO: Add reasons list here
            Spacer()
            Button("Close") {
                // TODO: Add close action
            }
            .padding()
        }
    }
}

struct FirebaseInfoView_Previews: PreviewProvider {
    static var previews: some View {
        FirebaseInfoView()
    }
}

Task 1

Task 2

Solution

iOS Swift

import SwiftUI

struct FirebaseInfoView: View {
    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        VStack(alignment: .leading, spacing: 15) {
            Text("Firebase Backend Info")
                .font(.title)
                .padding(.top, 20)
                .frame(maxWidth: .infinity, alignment: .center)

            Text("Why use Firebase?")
                .font(.headline)
                .padding(.bottom, 10)

            VStack(alignment: .leading, spacing: 8) {
                Text("- Easy data storage")
                Text("- User authentication")
                Text("- Real-time updates")
                Text("- Scalable backend")
            }
            .padding(.horizontal, 20)

            Spacer()

            Button("Close") {
                presentationMode.wrappedValue.dismiss()
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .padding(.horizontal, 20)
            .padding(.bottom, 20)
        }
    }
}

struct FirebaseInfoView_Previews: PreviewProvider {
    static var previews: some View {
        FirebaseInfoView()
    }
}

This screen uses a vertical stack to show a title, a short heading, and a list of four simple reasons why Firebase is helpful as a mobile backend. The reasons are easy to read and spaced nicely for clarity. The Close button uses SwiftUI's environment presentationMode to dismiss the screen when tapped, which is a common way to close modal views in iOS apps. The button is styled with a blue background and white text for good contrast and easy tapping.

Final Result

Completed Screen

-------------------------
| Firebase Backend Info  |
|-----------------------|
| Why use Firebase?      |
|                       |
| - Easy data storage    |
| - User authentication  |
| - Real-time updates    |
| - Scalable backend     |
|                       |
| [Close]               |
-------------------------

Tapping the Close button dismisses the FirebaseInfoView screen and returns to the previous screen.

Stretch Goal

Add a dark mode color scheme that changes background and text colors automatically.

💡 Hint

Use SwiftUI's Color.primary and Color(UIColor.systemBackground) to support light and dark modes automatically.