Modulo 8 / Projeto Integrador

Projeto Integrador

Escopo, equipes e planejamento do projeto final.

school Aula 35 schedule 2 horas

Objetivo

O que e o Projeto Integrador?

rocket_launch Aplicacao real

▸ Criar uma aplicacao web completa (full-stack)
▸ Aplicar tudo que aprendemos nos modulos 1 a 7
▸ Trabalho em equipe (2 a 4 integrantes)
▸ Simular um ambiente profissional de desenvolvimento

calendar_month Cronograma

Aula 35 Escopo, equipes, planejamento

36-37 Desenvolvimento com mentoria

38-39 Desenvolvimento + code review

Aula 40 Apresentacao final

Requisitos

O que o projeto precisa ter

web Front-end

▸ HTML semantico
▸ CSS responsivo (mobile first)
▸ JavaScript com DOM
▸ Consumo da API via fetch
▸ Feedback visual (loading, erros)

dns Back-end

▸ Node.js + Express
▸ API REST (min. 1 CRUD)
▸ MongoDB + Mongoose
▸ Autenticacao JWT
▸ Validacoes e error handler

deployed_code Infraestrutura

▸ Repositorio no GitHub
▸ README documentado
▸ Deploy na Vercel
▸ Variaveis de ambiente (.env)
▸ .gitignore configurado

Inspiracao

Ideias de projetos

shopping_cart E-commerce simples

Catalogo de produtos, carrinho, autenticacao de admin para gerenciar produtos.

task_alt Gerenciador de tarefas

Listas de tarefas com categorias, prioridades, filtros, e colaboracao entre usuarios.

restaurant Cardapio digital

Restaurante com cardapio online, categorias, pedidos, e painel de administracao.

edit_note Blog pessoal

Criacao e edicao de posts, tags, comentarios, e area de login para o autor.

event Agenda de eventos

Calendario de eventos, inscricoes, notificacoes, e painel do organizador.

quiz Plataforma de quiz

Criacao de quizzes, responder quizzes, placar, e ranking de usuarios.

Equipes

Formacao de equipes

groups Regras

▸ Equipes de 2 a 4 integrantes
▸ Cada membro deve contribuir com codigo
▸ Commits individuais no GitHub (rastreabilidade)
▸ Divisao clara de responsabilidades

person Papeis sugeridos

Tech Lead Define arquitetura, organiza o repo, faz code review

Front-end Dev Interface, HTML/CSS, consumo da API

Back-end Dev API REST, models, controllers, autenticacao

Full-stack / QA Integracao, testes, deploy, documentacao

Versionamento

Organizado no GitHub

Fluxo de trabalho

# 1. Um membro cria o repositorio
$ git init
$ git remote add origin URL_DO_REPO

# 2. Adiciona os outros como colaboradores
#    Settings > Collaborators > Add people

# 3. Cada membro clona
$ git clone URL_DO_REPO

# 4. Criar branch para cada feature
$ git checkout -b feature/login
# ... trabalhar ...
$ git add .
$ git commit -m "feat: tela de login"
$ git push origin feature/login

# 5. Abrir Pull Request no GitHub

Convencao de commits

feat: nova funcionalidade

fix: correcao de bug

style: mudanca visual (CSS)

refactor: reestruturacao de codigo

docs: documentacao

chore: configuracao, dependencias

Exemplo: feat: adicionar CRUD de produtos

Planejamento

Definindo o escopo

description Documento de escopo (o que entregar)

Informacoes do projeto

▸ Nome do projeto
▸ Descricao (1 paragrafo)
▸ Integrantes (nome, funcao)
▸ Problema que resolve
▸ Publico-alvo

Funcionalidades

▸ Lista de funcionalidades (MVP)
▸ Quais paginas/telas
▸ Quais endpoints da API
▸ Quais collections no MongoDB
▸ Recursos extras (se der tempo)

MVP = Minimum Viable Product. Comece pelo minimo funcional e adicione extras depois.

Estrutura

Estrutura base

Estrutura recomendada

meu-projeto/
  controllers/
    authController.js
    [recurso]Controller.js
  middleware/
    auth.js
    errorHandler.js
  models/
    Usuario.js
    [Recurso].js
  routes/
    authRoutes.js
    [recurso]Routes.js
  public/
    index.html
    css/style.css
    js/app.js
  index.js
  package.json
  .env
  .gitignore
  README.md

Checklist inicial

▸ Criar repositorio no GitHub
▸ npm init -y
▸ Instalar dependencias (express, mongoose, etc.)
▸ Configurar .gitignore e .env
▸ Criar index.js com conexao ao MongoDB
▸ Criar model de Usuario com auth
▸ Testar com Thunder Client
▸ Primeiro commit + push

Use o projeto-api-produtos como referencia!

Avaliacao

Criterios de avaliacao

Funcionalidade (40%)

▸ CRUD completo funcionando
▸ Autenticacao implementada
▸ Front-end consumindo a API
▸ Validacoes e tratamento de erro

Codigo (25%)

▸ Organizacao MVC
▸ Codigo limpo e legivel
▸ Boas praticas (async/await, .env)

Interface (20%)

▸ Design responsivo
▸ Experiencia do usuario (UX)
▸ Feedback visual (loading, mensagens)

Apresentacao (15%)

▸ Demonstracao funcional
▸ README documentado
▸ Deploy online
▸ Participacao de todos os membros

Documentacao

Template do README

# Nome do Projeto

Descricao curta do projeto.

## Integrantes
- Nome 1 (funcao)
- Nome 2 (funcao)

## Tecnologias
- Node.js, Express, MongoDB, JWT
- HTML, CSS, JavaScript

## Como rodar
1. Clone o repo: `git clone URL`
2. Instale: `npm install`
3. Configure o `.env` (ver `.env.example`)
4. Rode: `npm run dev`
5. Acesse: `http://localhost:3000`

## Endpoints da API
| Metodo | Rota | Descricao | Auth |
|--------|------|-----------|------|
| POST   | /api/auth/registrar | Criar conta | Nao |
| ...    | ...  | ...       | ...  |

## Deploy
Link: https://meu-projeto.vercel.app

Atividade de hoje

Mao na massa

assignment Entregavel desta aula

Forme sua equipe (2 a 4 integrantes)
Escolha o tema do projeto
Escreva o documento de escopo (nome, descricao, funcionalidades MVP, paginas, endpoints)
Crie o repositorio no GitHub e adicione os colaboradores
Crie a estrutura inicial do projeto (npm init, dependencias, index.js)
Faca o primeiro commit com a estrutura base

lightbulb Ao final da aula, envie o link do repositorio no GitHub para o professor.

Proxima aula

Aulas 36-37

Desenvolvimento orientado com mentoria.

task_alt O que aprendemos hoje

check_circleO que e o Projeto Integrador e cronograma
check_circleRequisitos (front, back, infra)
check_circleFormacao de equipes e divisao de papeis
check_circleFluxo Git com branches e Pull Requests
check_circleDefinicao de escopo e MVP

Proxima aula

auto_stories Referencia: GitHub Docs