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)
2 Likes

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.

5 Likes

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

Next:

  • 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!

Next:

  • 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!!

2 Likes

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

Summary:

  • 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