🔥 React Native (TypeScript) + Firestore CRUD Operation

এই টিউটোরিয়ালে আমরা শিখবো কীভাবে React Native + TypeScript ব্যবহার করে Firebase Firestore-এর সাথে CRUD (Create, Read, Update, Delete) অপারেশন করা যায়। এই কোর্সে আমরা File Based Structure ফলো করবো যা ইন্ডাস্ট্রি স্ট্যান্ডার্ড।

📁 Project Folder Structure (File Based)

src/
│── firebase/
│   └── firebaseConfig.ts
│
│── services/
│   └── userService.ts
│
│── screens/
│   └── UserScreen.tsx
│
│── types/
│   └── User.ts
│
└── App.tsx
  

✔ এখানে Firebase config, Firestore logic, UI এবং TypeScript type আলাদা আলাদা ফাইলে রাখা হয়েছে।

🔐 Firebase Configuration (firebaseConfig.ts)

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
  

✔ এই ফাইল Firebase App initialize করে এবং Firestore database export করে।

🧩 TypeScript Model (User.ts)

export interface User {
  id?: string;
  name: string;
  email: string;
}
  

✔ TypeScript interface ব্যবহার করলে ডাটা structure safe থাকে।

🔄 Firestore CRUD Logic (userService.ts)

import { collection, addDoc, getDocs, updateDoc, deleteDoc, doc } from 'firebase/firestore';
import { db } from '../firebase/firebaseConfig';
import { User } from '../types/User';

const userRef = collection(db, 'users');

// CREATE
export const addUser = async (user: User) => {
  await addDoc(userRef, user);
};

// READ
export const getUsers = async (): Promise => {
  const snapshot = await getDocs(userRef);
  return snapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data(),
  })) as User[];
};

// UPDATE
export const updateUser = async (id: string, user: User) => {
  const userDoc = doc(db, 'users', id);
  await updateDoc(userDoc, user);
};

// DELETE
export const deleteUser = async (id: string) => {
  const userDoc = doc(db, 'users', id);
  await deleteDoc(userDoc);
};
  

✔ এখানে Firestore-এর সব CRUD অপারেশন আলাদা সার্ভিস ফাইলে রাখা হয়েছে।

📱 UI Screen (UserScreen.tsx)

import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, Button, FlatList } from 'react-native';
import { addUser, getUsers, deleteUser } from '../services/userService';
import { User } from '../types/User';

const UserScreen = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [users, setUsers] = useState([]);

  const loadUsers = async () => {
    const data = await getUsers();
    setUsers(data);
  };

  useEffect(() => {
    loadUsers();
  }, []);

  const handleAdd = async () => {
    await addUser({ name, email });
    setName('');
    setEmail('');
    loadUsers();
  };

  return (
    
      
      
      

       item.id!}
        renderItem={({ item }) => (
          
            {item.name} - {item.email}
             deleteUser(item.id!)} />
          
        )}
      />
    
  );
};

export default UserScreen;
  

📊 Output Explanation

• User নাম ও email ইনপুট দিয়ে Add User করলে Firestore-এ ডাটা যোগ হবে
• Firestore থেকে সব User রিয়েল-টাইমে লিস্ট আকারে দেখাবে
• Delete বাটনে ক্লিক করলে ডাটাবেজ থেকেও ডাটা মুছে যাবে
• পুরো CRUD অপারেশন TypeScript-safe এবং File-based