https://github.com/SKempin/Lyrics-King-React-Native
Lyrics King is React Native song lyrics search app, built with Expo. Designed with Adobe XD.
https://github.com/SKempin/Lyrics-King-React-Native
adobexd amplitude apis async-await design es6 es7 es8 expo flexbox flexbox-css javascript lyrics lyrics-search open-source-project opensource react react-native react-navigation segmentio
Last synced: about 2 months ago
JSON representation
Lyrics King is React Native song lyrics search app, built with Expo. Designed with Adobe XD.
- Host: GitHub
- URL: https://github.com/SKempin/Lyrics-King-React-Native
- Owner: SKempin
- License: mit
- Archived: true
- Created: 2019-01-13T21:07:10.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-27T17:37:36.000Z (over 1 year ago)
- Last Synced: 2024-08-02T13:25:11.641Z (11 months ago)
- Topics: adobexd, amplitude, apis, async-await, design, es6, es7, es8, expo, flexbox, flexbox-css, javascript, lyrics, lyrics-search, open-source-project, opensource, react, react-native, react-navigation, segmentio
- Language: JavaScript
- Homepage: https://expo.io/@skempin/lyrics-king
- Size: 5.69 MB
- Stars: 330
- Watchers: 20
- Forks: 108
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lyrics King 
[](https://travis-ci.org/SKempin/Lyrics-King-React-Native)
[](https://github.com/expo/awesome-expo)
A [React Native](https://facebook.github.io/react-native/) native app utilising [Expo](https://expo.io/), [React Navigation](https://reactnavigation.org) and fetching data from multiple API's ([Deezer](https://developers.deezer.com/) and [Lyrics.OVH](https://www.lyrics.ovh)). UI built with [Adobe XD](https://www.adobe.com/uk/products/xd.html).
Built as a personal training project for [React Native](https://facebook.github.io/react-native/). Designed in [Adobe XD](https://www.adobe.com/uk/products/xd.html). Design and development by [Stephen Kempin](https://www.stephenkempin.co.uk). This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app).
### [Expo Demo Link](https://expo.io/@skempin/lyrics-king)
## Contents
- [App Preview](#app-preview)
- [Video Preview](#video-preview)
- [Search Screen](#search-screen)
- [Details Screen](#details-screen)
- [About Screen](#about-screen)
- [Navigation (Drawer)](#navigation-drawer)
- [Expo Project Page](#expo-project-page)
- [Adobe XD files](#adobe-xd-files)
- [App Features](#app-features)
- [Screens](#screens)
- [Components](#components)
- [Config](#config)
- [Lib](#lib)
- [Utils](#utils)
- [Getting Started](#getting-started)
- [What's Included](#whats-included)
- [API's Used](#apis-used)
- [Contributing](#contributing)
- [Author](#author)
- [Google Play Store](#google-play-store)
- [Donate](#donate)
- [License](#license)
## App Preview
### Video Preview
### Search Screen
### Details Screen
### About Screen
### Navigation (Drawer)
## [Expo Project Page](https://expo.io/@skempin/lyrics-king)
This project has been built using [Expo](https://expo.io/). Please install `npm install expo-cli --global` to run this project locally.
Scan the below QR code to open the project on Android:
## Adobe XD files
Design files for the UI can be found in `_design_assets/adobeXD` in the project root. UI design implemented with [flexbox](https://docs.expo.io/versions/latest/react-native/flexbox).
## App Features
### Screens
`src/screens/`
- `SearchScreen.js` - Search the [Deezer API](https://developers.deezer.com/) by song title (_class component_)
- `DetailsScreen.js` - Selected song details (including [Lyrics.ovh](https://www.lyrics.ovh/) API call) (_class component_)
- `AboutScreen.js` - About details (_functional component_)
### Components
`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_)
### Config
`src/config/`
- `router.js` - App navigation routing (including drawer nav render method)
- `colours.js` - Colour constants
### Lib
`src/lib/`
- `constants.js` - Expo manifest [constants](https://docs.expo.io/versions/latest/sdk/constants#__next) and functions
### Utils
`src/utils/`
- `shareHelper.js` - Native device [share method](https://docs.expo.io/versions/latest/react-native/share)
## Getting Started
1. Install the latest Node
2. Install [Expo](https://expo.io/) - `npm install expo-cli --global`
3. `cd` into this project directory
4. `npm install` or `yarn install`
5. Run `expo start`
## What's Included
| Name | Description |
| :----------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| [Expo (incl. React Native)](https://expo.io/) | Expo is a free and open source toolchain built around React Native to help you build native iOS and Android projects using JavaScript and React. |
| [React Navigation](https://reactnavigation.org/) | Routing and navigation for your React Native apps. |
| [Format Duration](https://github.com/hypermodules/format-duration) | Convert a number in milliseconds to a standard duration string. |
| [RN-Placeholder](https://github.com/mfrachet/rn-placeholder) | Display some placeholder stuff before rendering your text or media content in React Native. |
## API's Used
- [Deezer](https://developers.deezer.com/)
- [Lyrics.OVH](https://api.lyrics.ovh)
## Contributing
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! :tada:
- [x] [Debouncing or throttling](https://www.peterbe.com/plog/how-to-throttle-and-debounce-an-autocomplete-input-in-react) on search functionality.
- [x] [PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) on components.
- [ ] Adding clear search button functionality on Android. This functionality [already exists on iOS](https://facebook.github.io/react-native/docs/textinput#clearbuttonmode).
- [ ] [Animations](https://docs.expo.io/versions/latest/react-native/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](https://www.stephenkempin.co.uk) if you wish to discuss anything.
## Author
[Stephen Kempin](https://www.stephenkempin.co.uk)
[Lyrics King Project Github](https://github.com/SKempin/Lyrics-King-React-Native)
## Google Play Store
View my commercial apps on the [SK-UK Google Play Store](https://play.google.com/store/apps/developer?id=SK+-+UK)
## Donate
If you like this project and wish to say to say thanks - I'm always open to a coffee! :coffee:
## License
[MIT](https://github.com/SKempin/Lyrics-King-React-Native/blob/master/LICENSE)
You are welcome to use this however you wish within the MIT license, but please retain [my credentials](https://www.stephenkempin.co.uk/) and links back to [this repo](https://github.com/SKempin/Lyrics-King-React-Native).