# 📱 Fintrack - Personal Expense Tracker App

Fintrack is a modern, production-ready **React Native** mobile app that helps users track their personal finances. It features Google Sign-In, phone number login with OTP verification, and a consistent **dark theme** with stylish yellow accents.

---

## 🚀 Features

- 🟡 Clean and modern UI with black & yellow branding
- 🔐 Google Sign-In with token verification (Zustand + AsyncStorage)
- 📲 Phone number authentication with OTP
- ⏱ OTP auto-read via SMS Retriever API
- ⏳ Timer & resend OTP logic
- 💥 Shake animation on invalid OTP
- 🔄 Persistent login state across sessions
- 🧠 Zustand for global auth state management
- ☁️ Backend-ready integration with Express.js


---

## 🛠 Tech Stack

| Tech | Description |
|------|-------------|
| React Native | Core mobile framework |
| Zustand | Lightweight state management |
| AsyncStorage | Persistent storage |
| @react-native-google-signin/google-signin | Google OAuth login |
| react-native-sms-retriever | OTP auto-read via SMS |
| React Navigation | Stack navigation |
| Express (Backend) | Optional: verify idTokens & issue app-specific JWT |

---

## 📦 Install Dependencies

```bash
yarn install
npx pod-install  # iOS only

---

🧪 Run the App

npx react-native run-android
# or
npx react-native run-ios

---

🔐 Setup Google Sign-In

1. Create a project in Google Cloud Console
2. Enable OAuth 2.0 Client ID
3. Add WEB_CLIENT_ID and IOS_CLIENT_ID to your .env or /const/Key.js

// /const/Key.js
export const WEB_CLIENT_ID = 'your_web_client_id.apps.googleusercontent.com';
export const IOS_CLIENT_ID = 'your_ios_client_id.apps.googleusercontent.com';

---

🔒 Backend Integration (Optional)

Send the Google idToken to your Express backend:

await fetch('https://your-backend.com/api/auth/google', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: user.name,
    email: user.email,
    idToken: token,
  }),
});

---

Backend REPOSITORY LINK: https://github.com/JoydeepKrGhosh/Fintrack

📲 SMS Retriever API Setup (Android)

• Add permission in AndroidManifest.xml:

<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.READ_SMS" />

• No SMS permission dialog needed (Google Play compliant)

---

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first.

---

🔗 Author

Made with ❤️ by [Your Name]