denoni / 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.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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
Screen Shot 2021-10-11 at 11 59 25 AM Screen Shot 2021-10-11 at 12 00 41 PM Screen Shot 2021-10-11 at 11 59 34 AM Screen Shot 2021-10-11 at 12 00 36 PM
Artist Details Screen Podcast Details Screen Album Details Screen Active Searching Screen
Screen Shot 2021-10-11 at 12 00 11 PM Screen Shot 2021-10-11 at 12 01 16 PM Screen Shot 2021-10-11 at 11 59 43 AM Screen Shot 2021-10-11 at 12 01 01 PM





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!

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.




DeC-SV5W4AEDegt

About

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.

License:MIT License


Languages

Language:Swift 99.9%Language:Ruby 0.1%