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:

• Open a GitHub Issue on this repo
• Send a support email to support at surelytodo dot com

Requirements

• Node 22.x
• Yarn 1.x
• Expo CLI
• EAS CLI
• Cocoapods
• Fastlane
• Detox CLI

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

Installation

$ yarn install

Running

iOS

Build and install native dev client on a simulator:

$ yarn ios

If the native dev client is already installed:

$ yarn start

Then press i

Web

$ yarn start

Then press w to run in a web browser

Physical iOS Device

• Open src/baseUrl.js and set a LOCAL_IP for the dev server
• Plug in physical device
• Run yarn ios --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

$ yarn build: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