Mobile app of React Daily Goal Tracker, a web app I build previously to track weekly goals on a daily basis.

This is a weekly goal tracking app, which means its purpose is to set weekly goals to meet each day.

When the app is opened, the user can access the Goals screen by either using a guest account, registering a new account or loggin in his/her own account.

If a page is refreshed or reloaded, the account and the goal are persisted, which means that the user session is kept, hence the account keeps being logged in.

This app uses the Refresh token with rotation security strategy

This app uses Expo - a framework to develop React Native apps easily withouth worrying about all the setup needed to start working on a native mobile app - and Expo Go, a sandbox that let you run and test your locally developed app on a physical device (IOS or Android) without needing to publish your app on the respective app store

• React Native
• Apollo Client
• GraphQL
• Apollo Server
• Nest.js
• Prisma.io
• Sqlite
• Typescript
• Turborepo
• Expo
• Expo Go

Make sure to have installed the Latest Stable Version of Node on your machine. This is to avoid incompatibilty and/or conflict issues among the needed dependencies to run the app

Run the command npm i at the root folder level

In the apps/react-native-goals-backend directory, create an .env file with the following environment variables:

DATABASE_URL:file:./src/prisma/dev.db

ACCESS_TOKEN_SECRET='password_you_set'
ACCESS_TOKEN_EXPIRATION=1h
REFRESH_TOKEN_SECRET='password_you_set'
REFRESH_TOKEN_EXPIRATION=6h

• Open a terminal in the project root folder
• Run cd apps/react-native-goals-backend
• Run npm i
• Run npm run prisma:generateClient
• Run npm run start:watch

Download Expo Go from the app store of your mobile device (App Store for IOS and Play Store for Android)

• Download and intstall Ngrok, a software needed to expose the local backend server to the internet, so that it is accessible from the Expo Go app
• Open a terminal
• Run the command ngrok http 3000
• Once Ngrok generates the public url, open apps/react-native-goals-frontend/src/components/router/Router.tsx and replace the url inside the httpLink variable, as shown below

const httpLink = new HttpLink({ uri: <replace link here>, });

• Open a terminal in the project root folder
• Run cd apps/react-native-goals-frontend
• Run npm i
• Run npm run start (you may need to run expo in tunnel mode in some cases, with the npm run start:tunnel command)

• App tour
• Automated tests for frontend app
• Google sign in
• Publish app on Google Play Store
• Publish app on Apple App Store