An open API service indexing awesome lists of open source software.

https://github.com/tcpirate1/budget_app

React Native project for class assignment. A mobile budgeting app that the user can use to manage their budget. Has also turned into test area for Dependabot settings
https://github.com/tcpirate1/budget_app

expo github-actions mobile react-native

Last synced: 3 months ago
JSON representation

React Native project for class assignment. A mobile budgeting app that the user can use to manage their budget. Has also turned into test area for Dependabot settings

Awesome Lists containing this project

README

          

# budgeting app

## Building the project
This project uses expo and npm so make sure these are installed.
You can use either an Android Emulator or your own Android/iOS device to view the project.
To use an Emulator, you can download Android Studio on your PC/laptop or Expo Go on your Mobile Device
which is avaliable both on Google Play and Apple App Store.

Link to Android Studio: https://developer.android.com/studio

Link to Expo go (Android): https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en_NZ&gl=US

Link to Expo go (Apple): https://apps.apple.com/us/app/expo-go/id982107779

#### How to install expo & npm
It is recommended to download nodejs as it includes npm and allows for npm packages to be delivered to the project.
You can download **nodejs** here: https://nodejs.org/en/download/

# The following are command lines that can be run from any terminal, **make sure you are inside the project's directory as they are not global commands (the first command in this list is the exception)**

### `npm install -g expo-cli`
Run this to install expo-cli.
This command is also used to update expo-cli.
It doesn't have to be in the project directory because it is a global command.

### `npm install`

Run this command to reinstate the gitignored folders/files into the project.

### `npm start`

Now you should be ready to launch the project. When this command is ran something like the image below should pop up:

![Image that shows list of commands when npm start is ran](https://github.com/TcPirate1/React-Native_MobileDevClass/blob/main/assets/npm_start.PNG?raw=true)

You can either scan QR code or enter the URL below the QR code, with the mobile Expo app or enter the appropriate command to launch the project from an emulator (make sure the emulator is already launched before trying to open the project).

If you are using the Expo app make sure to be on the same network as the one that the project is being started from otherwise it will not detect the project even if you scanned the QR code.

## What the app should look like
![Login Page](assets/Mobile_App_Images/Login/Inputting_fields.jpg?raw=true)
![Login success](assets/Mobile_App_Images/Login/successful_login.jpg?raw=true)

![Registering a new account](assets/Mobile_App_Images/Registration/Registering_new_account.jpg?raw=true)
![Successful registration](assets/Mobile_App_Images/Registration/Successful_registration.jpg?raw=true)

![Upper section of survey screen](assets/Mobile_App_Images/Survey/Survey.png?raw=true)
![Lower section of survey screen](assets/Mobile_App_Images/Survey/Survey2.PNG?raw=true)

![Adding item to list](assets/Mobile_App_Images/Main/Added_item.PNG?raw=true)
![Log out pop up](assets/Mobile_App_Images/Main/Log_out.PNG?raw=true)
![Modal box that opens when add item button is pressed](assets/Mobile_App_Images/Main/Main_modal.PNG?raw=true)
![Pop up for when item is tapped to be removed](assets/Mobile_App_Images/Main/Remove_item.PNG?raw=true)
![Main Screen](assets/Mobile_App_Images/Main/Main.PNG?raw=true)