🚀 Projeto de Site para Tibia e Poketibia em React - Compartilhando pra Galera Finalizar! (Isso é... Quem quiser finalizar hahaha)

[Cloud 45]

Fala, pessoal! Tudo certo? 😎 Faz um tempão que não posto nada, mas voltei com um projeto que comecei há um tempo e tá precisando de uma força da comunidade pra ficar 100%! É um site de Tibia e Poketibia feito em React, com uma pegada moderna pra fugir dos sites clássicos em PHP que dominam a cena. O projeto tá incompleto, mas já tem uma base sólida, e tô compartilhando pra quem quiser meter a mão, contribuir e deixar ele brabo. Bora dar uma olhada no que já tá feito, nas tecnologias usadas e no que falta pra finalizar?

🛠️ O que já tá pronto?

O site já tem uma estrutura funcional, com várias features implementadas e rodando. Aqui vai um resumo do que já tá no ar:

• Frontend em React 18.3.1:

  • Interface moderna, com componentes reutilizáveis e estilização em Tailwind CSS.

  • Suporte a i18n (internacionalização) com traduções manuais pra deixar o site acessível em vários idiomas.

  • Páginas principais como Home, Login, Registro, e uma base pra Market e Shop.

  • Componente de Footer com links rápidos (Home, Download, Shop, Market) e redes sociais (ícones do Lucide-React).

  • CharacterMarket.tsx: Página de mercado de personagens com listagem de personagens à venda, listagem de anúncios do usuário, histórico de compras/vendas, e um modal pra listar personagens pra venda (ainda precisa de ajustes).

• Backend em Express (Node.js):

  • API RESTful com rotas pra autenticação, mercado de personagens (/market), e loja (/shop).

  • Integração com MySQL usando o pacote mysql2 pra gerenciar contas, personagens, transações, etc.

  • Autenticação com express-session e middleware authenticateSession pra proteger rotas.

  • Rotas implementadas:

    • GET /market/characters: Lista personagens à venda.

    • POST /market/sell: Lista um personagem pra venda.

    • POST /market/buy: Compra um personagem.

    • GET /market/my-listings: Lista os anúncios do usuário.

    • DELETE /market/cancel/:id: Cancela um anúncio.

    • GET /market/history: Histórico de compras/vendas.

    • GET /shop/items: Lista itens da loja.

    • POST /shop/purchase: Compra itens.

    • GET /shop/history: Histórico de compras da loja.

• Banco de Dados (MySQL -> Compativel com PokeMonster Database):

  • Tabelas principais:

    • accounts: Dados dos usuários (id, name, email, password, pontos, etc.).

    • players: Personagens (id, account_id, name, level, vocation, sex, etc.).

    • player_seller: Personagens à venda (id, account_seller, char_id, price, pix_blocked, etc.).

    • historico_bazar: Histórico de transações do mercado (account_id_comprador, account_id_vendedor, char_id, valor, etc.).

    • shop_item: Itens da loja (id, item_id_tibia, nome, valor, quantidade, etc.).

    • shop_historico: Histórico de compras na loja (account_id, shop_item_id, player_id, quantidade, valor, etc.).

  • Queries otimizadas com transações pra compras seguras (ex.: transferência de pontos e personagens).

• Segurança:

  • Senhas criptografadas com bcryptjs (mas a implementação tá incompleta, precisa finalizar).

  • Uso de SHA1 em algumas partes (pode ser substituído por algo mais seguro, tipo bcrypt completo ou JWT).

  • Sessões gerenciadas com express-session.

• Outras Features:

  • Componente de loading (LoadingSpinner) pra melhorar a UX.

  • Estilização responsiva com Tailwind CSS e ícones do lucide-react (ex.: Crown, ShoppingBag, Coins, etc.).

  • Suporte a transações no mercado (compra/venda de personagens com pontos) e na loja (compra de itens).

📋 Tecnologias Usadas

• Frontend:

  • React 18.3.1: Biblioteca principal pra interface.

  • react-i18next: Pra tradução manual (i18n).

  • Tailwind CSS: Estilização moderna e responsiva.

  • lucide-react: Ícones vetoriais (Crown, ShoppingBag, etc.).

  • react-router-dom: Navegação entre páginas (Home, Market, Shop, etc.).

• Backend:

  • Express: Servidor Node.js pra API RESTful.

  • mysql2: Conexão com banco MySQL.

  • express-session: Gerenciamento de sessões.

  • bcryptjs: Criptografia de senhas (incompleta).

  • SHA1: Usado em algumas partes (pode ser atualizado).

• Banco de Dados:

  • MySQL: Banco relacional com tabelas otimizadas pra Tibia.

🔍 O que falta implementar?

O projeto tá com uma base forte, mas ainda precisa de uns ajustes pra ficar completo. Aqui vai a lista do que falta:

1. Página de Donate:

   • Não tem uma página de doação ainda.

   • Ideia: Implementar integração com Mercado Pago, Stripe ou outro gateway de pagamento pra compra de pontos.

   • Deve incluir um formulário pra escolher quantidade de pontos, integração com API de pagamento, e histórico de doações.

2. Finalizar o Market:

   • A página CharacterMarket.tsx tá funcional, mas precisa de polimento:

     • site-tibia-react.zipsite-tibia-react.zipAdicionar filtros (ex.: por nível, vocação, preço).

     • Melhorar a UX do modal de venda (ex.: validação mais robusta).

     • Adicionar imagens ou sprites de personagens pra deixar visual.

     • Tratar casos de erro (ex.: personagem já vendido, pontos insuficientes).

   • Backend tá ok, mas pode precisar de ajustes pra suportar filtros ou paginação.

3. Finalizar o Shop:

   • A loja (/shop) tá com as rotas básicas, mas precisa de uma página frontend completa.

   • Ideia: Criar uma página parecida com CharacterMarket.tsx, com listagem de itens, filtros por categoria, e carrinho de compras.

   • Adicionar validação pra maximo (quantidade máxima por compra) e melhorar o histórico.

4. Painel Admin:

   • Não existe ainda, mas seria brabo ter um painel pra gerenciar:

     • Usuários (banir, editar pontos, etc.).

     • Itens da loja (adicionar, editar, remover).

     • Anúncios do mercado (aprovar, remover).

     • Histórico de transações (bazar e loja).

   • Pode ser uma página protegida com autenticação admin.

5. Segurança:

   • Finalizar a implementação do bcryptjs pra criptografar todas as senhas.

   • Substituir SHA1 por algo mais seguro (ex.: bcrypt ou JWT).

   • Adicionar validação de entrada nas rotas pra evitar SQL Injection ou outros ataques.

   • Implementar CSRF protection pro express-session.

6. Outros:

   • Adicionar paginação pras listagens (market, shop, histórico).

   • Implementar uma página /download pra baixar o client do Tibia.

   • Melhorar a responsividade em telas menores.

   • Adicionar suporte a notificações (ex.: compra confirmada, anúncio cancelado).

📢 Convite pra Comunidade

Tô compartilhando esse projeto porque acredito que a galera que curte Tibia e programação pode transformar ele num site brabo! Ele já tá com uma base sólida, mas falta aquele gás pra finalizar as features. Se tu manja de React, Node.js, MySQL, ou quer aprender, bora contribuir? O código tá aberto pra quem quiser:

• Pegar o projeto e implementar as páginas que faltam (Donate, Shop, Painel Admin).

• Melhorar o mercado com filtros, imagens, ou outras ideias.

• Otimizar a segurança (bcrypt, JWT, etc.).

• Adicionar features novas (ex.: chat, ranking de jogadores, integração com Discord).

Vou lançar uma versão corrigida em breve, com alguns bugs consertados (ex.: erros de colunas no MySQL, como status e price, que já foram ajustados). Se quiserem o repositório completo, é só pedir no tópico ou me mandar um PM. Também posso ajudar com dúvidas ou dar um norte pra quem quiser contribuir.

💡 Como Contribuir?

1. Clone o projeto (vou upar no GitHub se tiver interesse, me avisa! mas vou deixar o download aqui).

2. Instale as dependências: npm install.

3. Configure o MySQL com as tabelas (accounts, players, player_seller, historico_bazar, shop_item, shop_historico) [Usei a DB do Pokemonster pra fazer ou seja é compativel].

4. Rode o backend (npm run server) e o frontend (npm run dev).

5. Mete a mão no código e implementa o que falta!

6. Compartilha teu progresso aqui no fórum ou abre um PR.

🗣️ Feedback e Ideias

O que acham do projeto? Alguma ideia pra novas features? Quais funcionalidades vocês acham que um site de Tibia precisa ter pra ser top? Tô de olho nos comentários pra melhorar e ajudar quem quiser contribuir. Vamos fazer esse site ficar monstro, namoral! 🔥

Valeu, galera! Tô no aguardo pra ver o que vão fazer com esse projeto! 😎

 

[gutinha 2023]

Brabo

[Yomee 4696]

Tópico Aprovado, obrigado pela contribuição e ajuda a comunidade 😄

[marshmello 3]

Sepa dou uma atualizada nisso ai 

[The Baker 5015]

16 horas atrás, Cloud disse:

Fala, pessoal! Tudo certo? 😎 Faz um tempão que não posto nada, mas voltei com um projeto que comecei há um tempo e tá precisando de uma força da comunidade pra ficar 100%! É um site de Tibia e Poketibia feito em React, com uma pegada moderna pra fugir dos sites clássicos em PHP que dominam a cena. O projeto tá incompleto, mas já tem uma base sólida, e tô compartilhando pra quem quiser meter a mão, contribuir e deixar ele brabo. Bora dar uma olhada no que já tá feito, nas tecnologias usadas e no que falta pra finalizar?

🛠️ O que já tá pronto?

O site já tem uma estrutura funcional, com várias features implementadas e rodando. Aqui vai um resumo do que já tá no ar:

• Frontend em React 18.3.1:

  • Interface moderna, com componentes reutilizáveis e estilização em Tailwind CSS.

  • Suporte a i18n (internacionalização) com traduções manuais pra deixar o site acessível em vários idiomas.

  • Páginas principais como Home, Login, Registro, e uma base pra Market e Shop.

  • Componente de Footer com links rápidos (Home, Download, Shop, Market) e redes sociais (ícones do Lucide-React).

  • CharacterMarket.tsx: Página de mercado de personagens com listagem de personagens à venda, listagem de anúncios do usuário, histórico de compras/vendas, e um modal pra listar personagens pra venda (ainda precisa de ajustes).

• Backend em Express (Node.js):

  • API RESTful com rotas pra autenticação, mercado de personagens (/market), e loja (/shop).

  • Integração com MySQL usando o pacote mysql2 pra gerenciar contas, personagens, transações, etc.

  • Autenticação com express-session e middleware authenticateSession pra proteger rotas.

  • Rotas implementadas:

    • GET /market/characters: Lista personagens à venda.

    • POST /market/sell: Lista um personagem pra venda.

    • POST /market/buy: Compra um personagem.

    • GET /market/my-listings: Lista os anúncios do usuário.

    • DELETE /market/cancel/:id: Cancela um anúncio.

    • GET /market/history: Histórico de compras/vendas.

    • GET /shop/items: Lista itens da loja.

    • POST /shop/purchase: Compra itens.

    • GET /shop/history: Histórico de compras da loja.

• Banco de Dados (MySQL -> Compativel com PokeMonster Database):

  • Tabelas principais:

    • accounts: Dados dos usuários (id, name, email, password, pontos, etc.).

    • players: Personagens (id, account_id, name, level, vocation, sex, etc.).

    • player_seller: Personagens à venda (id, account_seller, char_id, price, pix_blocked, etc.).

    • historico_bazar: Histórico de transações do mercado (account_id_comprador, account_id_vendedor, char_id, valor, etc.).

    • shop_item: Itens da loja (id, item_id_tibia, nome, valor, quantidade, etc.).

    • shop_historico: Histórico de compras na loja (account_id, shop_item_id, player_id, quantidade, valor, etc.).

  • Queries otimizadas com transações pra compras seguras (ex.: transferência de pontos e personagens).

• Segurança:

  • Senhas criptografadas com bcryptjs (mas a implementação tá incompleta, precisa finalizar).

  • Uso de SHA1 em algumas partes (pode ser substituído por algo mais seguro, tipo bcrypt completo ou JWT).

  • Sessões gerenciadas com express-session.

• Outras Features:

  • Componente de loading (LoadingSpinner) pra melhorar a UX.

  • Estilização responsiva com Tailwind CSS e ícones do lucide-react (ex.: Crown, ShoppingBag, Coins, etc.).

  • Suporte a transações no mercado (compra/venda de personagens com pontos) e na loja (compra de itens).

📋 Tecnologias Usadas

• Frontend:

  • React 18.3.1: Biblioteca principal pra interface.

  • react-i18next: Pra tradução manual (i18n).

  • Tailwind CSS: Estilização moderna e responsiva.

  • lucide-react: Ícones vetoriais (Crown, ShoppingBag, etc.).

  • react-router-dom: Navegação entre páginas (Home, Market, Shop, etc.).

• Backend:

  • Express: Servidor Node.js pra API RESTful.

  • mysql2: Conexão com banco MySQL.

  • express-session: Gerenciamento de sessões.

  • bcryptjs: Criptografia de senhas (incompleta).

  • SHA1: Usado em algumas partes (pode ser atualizado).

• Banco de Dados:

  • MySQL: Banco relacional com tabelas otimizadas pra Tibia.

🔍 O que falta implementar?

O projeto tá com uma base forte, mas ainda precisa de uns ajustes pra ficar completo. Aqui vai a lista do que falta:

1. Página de Donate:

   • Não tem uma página de doação ainda.

   • Ideia: Implementar integração com Mercado Pago, Stripe ou outro gateway de pagamento pra compra de pontos.

   • Deve incluir um formulário pra escolher quantidade de pontos, integração com API de pagamento, e histórico de doações.

2. Finalizar o Market:

   • A página CharacterMarket.tsx tá funcional, mas precisa de polimento:

     • site-tibia-react.zipsite-tibia-react.zipAdicionar filtros (ex.: por nível, vocação, preço).

     • Melhorar a UX do modal de venda (ex.: validação mais robusta).

     • Adicionar imagens ou sprites de personagens pra deixar visual.

     • Tratar casos de erro (ex.: personagem já vendido, pontos insuficientes).

   • Backend tá ok, mas pode precisar de ajustes pra suportar filtros ou paginação.

3. Finalizar o Shop:

   • A loja (/shop) tá com as rotas básicas, mas precisa de uma página frontend completa.

   • Ideia: Criar uma página parecida com CharacterMarket.tsx, com listagem de itens, filtros por categoria, e carrinho de compras.

   • Adicionar validação pra maximo (quantidade máxima por compra) e melhorar o histórico.

4. Painel Admin:

   • Não existe ainda, mas seria brabo ter um painel pra gerenciar:

     • Usuários (banir, editar pontos, etc.).

     • Itens da loja (adicionar, editar, remover).

     • Anúncios do mercado (aprovar, remover).

     • Histórico de transações (bazar e loja).

   • Pode ser uma página protegida com autenticação admin.

5. Segurança:

   • Finalizar a implementação do bcryptjs pra criptografar todas as senhas.

   • Substituir SHA1 por algo mais seguro (ex.: bcrypt ou JWT).

   • Adicionar validação de entrada nas rotas pra evitar SQL Injection ou outros ataques.

   • Implementar CSRF protection pro express-session.

6. Outros:

   • Adicionar paginação pras listagens (market, shop, histórico).

   • Implementar uma página /download pra baixar o client do Tibia.

   • Melhorar a responsividade em telas menores.

   • Adicionar suporte a notificações (ex.: compra confirmada, anúncio cancelado).

📢 Convite pra Comunidade

Tô compartilhando esse projeto porque acredito que a galera que curte Tibia e programação pode transformar ele num site brabo! Ele já tá com uma base sólida, mas falta aquele gás pra finalizar as features. Se tu manja de React, Node.js, MySQL, ou quer aprender, bora contribuir? O código tá aberto pra quem quiser:

• Pegar o projeto e implementar as páginas que faltam (Donate, Shop, Painel Admin).

• Melhorar o mercado com filtros, imagens, ou outras ideias.

• Otimizar a segurança (bcrypt, JWT, etc.).

• Adicionar features novas (ex.: chat, ranking de jogadores, integração com Discord).

Vou lançar uma versão corrigida em breve, com alguns bugs consertados (ex.: erros de colunas no MySQL, como status e price, que já foram ajustados). Se quiserem o repositório completo, é só pedir no tópico ou me mandar um PM. Também posso ajudar com dúvidas ou dar um norte pra quem quiser contribuir.

💡 Como Contribuir?

1. Clone o projeto (vou upar no GitHub se tiver interesse, me avisa! mas vou deixar o download aqui).

2. Instale as dependências: npm install.

3. Configure o MySQL com as tabelas (accounts, players, player_seller, historico_bazar, shop_item, shop_historico) [Usei a DB do Pokemonster pra fazer ou seja é compativel].

4. Rode o backend (npm run server) e o frontend (npm run dev).

5. Mete a mão no código e implementa o que falta!

6. Compartilha teu progresso aqui no fórum ou abre um PR.

🗣️ Feedback e Ideias

O que acham do projeto? Alguma ideia pra novas features? Quais funcionalidades vocês acham que um site de Tibia precisa ter pra ser top? Tô de olho nos comentários pra melhorar e ajudar quem quiser contribuir. Vamos fazer esse site ficar monstro, namoral! 🔥

Valeu, galera! Tô no aguardo pra ver o que vão fazer com esse projeto! 😎

 

top demais, vou mexer valeu dms bb

[faelp13 0]

alguem pode postar o link do github aqui ? nao achei