https://github.com/webmobi59/lyrics_king
Lyrics King is React Native song lyrics search app, built with Expo. Designed with Adobe XD.
https://github.com/webmobi59/lyrics_king
Last synced: 10 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/webmobi59/lyrics_king
- Owner: WebMobi59
- License: mit
- Created: 2019-02-25T08:37:51.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-25T09:11:56.000Z (over 7 years ago)
- Last Synced: 2025-02-26T07:44:53.451Z (over 1 year ago)
- Language: JavaScript
- Size: 5.68 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- 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). This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app).
## Contents
- [Lyrics King ](#lyrics-king-img-src%22githublk-logogif%22-width%2280%22)
- [Expo Demo Link](#expo-demo-link)
- [Contents](#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.
## Google Play Store
View my commercial apps on the [SK-UK Google Play Store](https://play.google.com/store/apps/developer?id=SK+-+UK)
## License
[MIT](https://github.com/webmobi59/lyrics_king/blob/master/LICENSE)