Sobre • Riojaflix • Instalação • Tecnologias • Autor
Projeto criado durante a Imersão de React criada pela Alura.
O Riojaflix é um projeto inspirado na Netflix cujo objetivo principal é entender como construir interfaces utilizando ReactJS e StyledComponents.
O projeto funciona como um aglomerado de vídeos que são carregados da nossa API fake construída com JSON server. Ao acessar a homepage da aplicação a visualização é semelhante a essa:
Como podemos ver acima, temos um cabeçalho onde, no canto superior direito temos um botão para cadastro de novos videos, logo após um banner com um video destaque e mais abaixo as categorias previamente cadastradas juntamente com seus vídeos.
Ao clicar no botão Novo video, o usuário é direcionado para a tela abaixo que conterá campos para ele adicionar as informações do novo conteúdo para que ele seja classificado e exibido no local correto após o cadastro:
Na tela de cadastro de video, abaixo do botão cadastrar, temos um link para cadastrar uma categoria. Ao clicar no link o formulário abaixo é exibido para que uma nova categoria seja criada:
Por fim, esse é o fluxo da aplicação. Simples porém cumpriu o objetivo de praticar a implementação de interfaces com ReactJS.
Deixo abaixo um GIF onde navego pela aplicação e cadastro um novo video para exemplificar o funcionamento do projeto:
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js. Além disso é bom ter um editor para trabalhar com o código como VSCode.
# Clone este repositório
$ git clone [email protected]:MrRioja/riojaflix.git
# Acesse a pasta do projeto no terminal/cmd
$ cd riojaflix
# Instale as dependências
$ npm install
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# Caso prefira usar o Yarn execute o comando abaixo
$ yarn dev
# O servidor iniciará na porta 3000 - acesse <http://localhost:3000>
# Além disso, uma API com JSON server também estará disponível na porta 8000 - acesse <http://localhost:8000>
