I'll create a comprehensive journaling web app for couples using Next.js with all the requested features. Here's the initial setup: /** @type {import('next').NextConfig} */ const nextConfig = { experimental: { serverActions: true, }, } module.exports = nextConfig { "name": "couples-journal", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@radix-ui/react-dropdown-menu": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-toggle": "^1.0.3", "autoprefixer": "^10.4.16", "better-sqlite3": "^8.6.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", "cookie": "^0.5.0", "lucide-react": "^0.274.0", "next": "^14.0.3", "next-themes": "^0.2.1", "postcss": "^8.4.31", "react": "^18.2.0", "react-dom": "^18.2.0", "tailwind-merge": "^1.14.0", "tailwindcss": "^3.3.3", "tailwindcss-animate": "^1.0.6", "zod": "^3.22.4" }, "devDependencies": { "@types/better-sqlite3": "^7.6.4", "@types/cookie": "^0.5.1", "@types/node": "^20.10.3", "@types/react": "^18.2.41", "@types/react-dom": "^18.2.18", "eslint": "^8.55.0", "eslint-config-next": "14.0.3", "typescript": "^5.3.2" } } import { Inter } from "next/font/google"; import "./globals.css"; import { ThemeProvider } from "@/components/theme-provider"; import { Toaster } from "@/components/ui/toaster"; const inter = Inter({ subsets: ["latin"] }); export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } @tailwind base; @tailwind components; @tailwind utilities; :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 346.8 77.2% 49.8%; --primary-foreground: 355.7 100% 97.3%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 346.8 77.2% 49.8%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 346.8 77.2% 49.8%; --primary-foreground: 355.7 100% 97.3%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 346.8 77.2% 49.8%; } .spiderman { --background: 0 0% 0%; --foreground: 0 100% 50%; --card: 0 0% 0%; --card-foreground: 0 100% 50%; --popover: 0 0% 0%; --popover-foreground: 0 100% 50%; --primary: 0 100% 50%; --primary-foreground: 0 0% 100%; --secondary: 0 0% 20%; --secondary-foreground: 0 100% 50%; --muted: 0 0% 20%; --muted-foreground: 0 100% 50%; --accent: 0 0% 20%; --accent-foreground: 0 100% 50%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 100% 50%; --border: 0 0% 20%; --input: 0 0% 20%; --ring: 0 100% 50%; } * { @apply border-border; } body { @apply bg-background text-foreground; } import { redirect } from "next/navigation"; import { cookies } from "next/headers"; import { Button } from "@/components/ui/button"; import Link from "next/link"; export default function Home() { const cookieStore = cookies(); const isLoggedIn = cookieStore.has("couples-journal-token"); if (isLoggedIn) { redirect("/journal"); } return (

Couples Journal

A private space for couples to document their journey together.

); } "use client"; import * as React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import { type ThemeProviderProps } from "next-themes/dist/types"; export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children}; } import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button"; return ( ); } ); Button.displayName = "Button"; export { Button, buttonVariants }; "use client"; import * as React from "react"; import { Toast, ToastProvider, ToastViewport } from "@/components/ui/toast"; import { useToast } from "@/components/ui/use-toast"; export function Toaster() { const { toasts } = useToast(); return ( {toasts.map(function ({ id, ...props }) { return ; })} ); } import Database from "better-sqlite3"; const db = new Database("journals.db"); db.exec(` CREATE TABLE IF NOT EXISTS users ( id INTEGER PRIMARY KEY AUTOINCREMENT, email TEXT UNIQUE NOT NULL, password TEXT NOT NULL, name TEXT NOT NULL, partner_name TEXT NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE IF NOT EXISTS journals ( id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER NOT NULL, title TEXT NOT NULL, content TEXT NOT NULL, mood TEXT, tags TEXT, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, updated_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users (id) ); CREATE TABLE IF NOT EXISTS shared_journals ( id INTEGER PRIMARY KEY AUTOINCREMENT, journal_id INTEGER NOT NULL, sender_id INTEGER NOT NULL, receiver_id INTEGER NOT NULL, created_at DATETIME DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (journal_id) REFERENCES journals (id), FOREIGN KEY (sender_id) REFERENCES users (id), FOREIGN KEY (receiver_id) REFERENCES users (id) ); `); export default db; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } This sets up the foundation with: - Next.js 14 with App Router - SQLite database with tables for users and journals - Authentication system (login/register) - Theme switching (light, dark, spiderman) - UI components following shadcn style - Proper TypeScript support Would you like me to continue with the journal entry components, authentication pages, and other features?