Esta é uma solução para o desafio da 5ª edição do Programa de Formação da FCamara.
A Orange Portfólio é uma plataforma interativa projetada para facilitar o compartilhamento detalhado de projetos desenvolvidos por seus usuários. Essa abordagem única permite que membros da comunidade compartilhem suas experiências, habilidades e conquistas, proporcionando aos demais usuários a oportunidade de explorar e descobrir uma ampla variedade de projetos registrados na plataforma.
Video Pitch
Video Funcionalidades
- Interface intuitiva e agradável visualmente.
- Informações necessárias para o usuário acessar a plataforma.
- Botões "Começar Agora" e "Cadastrar" para navegar para a página de cadastro.
- Formulário de cadastro com validação de campos.
- Formulário de login com validação de campos.
- Garantia de preenchimento correto dos campos através de validação.
- Acesso restrito a rotas privadas para usuários logados.
- Cadastro de projetos com preenchimento obrigatório de todos os campos.
- Validar e exibir mensagem de erro se campos não estiverem preenchidos corretamente.
- Campo de tags seguindo regras específicas (separar tags apenas com espaço).
- Edição e exclusão de projetos.
- Pesquisa de projetos por tags na barra de pesquisa.
- Visualização de todos os projetos cadastrados na plataforma.
- Modal com informações detalhadas do projeto ao clicar em um projeto específico.
- Exibição de título, nome do cadastrador, tags, imagem, descrição e link de acesso no modal.
- Pesquisa por tags na barra de pesquisa.
Confira o Deploy 🚀
- React com TypeScript: Aproveitar os benefícios do sistema de tipos estáticos do TypeScript ao desenvolver componentes React, fornecendo uma camada adicional de segurança e facilitando a manutenção do código.
- CSS3: linguagem de estilo para estilizar a interface do usuário.
- Axios: Axios é um cliente HTTP baseado em Promises para fazer requisições. Pode ser utilizado tanto no navegador quanto no Node. js ou qualquer serviço de API.
- Vite: Ferramenta de construção de aplicações web rápida e eficiente, especialmente otimizada para o desenvolvimento moderno.
- Vercel: Ferramenta utilizada para fazer o deploy da aplicação web.
- Java Spring: Java com o Spring Boot oferece desenvolvimento eficiente, simplificando a configuração, facilitando a criação de aplicativos robustos e escaláveis, além de integração perfeita com o ecossistema Spring e qualque outro Framework frontend, no caso deste projeto, o React.
- PostgreSQL: Sistema gerenciador de banco de dados relacional de software livre e multiplataforma, usado em variados tipos de aplicações.
- AWS S3: O Amazon Simple Storage Service é um serviço de armazenamento de objetos que oferece escalabilidade, disponibilidade de dados, segurança e perfomance.
- Docker: Projeto de software livre para automatizar a implantação de aplicativos como contêineres autossuficientes portáteis que podem ser executado na nuvem ou localmente.
O Backend segue o padrão MVC (Model-View-Controller), onde os controladores gerenciam as requisições, os serviços manipulam a lógica de negócios, e os modelos representam os dados. Além disso, estamos implementando o padrão DAO para acesso a dados.
Você pode visualizar a documentação da API deste projeto através deste link 👉🏻 Swagger
É necessário ter o Nodejs instalado na maquina.
Para começar, clone o repositório para o seu ambiente local:
git clone https://github.com/Denis-moreira98/orange-portfolio-squad20Acesse o diretório do projeto e instale as dependências utilizando o npm:
cd frontend npm installAdicione arquivo .env na pasta raiz do frontend, passando a url da api:
VITE_API_URL="http://localhost:3000/exemplo"Inicie o servidor:
npm run devAntes de começar, você precisará ter instalado em sua máquina as seguintes ferramentas:
| Ferramenta | Versão |
|---|---|
| Java JDK | 8+ |
| Java | 17 |
| Eclipse IDE | 2023-12 |
| Postman | 10.22.10 |
| PostgreSQL | 16.1 |
| Git | 2.** |
Caso tenha dificuldade de instalar alguma ferramenta em sua maquina, deixamos aqui os videos necessários para isto:
👉🏽 Baixando PostgreSQL + Eclipse
Lembrando que os videos do AWS são necessários, uma vez que o banco de imagens está sendo utilizados lá.
Nomes de Variaveis:
**AWS_KEY
**AWS_SECRET
- Na barra de pesquisar do Windows digite: variaveis de ambiente > Clique em 'Editar Variáveis de Ambiente';
- Na aba avançado, localize o botão 'Variáveis de Ambiente...';
- Na guia variáveis do sistema, clique em 'Novo' > No popup aberto, em 'Nome de variável' digite o nome e em 'Valor da variável' o que você copiou na AWS;
- Lembrando que são duas variáveis com dois valores direntes: uma chamada AWS_KEY e outra chamada AWS_SECRET;
- Reinicie sua maquina para que as variáveis de ambiente sejam lidas pelo sistema;
git clone https://github.com/Denis-moreira98/orange-portfolio-squad20No Eclipse, importe o projeto: Vá em File > Import > Paste General > "Existing projects Maven".
No arquivo application.properties
spring.datasource.driver-class-name=org.postgresql.Driver
spring.datasource.url= jdbc:postgresql://localhost:5432/seu_bancoDeDados
spring.datasource.username=seu_username
spring.datasource.password=sua_senha
spring.jpa.hibernate.ddl-auto=update
server.error.include-stacktrace=never
server.error.include-message=never
spring.servlet.multipart.max-file-size=3MB
spring.servlet.multipart.max-request-size=3MB
aws.access.key.id=${AWS_KEY}
aws.access.key.secret=${AWS_SECRET}
aws.region=sa-east-1
aws.s3.bucket=orangeportfolio-bucket
Basta clicar na classe principal OrangePortifolioApplication > Botão Direito > Run as Java Application;
🚨 Todos videos, em especial os do AWS são necessários, uma vez que o banco de imagens está sendo utilizados lá. 🚨 Se for utilizar o postman, assim que for criado o usuário, e for realizar o login dele pela primeira vez, guarde o token. Ele deverá ser utilizado no cabeçaljo da Authorization nas demais requisições;
