Gabrielttbr/client-netflix

Uma aplicação em React, que foi feita com base na Netflix, possuindo tela de login, cadastro de user, home e uma index. Armazenado o JWT no localhost e context, com as proteção de rotas, consumo da api através do método fetch().

Clone netflix

Olá, esse projeto uma simples réplica da netflix em React, com sistema de login e registro de usuário, possuindo uma página home acessada quando o usuário está logado em sua conta. Essa página vai possuir um banner, series e filmes, todos sendo buscado da API REST , desenvolvida com express, utilizando como banco de dados o MYSQL.

- Tela de login

- Tela de Cadastro de usuário

- Tela de home

- Tela index

Como rodar o front-end?

Você precisa ter o Node, o Git e algum gerenciador de pacotes(NPM | Yarn) instalados em sua máquina.

1. Clone o repositório:
$ git clone https://github.com/Gabrielttbr/client-netflix.git

2. Acesse a pasta e instale as dependências via terminal:
$ yarn / npm install

3. Inicie a aplicação em modo de desenvolvimento:
$ yarn start / npm run start

4. O servidor será aberto em http://localhost:3000

Após realizar esse passo a passo o seu front-end Estara configurado.Agora vamos configurar o back-end

Back-end

Essa API REST foi feita com a biblioteca Express, utilizando o MYSQL como banco de dados. Vai possuir um sistema de login e registro, a senha e criptografada. Quando o usuário logar vai gerar um JWT, para conseguir fazer as requisições do Banner, Filme, Series, que são protegidas, ou seja, precisa ser passar JWT válido para fazer.

ROTAS

1. http://localhost:3000/user
   • POST http://localhost:3000/user/register

     {
         nome: "",
         email: "",
         senha: "",
         cpf: "",
         cep: "",
         endereco: ""
     }

   • POST http://localhost:3000/user/login

      {
          email: "",
          senha: "",
      }

2. http://localhost:3000/filme
   • GET http://localhost:3000/filme/
   • GET http://localhost:3000/filme/:id
   • POST http://localhost:3000/filme/

      {
          titulo: "",
          descricao: "",
          imagem: ""
      }

   • PATCH http://localhost:3000/filme/

       {
           id: 0
           titulo: "",
           descricao: "",
           imagem: ""
       }

   • DELETE http://localhost:3000/filme/

      {
          id: 0
      }

3. http://localhost:3000/banner

   • GET http://localhost:3000/banner/

   • GET http://localhost:3000/banner/:id

   • POST http://localhost:3000/banner/

     {
        titulo: '',
        descricao: '',
        imagem: '',
        status: 1 || 0
     }

   • PATCH http://localhost:3000/banner/

     {
        id: 0,
        titulo: '',
        descricao: '',
        imagem: '',
        status: 1 || 0
     }

     DELETE http://localhost:3000/banner/ ~~~javascript { id: 0,

     }

4. http://localhost:3000/serie
   • GET http://localhost:3000/serie/
   • GET http://localhost:3000/serie/:id
   • POST http://localhost:3000/serie/ ~~~javascript { titulo: '', descricao: '', imagem: '', }

   • PATCH http://localhost:3000/serie/

       {
           id: 0
           titulo: '',
           descricao: '',
           imagem: '',
       }

   • DELETE http://localhost:3000/serie/:id

Essas são as rotas disponíveis na minha API, lembrando que para acessar as rotas: serie, filme e banner, e necessário fazer o login e enviar o JWT, pelo hearders.

Como rodar?

Você vai precisar ter o Docker, e o Git instalados em sua máquina

    1. Clone o repositório:
    
    $ git clone https://github.com/Gabrielttbr/api-netflix.git

    2. Acessa a pasta raiz, execute

    $ docker-compose up --build

    4. O servidor será aberto em http://localhost:3000

Pronto, com docker instalado em sua máquina, fica muito mais simples configurar o ambiente, agora sua aplicação já vai estar com o mysql configurado, e com database criado, tudo isso rodando em containes.