Skip to content

Commit f44806d

Browse files
CGreenPCGreenP
authored
Create README.md
1 parent cc4bbe6 commit f44806d

File tree

1 file changed

+139
-0
lines changed

1 file changed

+139
-0
lines changed

‎README.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# TechExactly - Android Machine Test Task
2+
This Android application fetches and displays a list of users from the [JSONPlaceholder API](https://jsonplaceholder.typicode.com/users), demonstrating core Android development skills using modern Jetpack Compose and architectural patterns.
3+
4+
## Overview
5+
1. **Main Screen (Home Screen):** Displays a scrollable list of users, with each list item showing the user's name and email. It also features a search bar to filter the user list by name.
6+
2. **Details Screen:** When a user is selected from the list, this screen shows detailed information about the user, including their name, email, phone number, address, and company information.
7+
8+
## Screenshot
9+
<p align="center">
10+
<img src="https://github.com/user-attachments/assets/a0c9bc1f-98de-422c-b6b4-c0436b5e6ce3" width="288">
11+
<img src="https://github.com/user-attachments/assets/73b2b8ce-2513-4950-a291-a0e9f6ac92b9" width="288">
12+
<img src="https://github.com/user-attachments/assets/2c4e7414-b7c1-4d4e-be41-a5b979fb5146" width="288">
13+
<img src="https://github.com/user-attachments/assets/a6c8f3e0-8efb-4a13-9e52-77ac89a274f0" width="288">
14+
<img src="https://github.com/user-attachments/assets/df64d600-ba68-44e5-ad0c-7ec40728149f" width="288">
15+
<img src="https://github.com/user-attachments/assets/8be88016-abf9-418c-bf1f-144108fae239" width="288">
16+
<img src="https://github.com/user-attachments/assets/44ff56c6-bb43-4c1d-b7a3-d1e89a89fd59" width="288">
17+
<img src="https://github.com/user-attachments/assets/d155f3a4-d8c1-4523-a9be-22d474baaaf7" width="288">
18+
</p>
19+
20+
## Video
21+
https://github.com/user-attachments/assets/eebedd38-df78-4dca-ac1e-f100969caad2
22+
23+
## Features
24+
- **User Listing:** Fetches and displays a list of users from the JSONPlaceholder API.
25+
- **Detailed User Information:** Displays comprehensive user details on a separate screen.
26+
- **Search Functionality:** Allows filtering of users by name using a search bar.
27+
- **MVVM Architecture:** Implements the Model-View-ViewModel architectural pattern for separation of concerns and testability.
28+
- **Dependency Injection:** Uses Koin for dependency injection, simplifying object creation and management.
29+
- **Asynchronous Data Fetching:** Employs Kotlin Coroutines and Flows for handling network requests and data updates asynchronously.
30+
- **Jetpack Compose:** Leverages Jetpack Compose for building a modern, declarative UI.
31+
- **State Management:** Utilizes StateFlow for efficient state management and UI updates.
32+
- **Splash Screen:** Displays a splash screen while the app loads.
33+
- **Error Handling:** The application handles network errors and display relevant message to the user.
34+
- **No Data Handling:** The application checks if there is no data and display a message accordingly.
35+
- **Pagination:** A footer is added to indicate the end of the data.
36+
- **Clear Search:** The search can be cleared if the user enters any text.
37+
38+
## Tech Stack
39+
- **Android:** Kotlin
40+
- **Jetpack Compose:** Declarative UI framework
41+
- **Koin:** Dependency Injection
42+
- **Retrofit:** Network requests
43+
- **OkHttp:** HTTP client for network requests
44+
- **Kotlin Coroutines:** Asynchronous operations
45+
- **Kotlin Flows:** Asynchronous stream of data
46+
- **StateFlow:** State management
47+
- **MVVM:** Architectural pattern
48+
- **Splash Screen API:** To show splash screen.
49+
- **Nested Scroll API:** To add nested scroll.
50+
- **Material 3:** Modern Material design.
51+
- **Lifecycle KTX:** To have composable function collectAsStateWithLifecycle
52+
53+
## Dependencies
54+
The project uses the following key dependencies:
55+
- **Koin**
56+
- **Retrofit**
57+
- **OkHttp**
58+
- **Gson**
59+
- **Jetpack Compose**
60+
- **ViewModel**
61+
- **Compose Navigation**
62+
- **Serialization**
63+
- **Splash Screen**
64+
- **Compose Material Icons Extended**
65+
66+
## Setup and Installation
67+
1. **Clone the Repository:**
68+
```bash
69+
git clone https://github.com/CGreenP/TechExactly-Android_Machine_Test_Task.git
70+
```
71+
3. **Open in Android Studio:**
72+
- Launch Android Studio.
73+
- Select "Open an existing Android Studio project."
74+
- Navigate to the cloned repository and open the `app` directory.
75+
4. **Build and Run:**
76+
- Click the "Sync Project with Gradle Files" button.
77+
- Once the project is synchronized, click the "Run" button (green play icon) or use `Shift + F10` to build and run the application on an emulator or connected device.
78+
79+
## Architecture
80+
The application follows the **MVVM (Model-View-ViewModel)** architectural pattern:
81+
- **Model:**
82+
- `User.kt`: Data class representing the structure of a user and associated data.
83+
- `UserApi.kt`: Defines the network call for fetching users from the remote API.
84+
- `UserRepository.kt`: Handles the logic for fetching user data from the API and returning it as a `Flow`.
85+
- **View:**
86+
- Composable functions in the `view` package, such as `HomeScreen.kt`, `UserDetailsScreen.kt`, `UserList.kt`, `UserListItem.kt`, etc., are responsible for displaying the UI.
87+
- Utilizes Jetpack Compose components (e.g., `LazyColumn`, `Scaffold`, `TopAppBar`, `Text`, `Icon`) to create the UI.
88+
- The navigation is configured via the NavGraph.
89+
- **ViewModel:**
90+
- `MainViewModel.kt`: Manages the state and business logic for the Home screen.
91+
- Exposes `StateFlow`s (`uiState`, `searchQuery`) that the View observes to update the UI.
92+
- Fetches user data through the `UserRepository` and processes the results.
93+
- Handles search query updates and filters the user list.
94+
95+
## Dependency Injection (Koin)
96+
- **Koin** is used for dependency injection to provide the necessary dependencies to the components (e.g., `Retrofit`, `UserApi`, `UserRepository`, `MainViewModel`).
97+
- `TechExactlyApplication.kt`: Initializes Koin with the necessary modules.
98+
- `AppModule.kt`: Defines the Koin modules.
99+
100+
## Data Fetching (Retrofit, OkHttp, Gson, Coroutines, Flows)
101+
- **Retrofit** is used to make network requests to the JSONPlaceholder API.
102+
- **OkHttp** is the underlying HTTP client that Retrofit uses.
103+
- **Gson** is used for JSON serialization/deserialization.
104+
- **Kotlin Coroutines** are used to handle asynchronous operations and `suspend` functions.
105+
- **Kotlin Flows** are used to emit data asynchronously from the `UserRepository` to the `MainViewModel`.
106+
- **Okhttp Logging Interceptor** is used to log the http requests and responses.
107+
108+
## State Management (StateFlow)
109+
- **StateFlow** is used in `MainViewModel` to hold and update the UI state (`UiState`).
110+
- The UI state is a `sealed class` (`UiState`) that defines the possible states of the UI (e.g., `Loading`, `Success`, `Error`).
111+
- The composable functions in the View observe the `StateFlow`s and update the UI accordingly using `collectAsStateWithLifecycle`.
112+
113+
## Navigation
114+
- `NavGraph.kt` : contains the navigation logic between screens.
115+
- `Screens.kt` : defines the routes of the screen.
116+
- `CustomNavType.kt`: defines the way the User object is parsed.
117+
118+
## Bonus Features
119+
- **Search Functionality:** The app implements a search feature that allows users to filter the user list by name using the search bar.
120+
- **Clean Code:** The codebase is clean, readable, and well-structured.
121+
- **Modern UI:** Uses Jetpack Compose to build a modern and intuitive UI.
122+
- **Splash Screen:** Displays a splash screen while the app loads.
123+
- **Error Handling:** The application handles network errors and display relevant message to the user.
124+
- **No Data Handling:** The application checks if there is no data and display a message accordingly.
125+
- **Pagination:** A footer is added to indicate the end of the data.
126+
- **Clear Search:** The search can be cleared if the user enters any text.
127+
128+
## Further Improvements
129+
- **Pagination:** Implement pagination to load more users as the user scrolls.
130+
- **Caching:** Add a caching mechanism to reduce the number of network requests.
131+
- **Unit Tests:** Add unit tests for the ViewModel and Repository.
132+
- **UI Tests:** Add UI tests to verify the UI components.
133+
- **More Detailed Error Handling:** Provide more detailed error messages and handling for various error scenarios.
134+
135+
## Contact
136+
Chayan Pal
137+
- Mail: [[email protected]](mailto:[email protected])
138+
- LinkedIn: [www.linkedin.com/in/chayan-pal/](https://www.linkedin.com/in/chayan-pal/)
139+

0 commit comments

Comments
 (0)