Remove service-account.json from repository and add to .gitignore

Author: t1c1

.firebaserc

@@ -1,5 +1,14 @@
 {
   "projects": {
     "default": "botcodes-1cdc0"
+  },
+  "targets": {
+    "botcodes-1cdc0": {
+      "hosting": {
+        "web": [
+          "onlook"
+        ]
+      }
+    }
   }
 }

.gitignore

@@ -43,4 +43,7 @@ yarn.lock
 .env.test.local
 .env.production.local
 
-mise.toml
+mise.toml
+
+# Ignore Google Cloud credentials
+service-account.json

apps/web/client/.env.example

@@ -1,5 +1,13 @@
 # ------------- Required Keys -------------
 
+# Firebase - Enables our backend such as database and auth
+NEXT_PUBLIC_FIREBASE_API_KEY="<Your Firebase API Key>"
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="<Your Firebase Auth Domain>"
+NEXT_PUBLIC_FIREBASE_PROJECT_ID="<Your Firebase Project ID>"
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="<Your Firebase Storage Bucket>"
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="<Your Firebase Messaging Sender ID>"
+NEXT_PUBLIC_FIREBASE_APP_ID="<Your Firebase App ID>"
+
 # Supabase - Enables our backend such as database and auth
 NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
 NEXT_PUBLIC_SUPABASE_ANON_KEY="<Fill in from content after running supabase start>"

apps/web/client/package.json

@@ -93,7 +93,12 @@
         "use-resize-observer": "^9.1.0",
         "uuid": "^11.1.0",
         "webfontloader": "^1.6.28",
-        "zod": "^3.24.3"
+        "zod": "^3.24.3",
+        "firebase": "^10.12.2",
+        "@hookform/resolvers": "^3.9.0",
+        "cmdk": "^1.0.0",
+        "geist": "^1.3.1",
+        "i18next": "^23.12.2"
     },
     "devDependencies": {
         "@types/culori": "^4.0.0",

apps/web/client/src/app/_components/hero/index.tsx

@@ -23,9 +23,9 @@ export function Hero() {
                     transition={{ duration: 0.6, ease: "easeOut" }}
                     style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
                 >
-                    Make your<br />
-                    <span className="font-light">designs </span>
-                    <span className={`italic font-normal ${vujahdayScript.className} text-[4.75rem] ml-1 leading-[1.0]`}>real</span>
+                    Analyze your<br />
+                    <span className="font-light">golf </span>
+                    <span className={`italic font-normal ${vujahdayScript.className} text-[4.75rem] ml-1 leading-[1.0]`}>swing</span>
                 </motion.h1>
                 <motion.p
                     className="text-lg text-foreground-secondary max-w-xl text-center mt-2"
@@ -34,9 +34,9 @@ export function Hero() {
                     transition={{ duration: 0.6, delay: 0.15, ease: "easeOut" }}
                     style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
                 >
-                    Onlook is a next-generation visual code editor<br />
+                    botcodes.com is a next-generation visual code editor<br />
                     that lets designers and product managers craft<br />
-                    web experiences with AI
+                    web experiences with AI, powered by Onlook
                 </motion.p>
                 <HighDemand isMounted={isMounted} />
                 <CreateError />
@@ -59,11 +59,11 @@ export function Hero() {
                     transition={{ duration: 0.6, delay: 0.45, ease: "easeOut" }}
                     style={{ willChange: "opacity, filter", transform: "translateZ(0)" }}
                 >
-                    No Credit Card Required &bull; Get a Site in Seconds
+                    No Credit Card Required • Get an Analysis in Seconds
                 </motion.div>
             </div>
             <div className="sm:hidden text-balance flex flex-col gap-4 items-center relative z-20 px-10">
-                Onlook isn’t ready for Mobile – Please open on a larger screen
+                botcodes.com isn't ready for Mobile – Please open on a larger screen
             </div>
         </div>
     );

apps/web/client/src/app/_components/landing-page/contributor-section.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useMediaQuery } from '@onlook/ui/hooks';
 import { Icons } from '@onlook/ui/icons/index';
 import React, { useEffect, useState } from 'react';
 
@@ -11,20 +12,10 @@ interface Contributor {
 
 // Floating Circles: two concentric rings
 const FloatingRings = () => {
-    const [isMd, setIsMd] = React.useState(
-        typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : false
-    );
+    const isMd = useMediaQuery('(min-width: 768px)');
     const [contributors, setContributors] = useState<Contributor[]>([]);
     const [isLoading, setIsLoading] = useState(true);
 
-    React.useEffect(() => {
-        const media = window.matchMedia('(min-width: 768px)');
-        const listener = () => setIsMd(media.matches);
-        media.addEventListener('change', listener);
-        setIsMd(media.matches);
-        return () => media.removeEventListener('change', listener);
-    }, []);
-
     useEffect(() => {
         const fetchContributors = async () => {
             try {
@@ -74,10 +65,10 @@ const FloatingRings = () => {
                             key={`inner-${i}`}
                             className="absolute rounded-full bg-white/20 border border-foreground-primary/40 border-[0.5px] shadow-lg overflow-hidden"
                             style={{
-                                width: 56,
-                                height: 56,
-                                left: x - 28,
-                                top: y - 28,
+                                width: '56px',
+                                height: '56px',
+                                left: `${x - 28}px`,
+                                top: `${y - 28}px`,
                                 animation: 'counter-spin 280s linear infinite',
                                 transformOrigin: 'center center'
                             }}
@@ -107,10 +98,10 @@ const FloatingRings = () => {
                             key={`outer-${i}`}
                             className="absolute rounded-full bg-white/20 border border-foreground-primary/40 border-[0.5px] shadow-lg overflow-hidden"
                             style={{
-                                width: 56,
-                                height: 56,
-                                left: x - 28,
-                                top: y - 28,
+                                width: '56px',
+                                height: '56px',
+                                left: `${x - 28}px`,
+                                top: `${y - 28}px`,
                                 animation: 'counter-spin-reverse 290s linear infinite',
                                 transformOrigin: 'center center'
                             }}
@@ -207,16 +198,19 @@ export function ContributorSection({
                     }
                 `}</style>
                 <h2 className="text-foreground-primary text-3xl md:text-4xl font-light text-center mb-2">
-                    Supported by You &<br />
-                    {isLoading ? '...' : starCount} other builders
+                    Powered by Onlook
                 </h2>
-                <p className="text-foreground-secondary text-regular text-center mb-8 max-w-xl">Join our mission and be a part of changing<br />the way people craft software</p>
+                <p className="text-foreground-secondary text-regular text-center mb-8 max-w-xl">
+                    Join our mission and be a part of changing
+                    <br />
+                    the way people craft software
+                </p>
                 <div className="flex gap-4 flex-col md:flex-row w-full justify-center items-center">
                     <button
                         onClick={() => window.open(githubLink, '_blank')}
                         className="bg-foreground-primary text-background-primary text-regularPlus rounded-lg px-6 py-3 flex items-center gap-2 shadow hover:bg-foreground-primary/80 transition cursor-pointer"
                     >
-                        Contribute to Onlook
+                        Contribute to Botcodes
                         <Icons.GitHubLogo className="w-4.5 h-4.5" />
                     </button>
                     <button

apps/web/client/src/app/login/actions.tsx

@@ -3,6 +3,7 @@
 import {
   getRedirectResult,
   GoogleAuthProvider,
+  GithubAuthProvider,
   signInWithEmailAndPassword,
   signInWithRedirect,
 } from 'firebase/auth';
@@ -16,16 +17,19 @@ import { Routes } from '@/utils/constants';
 
 export async function login(provider: SignInMethod) {
   const origin = (await headers()).get('origin');
-  const googleProvider = new GoogleAuthProvider();
-
-  // We can add more providers here based on the `provider` argument
+  
+  let authProvider;
   switch (provider) {
     case 'google':
-      await signInWithRedirect(auth, googleProvider);
+      authProvider = new GoogleAuthProvider();
+      break;
+    case 'github':
+      authProvider = new GithubAuthProvider();
       break;
     default:
       throw new Error(`Provider ${provider} not supported`);
   }
+  await signInWithRedirect(auth, authProvider);
 }
 
 export async function handleRedirect() {

apps/web/client/src/lib/firebase.ts

@@ -0,0 +1,19 @@
+import { initializeApp, getApps, getApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+};
+
+// Initialize Firebase
+const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
+const auth = getAuth(app);
+const firestore = getFirestore(app);
+
+export { app, auth, firestore };