Spotify radio is an audio streaming app where you can add effects in real time.

Overview

Spotify Radio - Semana JS Expert 6.0

Spotify radio is an audio streaming app where you can add effects in real time.

JS-Expert Project of the Week by the dear @Erick Wendel, with the challenge of implementing unit tests and e2e and achieving 100% coverage.

Preview

Open https://spotify-radio-grilario.herokuapp.com/ and play audio.

Open https://spotify-radio-grilario.herokuapp.com/controller and control the transmission.

Getting Started

Prerequisites

Or

Installation

Step 1: Clone the repo

git clone https://github.com/Grilario/js-expert-spotify.git
cd js-expert-spotify

Step 2: Install NPM packages

 npm ci --silent

Step 3: Run app

npm run start

Open http://localhost:3000 and take a look around.

Or with Docker

Step 1: Clone the repo

git clone https://github.com/Grilario/js-expert-spotify.git
cd js-expert-spotify

Step 2: Run in docker

 npm run start:docker

Open http://localhost:3000 and take a look around.

Guide

Open http://localhost:3000/home and play audio.

Open http://localhost:3000/controller and control the transmission.

Checklist Features

  • Web API:

    • Must achieve 100% code coverage in tests
    • Must have end to end tests validating all API routes
    • Must deliver static files like Node.js Stream
    • Must deliver music files as Node.js Stream
    • Given a disconnected user, should not break API
    • Even if multiple commands are fired at the same time, it should not break the API
    • If an unexpected error occurs, the API should continue working
    • Project needs to run on Linux, Mac and Windows environments
  • Web App:

    • Client:
      • Must play the broadcast
      • Shouldn't pause if any effects are added
    • Controller:
      • Must achieve 100% code coverage in tests
      • Must be able to start or stop a broadcast
      • Must send commands to add audio effects to a stream

Tasks per class

  • Lesson 01: Cover service and route layers with unit tests and achieve 100% code coverage.
  • Lesson 02: Maintain 100% code coverage and implement e2e tests for the entire API.
  • Lesson 03: implement unit tests for the frontend and maintain 100% code coverage.
  • PLUS:
    • provide a new effect
      • add a new button on controller
      • add new effect sound to audios/fx/ folder
      • repost on heroku

Credits to used audios

Streaming

Effects

You might also like...

🔇 🤐 This extension mutes the spotify audio 🎧 👻 when ad comes.

 🔇 🤐 This extension mutes the spotify audio 🎧 👻 when ad comes.

Spotimute 🔇 🤐 This extension mutes the spotify audio 🎧 👻 when ad comes. Spotimute-Demo.mp4 Install from Chrome-Web-Store https://chrome.google.com

Dec 28, 2022

:musical_score: ts-audio is an agnostic library that makes it easy to work with AudioContext and create audio playlists in the browser

ts-audio · ts-audio is an agnostic and easy-to-use library to work with the AudioContext API and create Playlists. Features Simple API that abstracts

Dec 25, 2022

Add some fire to your Spotify music playlists 🔥🎧

Add some fire to your Spotify music playlists 🔥🎧

Spotifire 🔥 Add some fire to your Spotify music playlists 🎧 Built With Next.js React Tailwind CSS (v3.0) NextAuth Recoil Spotify Web API Preview Vis

Jun 19, 2022

A mobile app for playing music on Resonate, an open source music streaming co-op.

stream2own Play fair. Website | Twitter | Contributing | Developer Guide 🎵 Resonate Stream App A mobile app for playing music on Resonate, an open so

Dec 28, 2022

Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Dec 15, 2022

Resurrection of mediagroup / MediaController (renamed) which can be used to sync and control multiple audio / video elements.

media-group (examples) Resurrection of the mediagroup attribute and MediaController API (but renamed) which can be used to sync and control multiple a

Aug 2, 2022

Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology

Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology

Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology

Jan 4, 2023

Real-time motion planner and autonomous vehicle simulator in the browser, built with WebGL and Three.js.

Real-time motion planner and autonomous vehicle simulator in the browser, built with WebGL and Three.js.

Dash Self-Driving Car Simulator Real-time motion planner and autonomous vehicle simulator in the browser, built with WebGL and Three.js. This project

Dec 3, 2022
Comments
  • Correção do vencedor da Semana JS Expert

    Correção do vencedor da Semana JS Expert

    Implementação

    • Concluiu com sucesso o desafio principal e o desafio extra!

    • Ótima preocupação em ir atualizando o README.md conforme ia terminando os desafios :smile: Muito bom!

    • Excelente preocupação em colocar ainda mais FX novos no projeto, como o Fart Shitting e o Rapaaaz!

    • Bom trabalho se atentando aos metadados presentes no package.json, como o main https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/package.json#L4 e também o license https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/package.json#L6

    • Excelente trabalho adicionando o endereço da aplicação no Heroku na parte de preview https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/README.md?plain=1#L9-L11

    • Não só melhorou o desafio, como também melhorou infinitamente o README do projeto, adicionando a sessão Getting Started

    https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/README.md?plain=1#L15-L64

    Possíveis pontos de melhoria

    • Nesse caso inclusive pode colocar o author no package.json sem medo de ser feliz! hahaha afinal essa é a sua implementação do projeto

    • Sobre o README, pra deixar o projeto ainda com mais cara de seu, é interessante colocar também a foto de como ficou a sua demo com os efeitos novos (em vez da foto demo padrão do desafio): https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/README.md?plain=1#L13

    • No Getting Started, inclusive, vale ressaltar que a parte difícil de configurar (e que faz com que seja preferível o uso do Docker para evitar problemas configurando a aplicação em diferentes ambientes) é justamente a lib de áudio libsox-fmt-mp3, então vale uma menção honrosa a esse carinha pra quem estiver tentando configurar a aplicação não passar batido por essa parte: https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/README.md?plain=1#L19-L21

    Nota do Wells: Uma nota rápida tipo essa aqui (em formato de citação) é bem comum nesses casos em documentações oficiais pra deixar esse tipo de aviso.

    /public

    Pontos fortes

    • Bom trabalho ao se atentar ao padrão de estilização do código e qualidade de código no geral. Não só se baseou no código da aula, como melhorou e padronizou tudo! Senior demaaais! 🚀 https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/public/controller/js/controller.js#L8-L10

    • Mais uma vez ressaltando o ponto extremamente positivo de inserir um novo FX e implementar ele pela aplicação https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/public/controller/index.html#L25-L26

    Possíveis pontos de melhoria

    • Detalhe de digitação simples, mas aqui seria dependencies https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/public/controller/js/controller.js#L7

    /server

    Pontos fortes

    • Garantiu a entrega de arquivos estáticos e de música como Node.js Streams

    • Cumpriu todos os requisitos funcionais presentes nas especificações

    • Bom trabalho corrigindo o Rages pra Ranges aqui https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/server/routes.js#L42

    • Organização legal das desestruturações no começo do arquivo https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/server/routes.js#L6-L11

    • Olha só, testando até mudanças no chunkSize e tudo mais! Senior demais!! 🚀 https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/server/service.js#L148-L151

    Testes

    • Conseguiu 100% de code coverage!

    Possíveis pontos de melhoria

    • Muito bacana sua iniciativa de colocar a saída do code coverage no .gitignore para evitar o trackeamento no git como num projeto real. Vou só acrescentar uma curiosidade aqui: Como um dos objetivos do desafio incluía o code coverage, uma coisa legal que pode ser feita é justamente deixar o code coverage trackeado no github e mostrar ele usando o github pages (inclusive podendo linkar essa saída no próprio README do projeto, como o Erick fez aqui:
    image

    Nota do Wells: aqui inclusive tem o link da página de coverage da aula 03 que tá ali no print, caso queira conferir.

    • Mandou bem demais em usar a flag --detectOpenHandles pra evitar a saída no terminal https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/package.json#L10 Só faltou colocar a flag também no test:coverage 😉 https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/package.json#L12

    E2E

    Pontos positivos

    • Testou completamente as possíveis interações externas com a aplicação de ponta a ponta

    • implementou o server garantindo que a instância seja única, como mencionado como melhoria pelo Erick em aula https://github.com/Grilario/js-expert-spotify/blob/87d830975ec0b519c9da34ca6f4e74ef97e66cdb/tests/e2e/server/api.test.js#L18

    Possíveis pontos de melhoria

    Unitários

    Pontos positivos

    • Implementou com sucesso os testes unitários no desafio, tendo uma das maiores coberturas de teste entre os alunos

    Possíveis pontos de melhoria

    • Nesse caso aqui não deu erro pois você não está consumindo a stream, https://github.com/Grilario/js-expert-spotify/blob/09b97977f040588a2f3b8abd61437f028c98210e/tests/unit/_util/testUtil.js#L28 mas caso estivesse, a aplicação lançaria uma exception, pois o generateWritableStream espera receber uma função (onData) como parâmetro: https://github.com/Grilario/js-expert-spotify/blob/02cd242a416eba58a1de4f24b7a759839be7f238/tests/unit/_util/testUtil.js#L17-L24

    Próximos passos

    Dado o seu empenho em implementar de forma impecável o desafio em todos os aspectos avaliados, fica aqui um direcionamento rápido como "possíveis próximos passos de melhoria", caso queira deixar tudo ainda mais Sênior:

    • Você já tem o setup completo para poder usar GitHub Actions para fazer o deploy como CI, integrando o GitHub com o Heroku e deixando o seu currículo ainda mais preparado pro mercado! haha 🚀

    Considerações finais

    Concluiu com proficiência o Desafio principal e o desafio extra. E não só implementou o que foi visto nas aulas durante a Semana JS Expert, como também melhorou a estrutura dos próprios desafios em si e se comprometeu com o projeto como um todo, melhorando desde a documentação e scripts do projeto até implementações específicas testando mudanças de Bitrate e chunkSize. Deploy feito, 100% de coverage nos testes e 120% de empenho na Semana JS Expert. Parabéns, Luis Fernando! Mandou bem demaaaaais! 🚀

    opened by WellsSA 0
Owner
Luis Fernando
Seeking to know the world of programming 💻
Luis Fernando
Audio visualizer library for javascript. Create dynamic animations that react to an audio file or audio stream.

Wave.js Audio visualizer library for javascript. Installation Install With CDN <script src="https://cdn.jsdelivr.net/gh/foobar404/wave.js/dist/bundle.

Austin Michaud λ 497 Dec 21, 2022
Spotify Radio - JS Expert Week 6.0

Spotify Radio - JS Expert Week 6.0 Welcome to the sixth Javascript Expert Week. This is the starting code to start our journey. Tag this project with

Alison Lima 6 Mar 16, 2022
Todas as aulas da Semana JS Expert 6.0 - Spotify Radio

Spotify Radio - Semana JS Expert 6.0 Seja bem vindo(a) à sexta Semana Javascript Expert. Este é o código inicial para iniciar nossa jornada. Marque es

Erick Wendel 1.3k Jan 7, 2023
Radio player for audio tracks in a tezos wallet.

Hicathon 2021 | WG7 7.2 - Galleries and collections Minimal galleries for exhibitions The Team: Name Role Discord Username Twitter Username Wallet Tea

Sean Cooper 23 Jul 11, 2022
Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications

RTC SCORE Library to calculate a Mean Opinion Score (MOS) from 1 to 5 for audio and video real time communications. The first version of the algorithm

Gustavo Garcia 25 Nov 27, 2022
AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required.

Documentation • Examples • Tutorials • Support Us • Get Professional Help AmplitudeJS is a lightweight JavaScript library that allows you to control t

Server Side Up 3.9k Jan 2, 2023
A self-hosted, completely private and free music streaming server compatible with Synology Audio Station's web browser interface and smartphone apps.

Open Audio Server Open Audio Server is a music streaming server compatible with Audio Station by Synology. Audio Station creates your own private serv

null 91 Dec 11, 2022
Spotify 2.0 com NextJS 12 - MIddleware, TailwindCSS, Spotify API, NextAuth, Recoil

Spotify Clone A spotify clone made with NextJS 12, TailwindCSS, NextAuth, Spotify API, Recoil Lessons Learned Setting up NextJS with Tailwind. NextAut

zF4ke 3 Mar 14, 2022
Spotify clone using Next.js, Spotify API, Tailwind, NextAuth, Recoil

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind

Abdelwahab Hussein 2 Dec 25, 2021
spotify.ts is an wrapper built around Spotify's Web API

spotify.ts About spotify.ts is an wrapper built around Spotify's Web API. Features Fast Object Oriented Typescript, ESM, CJS support Easy to Use Insta

null 6 Nov 17, 2022