https://github.com/brunoschmitz4/vibesync-web
VibeSync é uma aplicação web que permite a criação de playlists personalizadas com base em emoções, palavras-chave e preferências musicais. Com integração à **API do Spotify**, o sistema sugere músicas que combinam com o momento do usuário, tornando a descoberta musical mais intuitiva e divertida.
https://github.com/brunoschmitz4/vibesync-web
bulma-css css3 expressjs firebase hmtl5 jquery js jsx reactjs spotify-web-api
Last synced: 3 months ago
JSON representation
VibeSync é uma aplicação web que permite a criação de playlists personalizadas com base em emoções, palavras-chave e preferências musicais. Com integração à **API do Spotify**, o sistema sugere músicas que combinam com o momento do usuário, tornando a descoberta musical mais intuitiva e divertida.
- Host: GitHub
- URL: https://github.com/brunoschmitz4/vibesync-web
- Owner: BrunoSchmitz4
- Created: 2025-06-14T19:56:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-23T20:17:06.000Z (about 1 year ago)
- Last Synced: 2025-06-23T21:28:42.296Z (about 1 year ago)
- Topics: bulma-css, css3, expressjs, firebase, hmtl5, jquery, js, jsx, reactjs, spotify-web-api
- Language: JavaScript
- Homepage:
- Size: 549 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🎵 VibeSync – Enriquecendo sua Mixtape Diária do Spotify ;)
# Sobre o Projeto
:construction: Projeto em construção :construction:
 
**VibeSync** é uma aplicação web que permite a criação de playlists personalizadas com base em emoções, palavras-chave e preferências musicais. Com integração à **API do Spotify**, o sistema sugere músicas que combinam com o momento do usuário, tornando a descoberta musical mais intuitiva e divertida.
// Pontuação de Acessibilidade VibeSync:
Home - 100
Dashboard - 93 (Contraste ausente)
Criador - 87 (Selects sem Labels linkados)
Descoberta - 100
Minhas Playlists - 93 (Contraste ausente)
Marketplace - 99 (Alt nas imagens ausente)
Configurações - 93 (Selects sem Labels linkados)
# :hammer: Funcionalidades do projeto
- `Busca Inteligente` – Gere playlists com base em sentimentos, atividades ou palavras-chave.
- `Autenticação via Spotify` – Acesse sua biblioteca de músicas e playlists.
- `Recomendações Personalizadas` – Sugestões de músicas com base no histórico do usuário.
- `Editor de Playlists` – Organize e personalize suas listas musicais de maneira intuitiva.
- `Modo Descoberta` – Explore novos artistas e músicas recomendadas.
# Tecnologias Usadas
Tecnologias Front-End
- React JS - Framework base da aplicação
- HTML5 - Exibir as pages e os componentes das routes
- CSS3 - Auxiliar no desenvolvimento responsivo
- JSX - Implementar os componentes e páginas
- Bulma JS - Auxiliar no desenvolvimento de componentes
- Animate CSS - Dar um ✨ tchan ✨ no projeto
- JQuery - Mnipulação do DOM (com JSX)
- Javascript - Tá ai né...
Versionamento
- Git - Impedir que o desenvolvedor faça suas playlists virarem "Teste da Silva" (denovo)
- Github - Controle de Versionamento
- Github Desktop - Facilitar o versionamento
APIs
- Spotify API Web - Auth e manipulação de playlists
- Firebase - Simulação de banco de dados e armazenamento de preferências.
Prototipação e Design UX/UI
- Figma ❤️
# Design
### **UI/UX**
- 🎭 **Paleta de cores**: Tons suaves de **grafite, verde e branco**, com aspecto **neon** e dark mode ativado por padrão.
- 🖋 **Tipografia**: **Poppins** e **Montserrat**.
- 🎨 **Padrão de Design**: **Material Design** para uma interface moderna e intuitiva.
- 📐 **Ferramentas de prototipação**: **Figma** para criação de wireframes e interface.
# Como Executar o Projeto
### **Pré-requisitos**
Obs: ainda não é possível executar o projeto, devido o back-end ainda não ter sido versionado. Em breve será disponibilizado.
- Instale o **Node JS** e o **Git**
- Clone o repositório do projeto:
```bash
https://github.com/BrunoSchmitz4/VibeSync-Web.git
```
Acesse o diretório do projeto:
```bash
cd VibeSync
```
Instale as dependências:
```bash
npm install
```
Inicie o servidor:
```bash
npm start
```