/project-frontend-online-store

Primary LanguageJavaScript

🛍️ Front-end Online Store

Desenvolver uma aplicação React de loja online consumindo dados da API do Mercado Livre. Também tivemos que utilizar metodologias de desenvolvimento ágil como Scrum e Kanban.

👨‍💻 Requisitos

  • Trabalhar em grupo usando metodologias de desenvolvimento ágil
  • Desenvolver uma aplicação React usando React Router
  • Consumir dados de uma API pública
  • Usar a Context API do React para gerenciamento de estado

📝 Methodologies/Metodologias

  • Mobile First
  • Kanban
  • Scrum

🔨 Ferramentas

  • HTML5
  • CSS3
  • JavaScript ES6+
  • React.js
  • React Router
  • React Context API
  • React Icons (icon library)

✨ Executando a aplicação

Via Docker Compose (Recomendado)

⚠️ Atenção

  • É necessário ter o Docker e o Docker Compose instalados na máquina.
  • É necessário que as portas 8080 e 3001 estejam desocupadas.

Após clonar o repositório, sequir os sequintes passos.


🐋 Subindo os containers com as imagens

  • Acessar o diretório raiz do projeto e execute o seguinte comando:
docker-compose up --build

  • OBS.:

    • Este comando irá rodar as migrations e seeders automaticamente, removendo os dados anteriores.
    • Os três containers serão criados e iniciados: backend, frontend e o db.
    • Executar o docker-compose sem a flag -d para que o compose funcione corretamente.

    Acessando a aplicação


    Parando os containers

    ctrl + c

Removendo os containers

docker-compose down


Localmente

⚠️ Atenção

  • É necessário ter o Node e o MySql instalados na máquina.
  • É necessário que as portas 8080 e 3001 estejam desocupadas.

Após clonar o repositório, seguir os seguintes passos.

Back-end

  • Acessar o diretório do back-end.
cd backend
  • Definir as varáveis de ambiente em um arquivo .env;
    • É necessário criar um arquivo .env na raiz do diretório do back-end.
    • A seguir, definir as seguintes variáveis de ambiente:
    • Exemplo:
DB_HOST=localhost
DB_USER=root
DB_PASS=docker
DB_NAME=cashforce 
DB_PORT=3306
  • OBS: o arquivo example.env contém um exemplo de como deve ser o arquivo .env.
    • É necessário renomear o arquivo example.env para .env. e preencher as variáveis de ambiente conforme sua configuração.

  • Instalar as dependências.
npm install
  • Rodar o back-end.
npm start
- OBS.: este comando irá rodar as migrations e seeders do banco de dados automaticamente, removendo os dados anteriores.

Front-end

  • Acessar o diretório do front-end.
cd frontend
  • Instalar as dependências.
npm install
  • Rodar o front-end.
npm start