Autenticação e sessão
A autenticação Steam liga uma identidade externa a rotas protegidas e ações da conta.
SKINSFURY — Marketplace Gaming Full-Stack
Produto independente desenvolvido como uma plataforma complexa e multilingue para venda de itens gaming, contas de utilizador e fluxos operacionais.
Produto independente de Diogo Oliveira · Não é trabalho para cliente · Este caso não apresenta métricas comerciais.
01 · Visão geral
Transformar uma troca com vários passos num produto coerente.
O SKINSFURY é um produto independente, não um projeto encomendado por um cliente. A experiência pública ajuda o utilizador a rever uma proposta, confirmar a ação correspondente através da Steam e acompanhar o estado na sua conta.
O trabalho vai além de um website institucional. O código reúne conteúdo público, fluxos autenticados, áreas de conta, comunicação com APIs, localização e interfaces internas protegidas.
- Tipo de produto
- Marketplace gaming independente
- Framework principal
- Next.js 15 App Router
- Idiomas
- Inglês e português
- Website público
- skinsfury.com
02 · Desafios técnicos
Vários sistemas, um percurso compreensível.
Fluxos assíncronos
Inventário, criação de propostas e alterações de estado exigem ecrãs intermédios, de sucesso e de erro claros.
Operações e pagamentos
Ofertas, períodos de proteção, pagamentos e reconciliação precisam de permanecer alinhados entre utilizador, Steam e gestão interna.
Limites entre APIs
Os componentes utilizam helpers autenticados e rotas de ponte no servidor para separar responsabilidades.
Estrutura internacional
Rotas por idioma, traduções e metadados SEO precisam de permanecer alinhados.
Administração protegida
Ferramentas operacionais abrangentes exigem permissões, confirmação explícita em ações sensíveis e separação do website público.
03 · Arquitetura e desenvolvimento
Uma aplicação Next.js modular com limites explícitos.
O App Router organiza páginas públicas, produto autenticado, área de conta e endpoints no servidor.
React e TypeScript sustentam componentes e tipos; Tailwind CSS e componentes reutilizáveis mantêm consistência responsiva.
NextAuth gere o login Steam e as sessões. Helpers autenticados e rotas de ponte ligam a interface a serviços externos sem expor credenciais privadas no browser.
Sanity gere conteúdo editorial. O sistema administrativo está separado da experiência pública e reúne gestão de utilizadores, inventário, bots, ofertas, pagamentos, promoções, parceiros e regras comerciais.
Experiência de produto
Do primeiro contacto à utilização da plataforma.
A landing pública explica a proposta e o processo antes do login. Depois da autenticação Steam, a aplicação organiza inventário, cálculo da proposta, método de pagamento e os passos seguintes da trade.
As imagens documentam interfaces reais do produto, sem expor emails, wallets, códigos Steam Guard, IDs de ofertas ou ferramentas administrativas.
04 · Funcionalidades principais01 02 03 04 05 06 07 08
Funcionalidades confirmadas no website público e no código.
Autenticação Steam
Login oficial Steam para criar sessão sem pedir passwords ou códigos Steam Guard.
Inventário e proposta
Vistas autenticadas para selecionar itens, criar propostas e acompanhar estados.
Área de conta
Perfil, segurança, histórico, dados de pagamento e ferramentas relacionadas organizados por rotas.
Ofertas e Steam Guard
Ferramentas protegidas permitem inspecionar ofertas, validar itens e direção e confirmar ações Steam apenas após revisão explícita.
Pagamentos e levantamentos
Métodos, limites, taxas, estados, períodos de proteção, filas de pagamento e reconciliação fazem parte do fluxo operacional.
Experiência multilingue
Rotas e interfaces em inglês e português.
Conteúdo e suporte
FAQ, suporte, políticas, parcerias e blog integrados na aplicação.
Painel operacional
Áreas protegidas apoiam utilizadores, inventário, bots, trades, pagamentos, promoções, parceiros e regras de pricing.
05 · Tecnologias
Uma stack moderna escolhida para o produto.
- Next.js 15
- React 19
- TypeScript
- Tailwind CSS
- NextAuth com Steam
- Integrações REST API
- i18next
- Sanity
- Zod e React Hook Form
- Framer Motion
06 · Abordagem de desenvolvimento
Complexidade organizada em partes que podem evoluir.
Rotas por responsabilidade
Marketing, aplicação, conta, blog e administração estão separados para poderem evoluir sem formar uma única árvore difícil de manter.
Interfaces reutilizáveis
Navegação, formulários, diálogos, conta e cartões reduzem comportamento duplicado.
Estados e erros explícitos
Processamento, sucesso, erro e estados de conta têm interfaces próprias.
Apresentação com segurança
O caso explica arquitetura sem publicar credenciais, endpoints privados, dados reais ou painéis internos.
07 · Produto final
Uma plataforma funcional, não um conceito estático.
O produto público está online e o repositório confirma uma aplicação muito mais ampla. O resultado demonstra capacidade para organizar uma base React/Next.js substancial, ligar autenticação e APIs, criar percursos responsivos e manter a evolução técnica.