Book Store Jetpack Compose App

Android Book Store App in Jetpack Compose App

In this guide, we'll build a Book Store App in Jetpack Compose using Retrofit to fetch book data from an API. We'll cover everything from setting up the project to implementing a clean architecture for fetching and displaying books.

Features of the App

Fetch books from an API using Retrofit
Display book details in a lazy list
Implement a search bar to filter books
Show detailed book information on a separate screen
Use Jetpack Compose best practices

How to Build a Book Store App Using Retrofit and API in Jetpack Compose

Introduction In modern apps, we often need to fetch and display dynamic data from the internet. This is where APIs (Application Programming Interfaces) and Retrofit come into play.

In this article, we’ll:

👉 Understand what an API is and why we need it.

👉 Learn about Retrofit and why it’s the best choice for API calls in Android.

👉 Build a Book Store App using Jetpack Compose and Retrofit.

👉 Implement best practices like ViewModel, Navigation, and LazyColumn for an optimized UI.

By the end, you’ll have a fully functional app that fetches books from an API and displays them beautifully in Jetpack Compose.

What is an API?

An API (Application Programming Interface) is a way for different applications to communicate with each other. Take an example of a restaurant in which

The customer (your app) requests a dish (book data).
The waiter (API) goes to the kitchen (server) to get the dish.
The waiter then serves the dish (returns data) to the customer.

Why do we need an API in our Book Store App?

We cannot store all books inside the app, so we fetch them from a server.

API allows real-time updates (new books, prices, authors, etc.).

Users always see the latest book collection without updating the app.

👉 In simple terms: The API helps our app communicate with a remote database to get the latest book data.

What is Retrofit? Why Do We Use It?

Retrofit is a popular networking library in Android used to make API requests easier, faster, and more efficient.

Why use Retrofit instead of other libraries?👇👇

Feature	Retrofit	Volley	OkHttp
Ease of Use	✅ Easy & Clean	❌ Complex	❌ Complex
Automatic JSON Parsing	✅ Yes	❌ No	❌ No
Error Handling	✅ Built-in	❌ Limited	❌ Limited
Scalability	✅ High	❌ Low	✅ Medium

In short: Retrofit simplifies API communication, making it perfect for our Book Store App.

Project Setup for Book Store App

Now that we understand APIs and Retrofit, let’s start building!

Step 1: Create a New Project

Open Android Studio → Select Empty Compose Activity → Click Next.
Name your project BookStoreApp → Click Finish.

Step 2: Add Required Dependencies

Open build.gradle (Module: app) and add these dependencies:

// Navigation to navigate between screen
implementation ("androidx.navigation:navigation-compose:2.8.8")

implementation ("androidx.compose.runtime:runtime-livedata:1.7.8")
implementation ("androidx.lifecycle:lifecycle-livedata-ktx:2.6.2")

// Retrofit for API calls
implementation("com.squareup.retrofit2:retrofit:2.9.0")
implementation("com.squareup.retrofit2:converter-gson:2.9.0")
implementation("androidx.compose.runtime:runtime-livedata:1.6.6")
implementation ("com.google.android.gms:play-services-location:21.3.0")

// Coil for image loading in Compose
implementation("io.coil-kt:coil-compose:2.6.0")

Sync the project after adding dependencies.

Step 3: Creating the Data Model

Since our API will return book details in JSON format, we need a data class to store this information. Expected JSON response from API


fun getSampleBooks(): List<Book> {
    return listOf(
        Book(
            title = "Kotlin Programming",
            subtitle = "The Big Nerd Ranch Guide",
            isbn13 = "9780135160300",
            price = "$39.99",
            image = "https://itbook.store/img/books/9780135160300.png",
            url = "https://itbook.store/books/9780135160300"
        ),
        Book(
            title = "Android Programming",
            subtitle = "The Big Nerd Ranch Guide",
            isbn13 = "9780135160301",
            price = "$49.99",
            image = "https://itbook.store/img/books/9780135160301.png",
            url = "https://itbook.store/books/9780135160301"
        ),
        Book(
            title = "Effective Java",
            subtitle = "A Programming Language Guide",
            isbn13 = "9780134686097",
            price = "$45.00",
            image = "https://itbook.store/img/books/9780134686097.png",
            url = "https://itbook.store/books/9780134686097"
        ),
        Book(
            title = "Clean Code",
            subtitle = "A Handbook of Agile Software Craftsmanship",
            isbn13 = "9780136083238",
            price = "$42.00",
            image = "https://itbook.store/img/books/9780136083238.png",
            url = "https://itbook.store/books/9780136083238"
        )
    )
}

Creating the Book Model

data class Book(
    val title: String,
    val subtitle: String,
    val isbn13: String,
    val price: String,
    val image: String,
    val url: String
)

Step 4: Setting Up Retrofit to Fetch Data from API

Now, we create an interface that defines API requests.

interface BookApiService {
    @GET("search/{query}")
    fun searchBooks(@Path("query") query: String): Call<BookResponse>
}
data class BookResponse(
    val error: String,
    val books: List<Book>
)

Step 5: Creating Retrofit Instance


object RetrofitInstance {
    private const val BASE_URL = "https://api.itbook.store/1.0/"

    private val retrofit by lazy {
        Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
    }

    val api: BookApiService by lazy {
        retrofit.create(BookApiService::class.java)
    }
}

Step 6: Fetching Data in ViewModel

class BookViewModel : ViewModel() {
    private val repository = BookRepository()

    fun searchBooks(query: String, onResult: (List<Book>?) -> Unit) {
        viewModelScope.launch {
            repository.searchBooks(query, onResult)
        }
    }
}

Step 7: Building the UI with Jetpack Compose Book List Screen, Book Detail Screen, Cart Screen and Adding Navigation

How to create a Music Player App?

Final complete code is below👇👇👇

Note:

Internet Permission is required to fetch data from API👇

<uses-permission android:name="android.permission.INTERNET"/>

Dependency We use for this Project:👇👇

Dependencies used to build Book Store App

Book Store Screens

Book List Screen, Book Detail Screen, Cart Screen and Adding Navigation:

package com.example.mybookstore

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
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.systemBarsPadding
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.Clear
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.TextFieldValue
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import coil.compose.AsyncImage


@Composable
fun MyBookStore() {
    val navController = rememberNavController()
    val bookViewModel: BookViewModel = viewModel()
    val cartViewModel: CartViewModel = viewModel()

    NavHost(navController, startDestination = "bookList") {
        composable("bookList") { BookListScreen(navController, bookViewModel) }
        composable("bookDetail/{bookId}") { backStackEntry ->
            val bookId = backStackEntry.arguments?.getString("bookId") ?: ""
            BookDetailScreen(bookId, navController, bookViewModel, cartViewModel)
        }
        composable("cartScreen") { CartScreen(cartViewModel) }
    }
}

@Composable
fun BookListScreen(navController: NavController, viewModel: BookViewModel) {
    val books by viewModel.books.collectAsState()
    val isLoading by viewModel.isLoading.collectAsState()
    val errorMessage by viewModel.errorMessage.collectAsState()

    var searchQuery by remember { mutableStateOf(TextFieldValue("")) }

    Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) {
        Text(text = stringResource(id = R.string.app_name), style = MaterialTheme.typography.headlineLarge)
        TextField(
            value = searchQuery,
            onValueChange = {
                searchQuery = it
                viewModel.searchBooks(it.text)
            },
            label = { Text("Search Books") },
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp)
        )

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

        when {
            isLoading -> {
                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    CircularProgressIndicator()
                }
            }
            errorMessage != null -> {
                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    Text(text = errorMessage!!, color = Color.Red)
                }
            }
            books.isNotEmpty() -> {
                LazyColumn {
                    items(books) { book ->
                        BookItem(book, navController)
                    }
                }
            }
            else -> {
                Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                    Text(text = "No books found", color = Color.Gray)
                }
            }
        }
    }
}

@Composable
fun BookItem(book: Book, navController: NavController) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .clickable {
                navController.navigate("bookDetail/${book.isbn13}")
            },
        elevation = CardDefaults.cardElevation(4.dp)
    ) {
        Row(modifier = Modifier.padding(16.dp)) {
            AsyncImage(
                model = book.image,
                contentDescription = "Book Image",
                modifier = Modifier
                    .size(180.dp)
                    .clip(RoundedCornerShape(8.dp))
            )

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

            Column(modifier = Modifier.weight(1f)) {
                Text(text = book.title, style = MaterialTheme.typography.titleMedium)
                Spacer(modifier = Modifier.height(4.dp))
                Text(text = book.price, color = Color.Red, style = MaterialTheme.typography.headlineMedium)
            }
        }
    }
}

@Composable
fun BookDetailScreen(
    bookId: String,
    navController: NavController,
    bookViewModel: BookViewModel,
    cartViewModel: CartViewModel
) {
    val books by bookViewModel.books.collectAsState() // Get all books
    val book = books.find { it.isbn13 == bookId } // Find the selected book
    val cart by cartViewModel.cart.collectAsState() // Get cart data

    if (book == null) {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Text("Book not found", fontSize = 18.sp, fontWeight = FontWeight.Bold)
        }
        return
    }

    val isInCart = cart.containsKey(book) // Check if book is in cart

    Column(
        modifier = Modifier
            .fillMaxSize()
            .systemBarsPadding()
    ) {
        Text("Book Details", fontSize = 34.sp, fontWeight = FontWeight.Bold)
        // Book Image
        AsyncImage(
            model = book.image,
            contentDescription = "Book Image",
            modifier = Modifier
                .fillMaxWidth()
                .height(250.dp)
                .clip(RoundedCornerShape(12.dp)),
            contentScale = ContentScale.Crop
        )

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

        // Book Title
        Text(
            text = book.title,
            fontWeight = FontWeight.Bold,
            fontSize = 20.sp
        )

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

        // Book Subtitle
        Text(
            text = book.subtitle,
            fontSize = 16.sp,
            color = Color.Gray
        )

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

        // Price
        Text(
            text = "Price: ${book.price}",
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Red
        )

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

        // Add to Cart or Go to Cart Button
        Button(
            onClick = {
                if (isInCart) {
                    navController.navigate("cartScreen")
                } else {
                    cartViewModel.addToCart(book)
                }
            },
            modifier = Modifier.fillMaxWidth(),
            colors = ButtonDefaults.buttonColors(
                containerColor = if (isInCart) Color.Blue else Color.Green
            )
        ) {
            Text(text = if (isInCart) "Go to Cart" else "Add to Cart", color = Color.Black)
        }
    }
}

@Composable
fun CartScreen(cartViewModel: CartViewModel) {
    val cart by cartViewModel.cart.collectAsState()
    val totalPrice = cartViewModel.getTotalPrice()

    Column(modifier = Modifier.fillMaxSize().systemBarsPadding()) {
        Text("My Cart", fontSize = 34.sp, fontWeight = FontWeight.Bold)

        if (cart.isEmpty()) {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                Text("Your cart is empty", fontSize = 18.sp, fontWeight = FontWeight.Bold)
            }
            return
        }

        LazyColumn {
            items(cart.entries.toList()) { (book, qty) ->
                CartItem(book, qty, cartViewModel)
            }
        }

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

        // Total Price
        Text(
            text = "Total: $${"%.2f".format(totalPrice)}",
            fontSize = 38.sp,
            fontWeight = FontWeight.Bold,
            color = Color.Blue,
            modifier = Modifier.padding(bottom = 16.dp)
        )

        // Checkout Button
        Button(
            onClick = { /* Implement Checkout */ },
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = "Checkout")
        }
    }
}
@Composable
fun CartItem(book: Book, qty: Int, cartViewModel: CartViewModel) {
    // ✅ Recalculate item total price
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp),
        elevation = CardDefaults.cardElevation(4.dp)
    ) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Book Image
            AsyncImage(
                model = book.image,
                contentDescription = "Book Image",
                modifier = Modifier
                    .size(80.dp)
                    .clip(RoundedCornerShape(8.dp))
            )

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

            Column(modifier = Modifier.weight(1f)) {
                // Book Title
                Text(
                    text = book.title,
                    fontWeight = FontWeight.Bold,
                    fontSize = 16.sp
                )

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

                // Book Price
                Text(
                    text = "Rate: ${book.price}",
                    fontSize = 14.sp,
                    color = Color.Red
                )
                Text(
                    text = "Price: ${cartViewModel.getItemTotalPrice(book)}",
                    fontSize = 34.sp,
                    color = Color.Black
                )
                Spacer(modifier = Modifier.height(8.dp))

                // Quantity Controls
                Row(verticalAlignment = Alignment.CenterVertically) {
                    IconButton(onClick = { cartViewModel.decreaseQuantity(book) }) {
                        Text("-", fontSize = 40.sp)

                    }
                    Spacer(modifier = Modifier.height(8.dp))
                    Text(text = qty.toString(), fontSize = 16.sp, fontWeight = FontWeight.Bold)
                    Spacer(modifier = Modifier.height(8.dp))
                    IconButton(onClick = { cartViewModel.increaseQuantity(book) }) {
                        Text("+", fontSize = 36.sp)
                    }

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

                    // Remove Button
                    IconButton(onClick = { cartViewModel.removeFromCart(book) }) {
                        Icon(imageVector = Icons.Default.Clear, contentDescription = "Remove", tint = Color.Red)
                    }
                }
            }
        }
    }
}

Retrofit API

package com.example.mybookstore

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


object RetrofitInstance {
    val api: BookApiService by lazy {
        Retrofit.Builder()
            .baseUrl("https://api.itbook.store/1.0/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(BookApiService::class.java)
    }
}

interface BookApiService {
    @GET("search/{query}")
    suspend fun searchBooks(@Path("query") query: String): BookResponse
}

data class BookResponse(val books: List<Book>)

data class Book(
    val title: String,
    val subtitle: String,
    val price: String,
    val image: String,
    val isbn13: String
)

Book List View Model and Cart View Model

package com.example.mybookstore

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
import kotlin.collections.component1
import kotlin.collections.component2


class BookViewModel : ViewModel() {
    private val _books = MutableStateFlow<List<Book>>(emptyList())
    val books: StateFlow<List<Book>> = _books

    private val _isLoading = MutableStateFlow(false)
    val isLoading: StateFlow<Boolean> = _isLoading

    private val _errorMessage = MutableStateFlow<String?>(null)
    val errorMessage: StateFlow<String?> = _errorMessage

    init {
        searchBooks("android") // Load books on start
    }

    fun searchBooks(query: String) {
        viewModelScope.launch {
            _isLoading.value = true
            _errorMessage.value = null
            try {
                val response = RetrofitInstance.api.searchBooks(query)
                _books.value = response.books
            } catch (e: Exception) {
                Log.e("BookListViewModel", "Error fetching books: ${e.message}")
                _errorMessage.value = "Failed to load books. Check your connection."
                _books.value = emptyList()
            } finally {
                _isLoading.value = false
            }
        }
    }
}

class CartViewModel : ViewModel() {
    private val _cart = MutableStateFlow<MutableMap<Book, Int>>(mutableMapOf())
    val cart: StateFlow<Map<Book, Int>> = _cart

    fun addToCart(book: Book) {
        _cart.value = _cart.value.toMutableMap().apply {
            put(book, (this[book] ?: 0) + 1)
        }
    }

    fun increaseQuantity(book: Book) {
        addToCart(book) // Just call addToCart to increase quantity
    }

    fun decreaseQuantity(book: Book) {
        _cart.value = _cart.value.toMutableMap().apply {
            val count = this[book] ?: return@apply
            if (count > 1) put(book, count - 1) else remove(book)
        }
    }

    fun removeFromCart(book: Book) {
        _cart.value = _cart.value.toMutableMap().apply {
            remove(book)
        }
    }
    fun getTotalPrice(): Float {
        return _cart.value.entries.sumOf { (book, qty) ->
            (book.price.replace("$", "").toDoubleOrNull() ?: 0.0) * qty
        }.toFloat()
    }
    // ✅ Function to get total price for a single book
    fun getItemTotalPrice(book: Book): Float {
        val qty = _cart.value[book] ?: 0
        val pricePerItem = book.price.replace("$", "").toFloatOrNull() ?: 0f
        return pricePerItem * qty
    }

}

MainActivity

package com.example.mybookstore

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.example.mybookstore.ui.theme.MyBookStoreTheme

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

MainFINAL OUTPUT:

Booklist Search 1 Screen of Book Store App

Booklist Search 2 Screen of Book Store App

Booklist Detail 1 Screen of Book Store App

Booklist Detail 2 Screen of Book Store App

Booklist Cart 1 Screen of Book Store App

Booklist Cart 2 Screen of Book Store App

Trending

Static Online Shopping App in Jetpack Compose

How to Create a Table in Jetpack Compose

Collapsing Toolbar in Jetpack Compose

How to build Analog Clock in Jetpack Compose

Music Player in Jetpack Compose