A React Native native app utilising Expo, React Navigation and fetching data from multiple API's (Deezer and Lyrics.OVH). UI built with Adobe XD.

Built as a personal training project for React Native. Designed in Adobe XD. Design and development by Stephen Kempin. This project was bootstrapped with Create React Native App.

• App Preview
  • Video Preview
  • Search Screen
  • Details Screen
  • About Screen
  • Navigation (Drawer)
• Expo Project Page
• Adobe XD files
• App Features
  • Screens
  • Components
  • Config
  • Lib
  • Utils
• Getting Started
• What's Included
• API's Used
• Contributing
• Author
• Google Play Store
• Donate
• License

This project has been built using Expo. Please install npm install expo-cli --global to run this project locally.

Scan the below QR code to open the project on Android:

Design files for the UI can be found in _design_assets/adobeXD in the project root. UI design implemented with flexbox.

src/screens/

• SearchScreen.js - Search the Deezer API by song title (class component)
• DetailsScreen.js - Selected song details (including Lyrics.ovh API call) (class component)
• AboutScreen.js - About details (functional component)

src/components/

• Credits.js - Development credentials template (functional component)
• SocialButton.js - Button template for sharing links/ the app (functional component)
• Suggestions.js - Song suggestions (functional component)

src/config/

• router.js - App navigation routing (including drawer nav render method)
• colours.js - Colour constants

src/lib/

• constants.js - Expo manifest constants and functions

src/utils/

• shareHelper.js - Native device share method

1. Install the latest Node
2. Install Expo - npm install expo-cli --global
3. cd into this project directory
4. npm install or yarn install
5. Run expo start

• Deezer
• Lyrics.OVH

Due to time constraints there are several features that I haven’t been able to develop yet. If you would like to develop your React Native skills and contribute any of the features below this would be hugely beneficial! 🎉

• Debouncing or throttling on search functionality.
• PropTypes on components.
• Adding clear search button functionality on Android. This functionality already exists on iOS.
• Animations would be a nice touch! Fading in the details screen background image would be priority.
• Any general performance improvements.

Other contributions and suggestions are always very welcome! Contact me if you wish to discuss anything.

Stephen Kempin

Lyrics King Project Github

View my commercial apps on the SK-UK Google Play Store

If you like this project and wish to say to say thanks - I'm always open to a coffee! ☕

MIT

You are welcome to use this however you wish within the MIT license, but please retain my credentials and links back to this repo.