Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adsonnovaes/homecine
Trata-se de uma aplicação de consulta de filmes, contendo login simulado e listagem e detalhamento de filmes e séries, feitos através da api do OMDB.
https://github.com/adsonnovaes/homecine
nuxt3 omdb-api pinia tailwind typescript vue vuetify3
Last synced: 28 days ago
JSON representation
Trata-se de uma aplicação de consulta de filmes, contendo login simulado e listagem e detalhamento de filmes e séries, feitos através da api do OMDB.
- Host: GitHub
- URL: https://github.com/adsonnovaes/homecine
- Owner: adsonnovaes
- Created: 2024-08-23T19:35:40.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2024-08-28T07:46:37.000Z (2 months ago)
- Last Synced: 2024-09-29T10:21:00.782Z (about 1 month ago)
- Topics: nuxt3, omdb-api, pinia, tailwind, typescript, vue, vuetify3
- Language: Vue
- Homepage: https://homecine-omega.vercel.app
- Size: 5.33 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Homecine
## Tecnologias utilizadas
- Nuxt3
- Tailwind
- Vuetify3
- Pinia
- TypeScript
## Funcionalidades
- Login simulado através do [Dummyjson](https://dummyjson.com/docs/auth#auth-login).
- Gerenciamento de estado da aplicação feita pelo pinia.
- Consumo da api do [OMDB](https://www.omdbapi.com/).
- Listagem de filmes, com a possibilidade de pesquisa pelo título e tipo de mídia (Série ou filmes e séries).
- Visualização de todos os detalhes do item da lista, ao clicar no card.
## Setup
Make sure to install the dependencies:
```bash
# npm
npm install
# pnpm
pnpm install
# yarn
yarn install
# bun
bun install
```
## Development Server
Start the development server on `http://localhost:3000`:
```bash
# npm
npm run dev
# pnpm
pnpm run dev
# yarn
yarn dev
# bun
bun run dev
```
## Production
Build the application for production:
```bash
# npm
npm run build
# pnpm
pnpm run build
# yarn
yarn build
# bun
bun run build
```
Locally preview production build:
```bash
# npm
npm run preview
# pnpm
pnpm run preview
# yarn
yarn preview
# bun
bun run preview
```
## Deploy - Controle de variáveis de ambiente e configuração do projeto:
``` ts
runtimeConfig: {
public: {
omdbApiKey: process.env.OMDB_API_KEY || "",
omdbApi: process.env.OMDB_API || "",
authApi: process.env.AUTH_API || "",
},
},
```
Foi definido no arquivo `nuxt.config.ts` as variáveis de ambiente utilizada na aplicação, logo, ao subir a aplicação na vercel (ou outra plataforma de produção) será necessário definir essas três variáveis. Existe um arquivo chamado `.env.example`, onde contém os nomes das variáveis:
```.env
OMDB_API_KEY=
OMDB_API=http://www.omdbapi.com/
AUTH_API=https://dummyjson.com/auth/login
```
Dessas três, somente a `OMDB_API_KEY` terá que ser gerada no site `https://www.omdbapi.com/`, para conseguir fazer as requisições, as outras duas são a própria api da OMDB e a outra uma fake api que realiza uma seção de autenticação simulada.
Para mandar para produção, utilizei a vercel, onde após logado e vinculado com a conta do github, é possível criar um novo projeto. Com a conta vinculada ao github os projetos aparecem e pode selecioná-lo. Ao fazer isso, a tela de configuração aparece em seguida e o que precisa adicionar. Nesse ponto que será adicionado as varáveis de ambiente.
Após adicionar as variáveis de ambiente é só realizar o deploy, aguardar o build e por fim as urls geradas.
[Acessar o projeto](https://homecine-omega.vercel.app/) e veja o resultado final.