Audrix: Spotify style music streaming App starter (React Native)
Audrix is a Music Streaming App Template, made in React Native language. With this template you can create app similar to Spotify, Gaana, Wynk, Jio Music etc.
If you want to create your own Spotify app, it doesn’t need to make your wallet go empty. You can easily start with a Spotify app starter like the one I am going to describe and make your way from there.
This template is front-end part of the music app, i.e. the screens and user interfaces are ready. You can easily change the screens, styles and logic to suit your requirements. To make it a live app you just need to add your back-end (data loaded) to the app. This is a great starting point for app development, as more than half the work is done here. All pages and components are set. The starter uses data from JSON files, so this data can be easily swapped with data from back-end.
Let’s see all the features of the app template.
Features
Screens
- Home
This is first tab of the application. Home page contains recommended music and other categories for a user. The songs / albums are arranged in a horizontal scroll for each category. A vertical scroll allows addition of any number of categories on homepage, each category being arranged in horizontal scroll.
2. Browse
This is the second tab of the application. Browse page contains music categories of all available music. The categories are arranged in a vertical scroll. You can add as many categories you want. You can also implement an infinite scroll feature to fetch more categories on scroll.
3. Search
This is the third tab of the application. Search page contains the UI for searching songs, albums, artists etc. Just type any word in the input box and the results can be displayed in the content as a list For demo purpose, when you type in the search box, you see preset results in the result.
4. Radio
This is the fourth tab of the application. Radio page contains options to run one of may radio stations available. The radio stations are arranged in a horizontal scroll for different category. A vertical scroll allows addition of any number of categories on homepage, each category being arranged in horizontal scroll.
5. Library — Playlist
This is the fifth tab and then first sub-tab of the application. Playlist page contains your playlists arranged in a vertical list. The option button for each playlist gives you more options to operate on your playlist. You can add as many playlists you want. You can also implement an infinite scroll feature to fetch more playlists on scroll.
6. Library — Songs
This is the second tab of the application. Browse page contains music categories of all available music. The categories are arranged in a vertical scroll. You can add as many categories you want. You can also implement an infinite scroll feature to fetch more categories on scroll
7. Library — Albums
This is the fifth tab, third sub-tab of the application. Albums page contains your favorite albums arranged in a vertical list. The option button for each album gives you more options to operate on your album. You can add as many albums you want. You can also implement an infinite scroll feature to fetch more albums on scroll.
8. Library — Artists
This is the fifth tab, fourth sub-tab of the application. Artists page contains your favorite artists arranged in a vertical list. The option button for each artist gives you more options to operate on your artist. You can add as many artists you want. You can also implement an infinite scroll feature to fetch more artists on scroll.
9. Playlist (General)
This page can be accessed from many places, by clicking on a particular playlist item. Playlist page contains the songs of the playlist arranged in a list format in the bottom half of the page. There is option to “follow” the playlist, and “Shuffle” the songs order. Clicking on the Option button of a song gives you additional options.
10. Album
This is actually the Playlist page itself, because each Album can also be a playlist. Album page contains the songs of the album arranged in a list format in the bottom half of the page. There is option to “follow” the album, and “Shuffle” play all the songs. Clicking on the Option button of a song gives you additional options.
11. Music Player
This page can be accessed from many places, by clicking on a particular song item or by clicking the Mini-player on the bottom of any page. Music player page contains the currently playing playlist, with songs of the playlist arranged in an image slider on the top half of the page. At the bottom, there is a music control bar with play, pause, next etc. buttons. On clicking the Playlist button in top-right of the header, the current playlist opens.
12. Current Playlist
This page can be accessed from the Music Player page’s playlist button. This page contains the songs of the currently playing playlist arranged in a vertical list. Any song can be clicked and played in the music player.
13. Artist
This page can be accessed from many places, by clicking on a particular artist name. Artist page contains the artist’s image on top, with options to “Follow” and “Start Radio” for that artist’s songs The page also contains the artist’s media categorized into many horizontal scrolls — Top albums, Top songs etc. Option button in the top-right of the header gives more options related to the Artist.
14. Settings
Settings page can be accessed from the Sidemenu’s Settings option. This page contains the settings / options for the app like
— Streaming quality
— Language
— Equalizer
— Edit Profile
— Notifications
— Change Password
Most of these settings options navigate to other pages. The toggle options can be read directly from this page itself.
15. Login
This page can be accessed from Sidemenu’s “Login” option. Login page can be used to perform login action with username/ email and password. Currently, the login is only for demo purpose. Login page also contains “Forgot Password” and “Register” page navigations.
16. Register
This page can be accessed from “Login” page. Register page can be used to perform signup action with name, username/email and password. Currently, the signup is only for demo purpose. Register page also contains “Login” page navigation.
17. Forgot Password
This page can be accessed from “Login” page. Forgot password page can be used to send a reset password url or OTP to user’s email or any other way you want to use. Currently, this page is only UI. The OTP sent to user can be verified here and user can be asked to provide a new password
18. Change Password
This page can be accessed from “Settings” page. Change Password page can be used to change your current password. This requires user to enter their current and new password.
19. Language
This page can be accessed from “Settings” page. The options available can be chosen to change the language of the app / music, as per your requirement. “Back” button takes you back to “Settings” page
20. Music Quality
This page can be accessed from “Settings” page. The options available can be chosen to change the quality of the music, as per your requirement. “Back” button takes you back to “Settings” page.
21. Edit Profile
This page can be accessed from “Settings” page. This page allows user to change their profile options. Many more options can be added here, as per your requirement. “X” (close) button takes you back to “Settings” page
22. Offline Content
This page can be accessed from Sidemenu’s “Offline Content” option. This page contains your offline downloaded songs in a vertical list arrangement. You can show as many songs you want in the list, or you can Currently the offline page is visible to all users, but ideally it should only be visible to logged in users. If there is no offline data, the page should show “No data downloaded” Clicking on the Option button of a song gives you additional options.
Sidemenu
Sidemenu can be accessed from any page that shows a “Menu” button on the top-left in the header. The Sidemenu contains options to navigate to
— Home page
— Offline content
— Settings
— Login
Sidemenu also shows the app’s name and logo, which you can change as per your liking.
Mini Music Player
Mini Music Player is present in almost all screens on the bottom of the screen. It shows the currently playing song, and a play / pause button depending on whether the song is playing or paused. Clicking on Mini Music Player takes you to Music player page.
Nested Navigation
The app contains a nested navigation of Sidemenu and multi-level Tabs. The app contains a Sidemenu which is the parent. Five tabs inside “Home Page” is the first level of nesting Four tabs inside “Library” page is the second level of nesting
— — — — — — — — — — — — — — — — — — — — — — — — — —
Buy it today!
Enappd Store : https://store.enappd.com/product/spotify-style-music-app-starter/
— — — — — — — — — — — — — — — — — — — — — — — — — —
