SwiftUI challenge: Recreate a complex UI from a Dribble design example - reusable styling

Описание

In this SwiftUI challenge, I will recreate a complex UI from Dribble. I am trying to use reusable components. The preview can be very useful for this example to directly adjust for different screen sizes, dark mode and size categories.
It took me about 2.5h to write this project. But there was a lot of time for me to wait for the preview and Xcode to run. I cut some non understandable words out and longer moments of me staring highly focused at the screen. I just wanted to give the real time it took me here, so you have a more realistic time frame.


00:00 what is the challenge
04:06 color assets
10:15 Tabview customisation
18:16 Card view
23:18 define reusable Text styles
30: 52 title and profile image
33:00 Card view layout
37:24 Search text field
41:12 Custom picker
50:10 layout optimisation and dark mode
58:58 comparison to AJ Picards solution
01:10:35 wrap up

Dribble design
https://dribbble.com/shots/11957539-Mobile-App-UI-Exploration/attachments/3584723?mode=media

The project file for the final outcome of this tutorial can be found on my Github:
https://github.com/gahntpo/DribbleChallenge/tree/main

The example is used from another Youtube channel. Check it out here:
https://youtube.com/watch?v=_ONAvK5g3QI

If you liked what you learned and you want to see more, check out one of my courses!
👨💻 my SwiftUI course https://school.swiftyplace.com/courses/swiftui-course
👨💻 my Core Data and SwiftUI course https://school.swiftyplace.com/courses/swiftui-and-core-data
👩🏻💻 Combine course
https://school.swiftyplace.com/courses/master-combine-framework

#SwiftUI #AppDesign