Getting started

Install app dependencies

In root folder, run yarn install

Run The App

There are 2 ways to build and run the app locally:

• Via official IDEs: Xcode (iOS), Android Studio (Android)
• Via command line: yarn ios and yarn android

If you have an Android device, you can also install the release apk file to try out the app.

Features

Current

• View playlists
• View songs of a playlist
• Add songs to a playlist
• Preview songs before adding to a playlist
• Play songs from a playlist
• Auto play the next song
• View currently playing song and control it (play/pause) from any screen via the global mini "Now Playing" bar
• View currently playing song and control it (play/pause/next/previous) via the fullscreen "Now Playing"
• Playlists, songs as well as last played song are persisted throughout app session

Future enhancements

• Seek bar
• Playing queue
• Playlist song rearrangement & removal
• Music control from notification drawer
• Deeplinking support
• Artwork color extraction (so background matches song)
• Beat/Tempo visualizers

App Demo

https://vimeo.com/429460227

Prototype design

Figma prototype

https://www.figma.com/proto/MWj45afi0fp4QjDcNmSdZ0/Playlist?node-id=0%3A2&scaling=scale-down

Sketch screenshot

Technical details

Code structure

app folder

.
├── assets              # images, animations & hardcoded song data (from Spotify API)
├── navigators          # navigation system
├── store               # redux store and reducers, actions, sagas (grouped by features)
├── styles              # design system: color, font, size, dimension
├── utils               # utilities: audio, logger, toast
└── views               # UI components (grouped by navigation routes)

path aliases

actions                 # redux actions
selectors               # redux selectors
styles                  # design system
views                   # UI components
types                   # global typescript types
utils                   # utilities

Dependencies

media playback: expo-av

animation: lottie-react-native, react-native-reanimated

navigation: react-navigation

Navigation system

State management & side effects

The app uses a combination of redux, redux saga and react hooks depending on the situation. For example, sagas are used to control music playback so that the logic is not coupled to any single UI component and can be triggered from anywhere.

Unit testing

• sagas via redux-saga-test-plan
• redux reducers via jest