✨ feat(blog): add Firebase Auth + Firestore blog system

Add Google authentication, Firestore blog CRUD with Lexical editor,
paginated blog listing, daily publish limits, and i18n support (en/mm).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: lwinmoepaing

.github/workflows/build.yml

@@ -51,6 +51,14 @@ jobs:
         run: bun install
       - name: Build with Next.js
         run: bun run build
+        env:
+          NEXT_PUBLIC_FIREBASE_API_KEY: ${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}
+          NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN: ${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}
+          NEXT_PUBLIC_FIREBASE_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}
+          NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET: ${{ secrets.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET }}
+          NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID }}
+          NEXT_PUBLIC_FIREBASE_APP_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}
+          NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID: ${{ secrets.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID }}
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

.gitignore

@@ -53,4 +53,5 @@ screen-shot
 # playwright mcp
 .playwright-mcp/
 
-/docs
+/docs
+/plans

bun.lockb

@@ -185,7 +185,27 @@
     "articles": "Articles",
     "readArticle": "Read article",
     "noPostsTitle": "No posts yet",
-    "noPostsBody": "Exciting articles are on the horizon. Our community of engineers is crafting stories worth reading."
+    "noPostsBody": "Exciting articles are on the horizon. Our community of engineers is crafting stories worth reading.",
+    "write": "Write",
+    "writeBlog": "Write Blog",
+    "newBlog": "New Blog",
+    "myBlogs": "My Blogs",
+    "saveDraft": "Save Draft",
+    "publish": "Publish",
+    "unpublish": "Unpublish",
+    "editBlog": "Edit Blog",
+    "deleteBlog": "Delete Blog",
+    "communityPost": "Community"
+  },
+  "auth": {
+    "signIn": "Sign In",
+    "signOut": "Sign Out",
+    "signInRequired": "Sign in required",
+    "signInDesc": "Sign in with your Google account to access this feature.",
+    "signInWithGoogle": "Sign in with Google",
+    "accessDenied": "Access denied",
+    "accessDeniedDesc": "You don't have permission to view this page.",
+    "backToBlog": "Back to Blog"
   },
   "profileHero": {
     "label": "Developer Directory",

messages/en.json

@@ -185,7 +185,27 @@
     "articles": "ဆောင်းပါးများ",
     "readArticle": "ဆောင်းပါး ဖတ်ရန်",
     "noPostsTitle": "ဆောင်းပါး မရှိသေးပါ",
-    "noPostsBody": "စိတ်လှုပ်ရှားဖွယ် ဆောင်းပါးများ မကြာမီ ရောက်လာပါမည်။ ကျွန်ုပ်တို့၏ အင်ဂျင်နီယာ အသိုင်းအဝိုင်းသည် ဖတ်ရှုရကျိုးနပ်သော ပုံပြင်များ ရေးသားနေပါသည်။"
+    "noPostsBody": "စိတ်လှုပ်ရှားဖွယ် ဆောင်းပါးများ မကြာမီ ရောက်လာပါမည်။ ကျွန်ုပ်တို့၏ အင်ဂျင်နီယာ အသိုင်းအဝိုင်းသည် ဖတ်ရှုရကျိုးနပ်သော ပုံပြင်များ ရေးသားနေပါသည်။",
+    "write": "ရေးရန်",
+    "writeBlog": "ဘလော့ဂ် ရေးရန်",
+    "newBlog": "ဘလော့ဂ် အသစ်",
+    "myBlogs": "ကျွန်ုပ်၏ ဘလော့ဂ်များ",
+    "saveDraft": "မူကြမ်း သိမ်းရန်",
+    "publish": "ထုတ်ဝေရန်",
+    "unpublish": "ပြန်ရုပ်ရန်",
+    "editBlog": "ဘလော့ဂ် ပြင်ရန်",
+    "deleteBlog": "ဘလော့ဂ် ဖျက်ရန်",
+    "communityPost": "အသိုင်းအဝိုင်း"
+  },
+  "auth": {
+    "signIn": "ဝင်ရောက်ရန်",
+    "signOut": "ထွက်ရန်",
+    "signInRequired": "ဝင်ရောက်ရန် လိုအပ်ပါသည်",
+    "signInDesc": "ဤအင်္ဂါရပ်ကို အသုံးပြုရန် သင့် Google အကောင့်ဖြင့် ဝင်ရောက်ပါ။",
+    "signInWithGoogle": "Google ဖြင့် ဝင်ရောက်ရန်",
+    "accessDenied": "ဝင်ခွင့် မရှိပါ",
+    "accessDeniedDesc": "ဤစာမျက်နှာကို ကြည့်ရှုခွင့် မရှိပါ။",
+    "backToBlog": "ဘလော့ဂ် သို့ ပြန်သွားရန်"
   },
   "profileHero": {
     "label": "Developer လမ်းညွှန်",

messages/mm.json

@@ -28,6 +28,16 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.0",
+    "@lexical/clipboard": "^0.41.0",
+    "@lexical/code": "^0.41.0",
+    "@lexical/html": "^0.41.0",
+    "@lexical/link": "^0.41.0",
+    "@lexical/list": "^0.41.0",
+    "@lexical/markdown": "^0.41.0",
+    "@lexical/react": "^0.41.0",
+    "@lexical/rich-text": "^0.41.0",
+    "@lexical/selection": "^0.41.0",
+    "@lexical/utils": "^0.41.0",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@react-three/postprocessing": "^3.0.4",
@@ -41,8 +51,10 @@
     "cz-customizable": "^7.0.0",
     "date-fns": "^2.30.0",
     "fast-shuffle": "^6.0.1",
+    "firebase": "^12.10.0",
     "framer-motion": "^12.36.0",
     "husky": "^8.0.3",
+    "lexical": "^0.41.0",
     "lint-staged": "^15.0.2",
     "lucide-react": "^0.577.0",
     "next": "16.1.6",

package.json

@@ -22,13 +22,16 @@ import { useTranslations } from "next-intl";
 import { useLanguage } from "@/hooks/useLanguage";
 import { khitHaungg } from "@/fonts/fonts";
 
+import { useBlogList } from "@/hooks/blog/useBlogList";
+
 /* ── Types ── */
 type BlogItem = {
   _id: string;
   title: string;
   description?: string;
   date: string;
   slug: string;
+  source?: "static" | "firestore";
 };
 
 /* ── Floating ambient orbs ── */
@@ -421,7 +424,7 @@ const EmptyState = ({ isInView, mmFont, t }: { isInView: boolean; mmFont: string
 );
 
 /* ── Main Blog Page Client ── */
-const BlogPageClient = ({ blogs }: { blogs: BlogItem[] }) => {
+const BlogPageClient = ({ blogs: staticBlogs }: { blogs: BlogItem[] }) => {
   const heroRef = useRef(null);
   const gridRef = useRef(null);
   const heroInView = useInView(heroRef, { amount: 0.3, once: true });
@@ -430,6 +433,19 @@ const BlogPageClient = ({ blogs }: { blogs: BlogItem[] }) => {
   const { isMyanmar } = useLanguage();
   const mmFont = isMyanmar ? khitHaungg.className : "";
 
+  // Merge static + Firestore blogs with pagination
+  const { firestoreBlogs, loading: firestoreLoading, hasMore, loadMore, loadingMore } = useBlogList(10);
+  const firestoreItems: BlogItem[] = firestoreBlogs.map((p) => ({
+    _id: p.id,
+    title: p.title,
+    description: p.description,
+    date: (p.publishedAt ?? p.createdAt).toISOString(),
+    slug: `/blog/post?slug=${p.slug}`,
+    source: "firestore" as const,
+  }));
+  const blogs = [...staticBlogs.map((b) => ({ ...b, source: "static" as const })), ...firestoreItems]
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
   const hasPosts = blogs.length > 0;
   const [featured, ...rest] = blogs;
 
@@ -595,7 +611,20 @@ const BlogPageClient = ({ blogs }: { blogs: BlogItem[] }) => {
       {/* Blog grid */}
       <div ref={gridRef} className="relative z-10 pb-16">
         <Container withPadding>
-          {!hasPosts ? (
+          {firestoreLoading && staticBlogs.length === 0 ? (
+            <motion.div
+              className="flex items-center justify-center py-20"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+            >
+              <div className="flex flex-col items-center gap-3">
+                <div className="w-6 h-6 border-2 border-prism-violet/30 border-t-prism-violet rounded-full animate-spin" />
+                <span className={cn("text-[11px] font-mono text-zinc-600", mmFont)}>
+                  Loading blogs...
+                </span>
+              </div>
+            </motion.div>
+          ) : !hasPosts ? (
             <EmptyState isInView={gridInView} mmFont={mmFont} t={t} />
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
@@ -618,6 +647,38 @@ const BlogPageClient = ({ blogs }: { blogs: BlogItem[] }) => {
               ))}
             </div>
           )}
+
+          {/* Load More */}
+          {hasMore && (
+            <motion.div
+              className="flex justify-center mt-10"
+              initial={{ opacity: 0 }}
+              animate={gridInView ? { opacity: 1 } : { opacity: 0 }}
+              transition={{ delay: 0.5 }}
+            >
+              <button
+                type="button"
+                onClick={loadMore}
+                disabled={loadingMore}
+                className={cn(
+                  "inline-flex items-center gap-2 px-6 py-3 rounded-xl text-sm font-medium",
+                  "bg-white/[0.04] border border-white/[0.08]",
+                  "text-zinc-400 hover:text-white hover:bg-white/[0.08] hover:border-white/[0.12]",
+                  "transition-all duration-300",
+                  "disabled:opacity-40 disabled:cursor-not-allowed"
+                )}
+              >
+                {loadingMore ? (
+                  <>
+                    <div className="w-4 h-4 border-2 border-zinc-600 border-t-zinc-300 rounded-full animate-spin" />
+                    Loading...
+                  </>
+                ) : (
+                  "Load more posts"
+                )}
+              </button>
+            </motion.div>
+          )}
         </Container>
       </div>
     </div>