🏪 Projeto Store Full Stack

Este projeto foi desenvolvido para um desafio técnico para a empresa Arcano Projetos de Tecnologia. Foi preciso construir uma página web que consumisse e apresentasse os dados tratados de uma API utilizando os dados públicos de uma API existente, a FakeStoreAPI. As requisições deveriam ser feitas na rota "/carts" com os ids dos produtos comprados e os ids dos clientes. Baseando-se nessas informações foi preciso criar a rota "cart-history" contendo as compras feitas pelo usuário para ser consumido pelo front-end apresentando os dados de forma organizada. A rota cart-history é obrigatória para este desafio

🐳 Rodando com Docker

O Docker é uma plataforma que permite criar, implantar e executar aplicativos em contêineres. Um contêiner é uma unidade de software leve e portátil que pode ser executada em qualquer lugar - desde máquinas locais até servidores na nuvem. Para rodar utilizando o Docker é preciso ter o Docker e o docker-compose instalado em sua máquina.

Clone o projeto

  git clone https://github.com/joanamds/store-arcano

Entre no diretório do projeto e rode o comando

  docker-compose up -d

Back-end

Entre no terminal do docker:

  docker exec -it app_backend sh

Instale as dependências

  npm install

Front-end

Entre no terminal do docker:

  docker exec -it store-arcano-frontend-1 sh

Instale as dependências

  npm install

ℹ️ Após rodar o docker-compose é possível:

Acessar o banco de dados na rota 3002 com a senha "123456";
Acessar o frontend no navegador na rota http://localhost:3000
Acessar o backend na rota http://localhost:3001

📁 Documentação da API

Após rodar o docker-compose é possível fazer requisições a API na url http://localhost:3001

Método HTTP	Endpoint	Descrição
POST	`/login`	Faz o login com usuários do banco de dados
GET	`/products`	Retorna todos os produtos que estão a venda
GET	`/users/:id`	Retorna o usuário de acordo com o id
GET	`/cart-history/:id`	Retorna o histórico de compras do usuário

Corpo da requisição

POST /login

{
 "email": "string",
 "password": "string"
}

💻 Front-end

Organização das pastas

store-arcano/
  frontend/
    public/
    src/
      components/
      pages/
      services/
      styles/

Demonstração

screen-recording.webm

🗄️ Back-end

Organização das pastas

store-arcano/
  backend/
    src/
      database/
        api/
        config/
        controllers/
        interfaces/
        migrations/
        models/
        seeders/
        services/
        token/
      routes/
      tests/
        mocks/

Demonstração

screen-recording.1.webm