crysisprophet1234/poletto-skins

Poletto Skins

📋 Descrição

Este projeto é uma plataforma online desenvolvida para facilitar a compra, venda e troca de skins do jogo Counter-Strike. A plataforma permite que os usuários listem suas skins para venda, comprem skins de outros usuários e realizem trocas de forma segura e eficiente.

🚀 Funcionalidades

• Cadastro e Login de Usuários: Permite que os usuários se registrem e façam login para acessar a plataforma.
• Listagem de Skins: Usuários podem listar suas skins para venda ou troca.
• Busca e Filtros: Ferramentas de busca e filtros avançados para encontrar skins específicas.
• Sistema de Troca: Mecanismo para realizar trocas seguras entre usuários.
• Pagamento Seguro: Integração com métodos de pagamento para transações seguras.
• Avaliações e Feedback: Sistema de avaliações para vendedores e compradores.

🖥️ Tecnologias Utilizadas

• Frontend: React.js, Vite, Typescript
• Backend: Java, Spring Boot
• Banco de Dados: PostgreSQL
• Autenticação: JWT (JSON Web Tokens)
• Hospedagem: Netlify/AWS
• OPS: Docker

⚙️ Como Rodar o Projeto Localmente

1. Clone o repositório:

   git clone https://github.com/crysisprophet1234/poletto-skins.git

2. Navegue até o diretório do projeto:

   cd poletto-skins

3. Instale as dependências do frontend:

   cd frontend/poletto-skins
   yarn or npm

4. Inicie o frontend:

   yarn dev or npm dev

5. Instale as dependências do backend:

   cd backend/poletto-skins
   mvn clean install

6. Configure o ambiente do backend:

   cd src/main/resources
   #Crie um arquivo application.yaml
   touch application.yaml
   #Adicione as propriedades abaixo

   server:
     port: 8080
   spring:
     datasource:
       driverClassName: org.h2.Driver
       url: jdbc:h2:mem:testdb
       password: 1234
       username: sa
   

7. Inicie o backend:

   mvn spring-boot:run

8. Acesse a aplicação no seu navegador em http://localhost:3000

📁 Estrutura de Pastas

/
├── backend/
│ ├── src/
│ │ ├── main/
│ │ │ ├── java/
│ │ │ | └── application.yaml
│ │ │ └── resources/
│ │ ├── test/
│ │ │ ├── java/
│ │ │ └── resources/
│ ├── target/
│ └── pom.xml
├── frontend/
│ ├── public/
│ ├── src/
│ │ ├── assets/
│ │ ├── components/
│ │ └── pages/
│ ├── .env
│ ├── index.html
│ └── package.json
└── README.md

📜 Licença

Este projeto está licenciado sob a Licença MIT - veja o arquivo LICENSE para mais detalhes.

📫 Contato

Para mais informações, entre em contato com [email protected]

📖 Sobre o README

Esse README.md inclui instruções detalhadas para configurar o backend e frontend do projeto Poletto Skins. Certifique-se de ajustar os detalhes de configuração conforme necessário para seu ambiente específico.

poletto-skins's Issues

Recebendo itens do tipo Case na API

Um ponto que potencialmente terá que ser revisado é a filtragem de itens, a questão é que a API da Steam retorna todos itens, incluindo medalhas e colecionáveis que sequer são trocáveis, sendo assim inúteis para nossa aplicação. Para não pesar no serviço da CsFloat, é necessário filtrar esses itens, no entanto devido a inconsistência no response da Steam, alguns itens ficam de fora não intecionalmente, como o caso de Cases/Containers.
No entanto, mesmo que os cases não ficassem de fora, ainda haveria um problema pois o serviço da CsFloat não conseguiria obter os dados dele por causa do fato de não possuir a url de inspeção.
Pra resolver isso, o que terá que ser feito é provavelmente criar uma nova entidade somente para os Cases.

Propriedade finish nos stickers

Atualmente a entidade Sticker no backend não possui a propriedade "finish", mas o frontend precisa disso, o serviço da CsFloat não é capaz de retornar diretamente a propriedade mas isso está incluso no nome do sticker, sendo assim pode haver um tratamento no backend para incluir a propriedade para que no frontend não haja complicações para extrair o nome da finalização sem precisar de funções auxiliares.

Retorno do serviço da CsFloat:

{
        "assetId": "37659356870",
        "ownerSteamId": "76561198191317871",
        "d": "9682745151981048367",
        "marketId": "0",
        "origin": 8,
        "quality": 4,
        "rarity": 4,
        "paintSeed": 0,
        "defIndex": 1209,
        "paintIndex": 0,
        "floatId": null,
        "lowRank": null,
        "highRank": null,
        "floatValue": 0.0,
        "imageUrl": "https://community.akamai.steamstatic.com/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXQ9QVcJY8gulRRQ0LUSOr_h56LHE59IjtFuaq_FAFv2v-Gcm0Quoq0kIOIxPKjNe2HlWhXuZN12LyY9t2g2FC1-RFlY23yIIadJxh-Pw_HA2OzhA",
        "inspectUrl": "steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S76561198191317871A37659356870D9682745151981048367",
        "min": 0.06,
        "max": 0.8,
        "weaponType": "Sticker",
        "itemName": "-",
        "rarityName": "Remarkable",
        "qualityName": "Unique",
        "originName": "Found in Crate",
        "wearName": null,
        "fullItemName": "Sticker | ropz (Foil) | London 2018", //nome da finalização entre parenteses
        "stickers": [
            {
                "stickerId": 3147,
                "slot": 0,
                "imageUrl": null,
                "wear": null,
                "scale": null,
                "rotation": null,
                "codename": "london2018_signature_ropz_foil",  //nome da finalização
                "material": "london2018/sig_ropz_foil",  //nome da finalização
                "name": "ropz (Foil) | London 2018"  //nome da finalização entre parenteses
            }
        ]
    }

Como podemos ver, a finalização é providenciada 4 vezes, apenas é necessário implementar uma lógica que extrai de uma dessas propriedades o nome da finalização e setta a nova propriedade "finish".

ImageURL no retorno do getUserInventory

Após o tratamento do service da CsFloat, a imageUrl do item é um link para png's no domínio media.steampowered.com, no entanto a qualidade das imagens providas no community.akamai.steamstatic.com é muito superio (a própria steam utiliza as imagens contidas nesse domínio) e o retorno da API da Steam contém o path da imagem nesse domínio, sendo assim é necessário ou criar nova propriedade e setar essa url do segundo domínio ou deixar apenas ela, substituindo essa atual que retorna da CsFloat.

Retorno da Steam:

//other properties...
"icon_url": "-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJegJM6dO4q5KCk_LmDLfYkWNFppYojOvFpdj20QKxqEY_a2r1cIadIwdoMl3Q8lG9l7y7g5C5u5nIznJ9-n51YP1b6DQ"

Retorno da CsFloat:

//other properties...
 "imageUrl": "http://media.steampowered.com/apps/730/icons/econ/default_generated/weapon_ak47_cu_ak_neon_rider_light_large.9209192b514c4ec98146b4747dec8ce407a977c8.png"

Ignorar paths do backend no workflow de CI do frontend

Ignorar paths do backend no workflow de CI do frontend, seguindo o exemplo do workflow de CD:

on:
  push:
    branches: ["main"]
    paths-ignore: ["/backend"]

Importar arquivos de estilo SCSS

Verificar possibilidade de importar diretamente os arquivos stylesheet em formato .scss que usam a síntaxe SASS nos componentes e páginas da aplicação, sendo assim não será mais necessário haver 3 arquivos dedicados somente para estilização em cada um dos componentes/páginas, apenas o .scss em si.

Variáveis globais para estilização dos componentes MaterialUI

Com o ínicio do uso dos componentes da MUI, foi perdido a padronização de cores definidas em um lugar só, sendo assim tendo que settar hardcode a cor ou tamanho de fonte dos elementos em cada novo componente personalizado.

Sendo assim, estou criando essa issue para focar em criar uma branch onde é settado os valores globais de cores primárias, secundárias, box-shadows e etc em um arquivo só e então utilizando-os nos componentes personalizados.

Provavelmente a solução vai ser usar um ThemeProvider fazendo um wrapping do RouterProvider para que todos elementos recebam o valor das variáveis. Também será necessário corrigir os valores nos arquivos que já receberam valores hard-code.

Corrigindo importações com @

Corrigir código do vite.config.ts

resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  }

E então corrigir imports para utilizar o @ que substitui o ./src