https://github.com/mathrb22/podcastrnext
Podcastr é uma aplicação web desenvolvida durante a 5ª edição do evento Next Level Week da @rocketseat 🚀🎙️
https://github.com/mathrb22/podcastrnext
frontend nextjs podcast podcast-player reactjs sass ssg ssr typescript web-application
Last synced: over 1 year ago
JSON representation
Podcastr é uma aplicação web desenvolvida durante a 5ª edição do evento Next Level Week da @rocketseat 🚀🎙️
- Host: GitHub
- URL: https://github.com/mathrb22/podcastrnext
- Owner: mathrb22
- License: mit
- Created: 2021-04-21T14:03:20.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-10-07T02:05:07.000Z (over 3 years ago)
- Last Synced: 2023-05-23T02:36:28.301Z (about 3 years ago)
- Topics: frontend, nextjs, podcast, podcast-player, reactjs, sass, ssg, ssr, typescript, web-application
- Language: TypeScript
- Homepage: https://mathrb22-podcastrnext.vercel.app/
- Size: 19.4 MB
- Stars: 5
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
O melhor para você ouvir, sempre
[**Sobre**](#-sobre) **|**
[**Features**](#-features) **|**
[**Tecnologias e ferramentas utilizadas**](#-tecnologias-e-ferramentas-utilizadas) **|**
[**Layout**](#-layout) **|**
[**Instalação e execução**](#-instalação-e-execução) **|**
[**Como contribuir**](#-como-contribuir) **|**
[**Contato**](#-contato) **|**
[**Licença**](#-licença)
## 📃 Sobre
**Podcastr** é o projeto desenvolvido durante a trilha de React da quinta edição da **Next Level Week**, um evento online produzido pela [**Rocketseat**](https://github.com/Rocketseat).
Esta é uma aplicação web que permite os usuários ouvirem seus podcasts favoritos, ver os últimos lançamentos e obter mais informações dos podcasts que estiverem ouvindo no momento.
> Este projeto foi muito interessante de desenvolver, pois para o desenvolvimento do player de áudio, utilizamos a API do HTML5 para manipular o áudio sendo tocado pelo usuário, assim como os eventos e estados do player. Além disso, foi possível aprender mais sobre o Next.js, que é um framework React que permite a criação de aplicações web com SSR (Server Side Rendering).
## ✨ Features
- [x] Lista com os últimos lançamentos de podcasts
- [x] Detalhes do podcast selecionado
- [x] Exibição da data atual
- [x] Player com funções de shuffle, repetição, anterior, próximo e play/pause, além da progressão do episódio
- [x] Layout responsivo
- [x] Dark mode / Light mode (Switch)
## 🚀 Tecnologias e ferramentas utilizadas
Este projeto foi desenvolvido com as seguintes tecnologias e ferramentas:
- [**React**](https://reactjs.org/): uma biblioteca JavaScript de código aberto com foco em criar interfaces de usuário (frontend) em páginas web. É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e outros;
- [**Next.js**](https://nextjs.org/): um framework de desenvolvimento web front-end que adiciona novas funcionalidades ao React, como SSR (Server-side Rendering) e SSG (Static Site Generation). Utilizamos esta ferramenta pensando na otimização de performance e uma melhor indexação em mecanismos de busca (SEO - Search Engine Optimization).
- [**TypeScript**](https://www.typescriptlang.org/): um super conjunto da linguagem JavaScript que fornece classes, interfaces e tipagem estática opcional. Utilizado em conjunto com React no frontend web;
- [**Sass**](https://sass-lang.com/): um pré-processador CSS que estende a sintaxe do CSS convencional, nos dando um controle mais profissional e dinâmico às folhas de estilo (stylesheets);
- [**Axios**](https://axios-http.com/): é um cliente HTTP baseado em Promises para fazer requisições.
- [**Git**](https://git-scm.com/downloads): o sistema de controle de versão distribuído de código aberto mais utilizado;
- [**Visual Studio Code**](https://code.visualstudio.com/): um editor de código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS, recomendado para o desenvolvimento de aplicações web;
## 📟 Layout
O layout das telas da aplicação **Podcastr** foi desenvolvido pela equipe da **Rocketseat** através da ferramenta online [**Figma**](https://www.figma.com), um software de prototipação voltado para **UI Design (design de interfaces de usuário)**.
Você pode acessar o layout através deste link: [**Podcastr**](https://www.figma.com/file/UwFEntsHpHYJlHNQAQr4gA/Podcastr/duplicate).
## 🔧 Instalação e execução
Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o [**Git**](https://git-scm.com/).
Com o Git instalado, em seu terminal execute o seguinte comando:
```bash
git clone https://github.com/mathrb22/podcastrnext.git
```
Para instalar as dependências e executar o projeto terá que ter instalado em sua máquina o [**Node.js**](https://nodejs.org/en/), que vem acompanhado do NPM. Com ele instalado:
Instale as dependências do projeto:
```bash
npm install
```
Execute o projeto:
```bash
npm run dev
# ou
yarn dev
```
## 💡 Como contribuir
- Faça um **_fork_** desse repositório;
- Crie um **branch** para a sua feature: `git checkout -b minha-feature`;
- Faça um **commit** com suas alterações: `git commit -m 'feat: Minha nova feature'`;
- Faça um **push** para o seu branch: `git push origin minha-feature`;
- Faça um **pull request** com sua feature;
Pull requests são sempre bem-vindos. Em caso de dúvidas ou sugestões, crie uma _**issue**_ ou entre em contato comigo.
## 📲 Contato
Entre em contato comigo por e-mail ou pelo meu LinkedIn:
## 📝 Licença
Esse projeto está sob a licença **MIT**. Veja o arquivo _**LICENSE**_ para mais detalhes.
---
©2021 - Matheus Ribeiro