lana2-2karla/TPhoneBox

TPhoneBox - Aplicativo de assinaturas online

Contexto

Simulação da página Home de um aplicativo de assinaturas. Interface intuitiva e visualmente atraente, projetada para facilitar a navegação e fornecer todas as informações necessárias para a assinatura mensal de um smartphone.

Back-end: A REST API foi construída utilizando Node.js, com suporte para MongoDB e MySQL, utiliza as ORMs Prisma e Mongoose. Foram desenvolvidas operações CRUD (Create, Read, Update, Delete) dividindo as responsabilidades em Model, Repository e Controller. A camada de Model define a estrutura dos dados e as relações entre eles. O Repository lida com a comunicação direta com o banco de dados. O Controller é responsável por lidar com respostas e requisições HTTP.

Front-end: A aplicação foi construída com Vue.js. Foi utilizado Axios, um cliente HTTP baseado em Promises para realizar as requisições ao back. Para a estilização foi utilizado HTML e CSS.

Testes: Foi realizado uma camada de testes automatizados para o FrontEnd da aplicação utilizando Python e Selenium.

Você pode testar o site seguindo a explicação em "Como rodar o projeto na sua máquina".

Imagem da aplicação

Habilidades desenvolvidas durante o desenvolvimento do projeto

Back-End

• 🔥 Organizar uma aplicação completa desde o primeiro passo; 🔥
• Criar e modelar um banco de dados utilizando Prisma e Mongoose;
• Estruturar uma aplicação em camadas;
• Delegar responsabilidades específicas para cada camada;
• Entender e aplicar os padrões REST;
• 🔥 Realizar testes com Python e Selenium; 🔥
• Utilizar Dotenv para as variáveis de ambiente secretas.

Front-End

• 🔥 Organizar a estrutura de componentes e páginas de um site; 🔥
• Estruturar e utilizar hooks no Vue.js;
• Delegar responsabilidades específicas para cada componente e camada;
• Realizar requisições HTTP através do Axios;
• Utilizar HTML e CSS para estilização.

Tecnologias utilizadas

Back-end: JavaScrip, Node.js, Nodemon, Express.js, Dotenv, Prisma, Moongose, MySQL, MongoDB, ESlint;

Front-End: Vue.js, HTMl, CSS, Axios, Vite e ESlint.

Testes: Python, Selenium, Webdriver-manager e unittest

Como rodar o projeto na sua máquina:

✨ Rodando Localmente

Clone o projeto em uma pasta/repositório git com o comando git clone

• Caso não tenha o git instalado em sua máquina, você pode realizar a instalação através da documentação

Entre na pasta do projeto clonado

• Caso esteja utilizando linux, você pode entrar utilizando o comando cd nome-do-projeto

Entre na pasta back-end - cd backend

Instale as dependências com npm install

• Para a aplicação funcionar corretamente você precisa editar o arquivo .env.example:

  • alterar as variáveis de ambiente com o seu nome de usuário e senha de conexão com o banco de dados.
  • mudar o nome do aquivo para .env, caso contrário a aplicação não encontrará o arquivo.

• Você consegue encontrar mais informações aqui

Rode as migrations com o comando prisma migrate dev --name init

👀 De olho nas dicas:

1. Para rodar o projeto desta forma, obrigatóriamente você deve ter o node instalado em seu computador.

Para iniciar a aplicação: npm start

AVISOS MEGA IMPORTANTES!

Para você conseguir testar as rotas através da sua máquina é necessário que você popule o banco do dados:

• Faça uma requisicão do tipo POST na rota http://localhost:3000/smartphone utilizando sua ferramenta de preferência.

  Como indicação o Postman ou ThunderClient

• O corpo da requisição deve seguir esse modelo: {"name": "iPhone 11","price": 1647.01,"image": "https://yacare-products-image.s3.sa-east-1.amazonaws.com/iphone/4x/iPhone+11.png"}

Após iniciar a aplicação back-end é hora de partirmos para o último passo

• Entre na pasta front-end - utilize cd .. para sair da pasta atual e cd frontend para entrar na pasta de front

• Escreva o comando npm run dev

• ✨E pronto!! O projeto está rodando na sua máquina✨

Execução dos testes

• Entre na pasta de testes cd testes

• Rode o comando python3 meus_testes.py