Flaviane-Brum/best-movies

Este projeto foi desenvolvido com o intuito de praticar Typescript + Reactjs e TailwindCss.

Best Movies.

Catálogo de filmes, utilizando a API The Movie DB .

Sumário

• Descrição
• Funcionalidades
• Tecnologias utilizadas
• Instruções para rodar o projeto
• Organização e estruturação do projeto
• Desenvolvimento
• Resultado

Descrição do Projeto

Este projeto foi desenvolvido com o intuito de praticar Typescript + Reactjs e TailwindCss.

Funcionalidades

• Estado global: O resultado da API deve ser armazenado em um estado global. (Pode ser utilizado Redux, Context, Vuex ou tecnologia equivalente do framework utilizado)
• Limitar requisições: Limitar cada requisição da página em 20 resultados para não sobrecarregar a API.
• Botão Mais Detalhes: botão Mais Detalhes para abrir uma página com as informações do filme.
• Buscador: Configurar o buscador para poder filtrar por nome do filme.
• Layout responsivo

Tecnologias Utilizadas

• React
• TypeScript
• React Hooks
• React Router Dom
• Tailwindcss
• Phosphor Icons
• Axios
• Date-fns

Instruções para rodar o projeto

Será necessário ter instalado na sua máquina:

Git
React
Node v6.0.0^

• Clone o repositório com o comando git clone:

git clone ------

• Entre no diretório que acabou de ser criado:

cd my-app

• Para o projeto funcionar na sua máquina, será necessário instalar suas dependências, para isso, utilize o comando npm install:

npm install

• Pronto, agora o projeto está pronto para ser rodado localmente, utilizando o comando npm run dev:

npm run dev

Organização e estruturação do projeto

O projeto está organizado e estruturado da seguinte forma:

      ├── README.md
      ├── index.html
      ├── src
      |     ├── components
      |     |       ├── helpers
      |     |       |     ├── Head.tsx
      |     |       |     ├── Loading.tsx
      |     |       ├── Button.tsx
      |     |       ├── CardMovie.tsx
      |     |       ├── Container.tsx
      |     |       ├── Footer.tsx
      |     |       ├── Header.tsx
      |     |       ├── MovieInfo.tsx
      |     |       ├── Title.tsx
      |     ├── contexts
      |     |       ├── MovieContext.tsx
      |     ├── Hooks
      |     |       ├── useMovie.ts
      |     ├── interfaces
      |     |       ├── MoviesProps.ts
      |     ├── pages
      |     |       ├── Home.tsx
      |     |       ├── Movie.tsx
      |     |       ├── Search.tsx
      |     ├── public
      |     |       ├── favicon.svg
      |     ├── utils
      |     |       ├── api.ts
      |     |       ├── formatCurrency.ts
      |     |       ├── formatHours.ts
      |     |       ├── index.ts
      |     ├── App.tsx
      |     ├── index.tsx

Desenvolvimento

Fetch

Para realizar o fetch no banco de dados da API, foi utilizado o client HTTP Axios.

Estilização

Para realizar a estilização, foi utilizado o framework Tailwindcss.

Icones

Os ícones utilizados foram os da biblioteca Phosphor Icons

Resultado

Página Home com a Lista de filmes

Página Movie

Página Search

🦄 Autor

Flaviane Brum