jmJLYnGZ2RljR6im5zVR

Drag, swipe, and fling

Copy and paste

How to Implement a Custom Swipe to Reveal

Stateful vs. Stateless Composables

State Hoisting in Compose

Managing State in Jetpack Compose (Codelab)

Standard Android / Jetpack libraries.

Use of Jetpack Compose Gesture APIs (e.g., swipeable, animateFloatAsState).

Material 3 components or simple custom ones.

Use of SnackbarHost or AnimatedVisibility for feedback messages.

Hardcoded promo code validation logic.

Real backend or promo validation API (hardcoded logic only).

Multiple products or cart list (only one item required).

Quantity modification (buttons are static).

Complex animation physics (simple horizontal transition is enough).

Advanced error styling (basic red text is fine).

A successful submission of this challenge via the /submit-challenge command on Discord grants you 100 XP. You can use it in any channel on Discord :)

A successful submission consists of these parts

1. A link to a Gist with your implementation

2. A screen recording (max 20 seconds) showing:

   • Swiping the product card to reveal the promo panel.

   • Copying the promo code (“Copied!” message appears).

   • Applying a valid code — discount applied to $149.

   • Entering an invalid code — “Invalid code” shown.

Full Guide to Lazy Grid in Jetpack Compose

How to Create a Lazy Column With Categories

Official Docs: LazyVerticalGrid

Sticky Header in LazyColumn

Stateful vs. Stateless Composables

State Hoisting in Compose

Managing State in Jetpack Compose (Codelab)

Standard Android/Jetpack libraries only.

Use Material 3 components or simple custom UI elements.

Static hardcoded product list (no external data source).

Functional behavior of the cart or menu icons.

Fetching or loading data from a remote source.

Complex or physics-based animations.

Tablet optimization (mobile view only).

A successful submission of this challenge via the /submit-challenge command on Discord grants you 100 XP. You can use it in any channel on Discord :)

A successful submission consists of these parts

1. A link to a Gist showing your code for this challenge.

2. A screen recording (max 20 seconds) showing:

   • The initial state with the banner in the middle of the list;

   • Scrolling down — the banner becomes sticky at the top;

   • Pressing “×” — the banner disappears;

   • Further scrolling — the banner does not reappear.

Progress indicators

Animations in Compose

Stateful vs. Stateless Composables

State Hoisting in Compose

Managing State in Jetpack Compose (Codelab)

Standard Android / Jetpack libraries.

Use Material 3 components or simple custom UI elements.

No 3rd party libraries are allowed or would be required to complete this challenge

Actual shopping cart or purchase logic.

Data persistence (no database or ViewModel required).

Complex or physics-based animations.

Dark mode or tablet adaptation.

A successful submission of this challenge via the /submit-challenge command on Discord grants you 100 XP. You can use it in any channel on Discord :)

A successful submission consists of these parts

1. A link to a Gist showing your code for this challenge.

2. A screen recording (max 20 seconds) showing:

   • The initial state with available stock (e.g., 12).

   • Pressing Buy — the quantity decreases, progress animates smoothly, and the number scales up briefly.

   • When stock reaches 0 — the indicator becomes empty and the button shows “Out of stock”.

Full Guide to Lazy Grid in Jetpack Compose

Understand gestures

Pointer input in Compose

Navigation with Compose

Stateful vs. Stateless Composables

State Hoisting in Compose

Managing State in Jetpack Compose (Codelab)

Standard Android/Jetpack libraries

No 3rd party libraries are allowed or would be required to complete this challenge

Actual purchase or cart logic.

Network requests or backend integration.

Highlighting differences in the comparison table.

Tablet layouts or dark mode support.

A successful submission of this challenge via the /submit-challenge command on Discord grants you 200 XP. You can use it in any channel on Discord :)

A successful submission consists of these parts

1. A link to a Gist showing your code for this challenge.

2. A screen recording (max 20 seconds) showing:

   • Selecting one product.

   • Selecting a second product.

   • Replacing the last selected item with a new one.

   • Opening the comparison screen and returning to the list (selection preserved).

Support different languages and cultures

LayoutDirection

Localize your app

Type-Safe Preferences With Proto DataStore

Stateful vs. Stateless Composables

State Hoisting in Compose

Managing State in Jetpack Compose (Codelab)

Standard Android and Jetpack Compose libraries.

No 3rd party libraries are allowed or would be required to complete this challenge

Local state persistence using DataStore or SharedPreferences.

Hardcoded translation and pricing data for demonstration.

Dynamic language switching without needing to reload the screen.

Responsiveness across every device size or orientation is not mandatory.

Real API or database integration.

Complex animations (optional).

Alternative themes (light theme only is enough).

A successful submission of this challenge via the /submit-challenge command on Discord grants you 300 XP. You can use it in any channel on Discord :)

A successful submission consists of these parts

1. A link to a Gist showing your code for this challenge.

2. A screen recording (max 20 seconds) showing:

   • Switching between English, Spanish, and Arabic.

   • Automatic updates of texts, prices, number formats, and layout direction.

   • Language state persisting after the app is closed and reopened (even after process kill).