Gamtech | Elevando sua experiência tecnológica! 🛒

Atalhos de navegação

Sobre o projeto 🛒 Funcionalidades 📦 Como acessar a Gamtech ⚙️ Tecnologias utilizadas 🎯 Galeria 📷 Contribuição 💡 Créditos e Agradecimentos 🤝 Contato 💬 Página personalizada 🚀

Gamtech 🛒

A Gamtech é um e-commerce de itens para computadores desenvolvido com React, Typescript, Next.js, NextUI, ShadCN/UI, Tailwind CSS, Prisma, Supabase, Stripe e Vercel. O projeto conta com uma gama de itens como teclados, mouses, headphones, placas de vídeo, placas mãe e processadores. Venha encontrar o próximo upgrade do seu setup na Gamtech!

ALERTA ⚠️ Este projeto se trata de um projeto de estudos, ou seja, nenhuma das informações contidas na página do projeto são totalmente verídicas. Todas as informaçoes e imagens são meramente ilustrativas e foram obtidas de sites como Terabyteshop e KabuM!, caso tenha ficado interessado em algum produto basta proculá-lo nesses sites.

Funcionalidades 📦

• Interface de usuário, navegação e design
  • Através da combinação de React + Tailwind + NextUI + ShadCN/UI foi criado uma interface moderna, atraente, intuitiva e totalmente responsiva.
• Light & Dark mode
  • Sistema de tema claro e escuro disponível para aqueles que preferem um ou outro, com salvamento de preferência no local storage dessa forma quando o usuário acessar a plataforma novamente ela estará com o tema escolhido.
• Login com o Google
  • Sistema de login feito utilizando o provedor do Google disponibilizado pelo Next Auth para uma experiência de autenticação simplificada.
• Banco de dados
  • Para armazenar todas as informações do projeto foi utilizado a combinação de duas poderosas ferramentas: Prisma e Supabase com um banco de dados PostgreSQL.
• Barra de pesquisa
  • Possui sistema de pesquisa na qual exibe todos os produtos que contenham o termo que foi pesquisado.
• Filtros
  • Nas páginas de ofertas e em páginas de categorias, como por exemplo processadores, o usuário tem a possibilidade de filtrar os itens por preço crescente e decrescente, porcentagem de desconto e até por ordem alfabética.
• Informações do produto
  • Quando o usuário clica em algum dos itens é exibido os detalhes do mesmo como uma descrição do produto, seu valor original e o com desconto(se houver) e 04 imagens ilustrativas do produto. Além de também exibir sugestões de produtos da mesma categoria na parte inferior da página.
• Gerenciamento do Carrinho de Compras
  • Armazena os produtos do carrinho de compras do usuário no local storage, para que ao atualizar a página o carrinho mantenha-se com os itens selecionados.
  • Permite alterar a quantidade ou até mesmo excluir os produtos diretamente do carrinho, além de exibir valores atualizados de acordo com a quantidade como subtotal, descontos, frete e por fim o valor total a ser pago.
• Pagamentos processados com Stripe
  • Todo o sistema de pagamentos da Gamtech é feita oferecendo uma experiência segura de pagamento online com a integração da API do Stripe, que é uma poderosa plataforma de processamento de pagamentos utilizada por grandes empresas como Amazon e Google, incluindo o uso de webhooks para processar eventos relacionados ao pagamento. Dessa forma os usuários podem concluir seus pedidos com facilidade e segurança. 😄

ALERTA ⚠️ Como este projeto se trata de um projeto de estudos e não envolve a utilização de cartões de crédito reais, utilize os dados abaixo para finalizar uma compra na Gamtech.

• Para os campos de E-mail, Nome do titular do cartão, MM/AA e CVC coloque qualquer informação, não precisa ser verídica, e para o Número do cartão utilize 4242 4242 4242 4242
  Dessa forma você conseguirá completar a compra utilizando o cartão de testes do Stripe! 💳

Como acessar a página ⚙️

• Para acessar o e-commerce Gamtech basta clicar aqui.

Tecnologias utilizadas 🎯

Galeria 📷

Desktop - Tema claro

Homepage 01

Homepage 02

Homepage 03

Rodapé do site

Menu lateral sem usuário logado

Menu lateral com usuário logado

Página de pesquisa

Página de ofertas

Filtro da página de pesquisa

Página da lista de categorias

Página exclusiva para a categoria selecionada

Página de detalhes do produto 01

Página de detalhes do produto 02

Menu lateral do carrinho de compras

Página dos meus pedidos vazia

Página dos meus pedidos

Cancelamento de pedidos

Mobile - Tema claro

Desktop - Tema escuro

Homepage 01

Homepage 02

Homepage 03

Rodapé do site

Menu lateral sem usuário logado

Menu lateral com usuário logado

Página de pesquisa

Página de ofertas

Filtro da página de pesquisa

Página da lista de categorias

Página exclusiva para a categoria selecionada

Página de detalhes do produto 01

Página de detalhes do produto 02

Menu lateral do carrinho de compras

Página dos meus pedidos vazia

Página dos meus pedidos

Cancelamento de pedidos

Mobile - Tema escuro

Contribuição 💡

Gostaria de contribuir para o projeto? Fico muito grato pelo interesse!

• Sinta-se à vontade para entrar em contato comigo através das minhas redes sociais para enviar seu feedback, sugestões ou comentários sobre o projeto.

Creditos e agradecimentos 🤝

• Todas as imagens e informaçoes dos produtos foram obtidas dos sites da Terabyteshop e da KabuM!.
• Ao professor Felipe Rocha pelos ensinamentos e pela realização da segunda edição da Full Stack Week que foram essênciais para a realização deste projeto.

Redes sociais para contato! 💬

Precisa de uma pagina personalizada para o seu negócio? 🚀

• Se você gostou do projeto da Gamtech e está interessado em ter uma página para o seu negócio, entre em contato! Estou disponível para desenvolver sites personalizados e adaptados às necessidades da sua empresa.
  Vamos transformar sua visão em realidade! ⭐

• Entre em contato através das minhas redes sociais ou envie-me um e-mail para guibus.dev@gmail.com.