Chatme (React Native CLI + TypeScript + Firebase)

Chatme er en lille chat-app lavet i React Native CLI med TypeScript og Firebase Authentication. Projektet er lavet som en praktik-/læringsopgave med fokus på projektstruktur, læsbar kode og stabil login-flow.

Funktioner (status)

• Login screen (Google Sign-In)
• Login screen (Facebook Login) (kræver Meta setup)
• Home screen + Sign out
• Chat rooms
• Open chat room
• Send/receive messages
• Push notifications (bonus)

Tech stack

• React Native CLI
• TypeScript
• Firebase Auth: @react-native-firebase/auth
• Google Sign-In: @react-native-google-signin/google-signin
• Facebook Login: react-native-fbsdk-next
• Navigation: @react-navigation/native + @react-navigation/native-stack

Projektstruktur

• src/auth/ Login-logik pr. provider (Google/Facebook). UI kalder bare signInWithGoogle() / signInWithFacebook().
• src/navigation/ Navigation / stack.
• src/screens/ Skærme (Login, Home, osv.)

Kom i gang

1) Installér dependencies

npm install

2) Kør Android

npx react-native run-android

Firebase setup (Android)

1. Opret et Firebase-projekt.
2. Tilføj en Android-app i Firebase med jeres package name (skal matche android/app/build.gradle).
3. Download google-services.json og placer den her:
   • android/app/google-services.json

SHA-1 (debug) – vigtigt for Google login

Hvis du får DEVELOPER_ERROR, mangler der næsten altid SHA-1 eller korrekt webClientId.

1. Find SHA-1:

cd android
./gradlew signingReport

2. Kopiér SHA1 fra variant: debug ind i Firebase Console:

• Project settings → Your apps → Android app → Add fingerprint (SHA-1)

3. Download google-services.json igen og erstat filen i android/app/.

Google Sign-In

• webClientId er sat i src/auth/google.ts.
• Login-flow:
  1. GoogleSignin.signIn() → idToken
  2. auth().signInWithCredential(...)

Typiske fejl

• DEVELOPER_ERROR: forkert/manglende webClientId, manglende SHA-1 i Firebase, forkert package name, eller gammel google-services.json.

Facebook Login (Meta)

Facebook kan blokere login, indtil app-oplysninger er udfyldt (privacy policy + data deletion).

Vi hoster de nødvendige sider via GitHub Pages:

• Privacy Policy: https://rayvendk.github.io/chatme-legal/privacy.html
• Data Deletion: https://rayvendk.github.io/chatme-legal/deletion.html

Meta checklist (minimum)

• Udfyld “Settings → Basic” (privacy policy URL, data deletion URL, category, kontakt-email)
• Tilføj Android package name + key hash i Meta
• Sørg for at test-bruger er tilføjet under Roles (Development mode)

Kodekvalitet / vurderingspunkter

• Separation of concerns: auth-logik ligger i src/auth, UI ligger i src/screens.
• Error handling: login-skærmen viser fejl via Alert og har loading state.
• Native look & feel: der bruges standard RN-komponenter og native-stack navigation.

Roadmap

1. Splash Screen.
2. Chat rooms screen (liste over rooms)
3. Chat room screen (åbne rum + beskeder)
4. Firestore realtime messages
5. Push notifications (FCM).
6. Upload Billeder i chat rum.

Konklusion:

Arbejdet med denne app har været en lærerig proces, hvor jeg har skullet sætte mig ind i flere teknologier, som jeg ikke har arbejdet med i længere tid. Undervejs har jeg truffet en række valg for at få funktionaliteten på plads, og jeg er bevidst om, at der er områder, hvor løsningen kunne være mere struktureret og gennemarbejdet – særligt i forhold til brugen af Git og den overordnede kodeopbygning.

Med mere tid ville jeg have arbejdet videre med at forbedre struktur, navngivning og opdeling af ansvar i koden.

Overordnet set har processen dog givet mig en god forståelse for, hvordan jeg hurtigt kan sætte mig ind i nye teknologier og få en fungerende løsning op at stå, og det er noget, jeg er motiveret for at videreudvikle fremadrettet.