demo v1, migrating API

Author: Hyteq

apps/api2/.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

apps/api2/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "api2",
+  "module": "index.ts",
+  "type": "module",
+  "private": true,
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "elysia": "^1.3.5"
+  }
+}

apps/api2/src/index.ts

@@ -0,0 +1,9 @@
+import { Elysia } from "elysia";
+
+const app = new Elysia();
+
+app.get('/', () => {
+  return 'Hello World';
+});
+
+app.listen(3000);

apps/api2/src/services/domains.service.ts

@@ -0,0 +1,46 @@
+import { cacheable } from "@/packages/redis";
+import { CreateDomainType } from "../types";
+import { db, eq, domains, SQL } from "@/packages/db";
+
+const getCachedDomain = async (whereClause: SQL<unknown>) => {
+	return cacheable(
+		async () => {
+			return await db.query.domains.findFirst({ where: whereClause });
+		},
+		{
+			expireInSec: 60 * 60 * 24, // 24 hours
+			staleWhileRevalidate: true,
+		},
+	)();
+};
+
+export async function createDomain(domain: CreateDomainType) {
+  const newDomain = await db.insert(domains).values(domain).returning();
+  return newDomain;
+}
+
+export async function getDomain(id: string, cache: boolean = true) {
+  const where = eq(domains.id, id);
+  if (cache) {
+    return getCachedDomain(where);
+  }
+  return await db.query.domains.findFirst({ where });
+}
+
+export async function getDomainByDomain(domain: string, cache: boolean = true) {
+    const where = eq(domains.name, domain);
+    if (cache) {
+        return getCachedDomain(where);
+    }
+    return await db.query.domains.findFirst({ where });
+}
+
+export async function deleteDomain(id: string) {
+  const deletedDomain = await db.delete(domains).where(eq(domains.id, id)).returning();
+  return deletedDomain;
+}
+
+export async function updateDomain(id: string, domain: Partial<CreateDomainType>) {
+  const updatedDomain = await db.update(domains).set(domain).where(eq(domains.id, id)).returning();
+  return updatedDomain;
+} 

apps/api2/src/services/index.ts

@@ -0,0 +1,2 @@
+export * from './websites.service';
+export * from './domains.service'; 

apps/api2/src/services/websites.service.ts

@@ -0,0 +1,56 @@
+import { cacheable } from "@/packages/redis";
+import { CreateWebsiteType } from "../types";
+import { db, eq, websites, SQL } from "@/packages/db";
+
+const getCachedWebsite = async (whereClause: SQL<unknown>) => {
+  return cacheable(
+    async () => {
+      return await db.query.websites.findFirst({ where: whereClause });
+    },
+    {
+      expireInSec: 60 * 60 * 24, // 24 hours
+      staleWhileRevalidate: true,
+    },
+  )();
+};
+
+export async function createWebsite(website: CreateWebsiteType) {
+  const newWebsite = await db.insert(websites).values(website).returning();
+  return newWebsite;
+}
+
+export async function getWebsite(id: string, cache: boolean = true) {
+  const where = eq(websites.id, id);
+  if (cache) {
+    return getCachedWebsite(where);
+  }
+  return await db.query.websites.findFirst({ where });
+}
+
+export async function getWebsiteByDomain(domain: string, cache: boolean = true) {
+  const where = eq(websites.domain, domain);
+  if (cache) {
+    return getCachedWebsite(where);
+  }
+  return await db.query.websites.findFirst({ where });
+}
+
+export async function deleteWebsite(id: string) {
+  const deletedWebsite = await db
+    .delete(websites)
+    .where(eq(websites.id, id))
+    .returning();
+  return deletedWebsite;
+}
+
+export async function updateWebsite(
+  id: string,
+  website: Partial<CreateWebsiteType>,
+) {
+  const updatedWebsite = await db
+    .update(websites)
+    .set(website)
+    .where(eq(websites.id, id))
+    .returning();
+  return updatedWebsite;
+}

apps/api2/src/types/index.ts

@@ -0,0 +1,16 @@
+import { websites, user, domains, projects, organization } from "@databuddy/db";
+
+export type WebsiteType = typeof websites.$inferSelect;
+export type CreateWebsiteType = typeof websites.$inferInsert;
+
+export type UserType = typeof user.$inferSelect;
+export type CreateUserType = typeof user.$inferInsert;
+
+export type DomainType = typeof domains.$inferSelect;
+export type CreateDomainType = typeof domains.$inferInsert;
+
+export type ProjectType = typeof projects.$inferSelect;
+export type CreateProjectType = typeof projects.$inferInsert;
+
+export type OrganizationType = typeof organization.$inferSelect;
+export type CreateOrganizationType = typeof organization.$inferInsert;

apps/api2/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}

apps/dashboard/app/demo/[id]/_components/layout/demo-sidebar.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { GlobeIcon, XIcon, HouseIcon, ClockIcon, UsersIcon, MapPinIcon, ListIcon, InfoIcon, GitBranchIcon, BugIcon, FunnelIcon } from "@phosphor-icons/react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+import { Logo } from "@/components/layout/logo";
+import { ThemeToggle } from "@/components/layout/theme-toggle";
+import { UserMenu } from "@/components/layout/user-menu";
+import { NotificationsPopover } from "@/components/notifications/notifications-popover";
+
+const demoNavigation = [
+    {
+        title: "Analytics",
+        items: [
+            { name: "Overview", icon: HouseIcon, href: "/demo/OXmNQsViBT-FOS_wZCTHc", highlight: true },
+            { name: "Sessions", icon: ClockIcon, href: "/demo/OXmNQsViBT-FOS_wZCTHc/sessions", highlight: true },
+            { name: "Funnels", icon: FunnelIcon, href: "/demo/OXmNQsViBT-FOS_wZCTHc/funnels", highlight: true },
+            { name: "Journeys", icon: GitBranchIcon, href: "/demo/OXmNQsViBT-FOS_wZCTHc/journeys", highlight: true },
+            { name: "Errors", icon: BugIcon, href: "/demo/OXmNQsViBT-FOS_wZCTHc/errors", highlight: true },
+            { name: "Profiles", icon: UsersIcon, href: "/demo/OXmNQsViBT-FOS_wZCTHc/profiles", highlight: true },
+            { name: "Map", icon: MapPinIcon, href: "/demo/OXmNQsViBT-FOS_wZCTHc/map", highlight: true },
+        ],
+    }
+];
+
+
+export function Sidebar() {
+    const pathname = usePathname();
+    const [isMobileOpen, setIsMobileOpen] = useState(false);
+
+    const closeSidebar = useCallback(() => {
+        setIsMobileOpen(false);
+    }, []);
+
+    // Handle keyboard navigation
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === 'Escape' && isMobileOpen) {
+                closeSidebar();
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isMobileOpen, closeSidebar]);
+
+    return (
+        <>
+            {/* Top Header */}
+            <header className="fixed top-0 left-0 right-0 z-50 w-full h-16 border-b bg-background/95 backdrop-blur-md">
+                <div className="flex items-center h-full px-4 md:px-6">
+                    {/* Left side: Logo + Mobile menu */}
+                    <div className="flex items-center gap-4">
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="md:hidden"
+                            onClick={() => setIsMobileOpen(true)}
+                        >
+                            <ListIcon size={32} weight="duotone" className="h-5 w-5" />
+                            <span className="sr-only">Toggle menu</span>
+                        </Button>
+
+                        <div className="flex items-center gap-3">
+                            <div className="flex flex-row items-center gap-3">
+                                <Logo />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Right Side - User Controls */}
+                    <div className="flex items-center gap-2 ml-auto">
+                        <ThemeToggle />
+
+                        {/* Help */}
+                        <Button
+                            variant="ghost"
+                            size="icon"
+                            className="hidden md:flex h-8 w-8"
+                        >
+                            <InfoIcon size={32} weight="duotone" className="h-6 w-6" />
+                            <span className="sr-only">Help</span>
+                        </Button>
+
+                        {/* Notifications */}
+                        <NotificationsPopover />
+
+                        {/* User Menu */}
+                        <UserMenu />
+                    </div>
+                </div>
+            </header>
+
+            {/* Mobile backdrop */}
+            {isMobileOpen && (
+                <div
+                    className="fixed inset-0 bg-black/20 z-30 md:hidden"
+                    onClick={closeSidebar}
+                />
+            )}
+
+            {/* Sidebar */}
+            <div
+                className={cn(
+                    "fixed inset-y-0 left-0 z-40 w-64 bg-background",
+                    "border-r transition-transform duration-200 ease-out md:translate-x-0 pt-16",
+                    isMobileOpen ? "translate-x-0" : "-translate-x-full"
+                )}
+            >
+                {/* Mobile close button */}
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="absolute top-3 right-3 z-50 md:hidden h-8 w-8 p-0"
+                    onClick={closeSidebar}
+                >
+                    <XIcon size={32} weight="duotone" className="h-4 w-4" />
+                    <span className="sr-only">Close sidebar</span>
+                </Button>
+
+                <ScrollArea className="h-[calc(100vh-4rem)]">
+                    <div className="p-3 space-y-4">
+                        {/* Demo Website Header */}
+                        <div className="flex items-center gap-3 p-3 bg-muted/50 rounded border">
+                            <div className="p-2 rounded bg-primary/10 border border-primary/20">
+                                <GlobeIcon size={32} weight="duotone" className="h-5 w-5 text-primary" />
+                            </div>
+                            <div className="min-w-0 flex-1">
+                                <h2 className="font-semibold text-sm truncate">Landing Page</h2>
+                                <Link href="https://www.databuddy.cc" target="_blank" className="text-xs text-muted-foreground truncate">www.databuddy.cc</Link>
+                            </div>
+                        </div>
+
+                        {/* Demo Navigation */}
+                        {demoNavigation.map((section) => (
+                            <div key={section.title}>
+                                <h3 className="px-2 mb-2 text-xs font-semibold text-muted-foreground tracking-wider uppercase">
+                                    {section.title}
+                                </h3>
+                                <div className="space-y-1 ml-1">
+                                    {section.items.map((item) => {
+                                        const isActive = pathname === item.href;
+                                        const Icon = item.icon;
+
+                                        return (
+                                            <Link
+                                                key={item.name}
+                                                href={item.href}
+                                                className={cn(
+                                                    "flex items-center gap-3 px-3 py-2 text-sm rounded transition-all cursor-pointer",
+                                                    isActive
+                                                        ? "bg-primary/15 text-primary font-medium"
+                                                        : "text-foreground hover:bg-accent/70"
+                                                )}
+                                            >
+                                                <Icon size={32} weight="duotone" className={cn("h-4 w-4", isActive && "text-primary")} />
+                                                <span className="truncate">{item.name}</span>
+                                            </Link>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </ScrollArea>
+            </div>
+        </>
+    );
+}