📄 WebSite desenvolvido com a intenção primária de ser o teste para a aplicação da vaga de desenvolvedor Web 📄
About | Layout | Lauching the project | Technologies | Developer
💻 Smart Movies Website - É um site que contém informações sobre diversos filmes e séries, com uma interface dinâmica e simplificada, é possível ter acesso a dados sobre várias mídias de entreterimento, como por exemplo: sinopse, nome, banner, atores.
💼 Esse projeto foi desenvolvido com o intuito de ser o teste para a aplicação da vaga de Desenvolvedor Web da SmartfyLabs.
O projeto tem uma página front end e uma api back end.
💡 Então, é necessário que ambos sejam iniciados para rodar a aplicação.
# Clone o Repositorio
$ git clone https://github.com/ViniciusResende/SmartfyLabsTest.git
# Entre na pasta do projeto pelo Terminal
$ cd SmartfyLabsTest
#Entre na pasta do back end
$ cd smartmovies-backend
# Instale as dependências
$ npm install
# Execute a API com esse comando
$ npm start
# O servidor irá iniciar na porta:3333
# Saia da pasta do backend do projeto
$ cd ..
#Entre na pasta do front end
$ cd smartmovies-frontende
# Instale as dependências
$ npm install
# Execute o frontend com esse comando
$ npm start
# A aplicação irá iniciar na porta:3000
As seguintes ferramentas foram utilizadas no desenvolvimento do projeto:
WebSite (React + TypeScript)
BackEnd (NodeJs + JavaScript)
Dada a listagem de tecnologias acima, pode-se inferir sobre a estrutura do projeto. O projeto, primordialmente, foi desenvolvido com o intuito de cumprir a proposta estipulada da melhor maneira possível. Por conta disso, para o desenvolvimento do FrontEnd foi utilizada o Framework ReactJs, dessa forma poderia-se desenvolver uma aplicação SPA(Single Page Application), além disso, preocupei-me com a otimização da DX(Developer Experience) do projeto, por isso, utilizei a linguagem TypeScript para desenvolver o projeto, para assim ter maior rigidez quanto ao typing do código, além disso, foi essencial realizar a componentização dos conteúdos da aplicação, para que assim ficasse mais dinâmica e lógica. Posterior ao setup inicial, fiz as escolhas acerca de outras bibliotecas que teriam de ser utilizadas no projeto, sem exagerar na escolha para deixa o projeto simples e sistematizado, assim, foram escolhidas as bibliotecas "axios", "react-router-dom" e "styled-components", sendo a primeira utilizada para realizar a conxão entre o backend da aplicação e o frontend, esse foi o primeiro passo do desenvolvimento, primeiramente consumi os dados da API para então começar o desenvolvimento da interface principal, para isto, optei pela utilização da biblioteca "styled-components", dessa forma poderia ter um desenvolvimento mais organizado e flexível, além, é claro, de manter os padrões de boas práticas na construção de um HTML semântico. Em prosseguimento, houve a necessidade da implementação de rotas dentro da aplicação, para que pudessem ser acessados componentes facultativos, como por exemplo a área de listagem de séries e a área de inspecionar filme ou série, por isso, foi utilizada a biblioteca react-router-dom. Ademais, o projeto foi desenvolvido essencialmente utilizando essas tecnologias, pode ser desenvolvida uma aplicação seguindo as recomendações estipuladas pelo teste.
Vinícius Alves