How to build a Spotify clone iOS app using Swift 5

Spotify Clone iOS app

A Spotify clone 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.

Building a Spotify clone app using Swift 5 involves developing an application that emulates the functionality and features of the popular music streaming platform, Spotify.

The app will be developed using the Swift 5 programming language, which is commonly used for iOS, macOS, watchOS, and tvOS app development.

It will aim to replicate the core features of Spotify, such as user authentication, browsing and searching for music, creating playlists, playing songs, and providing a smooth and intuitive user interface.

By leveraging Swift 5 and relevant frameworks and libraries, developers can create a music streaming app that offers a similar experience to Spotify for iOS devices.

Spotify Clone app
Spotify Clone app

How to set up (>5 min)

  1. Fork this project and git clone ...
  2. Create/login with your Spotify Account in the Spotify for Developers website.
  3. Go to dashboard and select ‘Create an app‘.
  4. Give the name and description that you want and in the dashboard select the app that you’ve just created.
  5. Go to your local clone of the project in your machine and open ‘YourSensitiveData.swift‘ (./SpotifyClone/SpotifyCloneProject/YourSensitiveData).
  6. Back in your application page of the dashboard, copy the ‘Client ID‘ and ‘Client Secret‘ and paste them in ‘YourSensitiveData.swift‘.
  7. 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).
  8. In the dashboard select ‘EDIT SETTINGS’, in the field redirect_uri paste https://www.github.com(can be any website, but needs to match the redirect_uri set in AuthViewModel.swift, that by default was set to https://www.github.com)
  9. Great! Now you just need to run the app!

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

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.

Download

Spotify iOS app Clone

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *