https://github.com/arifshariati/react-native-spotify-clone
Spotify let's you listen music online via spotify mobile app (android and IOS). This repo will focus on UI design and implementing minimal features of Spotify. Developed in react-native, aws amplify and graphql
https://github.com/arifshariati/react-native-spotify-clone
aws aws-amplify graphql react-native spotify
Last synced: 3 months ago
JSON representation
Spotify let's you listen music online via spotify mobile app (android and IOS). This repo will focus on UI design and implementing minimal features of Spotify. Developed in react-native, aws amplify and graphql
- Host: GitHub
- URL: https://github.com/arifshariati/react-native-spotify-clone
- Owner: arifshariati
- License: mit
- Created: 2020-11-30T14:05:04.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-07-01T18:34:51.000Z (about 3 years ago)
- Last Synced: 2025-06-09T15:51:30.030Z (about 1 year ago)
- Topics: aws, aws-amplify, graphql, react-native, spotify
- Language: TypeScript
- Homepage:
- Size: 1.54 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-spotify-clone
Spotify let's you listen music online via spotify mobile app (android and IOS). This repo will focus on UI design and implementing minimal features of Spotify.
## Work Flow
### Front-End
This section lists step by step activities i will carry out for designing front-end of Spotify.
- Adjust bottom tab navigation by adding relative icons form Home, Search, Your Library and Premium screen tabs
- Home Screen
- Album Component
- Create Album component and design Album Image and title
- Album Category
- Create Album Category component and place Album components in horizontal FlatList to make it scrollable horizontally
- Crate Vertical FlatList to include all Albums in FlatList
- Album Screen
- Song List component where all songs are listed in FlatList
- Album Header component where Album details are placed on top of the playlist
- Player Widget
- Player Widget plays current song and is displays in every screen
## Back-End
For this project i have used aws amplify for the back-end and graphql. As per the app features, it does not have mutations rather only queries, and working with graphql in this project is relatively easy. At the moment mutation is done manually, which if required to expand the scope of the project, shall be done via web front-end though admin account only.
To, set up aws amplify, you can read complete documentation on how to set up with expo for react-native.
## Screenshots
Though not much fancy UI however, still good to check it out and play around with songs.
