DEV Community: Maria Luíza

Canvas in Jetpack Compose

Maria Luíza — Fri, 25 Aug 2023 13:49:12 +0000

Hello, fantastic person on the internet! I hope you’re doing well.

We all know that Jetpack Compose is excellent for creating native Android UI, but do you know how we can achieve this using the Canva API?

Canvas API

The Canvas API unveils a new realm of possibilities, allowing us to paint and sculpt the UI with unparalleled precision and artistry.

Screen

We need first to understand how the screen works. Our interface is composed of many pixels, and the more pixels we have, the cleaner the components will be.

To observe that, we can simply zoom in on a component:

Knowing that we can begin drawing using the Canva API.

Implementation

Go to your compose function and invoke the Canvas method.

Now, you have the ability to start drawing. These are some simple functions that can assist you:

Use drawRect() to draw a square.
Use drawCircle() to draw a circle.
Use drawRoundRect() to draw a square with rounded corners.

Square

To draw a simple square:

To draw a square with rounded corners:

Circle

To draw a simple circle:

To draw a simple circle with stroke line:

Positions

You can also change the position of the element by a specified number of pixels.

Imagine that I have a square of 100 pixels:

I want to draw a square in the bottom left corner, taking up only half of the layout. We can use topLeft to set the alignment, and I can adjust the offset for both the X and Y axes to 100f:

Your layout is going to look like this:

The power of Canvas

You may be wondering why you need to draw a circle or a square. The answer to that question is that, with simple symbols like that, you can design many other beautiful and unthinkable illustrations.

For example:

Amazing graphics

Logos

Or any shapes

Conclusion

The Canvas API can be extremely useful when you need to create unique illustrations or when you can’t find a high-quality one.

You can combine the Canvas API with Compose animations to create beautiful layouts. Check my article on animation created using Compose for more information on this topic.

All the code and examples it is in this repository.

Happy coding ❤

Please let me know what you think in the comments…

Connect with me 👇

10 Free APIs to Use

Maria Luíza — Fri, 18 Aug 2023 11:47:44 +0000

Hello, fantastic person on the internet! Hope you’re doing well.

API

APIs enable apps to communicate and exchange data smoothly, letting developers leverage tools and services for enhancing creations.

Let’s explore some cool APIs that we can integrate into our app.

NASA APIs

NASA APIs allow you to access a vast amount of data from NASA, such as the Astronomy Picture of the Day, Near Object Web Services, moon pictures, and more.

OpenWeather

OpenWeather is an amazing tool for checking and interacting with the weather. It offers historical, current, and forecasted weather data.

Cat Facts

Cat Facts is an excellent API for beginners. It’s incredibly easy to implement and provides you with random facts about cats.

Dog Facts

If you are a dog person, don’t worry. You can use the Dog API, which provides the same things but about dogs.

Pixels

Pixels API provides access to an entire library of photos and videos. It’s free and seamlessly integrates with just a few lines.

Spotify

Spotify API allows us to interact with their streaming service, recommendations, create and manage playlists, and control playback.

Instagram

The Instagram API allows comment management and responses, finding hashtagged content, and obtaining data about companies and creators.

GetOTP

GetOTP helps you build a complete multichannel OTP with almost no code. With a simple call, you can implement your verification flow.

Todoist

Todoist is not only a Google extension but also an API that provides developers with a simple way to consume the most basic features of Todoist.

Conclusion

The availability of free APIs underscores the collaborative spirit of the developer community and the drive to make technology accessible to all.

Whether you’re a seasoned developer or just starting, integrating these APIs into your projects can enhance functionality, streamline processes, and bring your ideas to life in ways you might not have imagined.

Happy coding ❤

Please let me know what you think in the comments…

Connect with me 👇

State With Jetpack Compose

Maria Luíza — Fri, 11 Aug 2023 10:37:45 +0000

Hello, fantastic person on the internet! Hope you're doing well.

When migrating from XML to Compose, it can be difficult to understand certain concepts.

State

There is no way to update the UI after it has been drawn. What you can control is the state of your UI. When UI state changes, Compose reconstructs the components of the UI that have been altered.

Unidirectional Data Flow

Since composables accept states and expose events, the unidirectional data flow (UDF) pattern aligns perfectly with Jetpack Compose.

The UDF is a design pattern in which state flows downward and events flow upward.

Functions

To declare a variable for controlling the state of a UI component, we need to understand certain functions:

remember
rememberSaveable
mutableStateOf()

mutableStateOf() is an observable type for Compose. Used when the value can change at some moment.

remember assists in retaining state throughout recompositions. However, the state is not preserved during configuration changes.

**rememberSaveable **is very similar to remember. It automatically saves any value that can be stored in a Bundle.

Alright, how can we observe that in practice?

Imagine that we have a text field where the value can change depending on the user type.

To effectively work with this component, we can utilize state.
Declare a variable responsible for capturing the value of our component:

Now, let's simply assign the variable to receive the value from the text field:

This enables us to capture the variable of whatever the user types. Even if they change the value, since we are constantly updating the value of the text it doesn't matter.

As a result, things like TextField don't automatically update like they do in imperative XML based views.

Conclusion

By combining a declarative UI paradigm with efficient state handling and architecture patterns, Jetpack Compose empowers developers to create apps that are not only visually stunning but also robust, maintainable, and future-ready.

Embracing Jetpack Compose is not just a technological choice, but a strategic one that propels Android app development into a more innovative and efficient direction.

Happy coding ❤

Please let me know what you think in the comments…

Connect with me 👇

Animation Component with Compose

Maria Luíza — Fri, 04 Aug 2023 13:11:38 +0000

Hello, amazing person of the internet! Hope you're doing well.

As users become increasingly accustomed to fluid animations and intuitive interactions, incorporating animation into your app has become a pivotal element for success.

Animate*AsState

This API should be used when animating State changes. Let’s see how we can do this in practice.

You just need to declare your variable as animate*AsState. In my case, I am going to animate a color:

I am simply setting a color with the color variable, and the backgroundColor that we are going to use is declared using animateColorAsState, which takes the color as a parameter.

Now, let’s create two buttons, and upon clicking them, we will set another value to the color variable:

You are going to see something like that:

Animating Content Size

Expanding the content of a component is not a surprise to us, but you can make it even prettier by adding some animation.

You just need to add animateContentSize to the modifier of your card

Here is my card without any animation. It simply expands when you click on it:

To animate, I am going to call the animateContentSize on the modifier's column:

Animating Visibility

I love how it’s easy to create animated views with Jetpack Compose. Have you ever wondered how to animate elements when scrolling through a list? Let’s do this.

First things first, I am going to create a lazy column list. If you don’t know how to develop this, just check out my article about list and grid layouts:

To create animated visibility, we can utilize The AnimatedVisibility method. This method triggers the animation component each time the associated Boolean value changes.

I’m going to animate two components: a floating action bar and a text. Let’s create a function responsible for animating each of these views:

visible: Set this to determine if the animation should occur or not.
exit: Use it to control how the animation occurs when the component is disappearing.
enter: Use it to control how the animation occurs when the component is appearing.
Now, let’s call those functions in our main activity using the scaffold methods.

First, the floating action button :

Now, let’s refer to the animated text in the content parameter:

Last but not least, let’s call the list:

Conclusion

There are many other animations you can create with Compose.

If you all are interested, I can demonstrate and provide those customization.

integrating animation directly into Compose, it simplifies the process and optimizes performance. Embracing this technology opens up a world of creative possibilities and enhances the user experience, ensuring a promising future for Android UI development.

All the code and exemple it is on this repository.

Happy coding ❤

Please let me know what you think in the comments…

Connect with me 👇

GitHub

Instagram

Medium

Splash Screen API with Compose

Maria Luíza — Fri, 28 Jul 2023 11:50:03 +0000

Hello, amazing person of the internet! Hope you're doing well.

The first impressions are crucial. Creating a captivating user experience from the moment an app is launched has become a top priority. Users expect seamless, engaging interactions right from the start, and this is where the Splash Screen API, combined with the cutting-edge Jetpack Compose, takes center stage.

Implementation

First things first, we need to implement the splash screen API in our dependencies, within the gradle(Module:app):

Theme

Now, let's create the style for our splash screen. To do that, go to your values and create the splash resource:

You can name the style's name as you prefer, but the parent's name must be "Theme.SplashScreen".

windowSplashScreenBackground = background screen.

windowSplashScreenAnimatedIcon = the splash screen icon.

postSplashScreenTheme = the theme aftesplash screen.

Within your manifest, navigate to the activity tag and invoke the custom theme:

Calling

Head to our Main Activity to display our splash screen. Simply call the installSplashScreen() function:

That's it! You now have a splash screen.

Blank Screen

If you encounter an issue with a blank screen while using this API, don't worry. After calling the splash screen and proceeding to the next screen, you might experience a blank screen. To resolve this, simply call the setKeepOnScreenCondition{} function:

Conclusion

Gone are the days of static and mundane splash screens that merely act as loading indicators. With Jetpack Compose, a revolutionary toolkit for building native Android UIs, and the introduction of the Splash Screen API, developers now have the tools to transform their app's launch sequence into an immersive and visually appealing experience.

All the code and exemple it is on this repository.

Happy coding ❤

Please let me know what you think in the comments…

Connect with me 👇

GitHub

Instagram

Medium

Date & Time Picker with Compose

Maria Luíza — Wed, 19 Jul 2023 12:57:21 +0000

Hello, amazing person of the internet! Hope you're doing well.

In today's world, where every second counts, managing dates and times efficiently in our app has become crucial.

Data Picker

By default, a date picker enables you to select a date through a calendar UI. Nevertheless, it also permits switching to a date input mode for manually entering dates using the keyboard's numeric keys.

The first thing we have to do is create a variable responsible for keeping the state of our calendar:

Let's call the DatePicker() function to display the date block view:

You are going to see something like that:

We can make things look more beautiful and interactive.To create an amazing dialog, we can call the function DatePickerDialog(). As the name suggests, this allows us to create a dialog and control when it will be displayed:

I am going to create a variable that will receive a boolean to control when we are going to show the dialog. When the user clicks on the dismiss button, iwill set it to false, and do the same thing when the user confirms:

Now, let's update our variable state cleaning its value and call the DatePicker() into our DatePickerDialog() function:

You're going to see something like that:

To determine the date the user has selected, simply call the *state * variable, and it will provide you with a set of options:

To control the color of the dialog just pass the parameter colors:

Time Picker

Time pickers help users select and set a specific time. The logic is very similar to the Date Picker. We need to create a state and call the dialog function:

You're going to see something like that:

Like the Date Picker we can make things look more beautiful and interactive. To create other types of timers, we can call the function TimeInput(). This enables us to input a specific time and control when it will be displayed:

You're going to see something like that:

When this article was posted, the material io 3 didn't support the TimePickerDialog. However, the next release will enable the display of a dialog box similar to the DatePickerDialog.

Conclusion

You can also customize the colors of the pickers as you desire. The Date and Time Picker is an essential design element for your app, and it's crucial to understand how to utilize this feature correctly.

All the code and exemple it is on this repository.

Happy coding ❤

Please let me know what you think in the comments…

Connect with me 👇

GitHub

Medium

Navigation With Compose

Maria Luíza — Fri, 14 Jul 2023 12:43:51 +0000

Hello, amazing person of the internet! Hope you’re doing well.

One crucial aspect of creating seamless and intuitive user experiences is effective navigation within an app.

That’s where the Navigation Component with Jetpack Compose comes into play.

Implementation

Let’s implement the navigation library in the build.gradle file (module):



dependencies {

    [...]

    val nav_version = "2.6.0"
    implementation("androidx.navigation:navigation-compose:$nav_version")
}

Screens

Now, I am going to create two compose files to represent our screens:

Fist Screen:



@Composable
fun ScreenOne() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen One")
        Button(
            onClick = { /*TODO*/ }
        ) {
            Text(text = "Next Screen")
        }
    }
}

Screen Two:



@Composable
fun ScreenTwo() {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen Two")
        Button(
            onClick = { /*TODO*/ }
        ) {
            Text(text = "Next Screen")
        }
    }
}

When working with the navigation component, you need to know certain names, such as NavController and NavHost.

NavController

You can think of the NavController as being responsible for maintaining the state of each screen.

You need to implement in the starting point of your app. To create the NavController just call rememberNavController() method.



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationComponentTheme {
                Surface {
                    val navController = rememberNavController()
                }
            }
        }
    }
}

NavHost

The NavHost connects the NavController to a navigation graph, which defines the composables you can navigate between.

Let’s create a file for our NavHost:



@Composable
fun CustomNavHost(
    navController: NavController
) {

}

We need to pass the NavController as a parameter because we require it to control the screens.

Now let’s call the NavHost method:



@Composable
fun CustomNavHost(
    navController: NavHostController
) {
    NavHost(
        // the nav controller that we receive has parameter
        navController = ,
        // The screen your app should display first
        startDestination = 
    ) {

    }
}

We need to call our screen files:



@Composable
fun CustomNavHost(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = "SCREEN_ONE"
    ) {
        composable(route =  "SCREEN_ONE"){
            ScreenOne()
        }
        composable(route = "SCREEN_TWO") {
            ScreenTwo()
        }
    }
}

You need to define a route to each screen.

Let’s go back to our MainActivity and set up our NavHost:



class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationComponentTheme {
                Surface {
                    val navController = rememberNavController()
                    CustomNavHost(navController = navController)
                }
            }
        }
    }
}

To control the flow and navigate between screens, each screen needs to have access to the NavController.

In your NavHost file, pass the NavController as a parameter for your screens.



@Composable
fun CustomNavHost(
    navController: NavHostController
) {
    NavHost(
        navController = navController,
        startDestination = "SCREEN_ONE"
    ) {
        composable(route = "SCREEN_ONE") {
            ScreenOne(navController)
        }
        composable(route = "SCREEN_TWO") {
            ScreenTwo(navController)
        }
    }
}

And add the parameter to each screen:

Fist Screen:



@Composable
fun ScreenOne(navController: NavHostController) {
[...]

Screen Two:



@Composable
fun ScreenTwo(navController: NavHostController) {
[...]

Navigate

To start “an activity”, You simply need to call it using the navController and provide the route of the screen you wish to navigate to:



navController.navigate(route = "SCREEN_TWO")

I am going to call ScreenTwo on ScreenOne and call ScreenOne on ScreenTwo.

So, my final screen files will look like this:

Fist Screen:



@Composable
fun ScreenOne(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen One")
        Button(
            onClick = {
                navController.navigate(route = "SCREEN_TWO")
            }
        ) {
            Text(text = "Next Screen")
        }
    }
}

Screen Two:



@Composable
fun ScreenTwo(navController: NavHostController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "Screen Two")
        Button(
            onClick = {
                navController.navigate("SCREEN_ONE")
            }
        ) {
            Text(text = "Next Screen")
        }
    }
}

Conclusion

You can also pass arguments, use nested navigation, combine it with bottom bar navigation, and it’s super easy to test.

The navigation component is one of the many features of Compose, allowing you to navigate between screens in a easy way.

Check here my article about navigation bar.

All the code and exemple it is on this repository.

Happy coding ❤

Please let me know what you think in the comments…

Connect with me 👇

GitHub

Grid and Lists in Compose

Maria Luíza — Fri, 07 Jul 2023 15:30:17 +0000

Hello, there! I hope you’re doing well!

Many times, we need to display collections in our apps, and to accomplish that, we can use list and grid layouts.

Grid vs List

Grid

To create grid layouts, you can use LazyVerticalGrid to display items in a vertically scrollable container, while LazyHorizontalGrid will exhibit the same behavior along the horizontal axis.

To utilize Lazy Grids, specify the number of columns (for vertical grids) or rows (for horizontal grids) as a parameter:

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 100.dp)
) {
    items(images) { image ->
        ImageItem(image)
    }
}

If you pay attention, we’re using the GridCells.Adaptive approach, which is useful for displaying sets of items across different screen sizes.Alternatively, you can utilize GridCells.Fixed if you know the exact number of columns to be used.

For further customization, the GridCells offer a single function, calculateCrossAxisCellSizes, allowing you to combine adaptive and fixed implementations.

To display a Lazy Staggered Grid, use columns (for a vertical layout) or rows (for a horizontal layout) as parameters, similar to the Lazy Grid. This composable enables you to create a lazy-loaded, staggered grid of items:

Import the dependencies in your build.gradle (module).

implementation 'androidx.compose.foundation:foundation:1.3.0'

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Adaptive(200.dp),
    verticalItemSpacing = 8.dp,
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    content = {
        items(images) { image ->
            AsyncImage(
                model = image,
                contentScale = ContentScale.Crop,
                contentDescription = "Description of the image",
                modifier = Modifier.fillMaxWidth().wrapContentHeight()
            )
        }
    },
    modifier = Modifier.fillMaxSize()
)

You can also use a different parameter with the StaggeredGridCells in the same way as the GridCells.

List

To create a list of items, you can utilize LazyList. You can display both horizontal and vertical lists by using LazyColumn and LazyRow, respectively.

LazyColumn {
    // Add a single item
    item {
        Text(text = "First item")
    }

    // Add 8 items
    items(8) { index ->
        Text(text = "Item: $index")
    }

    items(imageList) { image ->
        ImageItem(image)
    }
}

Or you can use LazyRows:

LazyRow(
   verticalArrangement = Arrangement.spacedBy(16.dp),
) {
    // ...
}

Exemple

Now let’s create an sample of a Grid and List layout that shows a name and an image:

I created an composable function called ListLayout:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ListAndGridTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    ListLayout()
                }
            }
        }
    }
}

And create a mutable list that needs a name and an image:

val itemList = mutableListOf(
    Item(R.drawable.ic_android_black_24dp, "Ada Lovelace"),
    Item(R.drawable.ic_android_black_24dp, "Mary Kenneth"),
    Item(R.drawable.ic_android_black_24dp, "Grace Hopper"),
    Item(R.drawable.ic_android_black_24dp, "Carol Shaw"),
    Item(R.drawable.ic_android_black_24dp, "Hedy Lamarr"),
    Item(R.drawable.ic_android_black_24dp, "Camila Achutti"),
    Item(R.drawable.ic_android_black_24dp, "Cláudia Marquesani")
)

Let’s call the LazyColumn function that we learn before and pass the list as parameter:

LazyColumn {
    items(itemList) { image ->
    }
}

And create a layout to our item:

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(start = 16.dp, end = 16.dp, top = 16.dp)
) {
    LazyColumn {
        items(androidIconList) { image ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                backgroundColor = Color(0xFFEBF7FE),
                elevation = 4.dp,
                shape = RoundedCornerShape(size = 12.dp)
            ) {
                Row(
                    Modifier.fillMaxWidth(),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Image(
                        painter = painterResource(id = image.image),
                        contentDescription = "Avatar icon",
                        modifier = Modifier
                            .size(100.dp)
                            .padding(start = 16.dp)
                    )
                    Text(
                        text = image.name,
                        fontSize = 24.sp,
                        modifier = Modifier.padding(start = 16.dp)
                    )
                }
            }
            Spacer(modifier = Modifier.height(8.dp))
        }
    }
}

Now the Grid layout:

With the same list, we’re gonna to create another function to display our grid layout. I’m gonna use the Staggered:

LazyVerticalStaggeredGrid(
    columns = StaggeredGridCells.Fixed(2)
) {
    items(androidIconList) { image ->
    }
}

And create a layout to our cells:

Column(
    modifier = Modifier
        .fillMaxSize()
        .padding(start = 16.dp, end = 16.dp, top = 16.dp)
) {
    LazyVerticalStaggeredGrid(
        columns = StaggeredGridCells.Fixed(2),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp)
    )
    {
        items(androidIconList) { image ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .wrapContentHeight(),
                backgroundColor = Color(0xFFEBF7FE),
                elevation = 4.dp,
                shape = RoundedCornerShape(size = 12.dp)
            ) {
                Column(
                    Modifier.fillMaxWidth()
                ) {
                    Image(
                        painter = painterResource(id = image.image),
                        contentDescription = "Avatar icon",
                        modifier = Modifier
                            .size(100.dp)
                            .padding(start = 16.dp)
                    )
                    Text(
                        text = image.name,
                        fontSize = 24.sp,
                        modifier = Modifier.padding(start = 16.dp)
                    )
                }
            }
        }
    }
}

The complete code is available in this repository on my GitHub profile.

Hope you guys could see how easy it is to display Lists and Grid layouts using Jetpack Compose and how we can optimize our time when developing Android screens with Compose 😊

Please let me know what you think in the comments…

Connect with me 👇

GitHub

How To Create Unit Test On Android

Maria Luíza — Thu, 26 Jan 2023 13:42:31 +0000

Unit testing is a crucial feature of software development.

It brings about a development paradigm known as Test Driven Development (TDD).

It consists of test cases which are used to check the business logic of your code. Ensuring that the class does what its suppose to do.

So, how we write this?
First things first, you go on the code that you can test. In our case it’s gonna be an object that contains a function responsable for recive a string value and return bollean if it matches with the email validation.

object Utils {
fun validateEmail(email: String): Boolean {
    return !email.isEmpty() ||
            EMAIL_ADDRESS
                .matcher(email)
                .matches()
}

Now right click on the class and generate a test:

If you pay attention on the next dialog you can choose if you wanna generate an androidTest or a test.

Test source set is where we write business logic tests.
AndroidTest source set is where we write tests for functions that entirely depend on the Android platform(E.g. layout components).

Our function is just responsable of the business logic, so we go by test source.

After that the Android Studio will create a class on the test package:

class UtilsTest {
}

On your build.gradle import

testImplementation "com.google.truth:truth:1.1"

By default the Android Studio will implement the JUnit framework. So check if the implementation exist.

testImplementation 'junit:junit:4.13.2'`

Now, on the UtilsTest class, we gonna create our test function:

import com.google.common.truth.Truth
import org.junit.Test

class UtilsTest {

    @Test
    fun `login function returns false when email is empty`() {
        val emailEmpty = ""
        Truth.assertThat(Utils.validateEmail(emailEmpty)).isFalse()
    }
}

The Test annotation it’s to declare a function as a test.
And the assertThat method it’s to declarate the return that you expect of the test.

You can imagine that the test function it’s an cenarie that can occour on the class that you want to test. We are passing a val to simluating how we expect our function works when we recive a empty string.

So if our function received an empty value we want that return false.

Thats it, you created an unit test for your function.

Following the logic you can test how many cenaries you want. Another example it’s test if our function recive a correct value, so we are gonna expet that return true.

@Test
fun `login function returns true when email is valid`() {
    val emailCorrect = "user@email.com"
    Truth.assertThat(Utils.validateEmail(emailCorrect)).isTrue()
}

The last thing it’s run your test. You can click with the right button on the class and run:

And check if it pass:

I create a simple post on linkedin if you wanna check.

Thank you so much for reading and please let a feedback on the comments :)

You can also find me on:
Linkedin
GitHub