Popcorn Polls

Popcorn Polls é um site que permite adicionar e avaliar filmes, desenvolvido utilizando as tecnologias Vite JS e React. O projeto foi criado como parte de um desafio disponibilizado no curso Explorer, e apresenta diversas funcionalidades interessantes.

O site permite a criação de cadastro, com autenticação do usuário via JWT (JSON Web Token). A sessão do usuário é armazenada no Local Storage do navegador, para facilitar o acesso posterior.

Uma das principais funcionalidades do Popcorn Polls é a possibilidade de criar anotações sobre seus filmes e séries favoritos. É possível adicionar informações como título, nota, sinopse/descrição e categoria (ação, terror, etc.). A aplicação também conta com um sistema de busca, para facilitar a localização dos filmes desejados.

O Popcorn Polls é uma excelente opção para os amantes de filmes que desejam ter uma forma organizada e prática de manter suas anotações e avaliações.

Conhecimentos adquiridos com esse projeto:

• Bibliotecas:

  • React (Biblioteca para criação de interfaces)
  • Styled Components (Biblioteca Css in Js)
  • Vite Js (Setup para desenvolvimento de projeto no React)
  • React Router (Biblioteca para fazermos as navegações funcionarem corretamente dentro do projeto)
  • React-Toastify (Biblioteca para estilização de alertas na aplicação)

• Estruturação:

  • JSX (Sintaxe para criar interfaces com o React)
  • Fragment (Recurso do React para agrupar uma lista de filhos)
  • Tema da aplicação (Paleta de cores para padronização de elementos)
  • Estilização Global (Configurações de estilos padronizadas, padronizando Fontes, animações, etc...)
  • Criação de Componentes (utilizado para reutilização de código e elementos no React, como: botões, inputs, header, etc...)
  • Map (O método map() invoca a função callback passada por argumento para cada elemento do array e devolve um novo array como resultado)

• Hospedagem Front-end:

  • Netlify

🔗 Aplicação em produção

https://popcornpolls.netlify.app/

Instalação

Instale usando npm

  npm install

Inicialização

Inicialize usando npm

  npm run dev