📝 React Firebase Blog App

Modern, mobile-first blog application with Firebase Auth, Firestore CRUD, likes, protected routes and responsive UI.

🖥️ Live Demo | 📂 Repository

📚 Navigation

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

---

✨ Overview

---

📖 Description

🔸 React Firebase Blog App, modern frontend stack ile geliştirilmiş bir blog uygulamasıdır.

🔸 Kullanıcılar:

• Email/Password veya Google ile giriş yapabilir
• Post oluşturabilir, düzenleyebilir ve silebilir
• Postları beğenebilir
• Profil bilgilerini (display name, photo) güncelleyebilir

🔸 Uygulama:

• Firebase Authentication ile kimlik doğrulama
• Firestore ile post verisi yönetimi
• Firebase Storage ile görsel yükleme
• Protected/Public route akışı
• Mobile-first ve responsive arayüz

🔸 Tema yönetimi:

• Dark/Light mode desteklenir
• Tema tercihi localStorage ile kalıcıdır

---

🚀 Features

• 🔐 Firebase Authentication
• Email / Password Login
• Google Sign-In
• 🛡️ Protected Routes
• Auth olmayan kullanıcılar için route guard
• 📝 Post CRUD
• Create / Edit / Delete post
• Optional title, required content
• ❤️ Like System
• Post beğenme / beğeniyi geri alma
• Yazar kendi postunu beğenemez
• 🖼️ Image Upload
• Post görseli Firebase Storage'a yüklenir
• Post silinince storage görseli de silinir
• 👤 Profile Management
• Display name ve profil foto güncelleme
• 🌗 Theme System
• Dark/Light mode toggle
• Theme preference persistence (localStorage)
• 📱 Mobile-first Responsive UI
• Home, PostDetail ve layout responsive
• Sticky header, desktop left sidebar
• 🚀 Netlify Deployment
• SPA routing için _redirects desteği

---

🗂️ Project Skeleton

src/
├─ app/
│ └─ store.js
├─ components/
│ ├─ Layout.jsx
│ ├─ LeftSidebar.jsx
│ └─ Navbar.jsx
├─ features/
│ └─ auth/
│ ├─ authService.js
│ └─ authSlice.js
├─ firebase/
│ ├─ firebaseConfig.js
│ ├─ postService.js
│ ├─ storageService.js
│ └─ userService.js
├─ hooks/
│ └─ useAuthListener.js
├─ pages/
│ ├─ Home.jsx
│ ├─ PostDetail.jsx
│ ├─ CreatePost.jsx
│ ├─ EditPost.jsx
│ ├─ Profile.jsx
│ ├─ Login.jsx
│ ├─ Register.jsx
│ └─ NotFound.jsx
├─ router/
│ └─ AppRouter.jsx
├─ routes/
│ ├─ ProtectedRoute.jsx
│ └─ PublicRoute.jsx
├─ styles/
│ └─ theme.js
├─ App.jsx
└─ main.jsx

---

🛠️ Built With

• ⚛️ React (Vite)
• 🧭 React Router
• 🧠 Redux Toolkit
• 🎨 Material UI (MUI)
• 🔥 Firebase Authentication
• 🔥 Cloud Firestore
• 🔥 Firebase Storage
• 🌐 Netlify

---

⚡ How To Use

# Clone repository
git clone https://github.com/umitarat-dev/Blog-App.git
# Enter projectcd Blogg-App
# Install dependencies
yarn
# Start dev server
yarn dev

Then open http://localhost:5173.

---

🔐 Firebase Notes

• Google Sign-In production'da çalışması için deploy domainini Firebase'e eklemelisin:

Firebase Console -> Authentication -> Settings -> Authorized domains

• Netlify SPA refresh sorunu için public/_redirects:

/* /index.html 200

---

📌 About This Project

Bu proje aşağıdaki konuları gerçek bir uygulama senaryosu ile pekiştirmek amacıyla geliştirildi:

• Firebase Auth + Firestore + Storage entegrasyonu
• Protected/Public routing mimarisi
• Redux Toolkit ile auth state yönetimi
• Mobile-first ve responsive UI yaklaşımı
• Netlify deploy ve production checklist

---

🙏 Acknowledgements

• Clarusway
• React Documentation
• Firebase Docs
• React Router Docs
• Redux Toolkit Docs
• Material UI Docs
• Netlify Docs

---

📬 Contact Information

I am always open to discussing new projects, creative ideas, or opportunities to be part of your visions.

• LinkedIn:linkedin.com/in/umit-arat
• Email:umitarat8098@gmail.com
• GitHub:github.com/umitarat-dev (Current Workspace)