About | Layout | Deploy | How It Works | Technologies | Author | License
O Ignite Shop é um aplicação web de vendas de camisetas com temas do mundo dev, mostrando com detalhes a parte visual e informacional das camisetas, além de apresentar um carrinho onde o cliente pode adicionar as suas compras.
O principal conceito treinado nesta aplicação foi a utilização do framework Next.js, explorando conceitos como o de SSR(Server Side Rendering) e SSG(Static Site Generation), além da utilização da biblioteca Stitches.js para a estilização.
O projeto foi desenvolvido como conclusão de um desafio do curso Ignite oferecida pela Rocketseat. O Ignite é um curso de especialização em stacks específicas amplamente utilizadas e valorizadas no mercado como React, React Native, Node.js e Elixir.
Você pode visualizar o layout do projeto através desse link. É necessário ter conta no Figma para acessá-lo.
Para acessar o deploy do Website da aplicação basta clicar no link a seguir: Link
Este projeto contem somente a parte Frontend Web, precisando somente executar a aplicação em seu Browser(navegador).
Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:
Além disto é bom ter um editor para trabalhar com o código como VSCode
Precisará também fazer a seguinte configuração para rodar o projeto:
- Criar uma conta e projeto no Stripe, e copiar as chaves pública e privada do projeto
- Criar na raiz do projeto o arquivo
.env - Criar no arquivo
.envas variáveis de ambiente, conforme o exemplo do arquivo.env.example - Colocar nas variáveis de ambiente os respectivos valores, incluindo as chaves copiadas do projeto do STRIPE
Todos cartões de crédito disponíveis para teste (ex: 4242 4242 4242 4242) estão especificados na seguinte documentação do Stripe
# Clone este repositório
$ git clone git@github.com:highlander08/Ignite-Shop.git
# Vá para a pasta da aplicação Front End
$ cd Ignite-Shop
# Instale as dependências
$ npm install
# Configure as variáveis de ambiente (conforme já explicado anteriormente)
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000😀
É importante criar uma conta no Stripe exibir informações de produtos.
Deve criar o arquivo: .env.local na raiz do projeto e passar as seguintes chaves com os seguintes dados:
# A url pode ser http://localhost:3000 em ambiente de desenvolvimento
NEXT_URL={url}
STRIPE_PUBLIC_API_KEY={chave_publica_stripe}
STRIPE_SECRET_API_KEY={chave_privada_stripe}
# Não deve incluir as chaves
As seguintes ferramentas foram usadas na construção do projeto:
Website (Next.js + TypeScript)
Highlander santos 🚀
Este projeto esta sobe a licença MIT.
Feito com 💜 por Highlander santos👋🏽 Entre em contato!