Este projeto foi criado a partir do curso da Alura - React:Praticando com Js, com a instrutora Mônica Hillman, onde a ideia é a criação de uma plataforma de compartilhamento de filmes que possibilita a ação tanto de assistir quanto de favoritar um item. Além disso, ao clicarmos na imagem seremos redirecionado para a tela de Player, onde é exibido o vídeo. Dessa forma, foi utilizado React, HTML5, CSS3 e JavaScript então pude colocar em prática o conhecimento sobre rotas dinâmicas, normais e aninhadas, hooks como useState, useEffect e useContext e consumo de Api. Neste caso foi utilizado Mock Api - serviço de web gratuito que nos permite simular uma Api Adicionei também alguns elementos visuais e utilizei também CSS module para evitar conflitos entre estilos. Ainda estou trabalhando com a responsividade, embora eu prefira utilizar o conceito de mobile firts, neste projeto tive como foco o aprendizado em React fixando todo aprendizado dos cursos até aqui então utilizei a base do css disponibilizado pela instrutora.
Processo de refatoração - design responsivo
| 🪧 CineTag | |
|---|---|
| 🏷️ Tecnologias | React, JavaScript, Html5, CSS3 (tecnologias utilizadas) |
| 🚀 URL | https://cine-tag-vert.vercel.app/ |
cinetag.mp4
Você pode clonar o projeto e rodá-lo localmente seguindo os passos abaixo
git clone https://github.com/LarissaOlimpio/CineTag.gitpara clonar o projetoyarnounpm installpara instalar as dependências do projetoyarn startounpm startpara rodar o projeto- Acessar http://localhost:3000 no navegador
Para criar a API fake, utilizei o site My JSON Server : https://my-json-server.typicode.com/
Seguindo estes passos:
Criar um repositório on GitHub (<your-username>/<your-repo>)
Criar um arquivo db.json
Visitar "https://my-json-server.typicode.com/your-username/your-repo" para acessar seu servidor.
**Link para o repositório da API utilizada: https://github.com/LarissaOlimpio/cinetag-api
Projeto criado com Create-React-App, para saber mais acesse a documentação: https://create-react-app.dev/docs/getting-started/