📌 React Firebase Contacts App

A modern contact management app with Firebase authentication & real-time database.

🖥️ Live Demo | 📂 Repository

📚 Navigation

• ✨ Overview
• 📖 Description
• 🚀 Features
• 🗂️ Project Skeleton
• 🛠️ Built With
• ⚡ How To Use
  • 🔐 Google Authentication Note
• 📌 About This Project
• 🙏 Acknowledgements
• 📬 Contact

---

✨ Overview

---

---

---

---

📖 Description

🔸 React ve Firebase kullanılarak geliştirilmiş modern bir Contact Management Application’dır.

🔸 Kullanıcılar:

• Email/Password veya Google ile giriş yapabilir
• Kendi contact listesini oluşturabilir
• Contact ekleyebilir, güncelleyebilir ve silebilir

🔸 Uygulama, authentication tabanlı korumalı route yapısı ile yalnızca giriş yapmış kullanıcıların /app alanına erişmesine izin verir.

🔸 🌙 Dark / Light Theme (theme context, palette, UI uyumu)

🔸 Proje boyunca temiz kod, component bazlı mimari ve modern React best practice’leri hedeflenmiştir.

---

🚀 Features

• 🔐 Firebase Authentication
  • Email / Password
  • Google Sign-In
• 🛡️ Protected Routes
  • Login olmadan /app erişimi yok
• 📇 Contact CRUD
  • Add
  • Update
  • Delete
• 🚫 Duplicate phone number validation
• 🎨 Material UI (MUI) ile modern UI
• 🌗 Dark-Light Mode
  • ThemeContext + MUI ThemeProvider
  • Kullanıcı tercihine göre anlık tema değişimi
• 📱 Responsive design (Mobile & Desktop)
• ☁️ Firebase Realtime Database
  • Kullanıcı bazlı veri izolasyonu
• 🧠 Context API
  • Authentication & Theme yönetimi
• ⚛️ React Router v6 ile client-side routing
  • Client-side routing
• 💬 React-Toastify
  • Kullanıcı geri bildirimleri
• 🚀 Netlify Deployment
  • SPA refresh sorunu
  • _redirects / cache meselesi

---

🗂️ Project Skeleton

src/
 │
 |----readme.md   
 │
 ├─ utils/
 │   ├─ auth.js
 │   ├─ firebase.js
 │   ├─ functions.js
 │   ├─ toastify.js
 │   └─ validators.js
 │   
 ├─ components/
 │   ├─ contacts/
 │   │   └─ Contacts.jsx
 │   ├─ navbar/
 │   │   ├─ ThemeToggle.jsx
 │   │   └─ Navbar.jsx
 │   └─ form/
 │       └─ FormComponent.jsx
 │   
 ├─ context/
 │   └─ AuthContext.jsx
 │   
 ├─ helpers/
 │   └─ ToastNotify.js
 │   
 ├─ pages/
 │   ├─ Login.jsx
 │   ├─ Landing.jsx
 │   └─ Register.jsx
 │   
 ├─ routes/
 │   └─ ProtectedRoute.jsx
 │
 ├─ theme/
 │   └─ ThemeContext.jsx
 │   
 ├─ App.css
 ├─ App.jsx
 ├─ index.css
 └─ main.jsx

---

🛠️ Built With

• ⚛️ React
• 🔥 Firebase Authentication
• 🔥 Firebase Realtime Database
• 🧭 React Router v6
• 🎨 Material UI (MUI)
• 💬 React-Toastify
• 🌐 Netlify

---

⚡ How To Use

🔸 To clone and run this application, you'll need Git, Node.js, and a package manager (yarn or npm) installed on your computer.

# Clone this repository
$ git clone https://github.com/Umit8098/React-Project-Firebase-Movie-App.git

# Navigate into the project folder
$ cd React-Project-Firebase-Movie-App

# Install dependencies
yarn  
yarn dev

# or using npm
npm install
npm run dev

🔸 Then open http://localhost:3000 to view it in your browser.

---

🔐 Google Authentication Note

🔸 If you deploy the app to Netlify (or another hosting provider),
make sure to add your deployed domain to Firebase:

🔸 Firebase Console → Authentication → Settings → Authorized domains

🔸 Otherwise, Google Sign-In will work locally but fail in production.

• Example:

umitdev-firecontact.netlify.app

🔸 Without this step, Google Authentication will be blocked in production.

---

📌 About This Project

🔸 Bu proje;

• Modern React component mimarisi
• Authentication & authorization mantığı
• CRUD operasyonları
• Helper function kullanımı
• UI / UX polish
• Dark / Light theme yönetimi (MUI Theme)
• Implemented Google Authentication with proper post-login routing using React Router
• Dynamic Navbar based on authentication state
• Firebase user profile (displayName, photoURL) rendering
• Firebase ile frontend entegrasyonu konularını gerçek bir uygulama senaryosu üzerinden pekiştirmek amacıyla geliştirilmiştir.

---

🙏 Acknowledgements

• 🎓Clarusway – for the training resources
• 📘React Documentation
• 🔥 Firebase Docs
• 🧭React Router Docs
• 💬 React-Toastify Docs
• 🌐 Netlify Docs

---

📬 Contact

• GitHub @Umit8098

• Linkedin @umit-arat