WhatsApp Clone — Jetpack Compose — Project Structure

Photo by Priscilla Du Preez on Unsplash

Content

1. Project Structure
2. Authentication
3. User details
4. Home
5. Profile Details
6. Status
7. Search
8. Chat
9. Chats
10. Final Remark

Let’s check the structure of the project.

There are many ways by which you can structure your project depending on how you are going to update the state of the UI or handle the business logic.

But before that let’s see the Gradle, I have taken the structure of our Gradle from the official Jetpack Compose Official GitHub projects. I have created a buildSrc module which will be used to store all the libraries which will be needed for our project.

buildSrc

And will be replacing all the values, libraries and version in the app/build.gradle and module level build.gradle with it. This way it will be helpful to maintain our libraries in one place.

Now for the project structure, below image shows the main packages which I have created to maintain the files

Main folder structure

1. models : It will contain the data to be shown or used in the whole application
2. modules : It will contains all the main pages or the module of the application like splash, authentication, etc.
3. nav : It will be used for navigation purpose in the application.
4. ui : The main UI components like color, style and common composables which will be used throughout the application.
5. utils : The utility classes to make our life easier 😇.

Now let’s take a look in one of our modules to see what will be there for each one of them,

modules

For each module we will have 2 things,

1. view : Which will contain all the views (or composables) that will help in make the screens.
2. viewModel : The main state manager which will handle the UI state and do the business logic.

For example see the below image for our splash screen,

Splash module

The MainActivity will be our main page from which the application starts. And the NavComposeApp will be our first composable which will be at the top of the tree for the use of navigation.

Now, I will be also using spotless for the code structure and adding the license to each files. for more details on Spotless on how to use it for Android go to https://medium.com/@int_32/android-project-code-style-using-spotless-and-ktlint-5422fd90976c. I haven’t used the lint as of now but will try it in the next project 🙈.

Hope this helps you understand the structure of the project and see you in the next part of this article which will be WhatsApp Clone — Jetpack Compose — Authentication.