SpotifyClone
An iOS app that visually clones Spotify's app and consumes the official Spotify's Web API to show(and play) songs, podcasts, artists and more.
The app can play a 30-second preview of a song, otherwise, to play the full song it would be necessary to have a physical device and the real Spotify app installed(requirements of the Spotify iOS SDK).
I've built the project by myself to learn more about iOS development, and to consolidate already learnt concepts by putting them into practice. By no means the project is perfect, so feel free to open issues or make pull requests with your own new features.
I hope you enjoy the app. Feel free to hit me up!
-Gabriel
Home Screen | Search Screen | Track Details Screen | Playlist Details Screen |
---|---|---|---|
Artist Details Screen | Podcast Details Screen | Album Details Screen | Active Searching Screen |
How to set up (>5 min)
- Fork this project and
git clone ...
- Create/login with your Spotify Account in the Spotify for Developers website.
- Go to dashboard and select 'Create an app'.
- Give the name and description that you want and in the dashboard select the app that you've just created.
- Go to your local clone of the project in your machine and open 'YourSensitiveData.swift' (./SpotifyClone/SpotifyCloneProject/YourSensitiveData).
- Back in your application page of the dashboard, copy the 'Client ID' and 'Client Secret' and paste them in 'YourSensitiveData.swift'.
- Again in the dashboard select 'Users and access' an then click in 'Add new user'(if you try to log-in into an account in the app without adding it here, your app will crash with error 403 because Spotify's API doesn't allow that).
- Great! Now you just need to run the app!
If you have any problem, feel free to contact me on github
Concepts & Technologies Used
- Swift
- Consuming a REST API
- Caching
- AVFoundation to play and control audio
- Combine (minor use)
- SwiftUI
- XCode Instruments
- Memory Management and Cache Cleaning
- Grand Central Dispatch
- Dependency Injection
- CocoaPods
External Dependencies:
- Alamofire
- Introspect (really small use)
- SwiftLint
Turn on the video volume
Screen.Recording.2021-10-23.at.6.23.36.PM.mov |
Searching-and-Playing.mov |
Podcast-Playing.mov |
Playlist-Playing.mov |
Stuttering is due to simulator lag and shouldn't happen on real device.
Code Overview
ViewModels
Main
- Navigation
- Source of the Spotify's Authentication Key to the subviewmodels
Auth
Coordinator
: Controls the WebView responses- Contacts Service(
/APIAuthentication
) to get the Authentication Key - Controls the state of AuthScreen
Home
- Contacts Service(
/HomePageAPICalls
) to get media(tracks, podcasts, playlists, albums, artists and episodes) data from the API - Controls HomeSubpages(playlistDetail, trackDetail, etc…)
- Controls the state of HomeScreen
Search
ActiveSearchViewModel
: Contacts Service(/SearchPageAPICalls
) to get response data(based on what the user searched) from the API ¹- Contacts Service(
/SearchPageAPICalls
) to get media data from API ² - Controls SearchSubpages(activeSearching, playlistDetail, trackDetail, etc…)
- Controls the state of DetailScreen
Details
- Contacts Service(
/MediaDetailsPageAPICalls
) to get the detailed data, for a specific item(the item that was clicked), from the API - Controls the state of DetailScreen
¹ The viewmodel for when the user is actively searching for an item.
² The viewmodel for when the user just opened the SearchScreen, it's similar to a discover screen.
Things to do/improve
- Use protocols to reduce code duplication.
- Add more animations(like, follow, navigation, etc).
- Play playlists(one song after another).
- Use navigation link for navigation.
- Save that the user is already logged.
- Unit testing.
- Solve animation hitches when scrolling in the playlist tracks.
- Better project architecture.
- Make the currently playing track bottom bar work.
- Make the three dots work to open more options.