Site · Catálogo · Início Rápido · API · Reportar Bug · Solicitar Badge
FIAP Achievements é um serviço open-source que permite que estudantes exibam suas conquistas da FIAP — Nano Courses, Challenges e Global Solutions — diretamente no GitHub, portfólios e qualquer lugar que renderize imagens HTML.
Cada badge é um SVG nítido, servido por API com cache CDN de 1 ano, disponível em três temas de cor. Nenhuma chave de API. Nenhum cadastro. Apenas uma <img>.
- 🌐 Site e Catálogo
- 🚀 Início Rápido
- 📡 Referência da API
- 🏅 Catálogo de Badges
- 💡 Exemplos de Uso
- 🏗️ Arquitetura
- ⚙️ Rodando Localmente
- 🤝 Contribuindo
- 🔒 Segurança
- 📄 Licença
A forma mais fácil de encontrar suas badges é pelo site — sem precisar decorar IDs ou slugs.
| Página | URL | O que você encontra |
|---|---|---|
| Home | fiap-achievements.vercel.app/home | Visão geral do projeto e como usar |
| Catálogo | fiap-achievements.vercel.app/catalog | Todas as badges com busca e filtros por categoria |
No catálogo você encontra os IDs dos Nano Courses e os slugs de Challenge e Global Solution que precisa para montar sua URL.
Cole o ID diretamente no parâmetro badge:
<img src="https://fiap-achievements.vercel.app/api/badge?badge=SEU_ID&theme=dark" width="100" /><img src="https://fiap-achievements.vercel.app/api/badge?badge=challenge&year=2025&company=EMPRESA&ranking=1&theme=dark" width="100" /><img src="https://fiap-achievements.vercel.app/api/badge?badge=gs&year=2025&topic=TOPICO&theme=dark" width="100" />Onde encontrar os valores? Acesse o Catálogo ou consulte o Catálogo de Badges abaixo.
Pré-visualização de qualquer badge:
https://fiap-achievements.vercel.app/badge?badge=SEU_ID&theme=dark
Retorna a imagem SVG da badge solicitada. Sempre retorna HTTP 200 com Content-Type: image/svg+xml — em caso de erro, serve um SVG de erro temático. A tag <img> nunca quebra.
| Parâmetro | Tipo | Obrigatório | Padrão | Descrição |
|---|---|---|---|---|
badge |
string |
✅ | — | ID numérico do Nano Course ou tipo: challenge, gs |
theme |
string |
❌ | dark |
Tema visual: light, dark ou black |
year |
number |
✅ challenge / gs | — | Ano da edição (ex: 2025) |
company |
string |
✅ challenge | — | Slug da empresa parceira (ex: jovi) |
topic |
string |
✅ gs | — | Slug do tema da G.S (ex: future-of-work) |
ranking |
number |
❌ challenge | 1 |
Posição: 1, 2 ou 3 |
| Tipo | badge= |
Parâmetros obrigatórios | Exemplo |
|---|---|---|---|
| Nano Course | ID numérico | — | https://fiap-achievements.vercel.app/api/badge?badge=294870&theme=dark |
| Challenge | challenge |
year, company |
https://fiap-achievements.vercel.app/api/badge?badge=challenge&year=2025&company=jovi&ranking=1 |
| Global Solution | gs |
year, topic |
https://fiap-achievements.vercel.app/api/badge?badge=gs&year=2025&topic=future-of-work |
Três temas disponíveis. Escolha o que melhor combina com o fundo do seu perfil.
| Tema | Parâmetro | Ideal para |
|---|---|---|
| Light | light |
READMEs e portfólios com fundo claro |
| Dark | dark |
READMEs e perfis com fundo escuro |
| Black | black |
Fundos OLED / preto total |
| Cabeçalho | Badge encontrada | Fallback / Erro |
|---|---|---|
Content-Type |
image/svg+xml |
image/svg+xml |
Cache-Control |
public, immutable, max-age=31536000 |
public, max-age=60 |
X-Badge-Status |
ok |
not-found · bad-request · internal-error |
Badges ficam em cache por 1 ano na CDN — carregam instantaneamente em qualquer lugar.
💡 Dica: prefira navegar pelo catálogo interativo — ele tem busca, filtros e preview em tempo real.
Todas as badges estão disponíveis nos três temas. As pré-visualizações abaixo exibem a variante light.
Busque pelo ID numérico do curso diretamente no parâmetro badge:
https://fiap-achievements.vercel.app/api/badge?badge=SEU_ID&theme=dark
Passe badge=challenge e informe year, company e opcionalmente ranking (padrão: 1):
https://fiap-achievements.vercel.app/api/badge?badge=challenge&year=ANO&company=EMPRESA&ranking=1&theme=light
| Empresa | 🥇 1º lugar | 🥈 2º lugar | 🥉 3º lugar |
|---|---|---|---|
Jovi (jovi) |
|||
Soul Up (soul-up) |
|||
TOTVS (totvs) |
Passe badge=gs e informe year e topic:
https://fiap-achievements.vercel.app/api/badge?badge=gs&year=ANO&topic=TOPICO&theme=light
| Tema | Light | Dark | Black |
|---|---|---|---|
Future of Work (future-of-work) |
<div align="center">
<img src="https://fiap-achievements.vercel.app/api/badge?badge=294870&theme=dark" width="100" />
<img src="https://fiap-achievements.vercel.app/api/badge?badge=864195&theme=dark" width="100" />
<img src="https://fiap-achievements.vercel.app/api/badge?badge=928143&theme=dark" width="100" />
</div><img src="https://fiap-achievements.vercel.app/api/badge?badge=challenge&year=2025&company=oracle&ranking=1&theme=dark" width="100" /><img src="https://fiap-achievements.vercel.app/api/badge?badge=gs&year=2025&topic=future-of-work&theme=dark" width="100" /><div style="display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;">
<img src="https://fiap-achievements.vercel.app/api/badge?badge=294870&theme=light" width="100" />
<img src="https://fiap-achievements.vercel.app/api/badge?badge=challenge&year=2025&company=oracle&ranking=1&theme=light" width="100" />
<img src="https://fiap-achievements.vercel.app/api/badge?badge=gs&year=2025&topic=future-of-work&theme=light" width="100" />
</div>fiap-achievements/
├── api/
│ └── badge.js # Serverless function (Vercel)
├── public/
│ └── assets/
│ └── certificates/
│ ├── nano/
│ │ ├── light/ {id}.svg
│ │ ├── dark/ {id}.svg
│ │ └── black/ {id}.svg
│ ├── challenge/
│ │ └── {year}/{company}/
│ │ ├── light/ {ranking}.svg
│ │ ├── dark/ {ranking}.svg
│ │ └── black/ {ranking}.svg
│ ├── gs/
│ │ └── {year}/{topic}/
│ │ ├── light/ 1.svg
│ │ ├── dark/ 1.svg
│ │ └── black/ 1.svg
│ ├── error-light.svg
│ ├── error-dark.svg
│ └── error-black.svg
├── src/
│ ├── components/
│ │ ├── Header.jsx
│ │ └── Footer.jsx
│ ├── routes/
│ │ ├── Home.jsx # Página inicial (/home)
│ │ ├── Catalog.jsx # Catálogo interativo (/catalog)
│ │ └── Badges.jsx # Pré-visualização (/badge)
│ ├── hooks/
│ │ └── useCatalog.js
│ ├── css/
│ ├── App.jsx
│ └── main.jsx
├── .github/
│ ├── workflows/
│ │ ├── ci.yml # Lint e build em todo PR/push para main
│ │ └── validate-badges.yml # Validação de SVGs em PRs com badges
│ └── pull_request_template.md
├── vercel.json
└── vite.config.js
Rotas da aplicação:
| Rota | Descrição |
|---|---|
/home |
Página inicial com visão geral do projeto |
/catalog |
Catálogo interativo com busca e filtros |
/badge |
Pré-visualização de qualquer badge por parâmetros de URL |
/api/badge |
Endpoint da serverless function — retorna o SVG |
Fluxo da API:
GET /api/badge?badge=...&theme=...
│
├─ badge numérico → nano/{theme}/{id}.svg
├─ badge=challenge → challenge/{year}/{company}/{theme}/{ranking}.svg
└─ badge=gs → gs/{year}/{topic}/{theme}/1.svg
│
├─ arquivo encontrado → SVG + cache 1 ano
└─ não encontrado → error-{theme}.svg + cache 60s
Pré-requisitos: Node.js ≥ 18, npm
# 1. Clone o repositório
git clone https://github.com/leoosilvp/fiap-achievements.git
cd fiap-achievements
# 2. Instale as dependências
npm install
# 3. Inicie o servidor de desenvolvimento
npm run devAtenção: o endpoint
/api/badgerequer o runtime da Vercel. Use a Vercel CLI para suporte completo ao backend local.
npm i -g vercel
vercel devContribuições são bem-vindas e ajudam a expandir o catálogo da comunidade.
Adicione os SVGs nos três temas:
public/assets/certificates/nano/light/{id}.svg
public/assets/certificates/nano/dark/{id}.svg
public/assets/certificates/nano/black/{id}.svg
Crie a estrutura de diretórios com os três rankings para cada tema:
public/assets/certificates/challenge/{year}/{company}/light/{ranking}.svg
public/assets/certificates/challenge/{year}/{company}/dark/{ranking}.svg
public/assets/certificates/challenge/{year}/{company}/black/{ranking}.svg
Rankings
1,2e3são obrigatórios para cada empresa e tema.
public/assets/certificates/gs/{year}/{topic}/light/1.svg
public/assets/certificates/gs/{year}/{topic}/dark/1.svg
public/assets/certificates/gs/{year}/{topic}/black/1.svg
- SVGs devem estar otimizados e abaixo de 300 KB
- Os três temas (
light,dark,black) são obrigatórios - Nenhum ID duplicado dentro do mesmo tipo
- Abra um Pull Request com descrição clara — o template guia o preenchimento
npm install # instalar dependências
npm run dev # servidor local (frontend)
npm run lint # lint
npm run build # build de produção
vercel dev # servidor local com suporte ao endpoint /api/badgeTodos os parâmetros fornecidos pelo usuário são sanitizados antes de qualquer uso — apenas [a-z0-9\-_] é permitido em slugs e apenas dígitos em valores numéricos. A API nunca executa path traversal, nunca expõe o sistema de arquivos além de public/assets/certificates/ e nunca retorna uma página de erro HTTP.
Distribuído sob a Licença MIT.
Lets Rock The Future