📝 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 project
cd 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)