Quitio

全栈工程师 & 设计师—2026

客户

个人项目

角色

全栈工程师 & 设计师

技术栈

Next.js, React, TypeScript, PostgreSQL, Prisma, Tailwind CSS

日期

2026

挑战

在法国，物业经理有法律义务每月提供房租收据（quittances de loyer）。大多数人依赖手动 Word 文档或昂贵的旧软件。面临的挑战是构建一个现代、直观的平台，自动化整个流程——从租户管理到 PDF 生成和电子邮件发送——同时保持像金融科技产品一样简洁的用户体验。

解决方案

我负责了 Quitio 的端到端设计和构建：一个基于 Next.js 的前端，拥有受 Stripe 和 Linear 启发的高级设计系统，后台由 Prisma/PostgreSQL 支持的强大 API 驱动。该平台具有可自定义模板的自动 PDF 生成、批量邮件发送、集成 Stripe 的免费增值模式以及带有收入分析的仪表板功能。每一个交互都经过精心设计，包含微动画和连贯的视觉语言。

typescript

// Automated quittance generation pipeline
async function generateQuittance(tenantId: string) {
  const tenant = await prisma.tenant.findUnique({
    where: { id: tenantId },
    include: { property: true, landlord: true },
  });

  const pdf = await renderPDF({
    template: "quittance-v2",
    variables: mapTenantToVariables(tenant),
  });

  await sendEmail({
    to: tenant.email,
    subject: `Quittance - ${format(new Date(), "MMMM yyyy")}`,
    attachments: [{ filename: "quittance.pdf", content: pdf }],
  });
}

↳ 核心流程：获取租户数据 → 渲染 PDF → 通过电子邮件发送

下一个项目

Sports.gouv.fr

Web 开发 / 无障碍访问