O melhor para você ouvir, sempre

Sobre   |   Features   |   Tecnologias e ferramentas utilizadas   |   Layout   |   Instalação e execução   |   Como contribuir   |   Contato   |   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.

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

• Lista com os últimos lançamentos de podcasts
• Detalhes do podcast selecionado
• Exibição da data atual
• Player com funções de shuffle, repetição, anterior, próximo e play/pause, além da progressão do episódio
• Layout responsivo

• Dark mode / Light mode (Switch)

🚀 Tecnologias e ferramentas utilizadas

Este projeto foi desenvolvido com as seguintes tecnologias e ferramentas:

• React: 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: 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: um super conjunto da linguagem JavaScript que fornece classes, interfaces e tipagem estática opcional. Utilizado em conjunto com React no frontend web;

• Sass: 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: é um cliente HTTP baseado em Promises para fazer requisições.

• Git: o sistema de controle de versão distribuído de código aberto mais utilizado;

• Visual Studio Code: 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, 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.

🔧 Instalação e execução

Para baixar o código-fonte do projeto em sua máquina, primeiramente terá que ter instalado o Git.

Com o Git instalado, em seu terminal execute o seguinte comando:

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, que vem acompanhado do NPM. Com ele instalado:

Instale as dependências do projeto:

npm install

Execute o projeto:

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