/surely-expo

Official client for the Surely todo app. An Expo React Native app that builds to both iOS and web.

Primary LanguageJavaScriptMIT LicenseMIT

Surely-Expo

Official client for the Surely todo app. An Expo React Native app that builds to both iOS and web.

Backend is https://api.surelytodo.com. If you'd like to build the client yourself, you can still use the same backend, or you can set up your own installation of surely-api to point to.

Code Features

  • Deployed to both iOS and web. Only blocker on Android is a dependency requiring intl support.
  • Material Design with dark mode support on all platforms via React Native Paper.
  • Navigation via React Navigation, including predictable web URLs and a drawer that smoothly transitions between persistent on large viewports and collapsible on small.
  • Uses a custom styling library, react-native-style-queries, to apply responsive styles declaratively in a way inspired by media queries.
  • Thoroughly tested via React Native Testing Library.
  • Dependencies kept up-to-date with minimal effort: when tests pass and app boots, can be confident nothing's broken.
  • Good accessibility labels, which I used via iOS Voice Control while I was experiencing some wrist pain.
  • Since it is a "CRUD" app, uses JSON:API for the data layer to minimize client and server code needed to be written. Uses a custom client library, @codingitwrong/jsonapi-client.

Support

You have two options for getting support with Surely:

Requirements

Requirements and npm dependencies can be installed by running bin/setup

Installation

$ yarn install

Running

Web/Expo Go

$ yarn start

Then click "Run on iOS simulator" or "Run in web browser"

Local iOS Build

  • Open src/baseUrl.js and set a LOCAL_IP for the dev server
$ npx expo prebuild -p ios
  • Open generated iOS .xcworkspace file in Xcode
  • Set development team
  • Under "Edit Scheme…" > "Info", change "Build Configuration" to "Release" to build in the JS
  • Plug in physical device
  • Build app onto physical device

Testing

Linting

$ yarn lint

Unit Tests

$ yarn test

End-to-End Tests (web)

  • yarn start
  • Click "Run in web browser"
  • In another terminal, yarn cypress

Release

iOS

  • Increment the ios.buildNumber in app.json
  • Run yarn build:ios
  • Once the build completes, upload the .ipa file it created to TestFlight using the Apple Transporter app.

If this doesn't work, do a prebuild (see instructions above) then archive the app in Xcode.

Web

$ npx expo export:web
  • Copy the web-build folder to somewhere accessible on the public internet
  • Configure the web server to route all paths that aren't found on disk to index.html; that way links to pages handled by React Navigation will all load up the app

License

MIT