O objetivo deste trabalho é capturar a essência do grupo RUA 4.0.4 e traduzi-la em uma plataforma web que funcione tanto como um portfólio para os artistas quanto como uma vitrine para aqueles que desejam adquirir seus produtos. Este trabalho teve como objetivo criar um sistema multifuncional que permita a apresentação, venda e gerenciamento de obras de arte, facilitando a comunicação entre artistas e apreciadores. Isso será feito através de uma loja virtual, uma landing page com diversas experiências visuais para o cliente e um dashboard de gerenciamento para o administrador.
- Ana Luiza Machado Alves
- Lucas de Carvalho Barbosa
- Lucas Henrique Chaves de Barros
- Matheus Brasil Aguiar
- Matheus Martins da Silva Porto
- Raquel Inez de Almeida Calazans
- Joyce Christina de Paiva Carvalho
- Soraia Lúcia da Silva
Antes de começar, certifique-se de ter os seguintes requisitos instalados:
- Java 21 - Para rodar o backend Spring Boot.
- npm 10.8.2 - Gerenciador de pacotes do Node.js.
- Node.js LTS (20.17.0) - Ambiente de execução para o frontend React.
- PostgreSQL LTS (17.2) - Banco de dados relacional para persistência do sistema.
- pgAdmin 4 ou DBeaver - Ferramentas para gerenciar o banco de dados.
Nesta seção listaremos as principais tecnologias e decisões arquiteturais do nosso projeto.
- Java com Spring Boot
- Arquitetura MVC - estrutura para separar as camadas de apresentação, lógica de negócios e dados.
- Repository Pattern - para acesso aos dados com desacoplamento entre as camadas de negócio e de persistência.
- Utilização de JPA/Hibernate - para persistência de dados e mapeamento objeto-relacional.
- Swagger - para documentação automática da nossa API REST.
- Core: React + TypeScript
- Vite + SWC - ferramentas para bundling rápido e compilação eficiente do JavaScript e TypeScript.
- React Router DOM - navegação entre páginas e gerenciamento de rotas.
- React Context API - gerenciamento de estado global e comunicação entre componentes.
- Axios - biblioteca para requisições HTTP para integração com o back-end.
- Arquitetura baseada em componentes - estrutura em que cada elemento de UI é construído como um componente independente e reutilizável.
- Estilização:
- shadcn/ui + Radix - biblioteca open-source de componentes altamente customizáveis.
- Tailwind CSS - framework de utilitários para construção rápida de layouts.
Abra o terminal e execute:
git clone https://github.com/ICEI-PUC-Minas-PPLES-TI/plf-es-2024-2-ti4-1254100-rua-4-0-4.gitcd .\Codigo-
Acesse o diretório do back-end
cd \Rua-404-Api\
-
Instale as dependências do Java
./mvnw clean install
-
Configure o banco de dados
- Ao seguir o passo a passo disponibilizado na documentação do PostgreSQL ou do DBeaver, crie uma base de dados que servirá como seu banco de dados local.
- Atualize as credenciais do arquivo
application.propertiesdo backend.
spring.datasource.url=jdbc:postgresql://localhost:5432/rua404 spring.datasource.username=seu_usuario spring.datasource.password=sua_senha
Obs: normalmente o
usernameesenhaé configurado convencionalmente como "root". -
Execute o servidor back=end
./mvnw spring-boot:run
-
Acesse o diretório do front-end
cd \rua-404-web\
-
Instale as dependências
npm install --save
-
Execute o servidor front-end
npm run dev
-
Acesse a aplicação no navegador Normalmente a aplicação ficará disponível em http://localhost:5173.
- Certifique-se de que o back-end está rodando antes de acessar o front-end.
- Verifique se as portas padrão (8080 para o back-end e 5173 para o front-end) não estão em uso.
O front-end foi hospedado na Vercel, aproveitando sua integração com projetos React e suporte nativo a aplicações construídas com Vite. Acesse a aplicação front-end em: https://rua-404.vercel.app/
O back-end foi implementado utilizando o framework Spring Boot, com deploy distribuído em dois ambientes:
- Railway: Plataforma para deploy rápido e gerenciamento automático de serviços.
- Azure: Para maior estabilidade e controle em produção.
- Acesse o banco de dados em: ruafourzerofour.postgres.database.azure.com
Esse projeto está sob licença. Veja o arquivo LICENÇA para mais detalhes.