Devshop

Sobre   |   Tecnologias   |   Requerimentos   |   Iniciando  

🎯 Sobre

Este projeto construído em Angular, simula um e-commerce que utiliza as principais features do framework. A loja virtual contém a listagem dos produtos por categorias, ordenação dos items por ordem alfábetica, três modos de exibição dos produtos, carrinho de compras e telas de pagamento. Para trazer realidade ao projeto, utilizamos a fakestoreapi.com/, no qual consumimos os seguintes endpoints:

#GET produtos
/products

#GET categorias
/categories

O projeto utiliza como meio de pagamento, a API do Stripe, que recebe e registra os produtos existentes no carrinho de compras, no ato do processamento do pagamento. Após redireciona o usuário.

No diretório angular você encontra o projeto front-end, já no diretório server você encontra o projeto back-end que integra o meio de pagamento ao projeto front-end, por meio do endpoint: /checkout/.

Você pode conferir um preview do projeto em aqui, mas para checar todas as funcionalidades indico o passo-a-passo contido em Iniciando.

🚀 Tecnologias

Este projeto utiliza as seguintes tecnologias:

• TypeScript
• JavaScript
• Angular
• Angular Material
• Tailwind
• Express
• Stripe

✅ Requerimentos

Antes de iniciar 🏁, você precisa ter o Git e Node versão LTS instalados no seu ambiente de desenvolvimento. Recomendo também a instalação da ferramenta Angular CLI, que incremetará sua produtividade. Você precisrá gerar as keys de autenticação conforme documentação do Stripe, quais deverão ser inseridas no arquivo /angular/src/environments/environment.ts.

🏁 Iniciando

# Clone este projeto
$ git clone https://github.com/ManuCoutinho/dev-shop.git

# Accesse para o projeto front
$ cd devshop/angular


# Accesse a API
$ cd devshop/server

# Instale as dependências em ambos os projetos
$ npm install

# Inicie o servidor com
$ npm run start

# Inicie o front-end com
$ ng serve ou npm run start

# A API irá rodar em <http://localhost:4242> e o front-end em <http://localhost:4200>

Back to top