Saltar al contenido
Bill Splitting AppBill Splitting App

Código abierto · MIT-friendly · GitHub

Divide gastos entre amigos, sin hojas de cálculo

Bill Splitting App es un proyecto open source de Pericodes para crear grupos, apuntar quién pagó qué y ver al instante quién debe a quién. Úsala aquí o clónala y despliégala en tu propia cuenta de Vercel o Netlify.

Usar la appVer el repositorio

Gratis para usar, auditar y contribuir. Sin cuentas de pago ni tiendas de apps.

Qué puedes hacer

Pensada para viajes, pisos compartidos, cenas y cualquier grupo que quiera saldar cuentas sin fricción.

  • Cuentas compartidas

    Crea un grupo con nombre, icono y moneda (EUR, USD o GBP). Cada cuenta tiene su propio historial de gastos y participantes.

  • Gastos flexibles

    Un pagador o varios. Partes iguales o importes a medida. La app comprueba que lo pagado y lo asignado cuadren con el total.

  • Saldos automáticos

    Ves quién debe a quién y cómo saldar con el menor número de transferencias. Los balances se recalculan al añadir o borrar un gasto.

  • Invitar con enlace o QR

    Comparte un enlace de invitación o un código QR. Quien lo abra entra al grupo sin que tengas que añadir su email a mano.

  • Participantes provisionales

    Añade a alguien solo con el nombre para incluirlo en un gasto. Más tarde puede unirse con el enlace y ocupar su sitio.

  • Invitado o cuenta registrada

    Entra con un nombre (perfil local) o regístrate con email. Si te registras después, conservas los grupos de este navegador.

  • Español e inglés

    La interfaz está en los dos idiomas. Eliges el idioma en Perfil; esta landing también tiene versión en inglés.

  • Tú tienes el código

    Next.js, TypeScript, Neon Postgres y Auth. Sin backend opaco: puedes leer, auditar y desplegar el mismo código que usamos.

Open source: úsala, clónala, mejórala

El código vive en GitHub. Issues, pull requests y forks son bienvenidos: traducciones, bugs, diseño o nuevas formas de repartir. El proyecto es de Pericodes y se publica para que cualquiera pueda autoalojarlo.

github.com/pericodes/bill-splitting-app

Cómo colaborar

Haz fork, crea una rama, abre un pull request hacia main. Si es un cambio grande, abre antes un issue.

  1. 1. Haz fork en GitHub

    Usa el botón Fork en la página del repositorio para copiarlo a tu cuenta.

  2. 2. Clona tu fork

    git clone https://github.com/TU_USUARIO/bill-splitting-app.git
cd bill-splitting-app
git remote add upstream https://github.com/pericodes/bill-splitting-app.git

  3. 3. Crea una rama y un pull request

    git checkout -b feat/mi-cambio
git push -u origin feat/mi-cambio

Requisitos para desplegarla tú

Cuentas gratuitas bastan para una instancia personal o de un grupo pequeño.

  • Node.js 20 o superior

    Next.js 15 necesita Node 18.18+, recomendamos la LTS 20. Comprueba con node -v.

  • Git y pnpm

    El repo usa pnpm-lock.yaml. Instala pnpm con npm install -g pnpm si no lo tienes.

  • Proyecto en Neon

    Postgres serverless, Data API y Neon Auth. La app no se conecta a Postgres en producción: habla con la Data API.

  • Vercel o Netlify

    Cualquiera de los dos sirve un proyecto Next.js (App Router). Vercel es el encaje más directo.

Despliegue paso a paso

Primero el esquema en Neon desde tu máquina; después el frontend en Vercel o Netlify. Cada bloque se puede copiar.

1. Crea el proyecto en Neon

Esto se hace en el navegador, en la consola de Neon (neon.tech). No hay CLI obligatoria.

  1. Crea una cuenta y un proyecto de Postgres (la región más cercana a tus usuarios).
  2. En el proyecto, activa Data API y copia la URL (termina en /rest/v1).
  3. Activa Neon Auth y copia la URL (termina en /auth). Habilita tokens anónimos: la app los usa para la Data API.
  4. Copia la cadena de conexión DIRECTA (host sin -pooler). La usarás solo en local como DEV_DATABASE_URL.
  5. Cuando tengas la URL de Vercel o Netlify, añádela en Neon Auth como origen permitido (si no, el login devolverá Invalid Origin).

2. Variables de entorno

Copia .env.example a .env y rellena los valores de Neon. En Vercel/Netlify configurarás las mismas claves NEXT_PUBLIC_* y APP_URL (DEV_DATABASE_URL no hace falta en el hosting).

# URL pública de tu despliegue (Vercel, Netlify o local)
APP_URL="https://tu-dominio.vercel.app"

# Neon Data API (consola de Neon → Data API)
NEXT_PUBLIC_NEON_DATA_API_URL="https://ep-xxxx.apirest.region.aws.neon.tech/neondb/rest/v1"

# Neon Auth (consola de Neon → Auth)
NEXT_PUBLIC_NEON_AUTH_URL="https://ep-xxxx.neonauth.region.aws.neon.tech/neondb/auth"

# Solo en tu máquina, para migrar el esquema. Cadena DIRECTA (sin -pooler).
# No hace falta en Vercel/Netlify: en producción la app usa Data API.
DEV_DATABASE_URL="postgresql://USER:PASSWORD@ep-xxxx.region.aws.neon.tech/neondb?sslmode=require"

3. Clona e instala

En una terminal, en la carpeta donde quieras el código:

  1. 1. Clonar el repositorio

    git clone https://github.com/pericodes/bill-splitting-app.git

  2. 2. Entrar en el proyecto

    cd bill-splitting-app

  3. 3. Instalar pnpm si no lo tienes

    npm install -g pnpm

  4. 4. Instalar dependencias

    pnpm install

  5. 5. Crear el fichero de entorno

    cp .env.example .env
# Windows PowerShell:
Copy-Item .env.example .env

4. Crear tablas y permisos

Desde tu ordenador, con DEV_DATABASE_URL apuntando a Neon (NODE_ENV no debe ser production). Este script aplica migraciones Prisma, columnas generadas y GRANT para los roles anonymous y authenticated de la Data API. Activa Data API en Neon antes de ejecutarlo.

pnpm db:dev:setup

5. Probar en local (opcional)

Con el .env relleno, arranca el servidor de desarrollo y abre http://localhost:3000

pnpm dev

Desplegar en Vercel (CLI)

Con la cuenta de Vercel y el proyecto ya clonado. También puedes importar el repo en vercel.com/new; aquí van los comandos.

  1. 1. Inicia sesión en Vercel

    npx vercel login

  2. 2. Enlaza el proyecto (desde la raíz del repo)

    Acepta los valores por defecto: framework Next.js, directorio raíz, build pnpm build. Te dará una URL de preview.

    npx vercel

  3. 3. Añade las variables de producción

    Pega las URLs de Neon. En APP_URL usa la URL definitiva (por ejemplo https://tu-app.vercel.app).

    npx vercel env add NEXT_PUBLIC_NEON_AUTH_URL production
npx vercel env add NEXT_PUBLIC_NEON_DATA_API_URL production
npx vercel env add APP_URL production

  4. 4. Despliega a producción

    npx vercel --prod

  5. 5. Autoriza el origen en Neon

    En la consola de Neon Auth, añade https://tu-app.vercel.app (sin barra final si la consola lo pide así). Vuelve a generar un deploy si cambiaste APP_URL.

Desplegar en Netlify (CLI)

Netlify detecta Next.js (App Router). El comando de build es pnpm build; no publiques a mano la carpeta .next.

  1. 1. Inicia sesión en Netlify

    npx netlify-cli login

  2. 2. Inicializa el sitio en este repo

    Elige crear un sitio nuevo, el equipo, y build command: pnpm build. Deja que Netlify use el runtime de Next.js.

    npx netlify init

  3. 3. Variables de entorno

    npx netlify env:set NEXT_PUBLIC_NEON_AUTH_URL "https://ep-xxxx.neonauth.region.aws.neon.tech/neondb/auth"
npx netlify env:set NEXT_PUBLIC_NEON_DATA_API_URL "https://ep-xxxx.apirest.region.aws.neon.tech/neondb/rest/v1"
npx netlify env:set APP_URL "https://tu-sitio.netlify.app"

  4. 4. Despliegue de producción

    npx netlify deploy --build --prod

  5. 5. Autoriza el origen en Neon

    Añade https://tu-sitio.netlify.app en Neon Auth como origen permitido, igual que en Vercel.

Después del deploy. Copia la URL HTTPS que te den Vercel o Netlify. Ponla en APP_URL, vuelve a desplegar si hace falta, y añádela en Neon Auth → orígenes permitidos. Sin ese origen, registro e inicio de sesión fallan.

Preguntas frecuentes

¿Es de código abierto?

Sí. El repositorio público es https://github.com/pericodes/bill-splitting-app. Puedes clonar, hacer fork y abrir pull requests.

¿Hace falta registrarse para usarla?

No. Puedes entrar como invitado con un nombre. El perfil queda en ese navegador. Si más tarde te registras, se conservan los grupos.

¿Qué servicios necesito para autoalojarla?

Un proyecto Neon (Postgres + Data API + Auth) y un hosting compatible con Next.js: Vercel o Netlify. Las cuentas gratuitas cubren un uso personal.

¿Por qué Prisma solo en desarrollo?

En producción la app no abre una conexión TCP a Postgres: usa la Data API de Neon. Prisma y DEV_DATABASE_URL sirven para aplicar el esquema desde tu máquina.

¿Vercel o Netlify?

Los dos valen. Vercel es el entorno nativo de Next.js y suele ser el camino más corto. Netlify funciona con su runtime de Next.js y los mismos env.