feat: initialize monorepo structure with Bun and Turborepo

- Add package.json for the root with workspace configuration and scripts
- Create @gruperly/config package with TypeScript configuration
- Establish shared package @gruperly/shared with Zod schemas for validation
- Implement group, student, and payment schemas using Zod
- Set up TypeScript configuration for shared package
- Document stack architecture and technical specifications in stack.md
- Configure Turborepo with build, dev, lint, and typecheck tasks

apps/web/src/components/brand/Logo.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+import { cn } from '../../lib/utils'
+
+export type LogoProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+  className?: string
+}
+
+export const Logo = forwardRef<HTMLSpanElement, LogoProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn('font-extrabold text-primary select-none', className)}
+        {...props}
+      >
+        gruperl
+        <span className="text-accent">y</span>
+      </span>
+    )
+  },
+)
+
+Logo.displayName = 'Logo'

apps/web/src/components/brand/LogoIcon.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, type SVGProps } from 'react'
+import { cn } from '../../lib/utils'
+
+export type LogoIconProps = SVGProps<SVGSVGElement> & {
+  className?: string
+}
+
+export const LogoIcon = forwardRef<SVGSVGElement, LogoIconProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <svg
+        ref={ref}
+        viewBox="0 0 40 40"
+        fill="none"
+        role="img"
+        aria-label="Gruperly"
+        className={cn('size-8', className)}
+        {...props}
+      >
+        <rect
+          width="40"
+          height="40"
+          rx="10"
+          className="fill-accent-soft"
+        />
+        <path
+          d="M17 14.5c0-1.4 3-1.4 3 0V27.5c0 3-2.5 6-6.5 6-3.6 0-6-2.1-6-5 0-1.4 3-1.4 3 0 0 1 .6 2 3 2 2 0 3-1.2 3-3V17z"
+          className="fill-accent"
+        />
+        <path
+          d="M20 15.5c0-1.4 3-1.4 3 0v6c0 3 2 5 5.5 5 1.4 0 3-1.2 3-3 0-1.4 3-1.4 3 0 0 3-2.6 4.6-6.5 4.6-4 0-5-3-5-6.6v-6z"
+          className="fill-accent"
+        />
+      </svg>
+    )
+  },
+)
+
+LogoIcon.displayName = 'LogoIcon'

apps/web/src/components/brand/index.ts

@@ -0,0 +1,2 @@
+export { Logo, type LogoProps } from './Logo'
+export { LogoIcon, type LogoIconProps } from './LogoIcon'

apps/web/src/components/layout/BottomNav.tsx

@@ -0,0 +1,33 @@
+import { Link, useLocation } from '@tanstack/react-router'
+import { cn } from '../../lib/utils'
+import { NAV_ITEMS } from './nav-items'
+
+export function BottomNav() {
+  const location = useLocation()
+
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-white/95 backdrop-blur lg:hidden">
+      <div className="mx-auto grid max-w-md grid-cols-4">
+        {NAV_ITEMS.map(({ label, to, icon: Icon }) => {
+          const isActive = location.pathname === to
+          return (
+            <Link
+              key={to}
+              to={to}
+              className={cn(
+                'flex flex-col items-center gap-0.5 py-2.5 text-[11px] font-medium transition-colors',
+                isActive ? 'text-accent' : 'text-foreground/50 hover:text-primary',
+              )}
+            >
+              <Icon
+                className={cn('size-6', isActive && 'fill-accent/15 stroke-accent')}
+                strokeWidth={isActive ? 2.2 : 2}
+              />
+              {label}
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}

apps/web/src/components/layout/RootLayout.tsx

@@ -0,0 +1,44 @@
+import { Outlet } from '@tanstack/react-router'
+import { Bell } from 'lucide-react'
+import { Logo, LogoIcon } from '../brand'
+import { Avatar, Button } from '../ui'
+import { Sidebar } from './Sidebar'
+import { BottomNav } from './BottomNav'
+
+export function RootLayout() {
+  return (
+    <div className="mx-auto flex min-h-dvh w-full max-w-6xl gap-6 lg:px-6">
+      <Sidebar />
+
+      <div className="flex min-h-dvh w-full flex-col lg:min-w-0">
+        <header className="sticky top-0 z-30 border-b border-border bg-background/90 backdrop-blur">
+          <div className="mx-auto flex h-14 w-full max-w-md items-center justify-between px-4 lg:max-w-none lg:px-0">
+            <a
+              href="/"
+              className="flex items-center gap-2 lg:hidden"
+              aria-label="Gruperly inicio"
+            >
+              <LogoIcon className="size-8" />
+              <Logo className="text-lg tracking-tight" />
+            </a>
+            <div className="ml-auto flex items-center gap-1 lg:ml-0">
+              <Button size="icon" variant="ghost" aria-label="Notificaciones" className="relative">
+                <Bell className="size-5" />
+                <span className="absolute right-1.5 top-1.5 size-2 rounded-full bg-accent" />
+              </Button>
+              <Button size="icon" variant="ghost" aria-label="Perfil">
+                <Avatar name="Gruperly User" />
+              </Button>
+            </div>
+          </div>
+        </header>
+
+        <main className="mx-auto w-full max-w-md flex-1 px-4 pb-24 pt-4 lg:max-w-none lg:px-0 lg:pb-8 lg:pt-6">
+          <Outlet />
+        </main>
+
+        <BottomNav />
+      </div>
+    </div>
+  )
+}

apps/web/src/components/layout/Sidebar.tsx

@@ -0,0 +1,38 @@
+import { Link, useLocation } from '@tanstack/react-router'
+import { cn } from '../../lib/utils'
+import { Logo, LogoIcon } from '../brand'
+import { NAV_ITEMS } from './nav-items'
+
+export function Sidebar() {
+  const location = useLocation()
+
+  return (
+    <aside className="sticky top-0 hidden h-dvh w-60 shrink-0 flex-col border-r border-border bg-white px-4 py-6 lg:flex">
+      <a href="/" className="mb-8 flex items-center gap-2 px-1" aria-label="Gruperly inicio">
+        <LogoIcon className="size-8" />
+        <Logo className="text-lg tracking-tight" />
+      </a>
+
+      <nav className="flex flex-col gap-1">
+        {NAV_ITEMS.map(({ label, to, icon: Icon }) => {
+          const isActive = location.pathname === to
+          return (
+            <Link
+              key={to}
+              to={to}
+              className={cn(
+                'flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium transition-colors',
+                isActive
+                  ? 'bg-accent-soft text-accent'
+                  : 'text-foreground/60 hover:bg-primary-soft hover:text-primary',
+              )}
+            >
+              <Icon className="size-5" strokeWidth={isActive ? 2.2 : 2} />
+              {label}
+            </Link>
+          )
+        })}
+      </nav>
+    </aside>
+  )
+}

apps/web/src/components/layout/index.ts

@@ -0,0 +1,4 @@
+export { RootLayout } from './RootLayout'
+export { Sidebar } from './Sidebar'
+export { BottomNav } from './BottomNav'
+export { NAV_ITEMS, type NavItem } from './nav-items'

apps/web/src/components/layout/nav-items.ts

@@ -0,0 +1,14 @@
+import { Home, Users, Wallet, Settings, type LucideIcon } from 'lucide-react'
+
+export type NavItem = {
+  label: string
+  to: string
+  icon: LucideIcon
+}
+
+export const NAV_ITEMS: NavItem[] = [
+  { label: 'Inicio', to: '/', icon: Home },
+  { label: 'Grupos', to: '/groups', icon: Users },
+  { label: 'Cobros', to: '/payments', icon: Wallet },
+  { label: 'Ajustes', to: '/settings', icon: Settings },
+]

apps/web/src/components/ui/avatar.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+import { cn } from '../../lib/utils'
+
+export type AvatarProps = HTMLAttributes<HTMLDivElement> & {
+  name?: string
+  src?: string
+}
+
+function initials(name?: string) {
+  if (!name) return '?'
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? '')
+    .join('')
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
+  ({ className, name, src, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-accent text-sm font-semibold text-white',
+          className,
+        )}
+        {...props}
+      >
+        {src ? (
+          <img src={src} alt={name ?? 'avatar'} className="size-full object-cover" />
+        ) : (
+          initials(name)
+        )}
+      </div>
+    )
+  },
+)
+
+Avatar.displayName = 'Avatar'

apps/web/src/components/ui/badge.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, type HTMLAttributes } from 'react'
+import { cn } from '../../lib/utils'
+
+export type BadgeVariant = 'success' | 'warning' | 'danger' | 'neutral'
+
+export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+  variant?: BadgeVariant
+}
+
+const variants: Record<BadgeVariant, string> = {
+  success: 'bg-success-soft text-success',
+  warning: 'bg-warning-soft text-warning',
+  danger: 'bg-danger-soft text-danger',
+  neutral: 'bg-primary-soft text-primary',
+}
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'neutral', ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
+          variants[variant],
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+
+Badge.displayName = 'Badge'

apps/web/src/components/ui/button.tsx

@@ -0,0 +1,42 @@
+import { forwardRef, type ButtonHTMLAttributes } from 'react'
+import { cn } from '../../lib/utils'
+
+export type ButtonVariant = 'primary' | 'ghost' | 'outline'
+export type ButtonSize = 'sm' | 'md' | 'icon'
+
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant
+  size?: ButtonSize
+}
+
+const variants: Record<ButtonVariant, string> = {
+  primary: 'bg-accent text-white hover:bg-accent-strong',
+  ghost: 'bg-transparent text-primary hover:bg-primary-soft',
+  outline: 'border border-border bg-white text-primary hover:bg-primary-soft',
+}
+
+const sizes: Record<ButtonSize, string> = {
+  sm: 'h-8 px-3 text-sm',
+  md: 'h-10 px-4 text-sm',
+  icon: 'size-9',
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'ghost', size = 'md', type = 'button', ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={cn(
+          'inline-flex items-center justify-center gap-2 rounded-xl font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:pointer-events-none disabled:opacity-50',
+          variants[variant],
+          sizes[size],
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+
+Button.displayName = 'Button'

apps/web/src/components/ui/index.ts

@@ -0,0 +1,3 @@
+export { Avatar, type AvatarProps } from './avatar'
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from './button'
+export { Badge, type BadgeProps, type BadgeVariant } from './badge'

apps/web/src/index.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+@theme {
+  /* Colores de marca */
+  --color-background: #f8fafc;
+  --color-primary: #0a2540;
+  --color-primary-soft: #f0f4f9;
+  --color-accent: #1e90ff;
+  --color-accent-strong: #0088ff;
+  --color-accent-soft: #e6f4ff;
+  --color-foreground: #0f172a;
+
+  /* Badges de estado */
+  --color-success: #10b981;
+  --color-success-soft: #dcfce7;
+  --color-warning: #f59e0b;
+  --color-warning-soft: #fef3c7;
+  --color-danger: #ef4444;
+  --color-danger-soft: #fee2e2;
+  --color-border: #e2e8f0;
+
+  /* Border radius por defecto */
+  --radius-xl: 0.75rem;
+}
+
+@layer base {
+  :root {
+    color-scheme: light;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-primary antialiased;
+    min-height: 100dvh;
+  }
+}

apps/web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

apps/web/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider } from '@tanstack/react-router'
+import { router } from './router'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)

apps/web/src/router.tsx

@@ -0,0 +1,49 @@
+import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router'
+import { RootLayout } from './components/layout'
+import { HomeView } from './routes/home'
+import { GroupsView } from './routes/groups'
+import { PaymentsView } from './routes/payments'
+import { SettingsView } from './routes/settings'
+
+const rootRoute = createRootRoute({
+  component: RootLayout,
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/',
+  component: HomeView,
+})
+
+const groupsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/groups',
+  component: GroupsView,
+})
+
+const paymentsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/payments',
+  component: PaymentsView,
+})
+
+const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: '/settings',
+  component: SettingsView,
+})
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  groupsRoute,
+  paymentsRoute,
+  settingsRoute,
+])
+
+export const router = createRouter({ routeTree })
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}

apps/web/src/routes/groups.tsx

@@ -0,0 +1,8 @@
+export function GroupsView() {
+  return (
+    <section>
+      <h1 className="text-2xl font-bold text-primary">Grupos</h1>
+      <p className="mt-2 text-sm text-foreground/60">Tus grupos de cobranza.</p>
+    </section>
+  )
+}

apps/web/src/routes/home.tsx

@@ -0,0 +1,8 @@
+export function HomeView() {
+  return (
+    <section>
+      <h1 className="text-2xl font-bold text-primary">Inicio</h1>
+      <p className="mt-2 text-sm text-foreground/60">Bienvenido a Gruperly.</p>
+    </section>
+  )
+}

apps/web/src/routes/payments.tsx

@@ -0,0 +1,8 @@
+export function PaymentsView() {
+  return (
+    <section>
+      <h1 className="text-2xl font-bold text-primary">Cobros</h1>
+      <p className="mt-2 text-sm text-foreground/60">Sigue los pagos de tus grupos.</p>
+    </section>
+  )
+}

apps/web/src/routes/settings.tsx

@@ -0,0 +1,8 @@
+export function SettingsView() {
+  return (
+    <section>
+      <h1 className="text-2xl font-bold text-primary">Ajustes</h1>
+      <p className="mt-2 text-sm text-foreground/60">Configura tu cuenta.</p>
+    </section>
+  )
+}