brentvatne/hour-power

Stars
108
Rank 321,259 (Top 7 %)
Language
TypeScript
Created over 4 years ago
Updated about 2 years ago

brentvatne/hour-power

brentvatne

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Fun little internal hackathon project from @expo

Hour Power

Sign in with Spotify, pick a playlist, music will start on your selected device and the songs will change each minute! Neato.

Find it on the Apple App Store and the Google Play Store

Built and shipped to stores within three days as part of an internal @expo hackathon.

Mockups

Built using Excalidraw

Screenshots

Tools

Expo managed workflow - built apps for store using Expo build service
expo-updates for over-the-air updates.
@expo/google-fonts for including Google Fonts.
@expo/vector-icons and the related icon directory.
expo-auth-session to authenticate with Spotify.
Splash screens and icons were generated using Icon Builder.
react-navigation with createNativeStackNavigator
react-native-reanimated for smoothly animating device list appearance on iOS.
recoil via the Naturalclar/recoil fork for shared state, in order to try it out in React Native (upstream support coming soon)
spotify-web-api-js for an easy-to-use, TypeScript compatible wrapper for the Spotify API.
react-query to make firing the API calls from components a pleasant experience.
Minimal backend for getting access token is built using Vercel's now.sh serverless functions.
A bunch of other libraries for the things you'd expect them to be for, to name a few: @react-native-community/async-storage, @react-native-community/hooks, react-native-htmlview, react-native-safe-area-context

Develop it on your machine

Ping me on Twitter @notbrent if you actually want to do this and I will write instructions for you.

License

Do whatever you want with this, I do not care.

Prior art

I got the idea to build this from a post on /r/reactnative where someone showed off an app called Power Hour that does the same thing in different ways.

react-native-login

react-native login via native facebook sdk, with a mp4 video background and a linear gradient

react-native-overlay

An <Overlay /> component that brings content inside to the front of the view regardless of its current position in the component tree.

react-native-animated-demo-tinder

React Native "Animated" API demo

react-native-svgkit

Experimental SVG library for react-native based off of SVGKit. Not under active development, if you would like to take over and push this forward please get in touch @notbrent on Twitter

stargrave-0

preserving my stars for vanity. former home of react-native-modal

growler-prowler

flix

Swipe Netflix movies as if they were people on Tinder - built with Angular/Ionic/Auth0 for frontend & Rails on the backend

hard-react-native-problems

I don't pay attention this, you may be more interested in https://github.com/lelandrichardson/react-native-future

react-native-debug-stylesheet

Stylesheet that helps you debug layout problems in react-native, because we're all still not that good at flexbox

fixed-height-windowed-list-view-experiment

react-native-art-example

PeekPopAttempt

do-not-star-this-or-you-will-be-fired

hackernews-react-native-apollo

WIP: Building out the tutorial project for Expo + Apollo, coming soon to howtographql.com

chain-react-conf

run-after-interactions-exp

Example of using InteractionManager to avoid Navigator transition delays

react-native-authentication-helpers

eslint-config-react-native-prettier

jsdom-jscore

A fork of jsdom that is intended for use in JavaScriptCore on iOS, specifically with react-native

snaps

A demo app using Firebase and Ionic to create a live photo feed

github-pulse-ios

A React Native port of @tadeuzagallo's awesome GithubPulse (https://github.com/tadeuzagallo/GithubPulse)

animated-bottom-navigation-example

apple-wallet-cards-example

oauth-examples

For up to date information please refer to https://docs.expo.io/guides/authentication/

concierge

car2go helper service

pkg-minimal-example

blearexp

https://expo.io/@notbrent/blearexp

animations-showcase

react-navigation-workshop-examples

microfoam-app

custom-font-example

Demonstrate how to load custom fonts with create-react-native-app

resurge

Make and share a small React project with minimal effort

quoi

pacer

bottom-sheet-example

ex-navigation-conditional-buttons-example

react-europe-2019-react-navigation

swipe-action-gesture-handler-experiment

react-native-device-clock-format

[No Maintenance Intended] Determine whether the device is set to 12 or 24 hour time

codecore-events-app

react-europe-animations-gestures

map-gesture-handler-example

pahdcast

minimal podcast player

reagent-starter

A starter project for ClojureScript using Reagent, Leiningen, lein-cljsbuild, and clojurescript.test. Clone and go. Meant to be as simple and easy to get going as possible.

react-native-dashed-border-example

hello-world-crna-standalone

apollo-sqlite-experiment

Work in progress fun-times with using apollo-client and graphql-anywhere to use a SQLite WebDatabase as a backend

cube-transition-example

angular-delay

Delay execution of a ngChange callback

react-europe-workshop-day-one

signature-example

OUTDATED - this repo is not maintained and will not work as-is if you clone it. The underlying technique should still work but you will have to read the code to understand

bs-option

deep-linking-context

imagemagick-collage-ruby

cljs-flux

A Flux-style dispatcher for ClojureScript, using core.async

bare-but-runs-in-client

react-europe-2019-workshop

react-native-calendars-example

The example app from react-native-calendars running with react-navigation, on Expo

typescript-starter

A mostly empty app with TypeScript configured

sinatra-starter

Deprecated starter app template for Sinatra

swap-animated-value

react-native-coinbase-example

my-app-with-unimodules

react-europe-2019-performance

growlers

reanimated2-example

99-reasons

workshop-examples

play-sounds

quick-question-cli

op1-drumkit-reader

bottom-sheet-gesture-handler-experiment

flux-util

A few simple utility functions that I use for Flux

y-mmkv-example

notif-example

splash-example

RNPlayNative

React Native Playground (rnplay.org) experimental app loader

strava-race-routes

tailwind-playground

Experimenting with tailwind-react-native

animation

workshop-codepush-example

new-app-router-example

tinder-client-examples

Demonstrate interacting with APIs with JS and Ruby to students

dbmon-react

rspec-lets

lets and lets! as an alternate syntax for let and let! that allow you to define multiple variables within one call, for cleaner definitions of test variables

react-native-issues

Personal interface for browsing issues on the react-native repo

lol-optional-chaining

push-notif-example

asday

StackOverflow44811677

try-repro-fonts

tfb

skia-all-platforms

send-me-to-heaven-clone

vancouver-fe-polyglot-topics

background-fetch-example

mask-back-button-experiment

deep-link-example

lazy-json-example

error-recovery-example