🎓 Plataforma de Cursos — Frontend Async & API FastAPI

Projeto desenvolvido para fins de portfólio e demonstração prática de integração entre uma interface web (HTML/CSS/JS Vanilla) e um backend moderno em Python com FastAPI e Uvicorn.

O grande diferencial deste projeto é o tratamento de resiliência na interface (UI Fallback): quando o servidor backend está desligado, o frontend exibe estados de placeholder genéricos ("Thumbnail #1", "Thumbnail #2", etc.). Assim que o servidor é iniciado, a aplicação se conecta de forma assíncrona, atualiza o status de rede e carrega as thumbnails e dados reais diretamente da API.

---

📸 Demonstração do Comportamento

Servidor Offline (Fallback UI)	Servidor Online (Dados & Thumbnails Reais)
Cards genéricos com indicações temporárias e status em vermelho	Transição automática, status verde e imagens servidas pelo FastAPI

---

🛠️ Tecnologias Utilizadas

Backend

• Python: Linguagem principal do backend.
• FastAPI: Framework web assíncrono de altíssima performance.
• Uvicorn: Servidor web ASGI para execução do FastAPI.
• FastAPI StaticFiles: Servimento de arquivos estáticos (imagens de thumbnails).
• CORS Middleware: Configuração de permissões de origem cruzada para consumo pelo frontend.

Frontend

• HTML5: Estruturação semântica da página.
• CSS3: Estilização responsiva com CSS Grid, Flexbox e transições sutis.
• JavaScript (Vanilla / ES6+): Consumo assíncrono de API via fetch() e manipulação do DOM.

---

📁 Estrutura do Projeto

plataforma-cursos-portfolio/
│
├── backend/
│   ├── main.py                  # Aplicação FastAPI e rotas da API
│   └── static/
│       └── thumbnails/          # Pasta com as imagens dos cursos
│           ├── curso1.jpg
│           ├── curso2.jpg
│           └── curso3.jpg
│
├── frontend/
│   ├── index.html               # Estrutura HTML da plataforma
│   ├── styles.css               # Estilização e layout responsivo
│   └── script.js                # Lógica de integração e fallback
│
├── .gitignore
└── README.md                    # Documentação do projeto

---

🚀 Como Executar o Projeto

Pré-requisitos

• Python 3.10+ instalado em sua máquina.
• Um navegador web atualizado (Chrome, Edge, Firefox, etc.).

1. Clonar o repositório

git clone [https://github.com/seu-usuario/plataforma-cursos-portfolio.git](https://github.com/seu-usuario/plataforma-cursos-portfolio.git)
cd plataforma-cursos-portfolio

2. Configurar e Executar o Backend

Navegue até a pasta do backend e instale as dependências necessárias:

cd backend
pip install fastapi uvicorn

Suba o servidor Uvicorn:

uvicorn main:app --reload

O servidor estará rodando em: http://localhost:8000
A documentação interativa (Swagger UI) estará disponível em: http://localhost:8000/docs

3. Abrir o Frontend

Você pode abrir o arquivo frontend/index.html de duas formas:

• Diretamente: Dando duplo clique no arquivo index.html.
• Via Live Server (VS Code): Clicando com o botão direito no index.html e selecionando Open with Live Server.

---

🧪 Como Testar a Resiliência da Interface (Fallback)

1. Testando Offline:

   • Com o servidor Python desligado, abra o arquivo index.html.
   • Note que a interface renderizará cards genéricos com a indicação Thumbnail #1, Thumbnail #2, etc., e a tag Status: Servidor Desconectado.

2. Testando Online:

   • No terminal, inicie o backend (uvicorn main:app --reload).
   • Recarregue a página no navegador.
   • A requisição fetch será bem-sucedida, o status mudará para Status: Servidor Conectado e as imagens reais vindas de http://localhost:8000/static/thumbnails/ serão renderizadas na tela.

---

🔌 Endpoints da API

Método	Rota	Descrição
GET	/api/cursos	Retorna o JSON com a lista de cursos e URLs das thumbnails
GET	/static/thumbnails/{filename}	Serve a imagem referente à thumbnail solicitada
GET	/docs	Documentação interativa gerada pelo Swagger UI

---

💡 Conceitos Aplicados

• Tratamento de Erros de Rede: Utilização do bloco try...catch no JavaScript para lidar com falhas de requisição sem quebrar a aplicação.
• Arquivos Estáticos no FastAPI: Uso do módulo StaticFiles para servir arquivos de mídia com alto desempenho.
• CORS (Cross-Origin Resource Sharing): Configuração correta de cabeçalhos HTTP para permitir comunicação entre origens diferentes em ambiente de desenvolvimento.
• Design Responsivo: Layout adaptável usando CSS Grid com repeat(auto-fit, minmax(...)) para exibição ideal em mobile e desktop.

---

👨‍💻 Autor

Desenvolvido por ☕🧉 Brendow Rodrigues. Sinta-se à vontade para entrar em contato ou dar um fork neste repositório!