Chatify - Real-time Chat App

A modern real-time chat application built with React Native, Expo, and Firebase.

Features

• 🔐 Authentication: Email/password signup and login
• 💬 Real-time Chat: Instant messaging with Firebase Firestore
• 👤 User Avatars: Auto-generated avatars based on user email
• 📱 Cross-platform: Works on iOS, Android, and Web
• 🎨 Modern UI: Clean and intuitive design

Tech Stack

• React Native with Expo
• Firebase (Authentication & Firestore)
• react-native-gifted-chat for chat UI
• TypeScript for type safety
• Expo Router for navigation

Setup Instructions

1. Firebase Configuration

1. Go to Firebase Console
2. Create a new project or use an existing one
3. Enable Authentication and Firestore Database
4. In Authentication settings, enable Email/Password sign-in method
5. Get your Firebase config from Project Settings > General > Your apps
6. Replace the placeholder values in firebase.config.js:

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain", 
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

2. Firestore Rules

Set up these Firestore security rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /messages/{messageId} {
      allow read, write: if request.auth != null;
    }
  }
}

3. Running the App

# Install dependencies (already done)
npm install

# Start the development server
npm start

# Run on specific platform
npm run android
npm run ios  
npm run web

Project Structure

app/
├── _layout.tsx      # Root layout with auth flow
├── index.tsx        # Entry point
├── login.tsx        # Login/Signup screen
└── chat.tsx         # Main chat interface

firebase.config.js   # Firebase configuration

Usage

1. First Time: Create an account with email/password
2. Login: Sign in with your credentials
3. Chat: Start messaging in the global chat room
4. Logout: Use the sign out button in the chat header

Features to Add

• Private messaging
• User profiles
• Image/file sharing
• Push notifications
• Multiple chat rooms
• Message reactions
• Dark mode

Troubleshooting

• Make sure Firebase config is properly set up
• Check that Firestore rules allow authenticated users
• Ensure Authentication method is enabled in Firebase
• Clear Metro cache: npx expo start --clear

Enjoy chatting! 🚀