🎬 DSMovie

DSMovie é uma aplicação web full-stack desenvolvida para que os usuários possam visualizar uma lista de filmes e avaliá-los. O projeto consiste em um backend robusto construído com Java e Spring Boot, e um frontend interativo desenvolvido com React e TypeScript, oferecendo uma experiência completa de visualização e avaliação de filmes.

✨ Funcionalidades

• Catálogo de Filmes: 🍿 Exibe uma lista de filmes com seus títulos, imagens e informações de avaliação.
• Avaliação de Filmes: ⭐️ Usuários podem atribuir uma nota (de 1 a 5 estrelas) a um filme específico.
• Média de Avaliações: Calcula e exibe a média das notas e o número total de avaliações para cada filme.
• Paginação: 📄 Navegação entre as páginas do catálogo de filmes para uma melhor experiência de usuário.
• Segurança (Backend): 🔐 Implementação de segurança para proteger as rotas da API.
• Formulário de Avaliação: Um formulário dedicado para que os usuários insiram suas notas.

🛠️ Tecnologias Utilizadas

Este projeto é um exemplo de aplicação full-stack, utilizando as seguintes tecnologias:

Frontend (React & TypeScript)

• React: Biblioteca JavaScript para construção da interface de usuário.
• TypeScript: Superset do JavaScript que adiciona tipagem estática, melhorando a robustez e manutenibilidade do código.
• Axios: Cliente HTTP baseado em Promises para comunicação com o backend.
• React Router DOM: Para roteamento no lado do cliente, gerenciando a navegação entre as páginas.
• CSS: Para estilização dos componentes.

Backend (Java & Spring Boot)

• Java: Linguagem de programação principal.
• Spring Boot: Framework para o desenvolvimento rápido de aplicações Java, com foco em microsserviços e APIs REST.
• Spring Data JPA: Para acesso a dados de forma simplificada, utilizando o Hibernate como ORM.
• Spring Security: Para implementar mecanismos de autenticação e autorização, protegendo os endpoints da API.
• PostgreSQL: Banco de dados relacional para persistência dos dados (também configurado para H2 em ambiente de desenvolvimento/teste).
• Maven: Ferramenta de automação de build e gerenciamento de dependências.
• JPA (Java Persistence API): Padrão para mapeamento objeto-relacional.

📂 Estrutura do Projeto

O projeto está dividido em duas partes principais: backend e frontend.

├── backend/                    # Código-fonte do backend (API REST) ☕
│   ├── .mvn/                   # Wrappers Maven
│   ├── src/main/java/          # Código Java principal
│   │   └── com/devsuperior/dsmovie/
│   │       ├── config/         # Configurações (ex: segurança)
│   │       ├── controllers/    # Controladores REST para filmes e avaliações
│   │       ├── dto/            # Objetos de Transferência de Dados (DTOs)
│   │       ├── entities/       # Entidades JPA (Movie, Score, User)
│   │       ├── repositories/   # Repositórios Spring Data JPA
│   │       └── services/       # Lógica de negócio e serviços
│   ├── src/main/resources/     # Arquivos de configuração (application.properties, import.sql)
│   ├── pom.xml                 # Configurações do projeto Maven
│   └── ...                     # Outros arquivos do backend
└── frontend/                   # Código-fonte do frontend (Aplicação React) 🌐
    ├── public/                 # Arquivos públicos (index.html, manifest.json)
    ├── src/                    # Código-fonte React/TypeScript
    │   ├── assets/img/         # Imagens e ícones
    │   ├── components/         # Componentes React (MovieCard, Navbar, Pagination, FormCard, etc.) 🧩
    │   ├── pages/              # Páginas da aplicação (Listing, Form)
    │   ├── types/              # Definições de tipos TypeScript
    │   ├── utils/              # Funções utilitárias (chamadas de API)
    │   ├── App.tsx             # Componente principal
    │   ├── index.tsx           # Ponto de entrada da aplicação
    │   └── index.css           # Estilos globais
    ├── package.json            # Dependências do projeto Node.js
    ├── yarn.lock               # Bloqueio de versões de dependências
    └── tsconfig.json           # Configurações do TypeScript

🚀 Como Começar

Para rodar o projeto completo em sua máquina local, siga os passos abaixo para configurar e executar tanto o backend quanto o frontend.

📋 Pré-requisitos

• Java Development Kit (JDK): Versão 11 ou superior.
• Node.js: Versão 14 ou superior (inclui npm).
• Yarn (recomendado) ou npm.
• Maven: Já incluso no projeto através do mvnw (Maven Wrapper).
• Banco de Dados: PostgreSQL (para ambiente de produção ou local) ou H2 (para testes e desenvolvimento rápido).

⬇️ Configuração e Execução do Backend

1. Navegue até o diretório backend:

   cd dsmovie/backend

2. Configure o Banco de Dados:

   • Abra src/main/resources/application-dev.properties (para desenvolvimento) ou application-prod.properties (para produção).
   • Atualize as configurações de conexão com o seu banco de dados PostgreSQL (username, password, URL do banco).
   • Exemplo para PostgreSQL:

     spring.datasource.url=jdbc:postgresql://localhost:5432/dsmoviedb
     spring.datasource.username=seu_usuario_postgres
     spring.datasource.password=sua_senha_postgres
     spring.jpa.hibernate.ddl-auto=update
     spring.jpa.show-sql=true

   • Se for usar H2 em memória para testes, as configurações padrão já devem funcionar.

3. Execute o Backend:

   ./mvnw spring-boot:run

   Ou, no Windows:

   mvnw spring-boot:run

   O backend será iniciado em http://localhost:8080.

⬇️ Configuração e Execução do Frontend

1. Abra um novo terminal e navegue até o diretório frontend:

   cd dsmovie/frontend

2. Instale as dependências:

   yarn install
   # ou
   npm install

3. Execute o Frontend:

   yarn start
   # ou
   npm start

   O frontend será iniciado em http://localhost:3000. Certifique-se de que o backend esteja rodando para que os dados sejam carregados.

🔗 Endpoints da API (Backend)

• GET /movies: Retorna uma lista paginada de filmes.
• GET /movies/{id}: Retorna os detalhes de um filme específico.
• PUT /scores: Permite que um usuário avalie um filme.

☁️ Deploy na Nuvem

• Heroku
• Netilify

🌎 Ver Site Funcionando

• Ver Site

🤝 Contribuição

Contribuições são bem-vindas! Se você tiver sugestões de melhorias, detetar bugs ou quiser adicionar novas funcionalidades, sinta-se à vontade para:

1. Abrir uma Issue para discutir a proposta.
2. Criar um Pull Request com suas alterações.

Email-me: gustavo-mmello@hotmail.com Conecte-se comigo em LinkedIn

⚖️ Licença

Este projeto é de código aberto.