Skip to content

React Native app demoing usage of Spotify API, REST, React Hooks & GraphQL

Notifications You must be signed in to change notification settings

audiolion/react-native-spotify

Repository files navigation

React Native Spotify

React Native app demo using Spotify API

CircleCI codecov

RN Spotify Login RN Spotify Deep Link RN Spotify Album List RN Spotify Album Notes

Highlights

Github Flow and git process

I care a lot about commit history and keeping things clean and concise as possible. Even in PRs I logically group commits and will rebase if I feel things get too messy. I utilize commit history often to understand the motivations behind why older code was written.

Testing & CI

Early on in the project I integrated Circle CI with code coverage reporting. Testing and linting my PRs caught numerous bugs before things landed into the main trunk branch. I utilized Callstack's react-native-testing-library to write integration and snapshot tests for the parts of the app. While I didn't get to one of the screens for tests I think I showed how I go about building confidence with these types of tests. I also would see the value in detox, though I felt it was too much for this assignment.

Apollo / GraphQL

Apollo and GraphQL can be found in 3937660f. This code was removed because the public api for Spotify did not allow a client-side only authentication token. I showcased utilizing graphql codegen to create typescript typings for queries, proper fragment usage to leverage the power of apollo's cache, and how a modified Query component can save boilerplate in showing loading states and handling errors.

Hooks

I wrote the app entirely with functional components and hooks, utilizing some hooks from my own personal library @ryanar/hooks. That being said, I am entirely willing to write Class components for older apps and willing to work with the team to stick with a style that works best for everyone. I wrote Class components for a long time before hooks came to be!

TypeScript

The whole app is written in TypeScript, the benefits at this point are spoken enough about. I do want to point out my declarations file which is a handy way to provide ambient, namespaced types across an app so you don't clutter up imports.

Setup

  1. Ensure your node version matches the .node-version file, I recommend nodenv
  2. Install JS dependencies by running yarn yarn
  3. Install iOS dependencies cd ios/ && pod install cocoapods
  4. In terminal run metro bundler with yarn start
  5. In another terminal window start the iOS simulator with yarn dev

About

React Native app demoing usage of Spotify API, REST, React Hooks & GraphQL

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published