https://github.com/gui-bus/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! 🛒
https://github.com/gui-bus/gamtech
e-commerce figma fullstack nextjs nextjs13 nextui postgresql prisma react shadcn-ui stripe supabase tailwindcss typescript
Last synced: 3 months ago
JSON representation
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! 🛒
- Host: GitHub
- URL: https://github.com/gui-bus/gamtech
- Owner: gui-bus
- Created: 2023-10-17T22:38:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-01T22:31:42.000Z (about 1 year ago)
- Last Synced: 2024-11-29T05:09:36.389Z (5 months ago)
- Topics: e-commerce, figma, fullstack, nextjs, nextjs13, nextui, postgresql, prisma, react, shadcn-ui, stripe, supabase, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://gamtech.vercel.app
- Size: 16.1 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Gamtech | Elevando sua experiência tecnológica! :shopping_cart:
Atalhos de navegação
***[Sobre o projeto](#gamtech-shopping_cart)*** :shopping_cart:
***[Funcionalidades](#funcionalidades-)*** 📦
***[Como acessar a Gamtech](#como-acessar-a-página-gear)*** :gear:
***[Tecnologias utilizadas](#tecnologias-utilizadas-dart)*** :dart:
***[Galeria](#galeria-camera)*** :camera:
***[Contribuição](#contribuição-bulb)*** :bulb:
***[Créditos e Agradecimentos](#creditos-e-agradecimentos-handshake)*** :handshake:
***[Contato](#redes-sociais-para-contato-speech_balloon)*** :speech_balloon:
***[Página personalizada](#precisa-de-uma-pagina-personalizada-para-o-seu-negócio-rocket)*** :rocket:
## Gamtech :shopping_cart:
***A [Gamtech](https://gamtech.vercel.app/) é 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** :warning:
> 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](https://www.terabyteshop.com.br/)*** e ***[KabuM!](https://www.kabum.com.br/)***, caso tenha ficado interessado em algum produto basta proculá-lo nesses sites.
### Funcionalidades 📦
- [x] ***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.
- [x] ***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.
- [x] ***Login com o Google***
- Sistema de login feito utilizando o provedor do Google disponibilizado pelo ***[Next Auth](https://next-auth.js.org/)*** para uma experiência de autenticação simplificada.
- [x] ***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.
- [x] ***Barra de pesquisa***
- Possui sistema de pesquisa na qual exibe todos os produtos que contenham o termo que foi pesquisado.
- [x] ***Filtros***
- Nas páginas de ***[ofertas](https://gamtech.vercel.app/promo)*** e em páginas de categorias, como por exemplo ***[processadores](https://gamtech.vercel.app/category/cpu)***, 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.
- [x] ***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.
- [x] ***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.
- [x] ***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](https://stripe.com/br)***, 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. :smile:
> **ALERTA** :warning:
> 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!*** :credit_card:
## Como acessar a página :gear:
- [x] Para acessar o e-commerce Gamtech basta ***[clicar aqui](https://gamtech.vercel.app/)***.
## Tecnologias utilizadas :dart:
## Galeria :camera:
#### 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 :bulb:
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 :handshake:
- Todas as imagens e informaçoes dos produtos foram obtidas dos sites da ***[Terabyteshop](https://www.terabyteshop.com.br/)*** e da ***[KabuM!](https://www.kabum.com.br/)***.
- Ao professor ***[Felipe Rocha](https://www.instagram.com/byfeliperocha/)*** pelos ensinamentos e pela realização da segunda edição da ***[Full Stack Week](https://fullstackweek-store.vercel.app/)*** que foram essênciais para a realização deste projeto.
## Redes sociais para contato! :speech_balloon:
## Precisa de uma pagina personalizada para o seu negócio? :rocket:
- [x] 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!*** :star:
- Entre em contato através das minhas redes sociais ou envie-me um e-mail para [[email protected]](mailto:[email protected]).
