thiagohrcosta/netflixclone-digital-innovation-one

Projeto desenvolvido durante o Lab da Digital Innovation One com foco inicial no frontend para recriar a interface do Netflix utilizando HTML, CSS, JavaScript e JQuery. Posteriormente desenvolvi o backend para suportar o frontend do projeto original e em seguida, realizei o deploy da aplicação no Heroku.

Projeto desenvolvido durante o Lab "Recriando a Interface do Netflix" da Digital Innovation One, com o objetivo de se desenvolver habilidades inicialmente no frontend, aprendendo conceitos básicos sobre HTML, CSS, Javascript e JQuery, em especial como estruturar um layout, técnicas de CSS3 com containers e variáveis, como posicionar os elementos com Flexbox e como utilizar plugins Jquery a favor da aplicação.

Posteriormente desenvolvi o backend utilizando conhecimentos já adquiridos visando habilitar uma conexão com o MongoDB Atlas, permitindo assim realizar o CRUD. Uma vez que o backend foi regularmente desenvolvido e o banco de dados criado, realizei o deploy da aplicação no Heroku.

Tecnologias utilizadas - Frontend

• HTML;

• CSS;

• JavaScript;

• Bootstrap

• JQuery;

• Live-server.

Tecnologias utilizadas - Backend

• NodeJs;

• Body-parser;

• EJS;

• Express;

• Mongoose

• Nodemon

Tecnologias utilizadas - Nuvem

• Heroku

Mobile Version

Adição de conteúdo de forma dinâmica

Ainda que não faça parte do conteúdo exigido pela Digital Innovation One para a conclusão do presente curso focado exclusivamente no frontend, foi inserida a opção de adicionar conteúdos de maneira dinâmica ao site, sendo tal conteúdo integrado por meio do MongoDB Atlas.

Ao receber as informações inseridas pelo usuário o backend envia as informações para o banco de dados em nuvem, que posteriormente servem para nutrir o conteúdo da página principal.

Etapas de produção

22 de agosto, 2020 - Front-end

• Criação do projeto;

• Elaboração do frontend;

• Estilização com CSS;

• Adição de "carousel" responsivo;

25 de agosto, 2020 - Back-end

• Criação da aplicação em NodeJS;

• Instalação do: body-parser; ejs; express; nodemon;

• Instalação do Mongoose e conexão com MongoDB Atlas;

25 de agosto, 2020 - Nuvem

• Desenvolvimento de aplicação em nuvem com Heroku;

• Deploy da aplicação.

22 de outubro, 2020 - Back-end e front-end

• Implementando novos atributos para cadastro de filmes e seriados no schema para cadastro no banco de dados;
• Desenvolvimento do front-end da página de cada filme ou seriado.

25 de outubro, 2020 - Front-end

• Utilizando @media queries para tornar site responsivo para aparelhos móveis;
• Implementação de novos recursos visuais na página do seriado ou filme.
  

28 de outubro, 2020 - Front-end e back-end

• Rotas PUT e DELETE adicionadas, permitindo ao usuário editar os conteúdos já publicados, ou desejando, deletá-los do banco de dados;
• Correções da interface front-end para aceitar as opções de PUT e DELETE;
• Adicionada opção exigindo confirmação para deletar um arquivo.

Veja a aplicação rodando

Para visualizar esta aplicação rodando em tempo real, basta acessar o projeto no Heroku clicando aqui.

Certificado de Conclusão