PayCheck 💰

PayCheck is a modern, intuitive personal finance management application built with React Native and Expo. It helps users track their income and expenses, visualize their financial health through interactive charts, and manage multiple wallets with ease.

Designed with a focus on aesthetics and user experience, PayCheck features a premium glassmorphism UI, smooth animations, and robust data visualization.

---

✨ Features

• 💸 Transaction Tracking: Easily add income and expenses with categories, dates, and descriptions.
• 📊 Advanced Analytics:
  • Weekly: Bar charts to track daily spending.
  • Monthly: Calendar view to see daily transaction breakdowns.
  • Yearly: Interactive line charts with month-by-month income vs. expense comparison.
• 👛 Wallet Management: Manage multiple wallets/accounts and track balances individually.
• 🔐 Secure Authentication: Powered by Firebase Auth for secure user login and registration.
• 🎨 Modern UI/UX:
  • Custom Glassmorphism Tab Bar with smooth sliding animations.
  • Interactive charts with tooltips and touch interactions.
  • Dark mode optimized design.
• ☁️ Cloud Sync: Real-time data synchronization using Firebase Firestore.

---

🛠️ Tech Stack

• Framework: React Native with Expo (SDK 53)
• Language: TypeScript
• Navigation: Expo Router
• Backend: Firebase (Auth, Firestore)
• Styling: StyleSheet, Custom Theme Constants
• Animations: React Native Reanimated
• Charts: React Native Gifted Charts
• Icons: Phosphor React Native
• UI Components: Expo Blur (Glassmorphism)

---

🚀 Getting Started

Follow these steps to set up the project locally.

Prerequisites

• Node.js (v18 or newer)
• npm or yarn
• iOS Simulator (Mac) or Android Emulator
• Firebase Account

Installation

1. Clone the repository

   git clone https://github.com/levxn/PayCheck.git
   cd PayCheck

2. Install dependencies

   npm install

3. Configure Firebase

   • Create a new project in the Firebase Console.
   • Enable Authentication (Email/Password).
   • Enable Firestore Database.
   • Create a file named firebaseConfig.ts in config/ (or update the existing one) with your Firebase credentials:

     // config/firebase.ts
     import { initializeApp } from "firebase/app";
     import { getAuth } from "firebase/auth";
     import { getFirestore } from "firebase/firestore";
     
     const firebaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_PROJECT_ID.appspot.com",
       messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
       appId: "YOUR_APP_ID"
     };
     
     export const app = initializeApp(firebaseConfig);
     export const auth = getAuth(app);
     export const firestore = getFirestore(app);

4. Run the app

   npm run ios      # For iOS
   npm run android  # For Android

---

📂 Project Structure

PayCheck/
├── app/                 # Expo Router screens and layouts
│   ├── (auth)/          # Authentication screens (Login, Signup)
│   ├── (modals)/        # Modal screens (Add Transaction)
│   ├── (tabs)/          # Main tab screens (Home, Stats, Wallet, Profile)
│   └── _layout.tsx      # Root layout
├── components/          # Reusable UI components
│   ├── CustomTabs.tsx   # Glassmorphism tab bar
│   ├── YearlyChart.tsx  # Custom chart component
│   └── ...
├── config/              # Firebase configuration
├── constants/           # Theme colors, spacing, and fonts
├── contexts/            # React Contexts (AuthContext)
├── services/            # API calls and business logic
├── types/               # TypeScript type definitions
└── utils/               # Helper functions

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

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

---

📄 License

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

---

Built with ❤️ by Levxn