Full-stack web application for pilates studio operations management. Built with Next.js App Router, TypeScript, TailwindCSS, TanStack Query and Better Auth.
Live: coreflow.vercel.app Stack: Next.js 16 · TypeScript · TailwindCSS · Shadcn UI · TanStack Query · Better Auth · Cloudflare Workers
Feature-Based Architecture with Module Colocation — scales without coupling.
O Estúdio CoreFlow é uma academia de pilates que oferece aulas personalizadas para seus clientes. O objetivo deste projeto é desenvolver um sistema de frontend robusto e escalável para gerenciar as operações da academia, incluindo o gerenciamento de alunos, instrutores, aparelhos, modalidades, planos, aulas individuais e agenda. O sistema também deve ser capaz de exibir notificações para os alunos quando seus planos estiverem prestes a expirar.
Instituição: Centro Universitário do Triângulo — UNITRI Curso: Análise e Desenvolvimento de Sistemas Disciplina: Análise de Sistemas I Professor: Igor
Alunos que desenvolveram este projeto
| Aluno | GitHub |
|---|---|
| João Batista Cardoso Miranda | cardosofiles.com.br |
| Dyego Adriano Mouro Alcantara | @DyegoAlcantara-2026 |
| Mikael Lobato Dias | @mikaellobatodiass-hue |
- Arquitetura do Projeto
- Árvore de Pastas
- Tecnologias e Justificativas
- Como Rodar o Projeto
- Interação com IA
- Agradecimentos
Este projeto adota a arquitetura Feature-Based com Module Colocation, combinada com o App Router do Next.js 14+. A escolha foi motivada por três princípios fundamentais:
"A pasta deve refletir o domínio do negócio, não o tipo de arquivo."
Em arquiteturas tradicionais (flat), todos os hooks ficam em /hooks, todos os tipos em /types, etc. Isso funciona em projetos pequenos, mas em equipes com múltiplas features paralelas gera conflitos de merge, dificuldade de localização e acoplamento implícito.
Com a arquitetura feature-based:
- ✅ Cada desenvolvedor trabalha em seu próprio módulo com mínimo de conflito
- ✅ Deletar uma feature é trivial — basta remover a pasta do módulo
- ✅ O código que muda junto, fica junto (colocation)
- ✅ Escalabilidade natural: novos módulos não afetam os existentes
- ✅ Code review focado — um PR por feature, sem arquivos espalhados
app/ → Roteamento apenas (Next.js App Router)
modules/ → Lógica de negócio por feature (colocation)
components/ → Componentes globais reutilizáveis
lib/ → Configuração de bibliotecas externas
providers/ → Contextos React globais
types/ → Contratos de tipo globais
utils/ → Funções puras sem side-effects
coreflow-pilates-web/
├── public/ # Arquivos estáticos
│
├── src/
│ │
│ ├── app/ # 🗺️ Next.js App Router — SOMENTE rotas
│ │ ├── (auth)/ # Route Group — sem prefixo na URL
│ │ │ ├── layout.tsx
│ │ │ ├── sign-in/
│ │ │ │ └── page.tsx
│ │ │ └── sign-up/
│ │ │ └── page.tsx
│ │ │
│ │ ├── (dashboard)/ # Route Group — área autenticada
│ │ │ ├── layout.tsx # Layout com Sidebar
│ │ │ ├── agenda/
│ │ │ │ └── page.tsx
│ │ │ ├── alertas/
│ │ │ │ └── page.tsx
│ │ │ ├── aparelhos/
│ │ │ │ └── page.tsx
│ │ │ ├── dashboard/
│ │ │ │ └── page.tsx
│ │ │ ├── matricula/
│ │ │ │ └── page.tsx
│ │ │ ├── planos/
│ │ │ │ └── page.tsx
│ │ │ └── usuarios/
│ │ │ └── page.tsx
│ │ │
│ │ ├── layout.tsx # Root Layout
│ │ └── page.tsx # Landing page pública
│ │
│ ├── modules/ # ⭐ CORE — Lógica de negócio por feature
│ │ │
│ │ ├── auth/ # 🔐 Autenticação
│ │ │ ├── index.ts # Barrel público (client-safe)
│ │ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ │ ├── actions/
│ │ │ │ └── index.ts
│ │ │ ├── components/
│ │ │ │ ├── index.ts
│ │ │ │ ├── layout/
│ │ │ │ │ └── auth-panel.tsx
│ │ │ │ ├── sign-in/
│ │ │ │ │ ├── sign-in-email-field.tsx
│ │ │ │ │ ├── sign-in-form.tsx
│ │ │ │ │ └── sign-in-password-field.tsx
│ │ │ │ └── sign-up/
│ │ │ │ ├── sign-up-confirm-password-field.tsx
│ │ │ │ ├── sign-up-email-field.tsx
│ │ │ │ ├── sign-up-form.tsx
│ │ │ │ ├── sign-up-name-field.tsx
│ │ │ │ └── sign-up-password-field.tsx
│ │ │ ├── hooks/
│ │ │ │ └── index.ts
│ │ │ ├── schemas/
│ │ │ │ ├── auth.schema.ts
│ │ │ │ └── index.ts
│ │ │ └── types/
│ │ │ ├── auth.types.ts
│ │ │ └── index.ts
│ │ │
│ │ ├── agenda/ # 📅 Agenda de aulas
│ │ │ ├── index.ts # Barrel público (client-safe)
│ │ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ │ ├── actions/index.ts
│ │ │ ├── components/index.ts
│ │ │ ├── hooks/index.ts
│ │ │ ├── schemas/index.ts
│ │ │ └── types/index.ts
│ │ │
│ │ ├── alertas/ # 🔔 Alertas e notificações
│ │ │ ├── index.ts # Barrel público (client-safe)
│ │ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ │ ├── actions/index.ts
│ │ │ ├── components/index.ts
│ │ │ ├── hooks/index.ts
│ │ │ ├── schemas/index.ts
│ │ │ └── types/index.ts
│ │ │
│ │ ├── aparelhos/ # 🏋️ Aparelhos de pilates
│ │ │ ├── index.ts # Barrel público (client-safe)
│ │ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ │ ├── actions/index.ts
│ │ │ ├── components/index.ts
│ │ │ ├── hooks/index.ts
│ │ │ ├── schemas/index.ts
│ │ │ └── types/index.ts
│ │ │
│ │ ├── dashboard/ # 📊 Visão geral
│ │ │ ├── index.ts # Barrel público (client-safe)
│ │ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ │ ├── actions/index.ts
│ │ │ ├── components/index.ts
│ │ │ ├── hooks/index.ts
│ │ │ ├── schemas/index.ts
│ │ │ └── types/index.ts
│ │ │
│ │ ├── matricula/ # 📋 Matrículas de alunos
│ │ │ ├── index.ts # Barrel público (client-safe)
│ │ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ │ ├── actions/index.ts
│ │ │ ├── components/index.ts
│ │ │ ├── hooks/index.ts
│ │ │ ├── schemas/index.ts
│ │ │ └── types/index.ts
│ │ │
│ │ ├── planos/ # 💳 Planos e mensalidades
│ │ │ ├── index.ts # Barrel público (client-safe)
│ │ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ │ ├── actions/index.ts
│ │ │ ├── components/index.ts
│ │ │ ├── hooks/index.ts
│ │ │ ├── schemas/index.ts
│ │ │ └── types/index.ts
│ │ │
│ │ └── usuarios/ # 👤 Gestão de usuários
│ │ ├── index.ts # Barrel público (client-safe)
│ │ ├── index.server.ts # Barrel de Server Actions ("use server")
│ │ ├── actions/index.ts
│ │ ├── components/index.ts
│ │ ├── hooks/index.ts
│ │ ├── schemas/index.ts
│ │ └── types/index.ts
│ │
│ ├── components/ # 🧩 Componentes GLOBAIS reutilizáveis
│ │ ├── ui/ # Shadcn UI (gerados automaticamente — não editar)
│ │ │ ├── button.tsx
│ │ │ ├── input.tsx
│ │ │ ├── dialog.tsx
│ │ │ ├── sidebar.tsx
│ │ │ └── ...
│ │ └── layout/ # Estrutura visual global
│ │ ├── sidebar/
│ │ │ ├── command-sidebar-dialog.tsx
│ │ │ ├── first-sidebar-data.tsx
│ │ │ ├── generated-sidebar-avatar.tsx
│ │ │ ├── navbar-sidebar-search.tsx
│ │ │ ├── second-sidebar-data.tsx
│ │ │ ├── sidebar-view.tsx
│ │ │ └── user-sidebar-button.tsx
│ │ └── themes/
│ │ └── mode-toggle.tsx
│ │
│ ├── data/ # 🗃️ Dados estáticos e mocks
│ │ ├── mock-session.ts
│ │ └── sidebar-items.ts
│ │
│ ├── hooks/ # 🪝 Hooks GLOBAIS (não ligados a módulo)
│ │ └── use-mobile.ts
│ │
│ ├── lib/ # ⚙️ Configuração de bibliotecas externas
│ │ ├── api.ts # Instância Axios com interceptors
│ │ └── utils.ts # cn() e helpers de lib (Shadcn)
│ │
│ ├── providers/ # 🌐 Context Providers globais
│ │ ├── next-themes.tsx # next-themes Provider
│ │ └── tanstack-query.tsx # TanStack Query Provider
│ │
│ ├── styles/ # 🎨 Estilos globais e tokens CSS
│ │ └── globals.css
│ │
│ ├── types/ # 🏷️ Types e interfaces GLOBAIS
│ │ └── globals.d.ts
│ │
│ └── utils/ # 🛠️ Funções puras utilitárias
│ └── fonts.ts
│
├── .gitignore
├── .prettierrc.json
├── components.json # Config do Shadcn UI
├── eslint.config.mjs
├── next.config.ts
├── open-next.config.ts # Config para deploy na Cloudflare
├── wrangler.jsonc # Cloudflare Workers config
├── tsconfig.json
├── pnpm-lock.yaml
└── package.json
Antes de criar um arquivo, responda:
| Pergunta | Resposta | ➜ Destino |
|---|---|---|
| Só usado dentro de 1 feature? | Sim | modules/[feature]/ |
| Usado em 2 ou mais features? | Sim | components/ ou hooks/ global |
| Configuração de biblioteca externa? | Sim | lib/ |
| Type de resposta da API? | Sim | types/api.ts |
| Componente gerado pelo Shadcn? | Sim | components/ui/ (não editar manualmente) |
| Função pura sem side-effects? | Sim | utils/ |
| Schema de validação de formulário? | Sim | modules/[feature]/schemas/ |
Server Action ("use server")? |
Sim | modules/[feature]/actions/ — importe via index.server.ts |
| Tecnologia | Versão | Por quê? |
|---|---|---|
| Next.js | 14+ | App Router, Server Components, file-based routing e deploy edge-ready |
| React | 18+ | Biblioteca de UI com ecossistema maduro e Server/Client Components |
| TypeScript | 5+ | Tipagem estática que previne bugs em runtime e melhora o DX em equipe |
| TailwindCSS | 3+ | Utility-first CSS — consistência visual e velocity de desenvolvimento |
| Tecnologia | Por quê? |
|---|---|
| TanStack Query | Cache automático, sincronização server/client, loading e error states out-of-the-box |
| Axios | Interceptors para tratamento global de erros e injeção de token JWT |
| Better Auth | Autenticação moderna, type-safe, com suporte a sessões e middleware Next.js |
| Tecnologia | Por quê? |
|---|---|
| Shadcn UI | Componentes acessíveis (Radix UI) com código-fonte próprio — total controle |
| Radix UI | Primitivos de UI headless com acessibilidade (ARIA) nativa |
| Ferramenta | Por quê? |
|---|---|
| ESLint | Análise estática de código e padronização de boas práticas |
| Prettier | Formatação automática — elimina debates de estilo no time |
| pnpm | Gerenciador de pacotes rápido e eficiente com workspace support |
| Plataforma | Uso |
|---|---|
| Vercel | Deploy do Next.js com CI/CD automático por push na main |
| Cloudflare | CDN, Workers (edge functions) e proteção via open-next.config.ts |
| GitHub | Controle de versão, code review via Pull Requests e rastreamento de issues |
Certifique-se de ter instalado:
1. Clone o repositório
git clone https://github.com/Cardosofiles/coreflow-pilates-web.git
cd coreflow-pilates-web2. Instale as dependências
pnpm install3. Configure as variáveis de ambiente
cp .env.example .env.localEdite o .env.local com seus valores:
# API Backend
NEXT_PUBLIC_API_URL=http://localhost:8080/api
# Better Auth
BETTER_AUTH_SECRET=sua_chave_secreta_aqui
BETTER_AUTH_URL=http://localhost:3000
# Database (se usar Prisma no frontend)
DATABASE_URL=postgresql://user:password@localhost:5432/coreflow4. Rode o servidor de desenvolvimento
pnpm devAcesse em http://localhost:3000 🎉
| Comando | Descrição |
|---|---|
pnpm dev |
Inicia o servidor de desenvolvimento |
pnpm build |
Gera o build de produção |
pnpm start |
Inicia o servidor de produção |
pnpm lint |
Executa o ESLint em todos os arquivos |
pnpm format |
Formata o código com Prettier |
pnpm type-check |
Verifica os tipos TypeScript sem compilar |
# Build para Cloudflare Workers
pnpm build
# Deploy via Wrangler
pnpm wrangler deployPara garantir que ferramentas de IA (GitHub Copilot, Cursor, Claude, ChatGPT) respeitem a arquitetura do projeto ao gerar código, utilize o prompt base abaixo. Cole-o no início de qualquer sessão ou configure como system prompt no seu editor.
Você é um assistente de desenvolvimento para o projeto CoreFlow Pilates Web.
## Stack
- Next.js 14+ com App Router
- TypeScript 5+
- TailwindCSS + Shadcn UI + Radix UI
- TanStack Query + Axios para data fetching
- Better Auth para autenticação
## Arquitetura: Feature-Based com Module Colocation
### Regras obrigatórias:
1. MÓDULOS (`src/modules/[feature]/`)
- Cada feature tem suas próprias subpastas: components/, hooks/, actions/, schemas/, types/
- Hooks de módulo seguem o padrão: use-get-[resource].ts, use-create-[resource].ts, use-update-[resource].ts
- Schemas Zod ficam DENTRO do módulo, não na pasta global
- Server Actions ficam em actions/[feature]-actions.ts
- NUNCA exporte Server Actions pelo index.ts principal — use index.server.ts
- index.ts → client-safe: exporta types, components, schemas, hooks
Exemplo: `export * from './components'`
`export * from './schemas'`
`export * from './hooks'`
`export type * from './types'`
- index.server.ts → re-exporta tudo de actions/ exclusivamente ("use server")
Exemplo: `export * from './actions'`
2. COMPONENTES GLOBAIS (`src/components/`)
- ui/ → Apenas componentes gerados pelo Shadcn (NUNCA editar manualmente)
- layout/ → Header, Sidebar, Footer, PageWrapper
- common/ → Componentes reutilizáveis em 2+ módulos diferentes
3. APP ROUTER (`src/app/`)
- Pages são FINAS — apenas importam componentes dos módulos
- Route Groups: (auth) para rotas públicas, (dashboard) para área autenticada
- NUNCA colocar lógica de negócio diretamente na page.tsx
4. PADRÕES DE CÓDIGO
- Componentes: arrow functions tipadas com interface Props explícita
- Nomeação: PascalCase para componentes, camelCase para hooks/utils, kebab-case para arquivos
- Handlers: prefixo "handle" (handleSubmit, handleDelete, handleChange)
- Imports: use o alias @/ para todos os imports internos
5. EXEMPLO DE ESTRUTURA CORRETA para nova feature "payments":
src/modules/payments/
├── components/payment-form.tsx
├── hooks/use-get-payments.ts
├── actions/payment-actions.ts
├── schemas/payment-schema.ts
└── types/payment.types.ts
Sempre pergunte qual feature está sendo desenvolvida antes de gerar código.
Nunca crie arquivos fora da estrutura definida acima sem justificativa.
Crie o arquivo .github/copilot-instructions.md na raiz do projeto com o conteúdo do prompt acima. O Copilot lerá automaticamente as instruções em toda a sessão.
Crie o arquivo CLAUDE.md na raiz do projeto com o conteúdo do prompt acima. O Claude Code lerá automaticamente as instruções em toda a sessão.
Crie o arquivo GEMINI.md na raiz do projeto com o conteúdo do prompt acima. O Gemini CLI lerá automaticamente as instruções em toda a sessão.
Este projeto só foi possível graças às plataformas e ferramentas open-source abaixo. Deixamos nosso agradecimento especial às equipes que as constroem e mantêm:
"Where the world builds software"
Toda a colaboração da equipe — commits, pull requests, code reviews e rastreamento de issues — foi gerenciada no GitHub. A plataforma foi essencial para que os 3 desenvolvedores trabalhassem em paralelo sem conflitos, com histórico completo e revisão de código estruturada.
"Develop. Preview. Ship."
Agradecemos à equipe da Vercel pela criação e manutenção do Next.js — o framework que serve de base para toda a arquitetura deste projeto. O Next.js fornece o App Router, Server Components, renderização híbrida e as fundações que tornam o CoreFlow rápido, escalável e moderno.
"The Network of Networks"
O deploy contínuo do projeto é feito na Cloudflare, com integração direta ao GitHub via Cloudflare Workers (configurado com open-next.config.ts e wrangler.jsonc). Cada push na branch main gera automaticamente um deploy de produção na edge, entregando a aplicação ao usuário final com baixa latência e disponibilidade global.
"AI Code Reviews that Ship Code Faster"
O CodeRabbit foi utilizado como revisor de código com IA integrado ao GitHub. A cada Pull Request aberto, o CodeRabbit analisa automaticamente as mudanças linha por linha, sugere melhorias, aponta bugs e gera resumos do PR — funcionando como um revisor sênior disponível 24h. Para um time de estudantes, essa ferramenta foi essencial para garantir qualidade de código e aprendizado contínuo durante o desenvolvimento.
Feito com 💙 por alunos de ADS — UNITRI · Uberlândia, MG