postbase 0.1.0

package/frontend/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "postbase-frontend",
+    "version": "0.1.0",
+    "license": "MIT",
+    "author": "Umair Ashraf",
+    "url": "http://github.com/umrashrf/postbase",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "preact": "^10.27.0",
+        "preact-iso": "^2.9.1",
+        "preact-router": "^4.1.2",
+        "tailwindcss": "^4.1.11",
+        "@tailwindcss/vite": "^4.1.11",
+        "better-auth": "^1.3.34"
+    },
+    "devDependencies": {
+        "@preact/preset-vite": "^2.9.3",
+        "vite": "^6.0.4"
+    }
+}

package/frontend/src/App.jsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'preact/hooks';
+import { Router } from 'preact-router';
+import Header from './components/Header';
+import Home from './pages/Home';
+import Dashboard from './pages/Dashboard';
+import Login from './pages/Login';
+import { getSession } from './auth';
+
+export default function App() {
+    const [user, setUser] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const { data } = await getSession();
+            if (data && data.hasOwnProperty('user')) {
+                setUser(data.user);
+            }
+        })();
+    }, []);
+
+    return (
+        <div className="min-h-screen bg-gray-50 text-gray-800">
+            <Header user={user} />
+
+            <Router>
+                <Home path="/" user={user} />
+                <Dashboard path="/dashboard" user={user} />
+                <Login path="/login" user={user} />
+            </Router>
+
+            <footer className="bg-white border-t py-6 mt-10">
+                <div className="container mx-auto text-center text-sm text-gray-500">
+                    © {new Date().getFullYear()} Postbase Demo
+                </div>
+            </footer>
+        </div>
+    );
+}

package/frontend/src/auth.js

@@ -0,0 +1,52 @@
+import { createAuthClient as createBetterAuthClient } from 'better-auth/client';
+import { phoneNumberClient } from "better-auth/client/plugins"
+import { createAuthClient } from '../lib/postbase/auth';
+import { createFirebaseAuthClient } from '../lib/postbase/compat/firebase/auth';
+
+export const betterAuthClient = createBetterAuthClient({
+    baseURL: import.meta.env.VITE_API_BASE + '/auth', // Specify if on a different domain/path,
+    plugins: [
+        phoneNumberClient()
+    ]
+});
+
+export const postbaseAuthClient = createAuthClient(betterAuthClient);
+
+// better-auth
+export const {
+    signUp,
+    signIn,
+    signOut: _signOut,
+    getSession,
+    sendVerificationEmail,
+    requestPasswordReset,
+    resetPassword,
+    phoneNumber,
+    deleteUser,
+} = betterAuthClient;
+
+// rename to logOut because firebase has reserved signOut
+export const logout = async (...args) => {
+    const authToken = window.sessionStorage.getItem('authToken');
+    if (authToken) {
+        window.sessionStorage.removeItem('authToken');
+    }
+    // at the end because it can trigger navigation
+    await _signOut(...args);
+};
+
+// firebase auth
+export const getAuth = () => postbaseAuthClient;
+export const { getBetterAuthToken } = postbaseAuthClient;
+
+export const {
+    createUserWithEmailAndPassword,
+    sendEmailVerification,
+    sendPasswordResetEmail,
+    signInWithEmailAndPassword,
+    updateProfile,
+    updateEmail,
+    updatePassword,
+    onAuthStateChanged,
+    signOut,
+} = createFirebaseAuthClient(postbaseAuthClient);

package/frontend/src/components/AuthPanel.jsx

@@ -0,0 +1,85 @@
+import { useState } from 'preact/hooks';
+import { signUp, signIn, signOut } from '../auth';
+
+export default function AuthPanel({ user }) {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    const loginWithGoogle = async () => {
+        alert("Finish setting up Sign in with Google. Learn more at https://www.better-auth.com/docs/authentication/google")
+        await signIn.social({
+            provider: "google",
+            callbackURL: import.meta.env.VITE_FRONTEND_URL + '/dashboard'
+        });
+    };
+
+    return (
+        <div className="bg-white border rounded-lg p-4">
+            <h3 className="font-semibold">Account</h3>
+            {!user ? (
+                <div className="mt-3 space-y-3">
+                    <button onClick={loginWithGoogle} className="w-full bg-red-600 text-white py-2 rounded">Sign in with Google</button>
+
+                    <div className="flex gap-2">
+                        <input className="flex-1 border p-2 rounded w-full" type="text" placeholder="email" value={email} onInput={e => setEmail(e.target.value)} />
+                        <input className="flex-1 border p-2 rounded w-full" type="password" placeholder="password" value={password} onInput={e => setPassword(e.target.value)} />
+                    </div>
+
+                    <div className="flex gap-2">
+                        <button className="px-3 py-2 border rounded"
+                            onClick={async () => {
+                                alert("Setup PostgreSQL (migration, connection string). Learn more at https://www.better-auth.com/docs/installation#create-database-tables");
+                                await signUp.email(
+                                    { email, password, name: email.split('@', 1)[0], callbackURL: "/dashboard" },
+                                    {
+                                        onRequest: (ctx) => {
+                                            //show loading
+                                        },
+                                        onSuccess: (ctx) => {
+                                            //redirect to the dashboard or sign in page
+                                            window.location = import.meta.env.VITE_FRONTEND_URL;
+                                        },
+                                        onError: (ctx) => {
+                                            // display the error message
+                                            console.error('Sign up failed', ctx);
+                                            alert('Sign up failed');
+                                        },
+                                    });
+                            }}>
+                            Sign up
+                        </button>
+                        <button className="px-3 py-2 border rounded"
+                            onClick={async () => {
+                                alert("Setup PostgreSQL (migration, connection string). Learn more at https://www.better-auth.com/docs/installation#create-database-tables");
+                                await signIn.email({ email, password, callbackURL: '/dashboard' });
+                            }}>
+                            Login
+                        </button>
+                    </div>
+                </div>
+            ) : (
+                <div className="mt-3">
+                    <div className="flex items-center gap-3">
+                        <img src={user.image} className="w-10 h-10 rounded-full" />
+                        <div>
+                            <div className="font-medium">{user.name || user.email}</div>
+                            <div className="text-sm text-gray-500">{user.email}</div>
+                        </div>
+                    </div>
+
+                    <div className="mt-3 flex gap-2">
+                        <a href="/dashboard" className="px-3 py-2 border rounded">Dashboard</a>
+                        <a href="/billing" className="px-3 py-2 border rounded">Billing</a>
+                        <button onClick={() => signOut({
+                            fetchOptions: {
+                                onSuccess: () => {
+                                    location.href = import.meta.env.VITE_FRONTEND_URL;
+                                },
+                            },
+                        })} className="px-3 py-2 border rounded cursor-pointer">Logout</button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/frontend/src/components/Header.jsx

@@ -0,0 +1,54 @@
+import { useState, useEffect } from 'preact/hooks';
+import { signOut } from '../auth';
+
+export default function Header({ user }) {
+    const [menu, setMenu] = useState(false);
+    const [scrolled, setScrolled] = useState(false);
+
+    useEffect(() => {
+        const onScroll = () => setScrolled(window.scrollY > 30);
+        window.addEventListener('scroll', onScroll);
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+
+    return (
+        <header className={`w-full z-40 transition-all ${scrolled ? 'bg-white shadow' : 'bg-transparent'} backdrop-blur`}>
+            <div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
+                <a href="/" className="text-2xl font-extrabold text-blue-600">Postbase Demo</a>
+                <nav className="hidden md:flex gap-8 text-sm font-medium">
+                    <a href="#better-auth" className="hover:text-blue-600">BetterAuth</a>
+                    <a href="#familiar-api" className="hover:text-blue-600">Familiar API</a>
+                    <a href="#why" className="hover:text-blue-600">Why Postbase?</a>
+                </nav>
+
+                <div className="flex items-center gap-4">
+                    {user ? (
+                        <div className="relative">
+                            <button onClick={() => setMenu(!menu)} className="flex items-center gap-2 px-3 py-1 border rounded-md hover:bg-gray-50">
+                                <img src={user.image} className="w-8 h-8 rounded-full" alt="profile" />
+                                <span className="hidden sm:inline text-sm">{user.name || user.email}</span>
+                            </button>
+                            {menu && (
+                                <div className="absolute right-0 mt-2 bg-white border rounded-md shadow-lg w-48 z-50">
+                                    <a href="/dashboard" className="block px-4 py-2 hover:bg-gray-50">Dashboard</a>
+                                    <a href="/billing" className="block px-4 py-2 hover:bg-gray-50">Billing</a>
+                                    <button onClick={() => signOut({
+                                        fetchOptions: {
+                                            onSuccess: () => {
+                                                location.href = import.meta.env.VITE_FRONTEND_URL;
+                                            },
+                                        },
+                                    })} className="w-full text-left px-4 py-2 hover:bg-gray-50 cursor-pointer">Logout</button>
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <a href="/login" className="bg-blue-600 text-white px-4 py-2 rounded-md font-medium hover:bg-blue-700 transition">
+                            Sign In
+                        </a>
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+}

package/frontend/src/main.jsx

@@ -0,0 +1,5 @@
+import { render } from 'preact';
+import App from './App';
+import './styles.css';
+
+render(<App />, document.getElementById('app'));

package/frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,24 @@
+import { betterAuthClient } from '../auth';
+
+export default function Dashboard({ user }) {
+    if (!user) {
+        return (
+            <div className="container mx-auto py-10 text-center">
+                <p className="text-gray-600">Please sign in to view your dashboard.</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="container mx-auto py-10">
+            <h1 className="text-2xl font-semibold mb-6">Dashboard</h1>
+            <div className="mt-2">
+                <button className="w-full bg-red-600 text-white py-2 rounded cursor-pointer"
+                    onClick={async e => {
+                        await betterAuthClient.deleteUser();
+                        location.href = '/';
+                    }}>Close Account</button>
+            </div>
+        </div>
+    );
+}

package/frontend/src/pages/Home.jsx

@@ -0,0 +1,178 @@
+import AuthPanel from '../components/AuthPanel';
+
+export default function Home({ user }) {
+    return (
+        <main className="text-gray-800">
+            {/* HERO */}
+            <section className="bg-gradient-to-br from-blue-50 to-white pt-24 pb-32">
+                <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-10">
+                    <div>
+                        <h1 className="text-5xl font-extrabold leading-tight text-gray-900">
+                            Backend ❤️<br />
+                            <span className="text-blue-600">that just works.</span>
+                        </h1>
+                        <p className="mt-5 text-lg text-gray-600 max-w-lg">
+                            Self Hosted Firebase/Supabase Alternative using Node.js, Express.js, BetterAuth and PostgreSQL (JSONB)
+                        </p>
+                        <p className="mt-6 text-2xl">
+                            Firebase 💔 | Supabase 💔 | Postbase ❤️
+                        </p>
+
+                        <div className="mt-8 flex gap-4">
+                            <a href="/login" className="bg-blue-600 text-white px-6 py-3 rounded-md font-medium shadow hover:bg-blue-700 transition">Login with BetterAuth</a>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-2 relative">
+                        <div className="bg-gray-900 text-green-400 font-mono text-sm rounded-lg shadow-lg p-6 overflow-x-auto">
+                            <code className="block whitespace-pre w-xs md:w-xl lg:w-4xl text-xs text-nowrap overflow-x-auto">{
+                                `import { initializeApp } from "../lib/postbase/compat/firebase/app";
+import { getFirestore } from "../lib/postbase/compat/firebase/firestore/lite";
+import { getStorage } from "../lib/postbase/compat/firebase/storage";
+import { getDatabase } from "../lib/postbase/compat/firebase/database";
+
+const firebaseConfig = {
+    baseUrl: import.meta.env.VITE_API_BASE,
+};
+
+const app = initializeApp(firebaseConfig);
+
+export const db = getFirestore(app);
+export const storage = getStorage(app);
+export const rtdbClient = getDatabase(app);`
+                            }</code>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section id="better-auth" className="bg-gradient-to-br from-blue-50 to-white pt-24 pb-32">
+                <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-10">
+                    <div>
+                        <h1 className="text-5xl font-extrabold leading-tight text-gray-900">
+                            BetterAuth
+                        </h1>
+                        <p className="mt-5 text-lg text-gray-600 max-w-lg">
+                            Did not reinvent the wheel
+                        </p>
+
+                        <div className="mt-8 flex gap-4">
+                        </div>
+                    </div>
+
+                    <div className="relative">
+                        <div className="bg-gray-900 text-green-400 font-mono text-sm rounded-lg shadow-lg p-6 overflow-x-auto">
+                            <code className="block whitespace-pre w-xs md:w-xl lg:w-4xl text-xs text-nowrap overflow-x-scroll">{
+                                `import { 
+    getAuth,
+    signInWithEmailAndPassword,
+    signOut,
+} from "./auth";
+
+const auth = getAuth();
+
+const userCredential = await signInWithEmailAndPassword(auth, 'email', 'password');
+
+await signOut(auth);`
+                            }</code>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section id="familiar-api" className="bg-gradient-to-br from-blue-50 to-white pt-24 pb-32">
+                <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-10">
+                    <div>
+                        <h1 className="text-5xl font-extrabold leading-tight text-gray-900">
+                            Familiar API
+                        </h1>
+                        <p className="mt-5 text-lg text-gray-600 max-w-lg">
+                            Inspired by Firebase's API
+                        </p>
+
+                        <div className="mt-8 flex gap-4">
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col gap-2 relative">
+                        <div className="bg-gray-900 text-green-400 font-mono text-sm rounded-lg shadow-lg p-6">
+                            <code className="block whitespace-pre w-xs md:w-xl lg:w-4xl text-xs text-nowrap overflow-x-scroll">{
+                                `import { db } from "./postbase";
+
+await db.collection('users').addDoc({ name: "Umair" });
+
+await db.collection('users').where('name', '==', 'Umair');
+
+await db.collection('users').doc('docId').get();
+`
+                            }</code>
+                        </div>
+                        <div className="bg-gray-900 text-green-400 font-mono text-sm rounded-lg shadow-lg p-6 overflow-x-auto">
+                            <pre>
+                                <code className="block whitespace-pre w-xs md:w-xl lg:w-4xl text-xs text-nowrap overflow-x-scroll">{
+                                    `import { storage } from "./postbase";
+
+const profilePicFile = new File(...); // HTMLFileInput
+
+const fileRef = storage.ref('path/to/directory/' + profilePicFile.name);
+
+const remoteFile = await fileRef.put(profilePicFile);
+
+const profileUrl = await remoteFile.ref.getDownloadURL();`
+                                }</code>
+                            </pre>
+                        </div>
+                        <div className="bg-gray-900 text-green-400 font-mono text-sm rounded-lg shadow-lg p-6 overflow-x-auto">
+                            <code className="block whitespace-pre w-xs md:w-xl lg:w-4xl text-xs text-nowrap overflow-x-scroll">{
+                                `import { rtdbClient } from '../postbase';
+
+// please check frontend/lib/postbase/tests/rtdb.client.test.js
+`
+                            }</code>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            {/* FEATURES */}
+            <section id="why" className="bg-white py-24">
+                <div className="max-w-6xl mx-auto px-6 text-center">
+                    <h2 className="text-3xl font-bold mb-12 text-gray-900">Why Postbase?</h2>
+                    <div className="grid md:grid-cols-3 gap-10">
+                        {[
+                            {
+                                title: "Self Hosted",
+                                desc: "Based on mostly open source easily installable projects",
+                                icon: "🧩"
+                            },
+                            {
+                                title: "Cost Effective",
+                                desc: "Avoid surprise cloud charges",
+                                icon: "💳"
+                            },
+                            {
+                                title: "Scalable",
+                                desc: "Scale to millions of requests per day — no rate limits on your growth.",
+                                icon: "⚡"
+                            },
+
+                        ].map(f => (
+                            <div key={f.title} className="bg-gray-50 border rounded-lg p-8 shadow-sm hover:shadow transition">
+                                <div className="text-4xl mb-3">{f.icon}</div>
+                                <h3 className="text-xl font-semibold mb-2">{f.title}</h3>
+                                <p className="text-gray-600">{f.desc}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            </section>
+
+            {/* AUTH (optional section near footer) */}
+            <section className="bg-gray-50 py-16">
+                <div className="max-w-lg mx-auto px-6">
+                    <AuthPanel user={user} />
+                </div>
+            </section>
+        </main>
+    );
+}

package/frontend/src/pages/Login.jsx

@@ -0,0 +1,10 @@
+import { h } from 'preact';
+import AuthPanel from '../components/AuthPanel';
+
+export default function Login({ user }) {
+    return (
+        <div className="container mx-auto py-10">
+            <AuthPanel user={user} />
+        </div>
+    );
+}

package/frontend/src/postbase.js

@@ -0,0 +1,14 @@
+import { initializeApp } from "../lib/postbase/compat/firebase/app";
+import { getFirestore } from "../lib/postbase/compat/firebase/firestore/lite";
+import { getStorage } from "../lib/postbase/compat/firebase/storage";
+import { getDatabase } from "../lib/postbase/compat/firebase/database";
+
+const firebaseConfig = {
+    baseUrl: import.meta.env.VITE_API_BASE,
+};
+
+const app = initializeApp(firebaseConfig);
+
+export const db = getFirestore(app);
+export const storage = getStorage(app);
+export const rtdbClient = getDatabase(app);

package/frontend/src/styles.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/frontend/tailwind.config.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+    content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Inter', 'system-ui', 'sans-serif']
+            },
+        }
+    },
+    plugins: []
+};

package/frontend/template.env

@@ -0,0 +1,2 @@
+VITE_API_BASE=http://localhost:8081/api
+VITE_FRONTEND_URL=http://localhost:8080

package/frontend/vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig, transformWithEsbuild } from 'vite';
+import preact from '@preact/preset-vite';
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+    plugins: [
+        preact({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
+        tailwindcss(),
+    ],
+    optimizeDeps: {
+        exclude: [],
+        esbuildOptions: {
+            loader: {
+                '.js': 'jsx',
+            },
+        },
+    },
+});

package/git/hooks/README.md

@@ -0,0 +1,31 @@
+# Git Hooks
+
+## post-receive hook
+
+The purpose of this hook is to automate deployment of your app with `git push`.
+
+## How to enable post-receive hook on your server?
+
+1. Login to your ssh server
+2. mkdir /path/to/your/app/repo
+3. cd /path/to/your/app/repo
+4. git init
+
+Locally, in your dev environment:
+
+```
+git remote add deploy server_username@your_server:/your/server/your_repo
+git push deploy
+```
+
+Back to ssh server:
+
+```
+ln -s `pwd`/git/hooks/post-receive `pwd`/.git/hooks/post-receive
+```
+
+Allow post-receive hook to copy over files.
+
+```
+sudo chown -R you_username:root /var/www/html
+```

package/git/hooks/post-receive

@@ -0,0 +1,26 @@
+#!/bin/sh
+
+set -x
+
+GIT_WORK_TREE="/your/server/your_repo"
+export GIT_WORK_TREE
+
+# This is needed for git push based deploy
+git reset --hard
+
+cd $GIT_WORK_TREE
+git checkout .
+
+cd backend
+npm install
+
+cd ../frontend
+npm install
+npm run build
+
+cd ../admin
+npm install
+npm run build
+
+rsync -avh /your/server/your_repo/frontend/dist/ /var/www/html/your_website
+rsync -avh /your/server/your_repo/admin/dist/ /var/www/html/your_website/admin