Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mkraenz/you-are-awesome-app
Community-driven motivational quotes. Every day you receive an awesome message from a grateful person around the globe. Share your own gratitude by contributing awesome quotes yourself.
https://github.com/mkraenz/you-are-awesome-app
List: you-are-awesome-app
android app expo react react-native
Last synced: 16 days ago
JSON representation
Community-driven motivational quotes. Every day you receive an awesome message from a grateful person around the globe. Share your own gratitude by contributing awesome quotes yourself.
- Host: GitHub
- URL: https://github.com/mkraenz/you-are-awesome-app
- Owner: mkraenz
- Created: 2019-10-04T18:06:04.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-22T16:48:37.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T15:44:06.703Z (about 2 months ago)
- Topics: android, app, expo, react, react-native
- Language: TypeScript
- Homepage: https://play.google.com/store/apps/details?id=eu.kraenz.youareawesomeapp
- Size: 8.41 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- ultimate-awesome - you-are-awesome-app - Community-driven motivational quotes. Every day you receive an awesome message from a grateful person around the globe. Share your own gratitude by contributing awesome quotes yourself. (Other Lists / PowerShell Lists)
README
# You are Awesome App! Daily Motivation Up
**Community-driven motivational quotes.**
Receive Motivation each day. Boost your Productivity. Share your gratitude to make this world even more awesome. Join our Awesome Community.
How it works:
Each day you receive a motivational message written by a grateful person around the globe. That's it. No magic. Only gratefulness. Either via push notification or directly in the app.
[](https://twitter.com/YouareAwesomeA2?ref_src=twsrc%5Etfw)
## Getting Started
### Prerequisites
- [NodeJS](https://nodejs.org/en/) installed. (recommended versions are 12 or 14)
- [yarn](https://yarnpkg.com/) package manager installed
- Linux or MacOS
Please contact the repo owner for Windows support.
### Installation
```sh
git clone https://github.com/proSingularity/you-are-awesome-app.git
# Make sure to use yarn instead of npm
yarn quick-setup
yarn dev
# a QR code will appear in the console
```
- On your Android or iOS phone, install the [Expo Go](https://play.google.com/store/apps/details?id=host.exp.exponent) app.
- With the `Expo Go` app, scan the QR code.
- `You are Awesome App!` will be started inside Expo Go.
- Whenever you change a source code file and save, the app on your phone will be updated as well.
- If it does not refresh automatically, trigger a hard-reload by hitting the `R` key in the terminal you're running `yarn dev` from.
For a walkthrough with pictures, see [Expo Docs Walkthrough](https://docs.expo.dev/introduction/walkthrough/#open-the-project-with-the-expo-go).
### More Advanced
#### Emulator vs Device
Alternative to `Expo Go`, you can run setup an Android Emulator (on any host operating system) or iOS Simulator (only on MacOS).
See [Expo's Guide to Android Studio Emulator](https://docs.expo.dev/workflow/android-studio-emulator/).
#### Google and Firebase integration
`.env`, `google-services.json`, `GoogleService-Info.plist` are generated with fake data. This _fake data suffices to run most of the app_. Some features like Google Analytics for Firebase are not available though. The real data may only be shared internally. Talk to the repo owner.
## Production
Production apps are apps on a User's smart phone installed from the Google Play Store.
- [You are Awesome App! on Google Play Store](https://play.google.com/store/apps/details?id=eu.kraenz.youareawesomeapp)
- [Google Play Console](https://play.google.com/apps/publish/)
- [Google Sheets](https://docs.google.com/spreadsheets/)
- [Google Feedback Form](https://docs.google.com/forms/d/1Ta0uvtyu36AI8v9rBJ_2d87Y0yNejEMOe8juLXKcwrY/edit)
- [EasyCron](https://www.easycron.com/user)
- [Firebase](https://console.firebase.google.com/u/0/project/youareawesomeapp-c8835/overview)
- [Privacy Policy on Termly.io](https://app.termly.io/dashboard/website/548360/privacy-policy)
- [AWS S3](https://s3.console.aws.amazon.com/s3/home?region=eu-central-1)
- [Sentry](https://sentry.io/organizations/you-are-awesome-app/issues/)
- [BigQuery](https://console.cloud.google.com/bigquery?project=youareawesomeapp-c8835)
## Legals
### Legal Attributions
Google Play and the Google Play logo are trademarks of Google LLC.
## Releases
### OTA Over-the-air updates
```sh
yarn deploy:ota:stage
# for production release
yarn deploy:ota:prod
```
When a User now starts her app (even if installed from the Google Play Store!), the app tries to download the newest JS files for the app and runs the newest version. It falls back to the cached (i.e. previous) version after 2 seconds.
### Special case - changes to app.json or Expo SDK
Only in case of changes to `app.json` or the Expo SDK version, one needs to rebuild the app and republish to expo.
```sh
# manually update app.json's version, android.versionCode, and js version
# requires eas-cli installed
yarn eas build --platform android --profile production
```
To push the built apk to the Google Playstore, run
```sh
# ensure the following was run right before publishing to playstore
# yarn build-and-publish:expo:android:app-bundle:prod
# then download the .aab to your local machine
yarn eas submit --platform android --profile production
# select `Provide a path to a local app binary file`
# paste the path to your .aab file
## NOTE: the workflow should soon be optimized for use of EAS Build, which works well together with EAS Submit
```
### google-services.json in EAS Build
```sh
yarn eas secret:create --scope=project --name=Y3A_GOOGLE_SERVICES --value="$(cat ./google-services.json | base64 --wrap 0)"
```
## Testing Releases: app-bundle
When using build target `app-bundle` (`.aap`) instead of `.apk` you cannot immediately install them on a device. To test the app on emulator, you need to create an `.apk` as follows:
- Download your `.aab` file
- Download newest version of [Bundletool](https://github.com/google/bundletool/releases) and rename to `bundletool.jar`.
- Put both files into the same folder
- Run the following
```sh
# unpacks the .aab to apk-archive (.apks, essentially .zip)
java -jar bundletool.jar build-apks --bundle=you-are-awesome-app-f91e1a4501e44622b4de84267a774a23-signed.aab --output=y3a.apks --mode=universal
# Option A: install app on a device (like adb install)
java -jar bundletool.jar install-apks --apks=y3a.apks
```
Alternative to Option A:
```sh
# Option B: extract the real app (.apk) living inside the .apks as universal.apk
unzip -p y3a.apks universal.apk > y3a.apk
adb install -r ./y3a.apk
```
[Reference on StackOverflow](https://stackoverflow.com/questions/50419286/install-android-app-bundle-on-device)
## Development
[Main reference](https://docs.expo.dev/workflow/debugging/?redirected#startup)
### Debug native app on a phone or emulator
Requires
- Android Studio to be installed on your computer
- USB debugging enabled on phone or emulator (see [video](https://www.youtube.com/watch?v=Yxqq7bT1K2A))
- for phone: phone is connected to computer
> Pro tip: Use `zsh` ([zshell](https://ohmyz.sh/)) for autocompletion of paths, and even for adb.
```sh
# list connected devices
adb devices -l
# native logs
adb logcat
adb logcat | tee --append android-usb-debugging.log
# install apk
adb install /path/to/my/app
adb install ~/Downloads/you-are-awesome-app-8497638a825d4c70988a0c68eec2d09b-signed.apk
# if app already installed, then re-install
adb install -r ~/Downloads/you-are-awesome-app-8497638a825d4c70988a0c68eec2d09b-signed.apk
```
### Debugging Jest tests
- Install [VS Code Jest Extension](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest).
- Install Jest `npm install --save-dev jest` (even if it is included in `expo-jest`! The plugin expects).
- Open test file (either `test.js` or `test.ts`).
- VS Code shows small green lights (or red, if test fails) in front of each `it()`.
- Make one test fail.
- Set breakpoint in that test.
- `Debug` text appears above `it()` (may take 3 seconds). Hit that to start debugger.
- Debugger stops at the breakpoint.
- Happy Debugging.
Further reading in related [issue #16](https://github.com/proSingularity/you-are-awesome-app/issues/16#issuecomment-544240073) .
## Further Links
- [You are Awesome App! on Twitter](https://twitter.com/YouareAwesomeA2)
- [Github Repo](https://github.com/proSingularity/you-are-awesome-app)
- [You are Awesome App! on expo.io](https://expo.io/@mirolaos/you-are-awesome-app)
- [Travis CI](https://travis-ci.com/proSingularity/you-are-awesome-app)
- [Codecov](https://codecov.io/gh/proSingularity/you-are-awesome-app)
- [Google Sheets to JSON](http://gsx2json.com/)
- [My JSON Server](https://my-json-server.typicode.com)
- [UI Prototyping via Moqups](https://app.moqups.com/pczu8pWcIi/edit/page/aa9df7b72)
- [UI Prototyping via Framer](https://framer.com/projects/examples)
- [Hashtagify](https://hashtagify.me/hashtag/app)
- [Commun.it](https://commun.it/)
- [Expo API Status](https://status.expo.io/#)
- [Expo How to publish to AppStores](https://docs.expo.io/distribution/uploading-apps/)
- [React Native Vector Icon List](https://oblador.github.io/react-native-vector-icons/)
- [Monetize Expo App](https://medium.com/leckr-react-native-graphql-apollo-tutorials/monetisation-of-your-react-native-app-7c63241c4460)
- [Expo Admob SDK](https://docs.expo.io/versions/latest/sdk/admob/)
- [ezgif Gif Maker](https://ezgif.com/maker)
- [Microsoft UI Translations](https://www.microsoft.com/en-us/language)
- [Expo Doc Configure OTA Updates](https://docs.expo.io/versions/latest/guides/configuring-ota-updates/)
- [Firebase Analytics Tricks with BigQuery Video](https://www.youtube.com/watch?v=pxNrkjBeHpw) and [recipes](https://gist.github.com/ToddKerpelman/eec3e60c0a5e0bd720d8991bd45487cb)
## Frequent Development Questions and Mistakes
### Clear expo cache
```sh
expo start --clear
yarn dev --clear
```
### `ReferenceError: Can't find variable: React`
Having a react component import from `react` like this
```typescript
import { FC } from "react";
```
will result in `ReferenceError: Can't find variable: React`.
#### Solution
```typescript
import React, { FC } from "react";
```
### During tests: Unable to find node on an unmounted component
```log
Unable to find node on an unmounted component.
at node_modules/@testing-library/react-native/build/helpers/findByAPI.js:16:115
at Timeout.runExpectation [as _onTimeout] (node_modules/@testing-library/react-native/build/waitFor.js:48:24)
```
If this happens in places where the `Portal` component is used, first check that the state is mocked correctly (including for all rendered subcomponents).
### Redux: I connected my component with the action creator but the reducer doesn't receive any actions
When your imported action creater and the Prop for the action creator are _named identically_, TypeScript doesn't care which one you use inside the component. So _make sure you use the action creator from the Props_. Only the action creator from the props is actually connected to the redux store.
```ts
import { actionCreator } from "./actionCreator";
interface Props {
actionCreator: typeof actionCreator;
}
// make sure you use the action creator from the props.
// TS won't recognize if you don't destructure the props.
const MyComponent: FC = ({ actionCreator }) => {
return Do something;
};
const mapStateToProps = (state: IState) => state;
const mapDispatchToProps: Props = {
actionCreator,
};
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);
```