Car Listing App Challenge!

Hey CodeCrew,

On behalf of the CodeWithChris team, I’d like to announce that after more than a year of hiatus, we’re bringing back the Community App Challenge!

We figured that we’d do things differently this time around to make it more engaging for all of our community members. And one of the major changes we’ve implemented is that the challenge will consist of 3 different levels to cater to beginner, intermediate, and advanced coders.

That said, this month’s App Challenge will be about a Car Listing app. It’s pretty straightforward, and you can find more details about the requirements below.

We also built a simple prototype of how we imagined the app would look like, but feel free to explore a different design if you want to!

Here’s a preview of that prototype: Car Listing App Challenge - YouTube Demo


What are the app requirements?



Overview

  • Develop a working mobile app
  • Use a git repo and share it as we want to see your commits
  • You can use our prototype as a reference, but feel free to explore and experiment to have a different look and feel for the UI
  • The Challenge will comprised of 3 levels: Level 1 (Beginner), Level 2 for (Intermediate), Level 3 (Advanced)
  • Please accomplish as many levels as you are comfortable with. You should only proceed to the next level if the current level has already been completely implemented.
  • Do not show any part of the UI if it’s not working. Let’s focus on quality over quantity!

Level 1 Requirements:

  • Show a simple list of collapsed items or cards
  • Extract the list information from the join JSON file, or you can come up with your own assets
  • Show a collapsed list that consists of the following:
    • Car Image
    • Name
    • Price
    • Rating
  • Level 1 Reward: Gold Badge

Level 2 Requirements

  • Add or implement the expandable card to the list
  • By default, the first item should be expanded
  • Upon clicking or tapping an item, the previous item will collapse, and the new item will expand.
  • Pros and cons sections should be shown.
  • Note that there is no limit to the number of bullet points inside the card so these should be added and scaled dynamically.
  • Level 2 Reward: Platinum Badge

Level 3 Requirements

  • Implement the filters
  • Add a filter section in the UI, such as:
    • Vehicle make
    • Vehicle model
  • You can create the two filters list from the JSON provided or come up with your own
  • Show the result in the dropdown
  • The UI should be updated accordingly upon selecting a specific filter/s
  • Level 3 Reward: Diamond Badge

What is this?


Given the set of requirements below, challenge yourself to build the app!

The exercise of thinking for yourself and coming up with your own solution is a valuable learning opportunity.


How do I participate?


Simply create your own topic in the Journal section of our forum and update it with your progress as you build your app. If you already have your own Journal thread, you can continue using that.

When your app is completed, record a video to show it in action. You can record a video directly from your iOS simulator by pressing CMD+R.

We’ll combine the videos together to make a showcase reel. Upload your video here.


Challenge Duration


The challenge will run from August 5 to September 30, 2022.


What do I win?


By participating in this challenge, you’ll earn yourself a badge which you can collect as you participate in other challenges. More than that, you’ll learn a valuable experience as you solve problems and meet requirements stated in this challenge. However, do note that you can only earn 1 badge per challenge. So if you accomplished Level 3, you will only earn the badge for that level, which is the Diamond badge.

Here’s a preview of three badges for this challenge.

At the end of the challenge, we’ll make our code available (in case you want to compare solutions) and I also want to make a video reel of all your creations!

What if I’m a beginner?


Don’t worry! This challenge is meant for anyone with beginner, intermediate, and advanced knowledge in SwiftUI programming. As long as you’ve learned the basics, we believe that you can accomplish the challenge and earn yourself a Gold badge!

If you’re still just starting out, I recommend that you check out these resources below instead to get up to speed.

If you have access to CWC+, completing the Foundations Course will be more than enough.

If anyone has other helpful resources, reply on this topic!


What if I’m facing challenges?


We’ve all been there! Just make sure that you update your Journal entry on the Forum with the problems you’re facing, and our moderators and support team will be there to help you out.


Can I do the challenge after the deadline?


Yes! It’ll always be available for you to attempt and earn the badge in the future.

However, if you’re ready to participate now, you’ll get to experience it with a whole group of people also attempting it at the same time!


Additional Resources


The following resources may be helpful in your development:

How to Create Expanding Lists in SwiftUI

App Challenge Resources - JSON, Images, and more.

Also, for anyone who needs some technical help with their code, feel free to get in touch with @joash or @inaki!

3 Likes

Is there any endpoint where we can get the list of cars?

Hey there! You can access some resources for the challenge at the bottom of the original post, specifically on the “Additional Resources” section. Note that the assets only provided a handful of cars, so feel free to explore other cars that you want to include in your app! :slight_smile:

Update: Also, for anyone who needs some technical help with their code, feel free to get in touch with @joash or @inaki!

@kkmurerwa for this challenge it’s totally up to you. You can use a simple collection or use API like Vehicles API for example, and add your own network manager on the process. Sky is your limit. :slight_smile:

We’re excited to see what can you build!

Thanks a lot, @joash and @jcyee. I’m excited to get started.

Let us know in case you guys have questions. :blush:

Good luck to all!

Just finished my app with Stage Diamond :star_struck:

This was so nice, as I could apply a lot of things I’ve already learned into a “real” app, but also had to search and learn new stuff during the app development. It was great to have different stages, which also provided some guidance when to apply a new functionality to the app.

I hope, there is a new challenge next month :slight_smile:

1 Like

Very cool! Thanks for the reminder email, I have been so busy working on my other coding projects and learning that I forgot! I am definitely loving this idea! Gave me a reason to setup Github too!

Keep the challenges coming. They’re great! Helps to practise what we’ve learned.

well, it’s a little bit harder than I thought. I can’t figure out what the best way is to make it UI height change dynamically.

Hello @Jianan can you share your code for us also to see how we can help?

Hi team! I have a question. If I have completed Level 1, but I’m planning to keep going till Level 3 is done, should I wait to upload my video until I complete Level 3? Or should I share my video of Level 1 for now?

I don’t want to submit my video now and only early a gold badge when I plan to keep working on the challenge till I finish the diamond badge.

Hey @Philomath ! Actually, you can submit your video even if it’s just level 1, and still earn a diamond badge later on.

Hey everyone! Just a heads up that it will take a few more days for us to fully roll out the badges. We’ll keep you posted. In the meantime, happy coding!

2 Likes

thank you Joash. Is there any source code provided by Chris or someone else? I’d like to learn how other people make car image animation. I couldn’t find it in this thread. I think I still new to this forum.

Hey everyone! There were two submissions without an email address or a name so we couldn’t identify them and give out the badges.

Video 1
Video 2

If you’re the owner of any of these two submissions, please reply to this post.

Hi, i’ve uploaded the video 1 :slight_smile:

1 Like