https://github.com/joaoplgaspar/cinetag

https://github.com/joaoplgaspar/cinetag

api context-api css fetch-api hooks html javascript react reactjs router-dom single-page-applications spa vitrinedev

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/joaoplgaspar/cinetag
• Owner: joaoplgaspar
• Created: 2023-08-02T17:24:52.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-08-02T17:40:41.000Z (almost 2 years ago)
• Last Synced: 2025-01-22T17:27:01.159Z (5 months ago)
• Topics: api, context-api, css, fetch-api, hooks, html, javascript, react, reactjs, router-dom, single-page-applications, spa, vitrinedev
• Language: JavaScript
• Homepage: https://cinetag-azure.vercel.app
• Size: 1.67 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 Cinetag 


![Static Badge](https://img.shields.io/badge/Status-_Finalizado-green?style=for-the-badge)

O Cinetag é um projeto para montar funcionalidades para favoritar seus videos preferidos e acessa-los no próprio site pelo player.

| :placard: Vitrine.Dev |     |

| -------------  | --- |

| :sparkles: Nome        | **Cinetag**

| :label: Tecnologias | react, html5, css3, javascript

| :rocket: URL         | https://cinetag-azure.vercel.app/



![Cinetag](https://github.com/joaoplgaspar/cinetag/assets/130015259/40386e05-153d-4fe0-9ee3-da13ab4eb7f4#vitrinedev)



## Resumo do projeto

O Cinetag é um projeto para montar funcionalidades para favoritar seus videos preferidos e acessa-los no próprio site pelo player. Foi criado utilizando o metódo Single Page Application, o uso de contextos por meio do useContext, criação de hooks personalizados e utilização de uma API própria, externalizada por meio do site My Json Server (Typicode). Projeto proposto por um curso Alura.

# :hammer: Funcionalidades do projeto

- `Funcionalidade 1`: Favoritar e desfavoritar videos

- `Funcionalidade 2`: Acessar uma aba com apenas os favoritos

- `Funcionalidade 3`: Acesso ao video no site por um player YT

![Funcionalidades Cinetag](https://github.com/joaoplgaspar/cinetag/assets/130015259/40386e05-153d-4fe0-9ee3-da13ab4eb7f4)

## ✔️ Técnicas e tecnologias utilizadas

- ``REACT, JAVASCRIPT, HTML5, CSS3``

- ``Single Page Application (SPA) com rotas dinâmicas, aninhadas, parâmetros``

- ``React Context com useContext``

- ``Criação de hooks personalizados``

- ``Métodos de array (some, splice, indexOf, map)``

- ``Consumo de API com FetchAPI``

- ``Hospedar API no My Json Server``

# 🛠️ Abrir e rodar o projeto

**Utilize `npm install` dentro da pasta do projeto para baixar suas pendências**

**A seguir `npm start` para iniciar o projeto**