Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/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.
https://github.com/thiagohrcosta/netflixclone-digital-innovation-one

css digital-innovation-one heroku-deployment html5 javascript jquery mongodb

Last synced: 12 days ago
JSON representation

Host: GitHub
URL: https://github.com/thiagohrcosta/netflixclone-digital-innovation-one
Owner: thiagohrcosta
Created: 2020-08-23T00:10:21.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-10-30T20:22:39.000Z (over 4 years ago)
Last Synced: 2024-12-09T05:42:54.520Z (2 months ago)
Topics: css, digital-innovation-one, heroku-deployment, html5, javascript, jquery, mongodb
Language: HTML
Homepage: https://enigmatic-beyond-53300.herokuapp.com/
Size: 41.7 MB
Stars: 1
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: Readme.md

Awesome Lists containing this project

README

![NetflixClone](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/mytrailers10.png?raw=true)

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.

![enter image description here](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/mytrailers2.png?raw=true)

## 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

![alt-text-1](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/mytrailers13.png?raw=true) ![alt-text-2](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/mytrailers15.png?raw=true)

## 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.

![adding content](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/mytrailers5.png?raw=true)

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.

![mongoDB](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/mongoDB1.png?raw=true)

## 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.
![alt-text-2](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/Screenshot_20201025-144518.jpg?raw=true)

**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.
![saveAndDelete](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/movieEditDelete.png?raw=true)

## Veja a aplicação rodando

Para visualizar esta aplicação rodando em tempo real, basta acessar o projeto no Heroku [clicando aqui](https://enigmatic-beyond-53300.herokuapp.com/).

## Certificado de Conclusão

![Certificado](https://github.com/thiagohrcosta/NetflixClone-Digital-Innovation-One/blob/master/filesReadme/certificadoDigitalInnovationOne.png?raw=true)