https://github.com/oirhyan/stringo-app-music

Aplicação Web integrada ao Spotify capaz de realizar a busca e a reprodução de músicas sem necessitar de uma assinatura premium
https://github.com/oirhyan/stringo-app-music

api-client api-rest framer-motion music-player music-visualizer next-auth nextjs14 spotify-web-api tailwind-css webapp website

Last synced: 2 months ago
JSON representation

Aplicação Web integrada ao Spotify capaz de realizar a busca e a reprodução de músicas sem necessitar de uma assinatura premium

• Host: GitHub
• URL: https://github.com/oirhyan/stringo-app-music
• Owner: oiRhyan
• Created: 2024-01-29T14:46:08.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-06-25T18:01:17.000Z (7 months ago)
• Last Synced: 2024-06-25T18:51:15.554Z (7 months ago)
• Topics: api-client, api-rest, framer-motion, music-player, music-visualizer, next-auth, nextjs14, spotify-web-api, tailwind-css, webapp, website
• Language: TypeScript
• Homepage: https://stringo.vercel.app/
• Size: 11.3 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  



# Stringo App Music

Bem vindo a documentação do Stringo Web Music App! Um web app conceitual com foco na sctreaming de musicas integrado ao Spotify!

Você pode conferir está aplicação em tempo real no site : https://stringo.vercel.app/

## Tecnologias Utilizadas

[![My Skills](https://skillicons.dev/icons?i=react,nextjs,tailwind,typescript=7)](https://skillicons.dev)

## Recursos

- Reprodução de Músicas em tempo real

- Sistema de busca de músicas

- Atualização em tempo real das principais playlists mais tocadas da plataforma Spotify

- Sincronização e autenticação com Spotify

## Reproduza suas Músicas Favoritas!

https://github.com/oiRhyan/stringo-app-music/assets/123249383/fd0e5e72-c88d-478c-80a4-649e9187c957

## Desenvolvimento

Este documento descreve a primeira etapa do projeto, que consiste na integração da API do Spotify para a validação do usuário e a inicialização de sua conta no aplicativo.

## Integração da API do Spotify

Para integrar a API do Spotify em sua aplicação, você pode encontrar informações detalhadas na documentação oficial em: https://developer.spotify.com/documentation/web-api

## Funcionalidades

Após a sessão ser criada, o usuário terá acesso à aplicação em tempo real, utilizando os principais recursos de busca e reprodução de músicas. Isso foi possível graças aos métodos da API do Spotify, que foram adaptados para a versão atual do NextJS.

## Utilização de React Hook

Utilizando o React Hook, foi possível capturar os IDs das principais músicas requisitadas pelo usuário e integrá-las de forma dinâmica ao Player fornecido pelo próprio Spotify. Isso proporciona uma experiência mais interativa e imersiva ao usuário.

## Renderização Dinâmica em Tempo Real

A experiência do usuário nesta aplicação é enriquecida pela renderização dinâmica em tempo real de todo o conteúdo, possibilitada pela integração com a API do Spotify. A utilização das Fetch APIs do JavaScript permitiu uma implementação prática e intuitiva, garantindo uma navegação fluida e ágil.

## Acompanhe o desenvolvimento desta e outras aplicações em



  

    

  





   Desenvolvido por Rhyan Araujo Chaves @2024