Módulo 2: Fundamentos

Estrutura do projeto e banco de dados

Estrutura do projeto Next.js

criando o projeto e entendendo a organização

🎯 O que vamos construir

Vamos criar um Sistema de Gerenciamento de Franquias completo! O sistema terá uma API para gerenciar dados e uma interface visual para interagir com eles.

💡 Nossa estratégia:

Primeiro construímos a API (backend) - a "cozinha" do restaurante. Depois criamos a interface (frontend) - o "salão" onde os clientes interagem. Isso garante que temos uma base sólida antes de criar as telas.

🚀 Passo 1: Criar o projeto

Criar projeto Next.js

npx create-next-app@latest meu-sistema-franquias

cd meu-sistema-franquias

Cria toda a estrutura inicial automaticamente

Instalar bibliotecas extras

npm install prisma @prisma/client

npm install antd lucide-react

Prisma para banco de dados, Ant Design e Lucide para interface

Testar se funcionou

npm run dev

Abre em http://localhost:3000 - se aparecer a página do Next.js, funcionou!

📁Passo 2: Entender as pastas

O Next.js organiza o projeto em pastas específicas. Cada uma tem sua função:

📁

src/app/api/

Para que serve: Criar a API (rotas do backend)

api/franquias/route.js → endpoint /api/franquias
api/funcionarios/route.js → endpoint /api/funcionarios

📁

src/app/

Para que serve: Criar páginas (frontend)

page.jsx → página inicial (/)
franquias/page.jsx → página /franquias
funcionarios/page.jsx → página /funcionarios

📁

src/components/

Para que serve: Componentes reutilizáveis

Header.jsx → menu de navegação
FranquiaCard.jsx → card de franquia
FuncionarioForm.jsx → formulário

📁

prisma/

Para que serve: Configuração do banco de dados

schema.prisma → estrutura das tabelas
franquias.db → arquivo do banco SQLite

🧠 Passo 3: Conceitos importantes

Antes de começar a programar, vamos entender 3 conceitos essenciais:

🔌

1. API Routes

APIs são "portas" que permitem criar, ler, atualizar e deletar dados. No Next.js, criamos APIs na pasta src/app/api/

💡 Exemplo:

api/franquias/route.js se torna o endpoint /api/franquias que você acessa pela URL

📡

2. Métodos HTTP

Cada endpoint pode ter diferentes métodos para diferentes ações com os dados

💡 Os 4 principais:

GET = buscar dados | POST = criar novo | PUT = atualizar | DELETE = remover

🧩

3. Componentes

Blocos reutilizáveis de interface. Crie uma vez, use em várias páginas!

💡 Analogia:

Como peças de LEGO: você monta um Header e usa ele em todas as páginas

🧩 Por que usar componentes?

♻️

Reutilização

Crie um Header e use em todas as páginas sem repetir código

🔧

Fácil de manter

Mude em um lugar, atualiza automaticamente em todos

📂

Organização

Cada componente tem sua função específica

🎁

Componentes prontos

Use bibliotecas com componentes profissionais já feitos!

📦 Bibliotecas que instalamos:

Ant Design

Componentes profissionais prontos: menus, botões, formulários, tabelas e muito mais

Site: ant.design

Lucide React

Milhares de ícones bonitos e modernos prontos para usar

Site: lucide.dev

👨‍💻 Exemplo: Componente Header

Veja como criar um Header reutilizável completo com Ant Design. Copie os dois arquivos abaixo para usar no seu projeto:

📄 src/components/Header.jsx

'use client'

import { Menu } from 'antd'
import { 
  HomeOutlined, 
  UserOutlined, 
  ShopOutlined, 
  DashboardOutlined 
} from '@ant-design/icons'
import { usePathname } from 'next/navigation'
import Link from 'next/link'
import styles from './Header.module.css'

export default function Header() {
  const pathname = usePathname()

  const menuItems = [
    {
      key: '/',
      label: <Link href="/">Home</Link>,
      icon: <HomeOutlined />
    },
    {
      key: '/funcionarios',
      label: <Link href="/funcionarios">Funcionários</Link>,
      icon: <UserOutlined />
    },
    {
      key: '/franquias',
      label: <Link href="/franquias">Franquias</Link>,
      icon: <ShopOutlined />
    },
    {
      key: '/dashboard',
      label: <Link href="/dashboard">Dashboard</Link>,
      icon: <DashboardOutlined />
    }
  ]

  return (
    <header className={styles.header}>
      <div className={styles.container}>
        
        {/* Logo/Título */}
        <Link href="/" className={styles.logo}>
          <h2 className={styles.logoText}>
            Sistema de Franquias
          </h2>
        </Link>

        {/* Menu de navegação */}
        <Menu
          mode="horizontal"
          selectedKeys={[pathname]}
          items={menuItems}
          className={styles.menu}
        />

      </div>
    </header>
  )
}

🎨 src/components/Header.module.css

.header {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  background: white;
}

.logo {
  cursor: pointer;
  transition: opacity 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.logo:hover {
  opacity: 0.8;
  text-decoration: none;
}

.logoText {
  margin: 0 !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  background: linear-gradient(45deg, #667eea, #764ba2) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  user-select: none;
  color: transparent !important;
}

.menu {
  border: none !important;
  background: transparent !important;
  flex: 1;
  justify-content: flex-end;
  max-width: 500px;
}

/* Evitar flash nos links */
.menu a {
  color: inherit !important;
  text-decoration: none !important;
}

.menu a:hover {
  text-decoration: none !important;
}

/* Responsivo */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
    flex-direction: column;
    height: auto;
    padding-top: 12px;
    padding-bottom: 8px;
  }
  
  .logo {
    margin-bottom: 8px;
  }
  
  .logoText {
    font-size: 1.2rem !important;
  }
  
  .menu {
    width: 100%;
    justify-content: center;
  }
}

✅

usePathname: Detecta a página atual para destacar o menu ativo

✅

Menu do Ant Design: Navegação profissional com ícones e hover effects

✅

Responsivo: Se adapta automaticamente para mobile

✅

Sticky Header: Fica fixo no topo ao rolar a página

💡 Como usar:

1. Crie a pasta src/components/
2. Crie o arquivo Header.jsx com o código acima
3. Crie o arquivo Header.module.css com os estilos
4. Importe no layout: import Header from '@/components/Header'

🎯 Nossa API: O que vamos criar

Vamos começar pela API - 8 endpoints no total para gerenciar tudo:

📋 Franquias (4 endpoints)

GET /api/franquias → Listar todas
POST /api/franquias → Criar nova
PUT /api/franquias/[id] → Atualizar
DELETE /api/franquias/[id] → Deletar

👥 Funcionários (4 endpoints)

GET /api/funcionarios → Listar todos
POST /api/funcionarios → Criar novo
PUT /api/funcionarios/[id] → Atualizar
DELETE /api/funcionarios/[id] → Deletar

💡 Por que API primeiro?

É como construir o motor do carro antes da carroceria. Com a API pronta, garantimos que os dados funcionam perfeitamente antes de criar as telas bonitas!

←Módulo Anterior Próximo Módulo→