Sobre o projeto 🛒 Funcionalidades 📦 Como acessar a Gamtech ⚙️ Tecnologias utilizadas 🎯 Galeria 📷 Contribuição 💡 Créditos e Agradecimentos 🤝 Contato 💬 Página personalizada 🚀
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.
- 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
Nome do titular do cartão
,MM/AA
eCVC
coloque qualquer informação, não precisa ser verídica, e para oNúmero do cartão
utilize 4242 4242 4242 4242
Dessa forma você conseguirá completar a compra utilizando o cartão de testes do Stripe! 💳
- Para acessar o e-commerce Gamtech basta clicar aqui.
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_home_light_01.png)
Homepage 01
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_home_light_02.png)
Homepage 02
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_home_light_03.png)
Homepage 03
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_footer_light.png)
Rodapé do site
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_menu_light_01.png)
Menu lateral sem usuário logado
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_menu_light_02.png)
Menu lateral com usuário logado
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_search_light.png)
Página de pesquisa
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_deals_light_01.png)
Página de ofertas
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_deals_light_02.png)
Filtro da página de pesquisa
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_categories_light.png)
Página da lista de categorias
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_caregoryPage_light.png)
Página exclusiva para a categoria selecionada
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_productDetails_light_01.png)
Página de detalhes do produto 01
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_productDetails_light_02.png)
Página de detalhes do produto 02
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_cart_light.png)
Menu lateral do carrinho de compras
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_myOrdersEmpty_light.png)
Página dos meus pedidos vazia
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_myOrders_light.png)
Página dos meus pedidos
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Light/desktop_orderCancel_light.png)
Cancelamento de pedidos
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_home_dark_01.png)
Homepage 01
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_home_dark_02.png)
Homepage 02
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_home_dark_03.png)
Homepage 03
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_footer_dark.png)
Rodapé do site
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_menu_dark_01.png)
Menu lateral sem usuário logado
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_menu_dark_02.png)
Menu lateral com usuário logado
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_search_dark.png)
Página de pesquisa
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_deals_dark_01.png)
Página de ofertas
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_deals_dark_02.png)
Filtro da página de pesquisa
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_categories_dark.png)
Página da lista de categorias
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_caregoryPage_dark.png)
Página exclusiva para a categoria selecionada
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_productDetails_dark_01.png)
Página de detalhes do produto 01
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_productDetails_dark_02.png)
Página de detalhes do produto 02
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_cart_dark.png)
Menu lateral do carrinho de compras
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_myOrdersEmpty_dark.png)
Página dos meus pedidos vazia
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_myOrders_dark.png)
Página dos meus pedidos
![desktop](https://github.com/gui-bus/Gamtech/raw/main/Github/Desktop_Dark/desktop_orderCancel_dark.png)
Cancelamento de pedidos
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.
- 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.
-
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 [email protected].