Tea Shop App Jetpack Compose

Building a Tea Shop App with Jetpack Compose and API Integration

Tea is not just a beverage; it’s an emotion for millions. Imagine having a tea shop app that allows users to order their favorite tea and get it delivered to their doorstep.

With Jetpack Compose, you can create a modern, stylish, and smooth UI, while API integration helps in managing products, orders, and user preferences efficiently. In this article, we will discuss how to develop a Tea Shop App using Jetpack Compose and Retrofit for API integration.

Features of the Tea Shop App

To make the app user-friendly and engaging, it should include the following features:

1. Home Screen (Tea Menu)

Fetch the tea list from an API and display it with images, names, and prices.
Implement a search bar to find specific teas.
Categorize teas (e.g., Black Tea, Green Tea, Herbal Tea, Masala Chai).

2. Tea Details Screen

Show tea image, description, ingredients, and price.
Option to add tea to cart or increase/decrease quantity.
Display estimated delivery time and user reviews.

3. Cart Screen

List added tea items with quantity control.
Show the total price and checkout button.
Allow users to remove items from the cart.

4. Checkout & Payment Screen

Collect delivery address and contact details.
Offer multiple payment methods (Cash on Delivery, UPI, Card Payment, Wallets).
Show order summary before confirming the purchase.

5. Order Tracking

Notify users about the order status (Processing, Out for Delivery, Delivered).
Show estimated delivery time with a real-time tracker.

6. User Authentication

Login and signup using Firebase Authentication (Google, Email, Phone Number).
Allow users to save addresses and order history.

7. Admin Panel (Optional)

Manage tea products, pricing, and stock levels.
Process orders and update delivery status.

Tech Stack and Tools Used

Frontend (User Interface)

Jetpack Compose for UI components.
ViewModel + LiveData for state management.
Navigation Component for smooth navigation.

Backend & API Integration

Retrofit for network requests to fetch tea products and order details.
Firebase Authentication for user login.
Room Database for storing local data like cart items.
Google Maps API for order tracking and delivery location.

Step-by-Step Implementation

1. Setting Up the Project

Create a new Jetpack Compose project in Android Studio.
Add dependencies for Retrofit, ViewModel, LiveData, and Firebase.

2. Creating UI Components

Design reusable Composable functions for product cards, buttons, and lists.
Implement lazy column to display the tea menu efficiently.
Use Material 3 Components for a modern look.

3. Fetching Tea List from API

Create a Retrofit interface for API calls.
Fetch tea data from a backend or use a free API.
Display the tea list dynamically with images and prices.

4. Implementing Cart and Checkout Functionality

Use a ViewModel to manage cart items.
Allow users to add or remove items and calculate total price dynamically.
Navigate to the checkout screen with order summary.

5. Adding Firebase Authentication

Integrate Firebase Auth for user login/sign-up.
Store user details and order history securely.

6. Implementing Order Tracking

Update the order status dynamically from the server.
Use Google Maps API for delivery location tracking.
Send real-time notifications for order updates.

Let's build a tea shop app using jetpack compose

Developing a Tea Shop App using Jetpack Compose and API integration provides a seamless and modern user experience. With features like a searchable tea menu, cart management, payment integration, and order tracking, users can enjoy a hassle-free tea-ordering experience. By leveraging Jetpack Compose for UI and Retrofit for API calls, you can build a fully functional, scalable, and engaging app for tea lovers.

So, get started today and brew your digital tea shop with Jetpack Compose!

Here's a stepwise breakdown of all functions in your

Tea Shop App using Jetpack Compose and API integration:

Internet Permission in Manifest File is required to fetch data from API

Dependency we need for this project

implementation ("androidx.navigation:navigation-compose:2.8.9")
implementation ("com.squareup.retrofit2:retrofit:2.9.0")
implementation ("com.squareup.retrofit2:converter-gson:2.9.0")
implementation ("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.7")
implementation ("androidx.lifecycle:lifecycle-runtime-compose:2.8.7")
implementation("io.coil-kt:coil-compose:2.6.0")

Step 1: Define the Data Model

Create a data class to represent a tea item.


data class Comment(
    val _id: String,
    val text: String,
    val date: String // Store as String, convert to formatted Date in UI
)

// Data Model
data class Tea(
    val _id: String,
    val name: String,
    val image: String,
    val description: String,
    val keywords: String,
    val origin: String,
    val brew_time: Int,
    val temperature: Int,
    val comments: List<Comment>,
    val price: Double = getPriceForTea(name) // Assign price dynamically
)

fun getPriceForTea(name: String): Double {
    return when (name.lowercase()) {
        "green tea" -> 5.99
        "black tea" -> 4.99
        "oolong tea" -> 6.49
        "white tea" -> 7.99
        else -> 4.50 // Default price
    }
}

Step 2: Set Up Retrofit API Service

package com.example.teashop

import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory
import retrofit2.http.GET

// API Service
interface TeaApi {
    @GET("tea")
    suspend fun getAllTeas(): List<Tea>
}

// Retrofit Instance

object RetrofitInstance {
    val api: TeaApi by lazy {
        Retrofit.Builder()
            .baseUrl("https://tapi.onrender.com/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(TeaApi::class.java)
    }
}

Step 3: Implement ViewModel for API Calls

Fetch data inside TeaViewModel using Retrofit.

package com.example.teashop

import android.util.Log
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.launch

// Tea ViewModel

class TeaViewModel : ViewModel() {
    private val _teaList = MutableStateFlow<List<Tea>>(emptyList())
    val teaList: StateFlow<List<Tea>> = _teaList

    fun fetchTeas() {
        viewModelScope.launch {
            try {
                val response = RetrofitInstance.api.getAllTeas()
                _teaList.value = response
                Log.d("TeaViewModel", "Teas loaded successfully: $response")
            } catch (e: Exception) {
                Log.e("TeaViewModel", "Error fetching teas: ${e.message}")
            }
        }
    }
}

Step 4: Create the Tea List Screen

Display a list of teas using LazyColumn.


@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TeaListScreen(
    viewModel: TeaViewModel,
    cartViewModel: TeaCartViewModel,
    navController: NavController
) {
    val teas by viewModel.teaList.collectAsState()
    val cartItems by cartViewModel.cartItems.collectAsState()
    var isLoading by remember { mutableStateOf(true) }

    // Simulate loading for 20 seconds or until data is loaded
    LaunchedEffect(Unit) {
        viewModel.fetchTeas()
        delay(20000) // 20 seconds delay
        isLoading = false
    }

    // ✅ Wrap everything in a Scaffold to add a TopAppBar
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = { Text("Tea Shop", fontSize = 22.sp, fontWeight = FontWeight.Bold) },
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    containerColor = Color(0xFFEC957B), // Beautiful tea color
                    titleContentColor = Color.Blue,
                    actionIconContentColor = Color.Green,
                    navigationIconContentColor = Color.Black
                ),
                navigationIcon = {
                    IconButton(onClick = { /* Handle navigation (if needed) */ }) {
                        androidx.compose.material3.Icon(imageVector = Icons.Default.Menu, contentDescription = "Menu", tint = Color.Red)
                    }

                },
                actions = {
                    IconButton(onClick = {navController.navigate("checkout")}) {
                        androidx.compose.material3.Icon(imageVector = Icons.Default.Place, contentDescription = "pay",
                            tint = Color.Blue)
                    }

                    IconButton(onClick = { navController.navigate("cart") }) {
                        androidx.compose.material3.Icon(imageVector = Icons.Default.ShoppingCart,
                            contentDescription = "Cart", tint = Color.Blue // Ensures the image fills the circle properly
                     )
                    }
                    Image(painter = painterResource(R.drawable.logoteashop), contentDescription = "logo",
                        modifier = Modifier.size(46.dp).clip(CircleShape), contentScale = ContentScale.Crop)
                }
            )
        },
        content = { paddingValues ->
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(Brush.verticalGradient(listOf(Color(0xFFCE93D8), Color(0xFFFFCCBC)))) // Gradient background
                    .padding(paddingValues) // ✅ Ensure content does not overlap the AppBar
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                if (isLoading && teas.isEmpty()) {
                    Column(horizontalAlignment = Alignment.CenterHorizontally) {
                        CircularProgressIndicator(color = Color(0xFFA6310D))
                        Spacer(modifier = Modifier.height(16.dp))
                        Text(text = "Loading tea list...", fontSize = 18.sp, color = Color(0xFFD84315))
                    }
                } else {
                    LazyColumn {
                        item {
                            Text(
                                "Coding Bihar : Tea Shop",
                                style = MaterialTheme.typography.headlineMedium
                            )
                        }
                        item {  Text(
                            text = stringResource(R.string.app_name)
                        ) }
                        items(teas) { tea ->
                            TeaItem(
                                tea = tea,
                                isInCart = cartItems.contains(tea),
                                onAddToCart = { cartViewModel.addToCart(tea) },
                                onClick = { navController.navigate("teaDetail/${tea._id}") },
                                onGoToCart = { navController.navigate("cart") }
                            )
                        }
                    }
                }
            }
        }
    )
}


@Composable
fun BubbleBackground() {
    Canvas(modifier = Modifier.fillMaxSize()) {
        val bubbleColors = listOf(Color(0xFFE1BEE7), Color(0xFFCE93D8), Color(0xFFBA68C8)) // Light purple shades
        val random = Random.Default

        val safeWidth = size.width.toInt().coerceAtLeast(1) // Ensure width is at least 1
        val safeHeight = size.height.toInt().coerceAtLeast(1) // Ensure height is at least 1

        (1..10).forEach { _ ->
            val radius = random.nextInt(160, 190).toFloat()
            val x = random.nextInt(0, safeWidth).toFloat()
            val y = random.nextInt(0, safeHeight).toFloat()

            drawCircle(
                color = bubbleColors[random.nextInt(bubbleColors.size)],
                radius = radius,
                center = Offset(x, y),
                alpha = 0.3f // Transparent bubbles
            )
        }
    }
}

Step 5: Display Tea Item in the List

Each tea item shows its name, price, and image.


@Composable
fun TeaItem(
    tea: Tea,
    isInCart: Boolean,
    onAddToCart: () -> Unit,
    onClick: () -> Unit,
    onGoToCart: () -> Unit
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clickable { onClick() },
        shape = RoundedCornerShape(16.dp),
        elevation = CardDefaults.elevatedCardElevation(8.dp)
    ) {
        val teaPrices = mapOf(
            "black" to 5.99,
            "rooibos" to 4.99,
            "jasmine" to 6.49,
            "yellow" to 7.99
        )

        Box(modifier = Modifier.fillMaxSize()) {
             BubbleBackground()
            Row(Modifier.fillMaxWidth().padding(16.dp), horizontalArrangement = Arrangement.SpaceBetween) {                Column(
                    modifier = Modifier.padding(16.dp),
                    verticalArrangement = Arrangement.Center
                ) {
                Text(text = "Tea: ${tea.name.uppercase()}", style = MaterialTheme.typography.titleMedium)
                Spacer(modifier = Modifier.height(8.dp))
                AsyncImage(
                    model = "https://tapi.onrender.com/${tea.image.trimStart('/')}",
                    contentDescription = tea.name,
                    modifier = Modifier
                        .clip(RoundedCornerShape(8.dp))
                        .size(120.dp),
                    contentScale = ContentScale.Crop
                )
            }
                Column (Modifier.fillMaxHeight(),
                    verticalArrangement = Arrangement.Center){
                    Text("Country: ${tea.origin}", style = MaterialTheme.typography.titleLarge)
                    Text("Good For: ${tea.description}", style = MaterialTheme.typography.bodyMedium)
                    val price = teaPrices[tea.name] ?: 4.50 // Default price if not found
                    Spacer(modifier = Modifier.height(16.dp))
                    Text(text = "Price: $$price", style = MaterialTheme.typography.bodyLarge, color = Color.Red)

                    Spacer(modifier = Modifier.height(38.dp))
                    Button(
                        onClick = {
                            if (isInCart) {
                                onGoToCart()
                            } else {
                                onAddToCart()
                            }
                        }
                    ) {
                        Text(if (isInCart) "Go to Cart" else "Add to Cart")
                    }

                }

            }
        }
    }
}

Step 6: Tea Detail Screen

package com.example.teashop

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import coil.compose.AsyncImage
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale
import java.util.TimeZone
import androidx.compose.runtime.getValue

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TeaDetailScreen(
    tea: Tea,
    cartViewModel: TeaCartViewModel,
    onBack: () -> Unit,
    navController: NavController,
) {
    val cartItems by cartViewModel.cartItems.collectAsState()
    val isInCart = cartItems.containsKey(tea) // ✅ Correct way to check if item is in cart
    val teaPrices = mapOf(
        "black" to 5.99,
        "rooibos" to 4.99,
        "jasmine" to 6.49,
        "yellow" to 7.99
    )
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(tea.name) },
                navigationIcon = {
                    IconButton(onClick = onBack) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                    }
                }
            )
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // ✅ Tea Image
            AsyncImage(
                model = "https://tapi.onrender.com/${tea.image}",
                contentDescription = tea.name,
                modifier = Modifier
                    .height(550.dp)
                    .clip(RoundedCornerShape(16.dp)),
                contentScale = ContentScale.Crop
            )

            Spacer(modifier = Modifier.height(16.dp))
            val price = teaPrices[tea.name] ?: 4.50 // Default price if not found

            // ✅ Tea Name & Description
            Text(text = tea.name, fontSize = 24.sp, fontWeight = FontWeight.Bold)
            Text(text = tea.description, fontSize = 16.sp, textAlign = TextAlign.Center)
            Text(text = "Price: $$price", style = MaterialTheme.typography.titleLarge, color = Color.Red)

            Spacer(modifier = Modifier.height(16.dp))

            // ✅ Origin, Brew Time & Temperature
            Text(text = "Origin: ${tea.origin}", fontSize = 16.sp, modifier = Modifier.align(Alignment.Start))
            Text(text = "Brew Time: ${tea.brew_time} min", fontSize = 14.sp, color = Color.Gray, modifier = Modifier.align(Alignment.Start))
            Text(text = "Temperature: ${tea.temperature}°C", fontSize = 14.sp, color = Color.Gray, modifier = Modifier.align(Alignment.Start))

            Spacer(modifier = Modifier.height(16.dp))

            // ✅ Comments Section
            Text(text = "Comments", fontSize = 20.sp, fontWeight = FontWeight.Bold, modifier = Modifier.align(Alignment.Start))
            Spacer(modifier = Modifier.height(8.dp))

            Box(modifier = Modifier.fillMaxWidth().height(200.dp)) {
                if (tea.comments.isEmpty()) {
                    Text(text = "No comments yet!", fontSize = 14.sp, color = Color.Gray)
                } else {
                    LazyColumn(modifier = Modifier.fillMaxSize()) {
                        items(tea.comments) { comment ->
                            CommentItem(comment)
                        }
                    }
                }
            }

            Spacer(modifier = Modifier.height(16.dp))

            // ✅ Add to Cart Button
            Button(
                onClick = {
                    if (isInCart) {
                        navController.navigate("cart") // ✅ Navigate to Cart
                    } else {
                        cartViewModel.addToCart(tea) // ✅ Add to cart
                    }
                },
                modifier = Modifier.padding(8.dp)
            ) {
                Text(if (isInCart) "Go to Cart" else "Add to Cart")
            }
        }
    }
}
@Composable
fun CommentItem(comment: Comment) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp),
        //  elevation = 2.dp
    ) {
        Column(modifier = Modifier.padding(8.dp)) {
            Text(text = comment.text, fontSize = 14.sp)
            Spacer(modifier = Modifier.height(4.dp))
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = "Posted on: ${formatDate(comment.date)}",
                fontSize = 12.sp,
                color = Color.Gray
            )
        }
    }
}
fun formatDate(dateString: String): String {
    return try {
        val inputFormat = SimpleDateFormat("EEE MMM dd yyyy HH:mm:ss 'GMT'Z", Locale.ENGLISH)
        inputFormat.timeZone = TimeZone.getTimeZone("GMT")

        val outputFormat = SimpleDateFormat("dd MMM yyyy, HH:mm", Locale.ENGLISH)
        val date = inputFormat.parse(dateString)
        outputFormat.format(date ?: Date())
    } catch (e: Exception) {
        "Invalid date"
    }
}

Step 7: Implement Cart Functionality

Manage cart items in CartViewModel.

package com.example.teashop

import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow

class TeaCartViewModel : ViewModel() {
    private val _cartItems = MutableStateFlow<Map<Tea, Int>>(emptyMap())
    val cartItems: StateFlow<Map<Tea, Int>> = _cartItems

    val teaPrices = mapOf(
        "black" to 5.99,
        "rooibos" to 4.99,
        "jasmine" to 6.49,
        "yellow" to 7.99
    )

    fun addToCart(tea: Tea) {
        _cartItems.value = _cartItems.value.toMutableMap().apply {
            this[tea] = (this[tea] ?: 0) + 1 // ✅ Increase quantity if already added
        }
    }

    fun removeFromCart(tea: Tea) {
        _cartItems.value = _cartItems.value.toMutableMap().apply {
            remove(tea) // ✅ Remove tea from cart
        }
    }

    fun updateQuantity(tea: Tea, quantity: Int) {
        _cartItems.value = _cartItems.value.toMutableMap().apply {
            if (quantity > 0) {
                this[tea] = quantity // ✅ Update quantity
            } else {
                remove(tea) // ✅ Remove if quantity is 0
            }
        }
    }

    fun calculateTotalPrice(): Double {
        return _cartItems.value.entries.sumOf { (tea, quantity) ->

            (teaPrices[tea.name] ?: 0.0) * quantity // Get price or default to 0.0
        }
    }

    /*fun calculateTotalPrice(): Double {
        return _cartItems.value.entries.sumOf { (tea, quantity) -> tea.price * quantity }
    }

    fun isInCart(tea: Tea): Boolean {
        return _cartItems.value.containsKey(tea)
    }
    
     */
}

Step 8: Create Cart Screen

Show cart items and total price.

package com.example.teashop

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Clear
import androidx.compose.material.icons.filled.Delete
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.getValue
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import coil.compose.AsyncImage

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CartScreen(cartViewModel: TeaCartViewModel, navController: NavController) {
    val cartItems by cartViewModel.cartItems.collectAsState()

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Cart") })
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues)
                .padding(16.dp)
        ) {
            if (cartItems.isEmpty()) {
                Text(
                    text = "Your cart is empty!",
                    fontSize = 18.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.fillMaxWidth()
                )
            } else {
                LazyColumn {
                    items(cartItems.entries.toList()) { (tea, quantity) ->
                        CartItem(
                            tea = tea,
                            quantity = quantity,
                            onIncrease = { cartViewModel.updateQuantity(tea, quantity + 1) },
                            onDecrease = {
                                if (quantity > 1) {
                                    cartViewModel.updateQuantity(tea, quantity - 1)
                                } else {
                                    cartViewModel.removeFromCart(tea) // Remove if 0
                                }
                            },
                            onRemove = { cartViewModel.removeFromCart(tea) }
                        )
                    }
                }

                Spacer(modifier = Modifier.height(16.dp))

                // ✅ Total Price
                Text(
                    text = "Total: ₹${"%.2f".format(cartViewModel.calculateTotalPrice())}",
                  //  text = "Total: ₹${cartViewModel.calculateTotalPrice()}",
                    fontSize = 18.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.align(Alignment.End)
                )

                // ✅ Checkout Button
                Button(
                    onClick = { navController.navigate("checkout") },
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Proceed to Checkout")
                }
            }
        }
    }
}

Step 9: Show Cart Items

Display each cart item with a remove button.

@Composable
fun CartItem(
    tea: Tea,
    quantity: Int,
    onIncrease: () -> Unit,
    onDecrease: () -> Unit,
    onRemove: () -> Unit
) {
    val teaPrices = mapOf(
        "black" to 5.99,
        "rooibos" to 4.99,
        "jasmine" to 6.49,
        "yellow" to 7.99
    )
    val price = teaPrices[tea.name] ?: 4.50 // Default price if not found
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 8.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier.padding(12.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // ✅ Tea Image
            AsyncImage(
                model = "https://tapi.onrender.com/${tea.image}",
                contentDescription = tea.name,
                modifier = Modifier
                    .size(80.dp)
                    .clip(RoundedCornerShape(8.dp)),
                contentScale = ContentScale.Crop
            )

            Spacer(modifier = Modifier.width(12.dp))

            Column(modifier = Modifier.weight(1f)) {
                // ✅ Tea Name
                Text(text = tea.name, fontSize = 18.sp, fontWeight = FontWeight.Bold)

                // ✅ Tea Price
               Text(
                   //text = "₹$price x $quantity = ₹${price * quantity}", fontSize = 14.sp, color = Color.Gray)
                   text = "₹$price x $quantity = ₹${"%.2f".format(price * quantity)}", fontSize = 14.sp, color = Color.Gray)
            }

            Spacer(modifier = Modifier.width(12.dp))

            // ✅ Quantity Controls
            Row(verticalAlignment = Alignment.CenterVertically) {
                IconButton(onClick = onDecrease) {
                    Icon(imageVector = Icons.Default.Clear, contentDescription = "Decrease")
                }

                Text(text = "$quantity", fontSize = 16.sp)

                IconButton(onClick = onIncrease) {
                    Icon(imageVector = Icons.Default.Add, contentDescription = "Increase")
                }

                IconButton(onClick = onRemove) {
                    Icon(imageVector = Icons.Default.Delete, contentDescription = "Remove", tint = Color.Red)
                }
            }
        }
    }
}

Step 10: Implement Checkout Screen

Process the Order, Address, Pay (select payment method) and Clear the Cart.

Loading...

Step 11: Order Confirmation Screen

Show success message after checkout.

Loading...

Step 12: Set Up Navigation

Define navigation routes using NavHost.

package com.example.teashop

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

@Composable
fun TeaApp() {
    val navController = rememberNavController()
    val teaViewModel: TeaViewModel = viewModel()
    val cartViewModel: TeaCartViewModel = viewModel()

    NavHost(navController, startDestination = "teaList") {
        composable("teaList") {
            TeaListScreen(teaViewModel, cartViewModel, navController)
        }
        composable("teaDetail/{teaId}") { backStackEntry ->
            val teaId = backStackEntry.arguments?.getString("teaId") ?: ""
            val teaList by teaViewModel.teaList.collectAsState(initial = emptyList()) // ✅ Ensure initial state
            val tea = teaList.find { it._id == teaId }

            if (tea != null) {
                TeaDetailScreen(
                    tea = tea,
                    cartViewModel = cartViewModel,
                    onBack = { navController.popBackStack() },
                    navController
                )
            } else {
                Box(
                    modifier = Modifier.fillMaxSize(),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Tea not found!", color = Color.Red, fontSize = 20.sp)
                }
            }
        }
        composable("cart") {
            CartScreen(cartViewModel,navController)
        }
        composable ("checkout"){
            PaymentScreen()
        }
    }
}

Final Step: Main Activity

Set up the app with Jetpack Compose.

package com.example.teashop

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.example.teashop.ui.theme.TeaShopTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            TeaShopTheme {
                TeaApp()
               /* Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }*/
            }
        }
    }
}

Final Output: