Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaysilvha/desafio_codigo_-clone-_netflix
https://github.com/kaysilvha/desafio_codigo_-clone-_netflix
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaysilvha/desafio_codigo_-clone-_netflix
- Owner: KAYSILVHA
- Created: 2024-08-06T22:23:48.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2024-08-28T00:17:26.000Z (3 months ago)
- Last Synced: 2024-08-29T00:29:16.757Z (3 months ago)
- Language: JavaScript
- Homepage: https://desafio-codigo-clone-netflix.vercel.app
- Size: 21.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
CLONE NETFLIX
Desafio de replicar uma estrutura Front-End parecida com a NETFLIX. Este projeto permitirá a prática e o desenvolvimento de habilidades essenciais em desenvolvimento front-end.
Tecnologias |
Estrutura do código |
Projeto |
Como executar localmente
## 🚀 Tecnologias
Esse projeto foi desenvolvido com as seguintes tecnologias e ferramentas:
- **React**: Biblioteca JavaScript para construir interfaces de usuário.
- **Vite**: Ferramenta de construção e desenvolvimento rápida.
- **React Router**: Biblioteca para gerenciamento de navegação e rotas em aplicações React.
- **Bootstrap**: Framework CSS para estilização rápida e responsiva.
- **Reactstrap**: Biblioteca de componentes React para Bootstrap.
- **Sass**: Pré-processador CSS para escrever estilos de forma mais eficiente.
- **Axios**: Biblioteca para fazer requisições HTTP.
- **FontAwesome**: Biblioteca de ícones vetoriais para estilizar ícones.
### Ferramentas de Desenvolvimento
- **ESLint**: Ferramenta para identificar e corrigir problemas em código JavaScript.
- **@types/react** e **@types/react-dom**: Tipagens TypeScript para React.
- **@vitejs/plugin-react**: Plugin para integração do React com Vite.
## 📝 Estrutura
```
src/
│
├── api/
│ ├── tmdb.jsx
│ └──
├── assets/
│ ├── images/
| └──
│ ├── styles/
│ │ ├── globalStyle.scss/
│ └──
├── Components/
│ ├── Layout/
│ │ ├── Footer/
| | | ├── assets/
| | | | ├── images/
| | | | └──
| | | | ├── style/
| | | | | ├── style.js
| | | │ └──
| | | ├── Footer.jsx
| | | └──
│ │ ├── Header/
| | | ├── assets/
| | | | ├── images/
| | | | └──
| | | | ├── style/
| | | | | ├── style.js
| | | │ └──
| | | ├── Header.jsx
| | | └──
│ └── └──
│ ├── Pages/
│ │ ├── Banners/
| | | ├── assets/
| | | | ├── images/
| | | | └──
| | | | ├── style/
| | | | | ├── style.js
| | | │ └──
| | | ├── InitialBanner.jsx
| | | └──
│ │ ├── Login/
| | | ├── assets/
| | | | ├── images/
| | | | └──
| | | | ├── style/
| | | | | ├── style.js
| | | │ └──
| | | ├── Login.jsx
| | | └──
│ │ ├── Movies/
| | | ├── Components/
| | | | ├── MovieDetails.jsx
| | | | ├── style.scss
| | | │ └──
| | | ├── Movies.jsx
| | | ├── style.scss
| | | └──
│ │ ├── Search/
| | | ├── SearchPage.jsx
| | | ├── style.scss
| | | └──
│ └── └──
│
├── Routes/
│ ├── Route.jsx
│ └──
|
├── Services/
│ ├── MoviesServices.jsx
│ ├── ProtectedRoute .jsx
│ └──
│
└── Home.jsx
│
└── main.jsx
```
## 🚀 Projeto
O projeto é um clone da interface da Netflix e inclui as seguintes funcionalidades:
1. **Página Inicial**: Exibe uma lista de filmes populares, em destaque e recomendações.
2. **Detalhes do Filme**: Mostra detalhes sobre um filme selecionado, incluindo sinopse, elenco e avaliações.
3. **Navegação**: Navegação entre diferentes seções da aplicação, incluindo home, detalhes e categorias de filmes.
4. **Estilização Responsiva**: Utiliza Bootstrap e Sass para garantir uma interface atraente e adaptável a diferentes tamanhos de tela.
## 🚀 Executar
Siga os passos abaixo para configurar e executar o projeto localmente em sua máquina:
### Pré-requisitos
Antes de começar, certifique-se de ter as seguintes ferramentas instaladas em seu ambiente de desenvolvimento:
- Node.js (Versão recomendada: 16.x ou superior)
- Yarn ou npm (gerenciador de pacotes)
### Passos para Configuração
- Clone o repositório:
```
git clone https://github.com/seu-usuario/desafio_codigo_-clone-_netflix.git
```
- Navegue até o diretório do projeto
- Instale as dependências:
- Se você estiver usando Yarn:
```
yarn install
```
- Ou, se você estiver usando npm:
```
npm install
```
### Executando o Projeto
- Inicie o servidor de desenvolvimento:
- Com Yarn:
```
yarn dev
```
- Ou, com npm
```
npm run dev
```
- O comando acima iniciará o servidor de desenvolvimento. Você poderá acessar o projeto através do seguinte endereço no navegador:
```
http://localhost:5173/
```
### DADOS DE ACESSO
- Utilize estas credenciais:
- SENHA: password
- EMAIL: [email protected]