📖 Álbum de Figurinhas Virtual - Imersão Arquitetura

(Desenvolvido na Imersão Arquitetura Web - Alura) Este é um projeto interativo de Álbum de Figurinhas Virtual desenvolvido para catalogar e colecionar diversas tecnologias da programação e lendas da computação. O projeto conta com uma interface realista que simula a física de um livro/álbum real (folheamento de páginas), integrada a uma API robusta desenvolvida em Python.

---

🎯 Objetivo do Projeto

O objetivo principal é criar uma aplicação web rica e altamente visual que se conecta a um servidor backend para carregar figurinhas dinamicamente. Ele serve como um excelente exemplo prático de arquitetura cliente-servidor (frontend/backend) integrada via API REST com suporte a CORS.

---

🛠️ Tecnologias Utilizadas

• Frontend:
  • HTML5 & CSS3 (Variáveis CSS, flexbox, grid, design responsivo)
  • JavaScript (Vanilla ES6+) para manipulação do DOM e integração com a API
  • St.PageFlip - Biblioteca JavaScript externa para simulação realista de páginas 3D
• Backend:
  • FastAPI (Python) - Framework web de alta performance para criação da API
  • Uvicorn - Servidor ASGI rápido para rodar o FastAPI
  • Glob / OS - Bibliotecas nativas do Python para mapeamento dinâmico de arquivos de imagem

---

✨ Funcionalidades

1. Simulação Realista de Álbum: Folheie as páginas arrastando os cantos, clicando nos botões de navegação ou deslizando em telas sensíveis ao toque (Mobile).
2. Integração de Áudio: Efeitos sonoros ao virar as páginas, com controle de ativação/desativação (Mute/Unmute).
3. Coleção de 48 Figurinhas: Figurinhas organizadas em 7 categorias distintas:
   • 💻 Frontend (JavaScript, React, HTML, CSS...)
   • ⚙️ Backend (Python, Java, Go, PHP...)
   • 🔌 Low Level (Assembly, Rust, C, C++...)
   • 📱 Mobile (Flutter, Swift, Kotlin...)
   • 📊 Dados (SQL, Pandas, R, Julia...)
   • 📜 Scripting (Bash, PowerShell, Lua...)
   • 🏆 Legends (Lendas e curiosidades da programação como Ada Lovelace, Befunge, Malbolge...)
4. Atualização Dinâmica via API: O álbum detecta automaticamente quais figurinhas estão com imagens salvas no diretório backend/figurinhas e preenche os slots correspondentes no frontend em tempo real.
5. Configuração Pronta de CORS: O backend está configurado para permitir que o frontend faça requisições cross-origin independentemente do endereço em que esteja rodando.

---

⚙️ Como Baixar e Executar o Projeto

Siga os passos abaixo para clonar e rodar o projeto na sua máquina:

1. Clonar o Repositório

Abra o seu terminal e execute:

git clone <url-do-repositorio>
cd imersao-arquitetura

---

2. Configurar e Rodar o Backend (API)

O backend é responsável por listar as figurinhas e servir as imagens sob demanda.

1. Navegue até a pasta do backend:

   cd backend

2. Ative o ambiente virtual Python (.venv já configurado na pasta):
   • No Windows (PowerShell):

     .venv\Scripts\Activate.ps1

   • No Linux/macOS:

     source .venv/bin/activate

3. Caso precise instalar as dependências manualmente, rode:

   pip install fastapi uvicorn

4. Inicie o servidor com Uvicorn:

   uvicorn main:app --reload

   O backend estará disponível e rodando em: http://localhost:8000
   Você pode conferir a documentação automática da API em: http://localhost:8000/docs

---

3. Visualizar o Frontend (Aplicação)

O frontend consome a API do backend para exibir as figurinhas nos slots do álbum.

1. Abra o arquivo direto: Navegue até a pasta frontend e abra o arquivo index.html diretamente em seu navegador (dando duplo clique sobre ele).

2. (Recomendado) Servir Localmente: Para evitar qualquer restrição de segurança do navegador ao usar o protocolo file://, você pode servir a pasta do frontend localmente.

   • Usando o VS Code: Instale a extensão Live Server, abra a pasta frontend e clique em "Go Live".
   • Usando o Python: Na pasta do frontend, execute no terminal:

     python -m http.server 3000

     Depois abra em seu navegador o link: http://localhost:3000

---

📂 Estrutura do Projeto

imersao-arquitetura/
├── backend/
│   ├── .venv/            # Ambiente virtual com as dependências instaladas
│   ├── figurinhas/       # Pasta contendo os arquivos de imagem das 48 figurinhas
│   └── main.py           # Código fonte do servidor FastAPI (Rotas /figurinhas e imagens)
└── frontend/
    ├── index.html        # Estrutura do álbum e seus slots
    ├── style.css         # Estilização visual (design das páginas, slots, efeitos e sombras)
    ├── app.js            # Lógica de virada de página (PageFlip) e conexão à API
    └── [audios/imagens]  # Efeitos sonoros e recursos visuais locais do álbum