Welcome to Captioned, a beautifully animated React Native app built with Expo. Captioned allows users to take photos and videos, upload them to Gemini AI to generate captions and tweets, and copy the generated text to the clipboard. This guide will help you set up and run the project.
- Prerequisites
- Environment Variables
- Installation
- Running the App
- Firebase Functions
- Scripts
- Project Structure
- License
Ensure you have the following installed on your machine:
- Node.js (LTS version recommended)
- Expo CLI
- Firebase CLI
- A Firebase project set up with Realtime Database, Storage, and Functions enabled
The app requires certain environment variables to connect to APIs and SDKs. Create a .env file in the root directory with the following content:
EAS_PROJECT_ID=
# Firebase
FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=
FIREBASE_MEASUREMENT_ID=
FIREBASE_DATABASE_URL=
Additionally, create a .env file in the functions directory for Firebase functions:
GEMINI_API_KEY=
MY_FIREBASE_STORAGE_BUCKET=
MY_FIREBASE_DATABASE_URL=
Download your Firebase Admin SDK JSON file from the Firebase Console and save it in the functions directory as firebase-admin.json.
Follow these steps to set up the project:
- Clone the repository:
git clone https://github.com/your-username/captioned.git
cd captioned- Install dependencies:
npm install- Install Firebase functions dependencies:
cd functions
npm install
cd ..Use the following commands to run the app:
- Start the Expo development server:
npm start- Run on Android:
npm run android- Run on iOS (requires a physical device):
npm run ios- Run on Web:
npm run webTo develop and deploy Firebase functions, use the following commands:
- Serve functions locally:
npm run serve- Run functions shell:
npm run shell- Deploy functions:
npm run deploy- View function logs:
npm run logsHere are the scripts defined in the project:
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios --device",
"web": "expo start --web"
}"scripts": {
"serve": "firebase emulators:start --only functions",
"shell": "firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
}The project's structure is as follows:
captioned/
├── .env
├── .expo/
├── android/
├── ios/
├── functions/
│ ├── .env
│ ├── firebase-admin.json
│ ├── index.js
│ └── package.json
├── node_modules/
├── assets/
├── src/
│ ├── components/
│ ├── api/
│ ├── navigator/
│ └── store/
│ └── utils/
├── .gitignore
├── .firebaserc
├── app.config.ts
├── App.tsx
├── babel.config.js
├── firebase.json
├── firebase.ts
├── package-lock.json
├── package.json
├── tsconfig.json
└── README.mdThis work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0).
You are free to:
- Share — copy and redistribute the material in any medium or format
- Adapt — remix, transform, and build upon the material
Under the following terms:
- Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
- NonCommercial — You may not use the material for commercial purposes.
- ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions under the same license as the original.
No additional restrictions — You may not apply legal terms or technological measures that legally restrict others from doing anything the license permits.
We hope you enjoy using Captioned