Learn Courses My Dashboard

Wildsparrow's Car Listing App (Community App Challenge)

I’m happy to see that the community app challenges are back. And the current one is a nice project, so let’s get it started!

Here are my initial thoughts:

  • I will list cars, of course, and I decided to list the modern silver arrow cars from the AMG Petronas Formula One Team (2010 - today). That’ll be 11 cars, with a distinct start (2010, when Mercedes re-joined the Formula 1 with its own team) and end, so the content is coherent and provides enough room for filtering.
  • The car pictures will be image assets. The data for each car will be stored in a single JSON file. This will be an offline app, thus, no downloadable content and no network requests.
  • Code will be shared via github.
  • I will try to prototype the app in Figma. Colors will be mainly silver, black, turquoise (team colors). Maybe I will add a dark mode, let’s see.

Let’s recap the requirements (slightly modified to fit my app) and stages:

Stage Gold:

  • All data will be retrieved from a JSON file.
  • List of the cars; the cars will be presented in their own card.
  • Each card will contain the car picture, car name, and F1 year.

Stage Platinum:

  • Cards can be expanded by tapping them. Only one card can be expanded; the remaining will be collapsed automatically.
  • By default, the first card is expanded when opening the app
  • Expanded details will include (but is not limited to) the drivers in that season, and some statistics, such as: Overall championship points, overall podiums, if a world championship was won by a driver and/or team (so the amount of content will vary and the cards will be expanded accordingly)

Stage Diamond:

  • Implementing the filter section
  • Two filters. One for team championship won/not won, and maybe one for overall points? Thinking of a slider from min to max points and this data is retrieved from the JSON file (so not hard coded, as in a real life app this data could change every year or if the app would also include other teams, then the min/max points per season would be different for each team)

Dark and Light mode. Differences are: Text, shadows, cards background, overall background.

Colors look good on my MacBook, but a little bit dull on my external Acer Display. May change the font type to be more aligned with the logo font style.


Initial GitHub:

Progress so far:

  • I created the JSON file, checked it with JSONlint
  • I created the model file to translate the data from the JSON file
  • I created a dataService class to extract the data from the JSON file (but not yet in use; thus I don’t know if it is working)
  • I added custom colors for light/dark view
  • I added custom fonts
  • I added custom shapes
  • I created a single card, and extracted it to it’s own view
  • I set up some variables as a binding to transfer the data from the contentView to the cardView


  • Use the data from the JSON file for the card view
  • Finish Stage Gold requirements
  • Show some previews

Stage Gold completed.

Stage Gold 4MB

Hey, how is everyone doing? I was on vacation and on a business trip and couldn’t find a lot of time to work on my app :slight_smile:

Just some progress:

  • I created the expanded card view, showing more details of the season and only if data is present. Just for the sake of learning, I also did stuff like a text view which iterates over an array of text (the driver names).
  • I implemented the onTapGesture to switch between collapsed and expanded card view (that was really easy! Just one variable and an if/else clause. Initially I thought, I would need to have more variables/code, but … yeah, more or less this is the trick:
@State private var idSelection: Int = 0

// Some more code

 // List of cards
                    ForEach (F1season.seasons) { s in
                        if idSelection == s.id {

                        // View for extended card
                        ZStack { ... }
                        else {
// View for collapsed card
                        ZStack { ... }
                        .onTapGesture {
                            idSelection = s.id
  • In a side project, I learned how to animate between Vstack and Hstack views → this will be handy for a smooth transition in this app. This will slightly change the above code!


  • Animate the transition from a collapsed to an expanded view and vice versa.
  • Dynamically adapt the size of the expanded card to the text content. (I think I know how to do that, I will try to use push out / pull in view containers (not sure if this is the right expression)). This will be the final tasks for the Platinum stage.

Nice…Looking great so far!!


It’s done!
Completed the diamond stage :star_struck:
Thanks to @joash for pointing me into the right direction to pass the data to subviews


  • App was prototyped in Figma
  • Colors were selected by brand colors from the AMG Petronas F1 team
  • Dark mode/ light mode
  • All data is retrieved from a JSON file
  • Custom fonts in use
  • Custom shapes in use
  • Custom colors in use
  • Cards expand when tapping on them; only one card can be in expanded view; all others are automatically collapsed
  • First card on app launch is automatically expanded
  • Height of expanded card varies, based on the amount of data shown
  • Search pane, opens up with animation.
  • Filter can be set to championship points per season and if the team championship was won.
  • Filters can be combined.
  • When the search pane is collapsed, filters will be reset automatically.
  • Slider max value is computed, this is not a hard coded number

(As the video is from the simulator, the shape of the iPhone is not shown, so here a two pictures in dark/light mode)

Github of project:

Good to hear we can help! Good job bro! Small steps, keep it up! Add me on Twitter in case you have one! @joashtubaga

1 Like