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/api/.env.example

@@ -0,0 +1,6 @@
+# PostgreSQL connection string
+DATABASE_URL="postgresql://postgres:postgres@localhost:5432/gruperly?schema=public"
+
+# Better Auth
+BETTER_AUTH_SECRET="replace-with-a-strong-secret"
+BETTER_AUTH_URL="http://localhost:4000"

apps/api/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@gruperly/api",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "bun --watch src/index.ts",
+    "start": "bun src/index.ts",
+    "build": "bun build ./src/index.ts --target bun --outdir dist",
+    "typecheck": "tsc --noEmit",
+    "db:generate": "prisma generate",
+    "db:migrate": "prisma migrate dev",
+    "db:push": "prisma db push",
+    "db:studio": "prisma studio"
+  },
+  "dependencies": {
+    "@gruperly/shared": "workspace:*",
+    "@hono/zod-validator": "^0.8.0",
+    "better-auth": "^1.1.0",
+    "hono": "^4.6.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.0.0",
+    "prisma": "^6.0.0",
+    "@prisma/client": "^6.0.0",
+    "typescript": "^5.7.0"
+  }
+}

apps/api/prisma/schema.prisma

@@ -0,0 +1,171 @@
+// Gruperly - Prisma Schema (PostgreSQL)
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+// Auth (Better Auth) - required tables
+model User {
+  id             String    @id @default(cuid())
+  name           String
+  email          String    @unique
+  emailVerified  Boolean   @default(false)
+  image          String?
+  createdAt      DateTime  @default(now())
+  updatedAt      DateTime  @updatedAt
+
+  accounts Account[]
+  sessions Session[]
+  groupsMember   Member[]
+  groupsOwner    Group[]      @relation("OwnerGroups")
+  waitlist       WaitlistEntry[]
+}
+
+model Account {
+  id                String  @id @default(cuid())
+  userId            String
+  providerId        String
+  providerAccountId String
+  refreshToken      String?
+  accessToken       String?
+  accessTokenExpiresAt DateTime?
+  refreshTokenExpiresAt DateTime?
+  scope             String?
+  idToken           String?
+  password          String?
+  createdAt         DateTime @default(now())
+  updatedAt         DateTime @updatedAt
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([providerId, providerAccountId])
+}
+
+model Session {
+  id        String   @id @default(cuid())
+  userId    String
+  token     String   @unique
+  expiresAt DateTime
+  ipAddress String?
+  userAgent String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+}
+
+model Verification {
+  id         String   @id @default(cuid())
+  identifier String
+  value      String
+  expiresAt  DateTime
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+
+  @@unique([identifier, value])
+}
+
+// Domain models
+model Group {
+  id          String   @id @default(cuid())
+  name        String
+  description String?
+  createdById String
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  owner    User     @relation("OwnerGroups", fields: [createdById], references: [id], onDelete: Cascade)
+  members  Member[]
+  students Student[]
+  payments Payment[]
+}
+
+model Member {
+  id      String @id @default(cuid())
+  groupId String
+  userId  String
+  role    Role   @default(MEMBER) // OWNER, ADMIN, MEMBER
+  joinedAt DateTime @default(now())
+
+  group Group @relation(fields: [groupId], references: [id], onDelete: Cascade)
+  user  User  @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+  @@unique([groupId, userId])
+}
+
+enum Role {
+  OWNER
+  ADMIN
+  MEMBER
+}
+
+model Student {
+  id        String   @id @default(cuid())
+  groupId   String
+  fullName  String
+  email     String?
+  phone     String?
+  guardianName String?
+  guardianPhone String?
+  notes     String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  group    Group    @relation(fields: [groupId], references: [id], onDelete: Cascade)
+  payments Payment[]
+
+  @@index([groupId])
+}
+
+model Payment {
+  id        String        @id @default(cuid())
+  groupId   String
+  studentId String
+  amount    Decimal       @db.Decimal(10, 2)
+  currency  String        @default("MXN")
+  status    PaymentStatus @default(PENDING) // PENDING, PAID, OVERDUE, CANCELLED
+  dueDate   DateTime
+  paidAt    DateTime?
+  createdAt DateTime      @default(now())
+  updatedAt DateTime      @updatedAt
+
+  group   Group   @relation(fields: [groupId], references: [id], onDelete: Cascade)
+  student Student @relation(fields: [studentId], references: [id], onDelete: Cascade)
+
+  @@index([groupId])
+  @@index([studentId])
+}
+
+enum PaymentStatus {
+  PENDING
+  PAID
+  OVERDUE
+  CANCELLED
+}
+
+model WaitlistEntry {
+  id        String   @id @default(cuid())
+  email     String
+  name      String?
+  status    WaitlistStatus @default(PENDING) // PENDING, INVITED, JOINED, DECLINED
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  userId String? @unique
+
+  user User? @relation(fields: [userId], references: [id], onDelete: SetNull)
+
+  @@unique([email])
+}
+
+enum WaitlistStatus {
+  PENDING
+  INVITED
+  JOINED
+  DECLINED
+}

apps/api/src/db/client.ts

@@ -0,0 +1,3 @@
+import { PrismaClient } from '@prisma/client'
+
+export const prisma = new PrismaClient()

apps/api/src/db/index.ts

@@ -0,0 +1,3 @@
+import { prisma } from './client'
+
+export { prisma }

apps/api/src/index.ts

@@ -0,0 +1,30 @@
+import { Hono } from 'hono'
+import { cors } from 'hono/cors'
+import { authRoutes } from './routes/auth'
+import { groupsRoutes } from './routes/groups'
+import { studentsRoutes } from './routes/students'
+import { paymentsRoutes } from './routes/payments'
+import { waitlistRoutes } from './routes/waitlist'
+
+const app = new Hono()
+
+app.use('*', cors())
+
+app.get('/', (c) => c.json({ name: 'Gruperly API', status: 'ok' }))
+
+app.route('/auth', authRoutes)
+app.route('/groups', groupsRoutes)
+app.route('/students', studentsRoutes)
+app.route('/payments', paymentsRoutes)
+app.route('/waitlist', waitlistRoutes)
+
+export default app
+
+const port = Number(Bun.env.PORT ?? 4000)
+
+Bun.serve({
+  port,
+  fetch: app.fetch,
+})
+
+console.log(`Gruperly API running on http://localhost:${port}`)

apps/api/src/routes/auth.ts

@@ -0,0 +1,5 @@
+import { Hono } from 'hono'
+
+export const authRoutes = new Hono()
+
+authRoutes.get('/session', (c) => c.json({ message: 'placeholder' }))

apps/api/src/routes/groups.ts

@@ -0,0 +1,5 @@
+import { Hono } from 'hono'
+
+export const groupsRoutes = new Hono()
+
+groupsRoutes.get('/', (c) => c.json([]))

apps/api/src/routes/payments.ts

@@ -0,0 +1,5 @@
+import { Hono } from 'hono'
+
+export const paymentsRoutes = new Hono()
+
+paymentsRoutes.get('/', (c) => c.json([]))

apps/api/src/routes/students.ts

@@ -0,0 +1,5 @@
+import { Hono } from 'hono'
+
+export const studentsRoutes = new Hono()
+
+studentsRoutes.get('/', (c) => c.json([]))

apps/api/src/routes/waitlist.ts

@@ -0,0 +1,5 @@
+import { Hono } from 'hono'
+
+export const waitlistRoutes = new Hono()
+
+waitlistRoutes.get('/', (c) => c.json([]))

apps/api/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@gruperly/config/tsconfig.base.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "types": ["bun"],
+    "paths": {
+      "@gruperly/shared": ["../../packages/shared/src/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts"]
+}

apps/web/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gruperly</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/web/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@gruperly/web",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@gruperly/shared": "workspace:*",
+    "@hookform/resolvers": "^3.9.0",
+    "@tanstack/react-query": "^5.62.0",
+    "@tanstack/react-router": "^1.90.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.34.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.54.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

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>
+  )
+}

apps/web/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@gruperly/config/tsconfig.base.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "moduleResolution": "bundler",
+    "paths": {
+      "@gruperly/shared": ["../../packages/shared/src/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

apps/web/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 6173,
+  },
+})