Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nyctibiusvii/podcastr
Projeto web construído durante o NLW#05 com a Rocketseat/Diego Fernandes. PODCASTR: "O melhor para você ouvir, sempre". 🎧🎶
https://github.com/nyctibiusvii/podcastr
css diegofernandes discovery html next-level-week nextjs nlw5 nodejs podcast podcastr projeto reactjs rocketseat trilha-react typescript vercel
Last synced: about 1 month ago
JSON representation
Projeto web construído durante o NLW#05 com a Rocketseat/Diego Fernandes. PODCASTR: "O melhor para você ouvir, sempre". 🎧🎶
- Host: GitHub
- URL: https://github.com/nyctibiusvii/podcastr
- Owner: NyctibiusVII
- License: mit
- Created: 2021-04-19T14:16:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-05-25T01:23:51.000Z (over 3 years ago)
- Last Synced: 2023-03-10T06:02:43.937Z (over 1 year ago)
- Topics: css, diegofernandes, discovery, html, next-level-week, nextjs, nlw5, nodejs, podcast, podcastr, projeto, reactjs, rocketseat, trilha-react, typescript, vercel
- Language: TypeScript
- Homepage: https://podcastr-nyctibiusvii.vercel.app
- Size: 1.95 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Trilha ReactJS 
Projeto |
Tecnologias |
Layout |
Licença
# Podcastr 
Projeto desenvolvido para gerenciar seus podcasts. Projeto realizado na Next Level Week #5 @Rocketseat.
###### O melhor para você ouvir, sempre. 🎧🎶
#### Funcionalidades 
* Escutar podcast.
* Visualizar sobre o que se trata o podcast.
* Gerenciar podcasts.
* ❌ Modal Cookies consent
* ❌ Site responsivo.
Desafios
```
✔ - Documentar bem o projeto
✖ - Melhorar o estilo: Responsividade e Design
✖ - Banco de dados
✖ - Next PWA
Funcionalidades:
- Trocar o tema da aplicação: Light e Dark
✖ - COOKIES:
- Cookies consent
- Guardar dados
- Alterar dados
- Deletar dados
✖ - SQL:
- Guardar dados
- Alterar dados
- Deletar dados
- Telas:
✔ - Home
✔ - Episodes
- 404
```
#### Erros de layout da NLW#5 🚧 ⇄ Consertos 🛠⚙
* *(error 1)* - Img diminuída ou nem aparecendo no 'card' **.latestEpisodes ul li**.
* *(error 2)* - Scroll lateral, componentes transbordando.
Fixed error 1:
```scss
/* Adicione 'width: 1%;' dentro de '.episodeDetails {}' */
.episodeDetails {
width: 1%; /* NOVA LINHA */
margin-left: 1rem;
flex: 1;
a {/*...*/}
p {/*...*/}
span {/*...*/}
} /* - home.module.scss */
```
Fixed error 2:
```scss
/* Config. for Notebooks with small screen */
@media (max-width: 1366px) {
html {
font-size: 80%;
}
} /* - global.scss */
/**
* Você pode editar o valor da 'max-width'
* caso não sirva totalmente para o seu caso,
* assim como criar outras media queries para
* outros tamanhos de tela se preferir.
*/
/* --------------------------------------- */
/* Config. for Tablet & Mobile */
@media (max-width: 1220px) {
.latestEpisodes {
ul {
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
}
}
} /* - home.module.scss */
/**
* Esta configuração faz com que telas que
* tenham uma largura menor que 1220px, as
* ul's se adaptem e quebrem de linha,
* ocupando assim uma coluna e duas linhas.
*/
```
## Tecnologias 🚀
Esse projeto foi desenvolvido com as seguintes tecnologias:
- [Html | 5](https://pt.wikipedia.org/wiki/HTML)
- [Sass | ^1.32.11](https://sass-lang.com/)
- [Typescript | ^4.2.4](https://www.typescriptlang.org/)
- [ReactJS | ^17.0.2](https://pt-br.reactjs.org/)
- [NextJS | ^10.1.3](https://nextjs.org/)
- [NodeJS | ^14.16.1](https://nodejs.org/en/)
## Layout 🚧
### Desktop Screenshot
Ver mais
### Mobile Screenshot
Em breve...
## Rodando o projeto 🚴🏻♂️
#### "Só vou dar uma olhadinha...":
🎧 Site hospedado na Vercel 🎶
#### Na sua maquina:
Dependências
```json
"dependencies": {
"axios": "^0.21.1",
"date-fns": "^2.21.1",
"next": "10.1.3",
"rc-slider": "^9.7.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"sass": "^1.32.11"
},
"devDependencies": {
"@types/node": "^14.14.41",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"json-server": "^0.16.3",
"typescript": "^4.2.4"
}
//Ex: $ npm install @types/_____ -D
```
```bash
# Clone o repositório
$ git clone https://github.com/NyctibiusVII/Podcastr.git
# Acesse a pasta do projeto no prompt de comando
$ cd podcastr
# Instale as dependências
$ npm install
# Execute o script "dev"
$ npm run dev
# O projeto inciará na porta: 3000 - acesse http://localhost:3000
```
## Contribuição 💭
Para construir essa aplicação tive a ajuda do professor **Diego Fernandes** da Rocketseat que disponibilizou video aulas do projeto **Podcastr** e tive uma ajuda desta grande comunidade que a Rocketseat construiu no *Discord*.
Feito com ♥ by Rocketseat :wave: [Participe da nossa comunidade!](https://discord.gg/YxU7fJT)
### Hashtags \#
| Dias | Hashtags |
|-------|------------------------|
| Dia 1 | #MissãoEspacial |
| Dia 2 | #EmBuscaDoPróximoNível |
| Dia 3 | #Astronautas |
| Dia 4 | #UniversoInfinito |
| Dia 5 | #MissãoCumprida |
## Licença ⚖️
Este projeto está sob a licença do MIT. Veja o arquivo [LICENSE](https://github.com/NyctibiusVII/Podcastr/blob/main/LICENSE) para mais detalhes.
## Contato ✉️
| 
@MatheusVidigal🦊 |
| :---: |
