B31oEn9t5pE0NPZZv3gT

🎭 Scenario

You wake up at dawn (or is it dusk?) to discover the amazing sample app you wrote over the weekend to test your Jetpack Compose skills doesn’t respond to the device’s light/dark mode changes—it’s stuck on bright white! In a coffee-fueled haze, you’re determined to fix this. When the device’s theme switches, you want the UI to morph seamlessly from a warm, sunrise-like screen to a cool, moonlit scene. You can’t rely on local state alone; this must truly respond to the device’s settings.

🎯 Feature Goal

• Create a full-screen UI that automatically switches between dawn and dusk visuals based on the device’s theme (light or dark).

📌 Requirements

• The UI must switch automatically whenever the user changes the system (device) theme.

  • You can find the mockups in the attachments section 👉🏼

• Light Mode (Dawn)

  • Use a warm blue background gradient

  • Show and place the sun graphic near the top-left corner of the screen

  • The moon graphic should not be visibile

  • Show UI component to rate the user's day in its light color scheme

    • The component does not need functionality for this challenge. However, adding functionality to choose a rating between 1 and 5 ⭐stars is encouraged.

• Dark Mode (Dusk)

  • Use a cool dark background gradient

  • Show and place the moon graphic near the top-right corner of the screen

  • The sun graphic should not be visible

  • Show UI component to rate the user's day in its dark color scheme

🤔 What's Allowed?

• Standard Android/Jetpack libraries

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

⚠️ What's NOT important for a valid submission?

• The "How was your day" rating component does not need functionality - it can display a hardcoded amount of stars

• The animation of the sun and moon that can be observed in the mockups - let's keep our space rocks stationary for this challenge.

• Perfect recreation of the mockup - it just needs to reasonably resemble the mockups

• Responsiveness across every device size or orientation is not mandatory, you're welcome to hardcode offset values for sun and moon.

🧠 Disclaimer

• Just focus on capturing that day-to-night vibe. There's no need to sweat every edge case or color code; detect system theme changes and shift from dawn to dusk. If you want to add extra sparkle or animations, go for it—but the main idea is to have fun showcasing dynamic theming!

🏆 Submission & Rewards

• 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 (10s max) that shows you changing the device theme and then returning to the app to observe the changed color scheme. Do this twice, i.e. toggle back to the previous mode.

🎭 Scenario

You’ve just been assigned to create a futuristic weather card for Mars. NASA’s prototype app needs quick data checks for curious astronauts and scientists. You get your designer friend with a passion for sci-fi to create a mockup. Your mission is to build now this sleek and minimalistic weather card that showcases conditions from the Red Planet itself.

🎯 Feature Goal

• Build a custom UI layout—a single card that visually represents key Martian weather stats. Make it look clean, futuristic, and easy to scan at a glance.

📌 Requirements

• Display the following data in the card:

  • Current temperature in °C

  • The min and max temperatures for the day in °C

  • The weather condition (e.g. Dust Storm)

  • Wind speed in km/h with the direction (e.g. NW for North West)

  • The atmospheric pressure in Pascals (e.g. 600 Pa)

  • The amount of radiation per day (e.g. 0.5 mSv/day)

  • The martian date (e.g. 914 Sol)

  • The location for all this data (e.g. Olympus Mons - Fun fact: This is a volcano on Mars 3x taller than Mount Everest)

• Place all pieces of data of the card in the appropriate places as shown in the mockups

  • You can find the mockups in the attachments section 👉🏼

• The card has a corner cutout at the top right corner

• The card should be displayed in front of a dark linear background

• A graphic of the planet Mars must be placed at the bottom of the screen as part of the background.

🤔 What's Allowed?

• Standard Android/Jetpack libraries

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

⚠️ What's not important

• Real data fetching - this is purely a UI challenge, so hardcoded data is fine.

• Perfect recreation of the mockup - it just needs to reasonably resemble the mockups.

• Responsiveness across every device size or orientation is not mandatory, it just needs to match the mockups on a phone in portrait mode.

🧠 Disclaimer

• This is not a data-centric challenge; the main goal is visually representing weather data for Mars in a futuristic theme.

🏆 Submission & Rewards

• 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 screenshot of your final design

🎭 Scenario

You’re sipping your favorite rocket-fuel latte when you realise the space station’s “Astronauts in Orbit” board is just a crumpled note with coffee stains. “We can do better,” you think. A brilliant idea strikes—flip cards, obviously! Because what’s more futuristic than tapping (or swiping) a card and watching it flip to reveal who’s currently cruising around Earth’s orbit?

And so, your mission is to build a sleek, interactive UI that fetches real-time data from Open Notify and displays each spacecraft and its crew as a delightful flipping card. The cosmos awaits!

🎯 Feature Goal

• Create a dynamic UI pulling from the Open Notify “Astronauts in Space” API. Display each spacecraft on a flippable card. The front shows the craft name and crew count; the back reveals a list of astronaut names.

📌 Requirements

• Use the Open Notify Astronaut API to fetch current astronaut data.

  • Each unique craft becomes one flip card

• The card has two sides:

  • Front

    • Solid color background #420794

    • Cutout opposite corners at the top right and the bottom left

    • The name of the craft in the center of the card

    • The number of crew members aboard the craft

    • An outline around the inner sides of the card

    • Spacecraft outline graphic at the right side of the card

    • Icon top left to indicate that the card is flippable

  • Back

    • Solid color background #CAD5FC

    • The look of this side is to reflect a mirror-image of the front

      • You can find the mockups in the attachments section 👉🏼

    • Cutout opposite corners at the top left and the bottom right

    • Numbered list of the names of the crew members aboard the craft

      • Centered in card

    • Spacecraft outline graphic at the far left side of the card

    • An outline around the inner sides of the card

    • Icon top right to indicate that the card is flippable

• The card is dynamic in size, but has a minimum height as to not distort the rocket graphic.

  • It is able to increase in height as the list of crew members (back side) increases.

    • Note: This will stretch the inner outline of the card

    • The rocket graphic must remain in the center X axis of the card as it grows and the rocket path always has the same size.

    • The card should have a minimum height that allows the rocket to perfectly fit into it.

• The card must have a flip animation when transitioning from one side to another

  • This can be on tap or swipe - it's up to your preference

  • When flipping, the card must rotate around the Y axis

  • Hint: You can use the rotation value of the animation to swop out the card contents like a stealthy UFO to give the effect that the card actually flipped over.

🤔 What's Allowed?

• Standard Android/Jetpack libraries

• Any networking library of your choice

• Any JSON parsing library of your choice

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

⚠️ What's not important

• Elaborate error handling (a simple “Oops, no data!” toast is fine).

• Offline caching or enormous data sets.

• Ultra-polished motion design—just a clean flip is enough.

• Perfect recreation of the mockup - it just needs to reasonably resemble the mockups

🧠 Disclaimer

• Figma does not support 3D animations, so the animation preview simulates this via an X scale animation. Your app should use the real rotation value of the card for the animation and not simply animate the X scale.

• Real-time API usage is part of the fun, but you’re not expected to handle every possible error or offline scenario.

• If the API is down, feel free to simulate with the provided sample JSON.

🏆 Submission & Rewards

• 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 (10s max) that shows the card performing the flipping animation.

🎭 Scenario

Your product manager wants a cool, hands-on demo for an upcoming tech conference. They’ve requested a screen where users tilt their phones to move a craft around a Martian landscape. The twist? A toggle switches between Earth gravity (snappy motion) and Mars gravity (floaty motion). It’s a straightforward proof-of-concept to showcase sensor-based interactions and variable physics.

🎯 Feature Goal

• Build a full-screen UI that responds to the phone’s sensor (it's recommended to take a look at Android's rotation vector sensor), moving a craft around on a Martian background. Provide a toggle to switch between Earth’s gravity feel and Mars’ gravity feel, differentiating movement speed and damping.

📌 Requirements

• A Mars-themed background

  • Gradient color with Mars graphic at bottom of screen

  • You can find the mockups in the attachments section 👉🏼

• Alien spacecraft graphic that moves in response to the device tilt

  • To get a feeling for how the movement should be like, you can find a simple sample for Earth and Mars in the attachments

  • Read the data from the device's rotation vector sensor

  • Screen orientation should be locked to portrait mode

  • The spacecraft is not restricted to the bounds of the screen

  • 1m in the real world corresponds to 10 pixels in the app

  • Translate the tilt of the device into X/Y movement of the spacecraft (e.g. tilt left -> craft drifts left)

  • Note: This is about acceleration and NOT a constant velocity. A constant acceleration means that the spacecraft covers more distance each second than in the second before.

  • The spacecraft's velocity should be independent of the device's frame rate

• A gravity toggle UI component to toggle between Earth and Mars mode

  • In both modes a constant factor k = 0.1 should be applied to the tilt degrees of the sensor. This reduces the amount of impact of a certain tilt angle.

  • Earth mode

    • Earth's gravity acceleration of 9.81 m/s² is applied to the spacecraft which corresponds to 98.1 px/s² in the app

    • A damping ratio of 10% is applied to the amount of force in X and Y direction. This means with each position update, the current velocity of the spacecraft loses 10% of speed. This simulates air resistance and makes sure the spacecraft won't accelerate indefinitely.

    • A max speed of 500 pixels per second should be applied.

  • Mars mode

    • Mars' gravity acceleration of 3.72 m/s² is applied to the spacecraft which corresponds to 37.2 px/s² in the app.

    • A damping ratio of 1% is applied, so there's less friction and the spacecraft keeps its acceleration for longer.

    • No max speed is applied.

Formulas that could help you:

/* Acceleration in each direction at a given time t */
ax(t) = a * k * tiltX
ay(t) = a * k * tiltY

/* Velocity at a given time t + delta */
v(t + delta) = v(t) + (a(t) - f(t)) * delta

/* Friction at a given time t where d is the damping ratio */
f(t) = d * v(t)

🤔 What's Allowed?

• Standard Android/Jetpack libraries

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

⚠️ What's NOT important for valid submission

• Animation for the gravity toggle - although it would be cool!

• Perfect recreation of the mockup - it just needs to reasonably resemble the mockups

• Responsiveness across every device size or orientation is not mandatory

🧠 Disclaimer

• You’re not expected to build an entire game—focus on demonstrating tilt-based motion with distinct Earth/Mars physics. Enjoy!

🏆 Submission & Rewards

• 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 (10s max) showcasing the craft moving in all directions as you tilt (or simulate tilting) the phone. Clearly show the different animation behaviour between the Earth's and Mars's gravity when you tap the toggle.

🎭 Scenario

Your design team hands you a “spacey” mockup for a loading screen: a cartoon planet bobbing up and down, with a rocket circling in an elliptical orbit. The rocket disappears behind the planet at the top half of the orbit and comes back in front on the bottom half. Time to implement this fun 2D illusion in the app’s loading indicator! Ready for liftoff?

🎯 Feature Goal

• Build a custom, continuous loading animation: a bobbing planet in the center and a rocket orbiting in an ellipse, swapping layers to appear behind/in front of the planet.

📌 Requirements

• Gradient background color

  • For a more spacey feel, include two circles, one bigger than the other, in the centre of the screen.

  • You can find the mockups in the attachments section 👉🏼

• Earth graphic in the center of the screen that continuously moves up and down in a non-rigged manner.

  • The animation must appear smooth - a subtle bopping behaviour

• Rocket orbit

  • White elliptical path (an oval-shaped trajectory) around the planet

  • Path is skewed slightly so that it is no longer parallel to the top and bottom edges of the screen

• Rocket

  • Graphic that moves along the same elliptical path as the white orbit path

  • The rocket points in the direction it is moving

  • The rocket movement animates continuously

  • When the rocket is in the top half of the ellipse, the rocket should appear behind the planet

  • When the rocket is in the bottom half of the ellipse, the rocket should appear in front of the planet

    • The concept of a Z-index will help you here

🤔 What's Allowed?

• Standard Android/Jetpack libraries

  • Knowledge about the Canvas or the drawBehind modifier will help 👀

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

⚠️ What's not important

• Ultra-realistic 3D physics - just simulate a front/back layering.

• Exact math for perfect ellipses - close enough is fine.

• Perfect recreation of the mockup - it just needs to reasonably resemble the mockups

• Responsiveness across every device size or orientation is not mandatory.

🧠 Disclaimer

• It’s all about the animation and layering trick. Don’t stress over advanced optimisations - make it fun and fluid!

🏆 Submission & Rewards

• 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 (10s max) showcasing the continuous loading animation of the Earth bopping and the rocket zooming around the elliptical path around the Earth.