A full-stack expense manager mobile application built with React Native, Expo, TypeScript, and Firebase.

• User authentication (register/login)
• Add, edit, and delete expenses
• Categorize expenses
• View expense reports and analytics
• Dark/Light theme support
• Offline support
• Expense synchronization across devices

• React Native
• Expo
• TypeScript
• React Navigation
• React Native Paper (UI components)
• React Native Firebase

• Node.js
• Express.js
• TypeScript
• Firebase Admin SDK
• JWT for authentication

• Firebase Firestore
• Firebase Authentication

expense-manager/
├── backend/                 # Backend API server
│   ├── src/
│   │   ├── controllers/    # API controllers
│   │   ├── models/         # Data models
│   │   ├── routes/         # API routes
│   │   ├── middleware/     # Authentication middleware
│   │   └── utils/          # Utility functions
│   └── package.json
├── frontend/               # React Native mobile app
│   ├── src/
│   │   ├── screens/        # App screens
│   │   ├── services/       # API services
│   │   └── components/     # Reusable components
│   └── package.json
└── README.md

• Node.js (v16 or higher)
• npm or yarn
• Expo Go app installed on your mobile device
• Firebase project with Firestore enabled

1. Navigate to the backend directory:

cd backend

2. Install dependencies:

npm install

3. Create a .env file in the backend directory with the following:

PORT=8080
JWT_SECRET=your_jwt_secret_key
FIREBASE_PROJECT_ID=your_firebase_project_id
FIREBASE_PRIVATE_KEY_ID=your_firebase_private_key_id
FIREBASE_PRIVATE_KEY=your_firebase_private_key
FIREBASE_CLIENT_EMAIL=your_firebase_client_email
FIREBASE_CLIENT_ID=your_firebase_client_id
FIREBASE_AUTH_URI=your_firebase_auth_uri
FIREBASE_TOKEN_URI=your_firebase_token_uri
FIREBASE_AUTH_PROVIDER_CERT_URL=your_firebase_auth_provider_cert_url
FIREBASE_CLIENT_CERT_URL=your_firebase_client_cert_url

4. Start the backend server:

npm run dev

1. Navigate to the frontend directory:

cd frontend

2. Install dependencies:

npm install

3. Create a .env file in the frontend directory with the following:

EXPO_PUBLIC_API_URL=http://localhost:8080/api

4. Create the required assets (icon, splash screen, etc.) as described in the assets section below

5. Start the Expo development server:

npx expo start

The backend API provides the following endpoints:

• POST /api/auth/register - Register a new user
• POST /api/auth/login - Login an existing user

• GET /api/expenses - Get user's expenses (with pagination/filtering)
• GET /api/expenses/:id - Get a specific expense
• POST /api/expenses - Create a new expense
• PUT /api/expenses/:id - Update an expense
• DELETE /api/expenses/:id - Delete an expense

• GET /api/categories - Get user's categories
• GET /api/categories/:id - Get a specific category
• POST /api/categories - Create a new category
• PUT /api/categories/:id - Update a category
• DELETE /api/categories/:id - Delete a category

• GET /api/settings - Get user's settings
• PUT /api/settings - Update user's settings

Both the backend and frontend require environment variables to function properly. See the setup instructions above for details.

• Install the Expo Go app from your device's app store (available on both Google Play and Apple App Store)
• Ensure your mobile device is on the same Wi-Fi network as your development machine
• Node.js and npm installed on your development machine

1. Make sure your backend server is running (port 8080):

cd backend
npm run dev

2. In a new terminal, navigate to the frontend directory and install dependencies:

cd frontend
npm install

3. Create the required assets in the frontend/assets directory (see Asset Configuration section below)

4. Run the Expo development server:

npx expo start

5. The Expo development tool will start in your browser

6. Scan the QR code shown in the browser using your mobile device's camera or the Expo Go app

7. The app will load on your mobile device

• If using the Expo CLI, you can run:

npx expo start --tunnel

• This creates a tunnel that allows you to connect to the development server from anywhere, not just the same network

To properly display your app on mobile devices, you need to create the following assets in the frontend/assets directory:

• icon.png - App icon (1024x1024 recommended)
• splash.png - Splash screen image
• adaptive-icon.png - Android adaptive icon

See the frontend/assets/README.md file for detailed information about asset requirements.

The app has Firebase dependencies for push notifications and additional Firestore operations, but the configuration is not fully implemented. For now, the app uses the REST API for all data operations. To fully implement Firebase features:

1. Create a Firebase project at https://console.firebase.google.com/
2. Add your Android and iOS apps to the project
3. Download and add the google-services.json file to frontend/android/app/
4. Add the GoogleService-Info.plist file to the iOS project (if building for iOS)
5. Configure the Firebase credentials in your environment variables

• Run npm run dev in the project root to start both frontend and backend in development mode
• Backend runs on port 8080 by default
• Frontend runs with Expo on the default port

Run tests for the backend:

cd backend && npm test

Run tests for the frontend:

cd frontend && npm test

• The backend can be deployed to any Node.js hosting platform (Heroku, Vercel, etc.)
• Make sure to configure the environment variables properly

• The app can be built and published using Expo:

cd frontend
npx expo publish

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Commit your changes (git commit -m 'Add amazing feature')
5. Push to the branch (git push origin feature/amazing-feature)
6. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

If you encounter any issues or have questions, please file an issue in the GitHub repository.