Bom dia, tarde, noite e madrugada 😎.

Construindo um Sistema de Confirmação para Chá de Bebê em modo Vibe Coding

1. Introdução

Recentemente, desenvolvi um sistema de confirmação de presença para um Chá de Bebê, utilizando uma abordagem de Vibe Coding - um fluxo de desenvolvimento ágil focado em iterações rápidas e feedback imediato. O objetivo era criar uma solução simples, porém robusta, para gerenciar as confirmações dos convidados de forma eficiente.

Stack utilizada:

• WindSurf

• Frontend: HTML, CSS e JavaScript puro

• Backend: Netlify Functions (Node.js)

• Banco de Dados: MongoDB Atlas

• Hospedagem: Netlify

2. Arquitetura do Sistema

O sistema foi estruturado em três camadas principais:

1. Frontend: Páginas estáticas com interface amigável

2. API: Funções serverless na Netlify

3. Banco de Dados: MongoDB Atlas para armazenamento persistente

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│             │     │             │     │             │
│  Frontend   │────▶│  Netlify    │────▶│  MongoDB    │
│  (HTML/JS)  │◀────│  Functions  │◀────│  Atlas      │
│             │     │  (API)      │     │             │
└─────────────┘     └─────────────┘     └─────────────┘

3. Desenvolvimento em Vibe Coding

O desenvolvimento seguiu o fluxo de Vibe Coding, que se baseia em:

1. Prototipagem Rápida: Começamos com um MVP funcional em poucas horas

2. Feedback Imediato: Testes contínuos e ajustes incrementais

3. Iterações Curtas: Pequenas mudanças com grande impacto

4. Foco no Essencial: Features que realmente importam

4. Implementação Técnica

Validação de Códigos

Os códigos de confirmação são validados no servidor:

// validate-code.jsconst validCodes = new Set([
    'ACRE@#%%2025-9990', 'ACRE*&%%2025-94488ASE',
// ... outros códigos
]);

async function handleConfirmation(code, numberOfPeople) {
    const codeUpper = code.toUpperCase();
    if (!validCodes.has(codeUpper)) {
        return {
            valid: false,
            message: 'Código inválido'
        };
    }
// ... resto da lógica
}

Armazenamento no MongoDB

Migramos do armazenamento em arquivo para o MongoDB Atlas:

// storage.jsasync function addConfirmation(code, numberOfPeople) {
    const { db } = await connectToDatabase();
    const collection = db.collection('confirmations');

    const confirmation = {
        code: code.toUpperCase(),
        numberOfPeople: parseInt(numberOfPeople, 10),
        confirmedAt: new Date().toISOString()
    };

    await collection.updateOne(
        { code: confirmation.code },
        { $set: confirmation },
        { upsert: true }
    );

    return confirmation;
}

5. Painel Administrativo

O painel administrativo permite visualizar e gerenciar as confirmações:

<!-- admin.html --><div class="admin-container">
    <h1>Painel de Controle</h1>
    <div class="stats">
        <div class="stat-box">
            <h3>Total Confirmados</h3>
            <p id="totalConfirmed">0</p>
        </div>
        <div class="stat-box">
            <h3>Total de Pessoas</h3>
            <p id="totalPeople">0</p>
        </div>
    </div>
    <div class="actions">
        <button id="refreshBtn">Atualizar</button>
        <button id="clearBtn" class="danger">Limpar Tudo</button>
    </div>
    <div id="confirmationsList" class="confirmations-list">
<!-- Lista de confirmações será inserida aqui --></div>
</div>

6. Desafios e Soluções

Migração para MongoDB

O sistema inicialmente usava armazenamento em arquivo, mas migrei para o MongoDB Atlas porque como a arquitetura é serverless o arquivo era deletado sempre que a instância morria(fui moleque aqui 😆).

Autenticação Segura

Implementei autenticação básica mesmo, user e senha direto no código, eu poderia ter usado as secrets da plataforma Netlify, mas, entendi que para o que estava fazendo não é necessário, entretanto eu sei que não é uma boa prática, era o mais simples que tinha para proteger o painel administrativo:

function checkAuth(event) {
    const auth = event.headers.authorization || '';
    const [type, credentials] = auth.split(' ');

    if (type !== 'Basic') return false;

    const [username, password] = Buffer.from(credentials, 'base64')
        .toString()
        .split(':');

    return username === "MeuUserAdminFoiAqui1234%%$$$" &&
           password === "Minha@senhaTambemFoiAqui@#$";
}

7. Resultados

O sistema está em produção, gerenciando com sucesso as confirmações do evento. Os principais resultados foram:

• Interface simples e intuitiva

• Processo de confirmação em poucos cliques

• Painel administrativo em tempo real

• Alta disponibilidade e desempenho

8. Próximos Passos, se eu fosse continuar(Não vou ☺️)

Algumas melhorias planejadas:

1. Adicionaria uns campos para colocar os nomes das pessoas baseado na quantidade que fosse selecionada, facilitaria para entregar na portaria do evento 🤷🏽‍♂️

2. Adicionar exportação de dados em CSV/Excel

3. Implementar notificações por e-mail

4. Adicionar gráficos de análise

5. Melhorar a responsividade para mobile

Screenshots

Página inicial de confirmação

Mensagem de confirmação bem-sucedida

Painel administrativo com lista de confirmações

Estatísticas de presença

Conclusão

Este projeto demonstra como é possível criar uma solução completa e funcional rapidamente usando Vibe Coding. A combinação de tecnologias modernas com um fluxo de desenvolvimento ágil resultou em um sistema funcional que atende perfeitamente às necessidades do evento e colocado em produção de forma muito rápida.
Deixando claro que não é um sistema empresarial que teria outras camadas de segurança, escalabilidade, UX entre outras coisas. Este sistema foi um experimento que fiz e nada mais que isso.