4.0 KiB
Media Aggregation and Sorting System
This is my final-year mobile app project.
It is an Expo/React Native app that pulls media from multiple sources (device storage, Google Photos picker flow, and NAS) and shows everything in one timeline-style view.
Notes:
note for ServerFiles, this can be ran on its own
it doesn't need the rest of the project's code to run.
/ServerFiles/ is its own subproject, it is only
included in this repo as this is the public version of
the repo with certain keys abstracted due to privacy
reasons. Keys such as my google photos API key and NAS
credentials are not included in this public repo, but
the server file is included as it is a crucial part of
the project and can be run on its own with the
appropriate keys added in.
This is also why there are no commits, it is a necessary abstraction for security reasons. I cannot put my keys in the repo.
To run the app, consult the .env.example.txt file. Use that file to create the .env file and add your keys.
The method of obtaining the Google photos picker's api key is via:
- Go to the Google Cloud console Website
- Sign up with a Google account
- Create a new project
- Enable the
Google Photos Picker API(By searching for Google Photo Picker API) - Enable the API
- Go to the
OAuth consent screentab - In the overview tab of the OAuth consent screen, click get started
- Name the app
- Add a support email (select the one you used to sign up for the google account)
- In audience select: External
- contact information = your email yet again (click enter after typing it in)
- agree to the user data policy
- click create
- Go to the
Clientstab - Application type = ANDROID
- package name = com.bobthebob.massphotoapp
- get fingerprint for app via the command it displays
- under the advanced tab, enable custom URI scheme
- click create
- Copy the
Client IDkey and paste it into the.envfile - Under
AudienceTab, go to add users under the Test users section - Add your email address and any users you want to test the
Google photos pickerapi with - click save
Running the Project
Node requirement: >=20.19.4.
Useful scripts:
npm run start
npm run android
npm run ios
npm run web
These scripts set NODE_ENV automatically so Expo can load the correct mode during bundling.
NAS backend
cd ./ServerFiles
npm i
npm start
What This Project Does
- Local user accounts (register/login)
- Local SQLite database on-device (
PhotosApp.db) - Service onboarding for:
- Google Photos
- NAS
- iCloud placeholder
- Unified media view with source badges
- Collections/albums screen
- Search screen
- Settings screen for theme, services, and backup options
Current Architecture
App entry and navigation
- Entrypoint is
App.js App.jsinitializes the database, then mounts navigation- Stack flow:
LoginRegisterOnboardingMainTabsSettings
- Bottom tabs in
MainTabs:Library(HomeScreen)Search(SearchScreen)Collections(AlbumsScreen)
Data layer
Database setup lives in src/services/DatabaseService.js.
Tables currently used:
userslinked_accountsmedia
Passwords are hashed with SHA-256 via src/services/CredentialEncryption.js.
Linked account payloads are stored as Base64-encoded JSON strings.
Service/auth layer
Auth services are in src/AUTH/:
GoogleAUTH.jsNASAUTH.jsIOSAUTH.js(placeholder)
Common interface base: src/AUTH/AuthServiceBase.js.
API client wrappers are in src/API/.
Backend (NAS side)
There is a separate Node/Express backend in ServerFiles/server.js.
It handles NAS connection and file operations for the mobile app.
Project Structure
Media-Aggregation-and-Sorting-System/
├── App.js
├── app.json
├── package.json
├── src/
│ ├── API/
│ ├── AUTH/
│ ├── components/
│ ├── screens/
│ └── services/
├── ServerFiles/
│ ├── server.js
│ └── package.json
└── TEST/