🎵 Floatify — Floating Lyrics & Spotify Overlay

Floatify is a desktop app (built with Electron + Node.js) that shows real-time lyrics and Spotify track info in a floating overlay on your screen.
Think “Picture-in-Picture,” but for music. Perfect for multitasking, karaoke, or just vibing while you code.

---

✨ Features

• 🪟 Floating Overlay – A movable, resizable window that stays on top of other apps.
• 🎧 Spotify Integration – Displays the currently playing song with live updates.
• 🔁 Auto Token Refresh – Keeps your Spotify access active without re-authenticating.
• 🧩 Transparent Mode – Adjustable opacity for distraction-free multitasking (coming soon).
• ⏯️ Playback Controls – Basic play/pause/skip buttons (coming soon).

---

🧠 Tech Stack

Layer	Technology
Desktop Shell	Electron
Backend Auth	Express
API	Spotify Web API
Frontend	HTML, CSS, JavaScript
Token Handling	Node.js + dotenv

---

⚙️ Setup Guide

1. Clone this repo

git clone https://github.com/niveaaa/Floatify.git
cd Floatify

2. Install dependencies

npm install

3. Create a Spotify App

Go to Spotify Developer Dashboard

→ Create a new app → Add a redirect URI: http://127.0.0.1:8888/callback

Then copy your Client ID and Client Secret into a .env file in the project root:

SPOTIFY_CLIENT_ID=your_client_id_here
SPOTIFY_CLIENT_SECRET=your_client_secret_here

4. Run the Auth Server

node authServer.js

It will open Spotify’s login page. Once you log in, the terminal will print your access and refresh tokens, and a local server will start at: http://127.0.0.1:8888

5. Launch the Electron App

In another terminal:

npm run dev

or

npm start

Floatify will open a small window showing your current playing track from Spotify.

---

🔄 Token Refresh

The server automatically refreshes your Spotify token every 55 minutes. Electron periodically fetches the latest token from: http://127.0.0.1:8888/token

---

🧩 Folder Structure

Floatify/
│
├── authServer.js         # Handles Spotify authentication + token refresh
├── main.cjs              # Electron main process
├── preload.js            # Safe IPC bridge
├── renderer.js           # Frontend logic
├── index.html            # UI layout
├── .env                  # Spotify credentials
└── package.json

---

🧑‍💻 Author

Floatify by niveaaa

Built for music nerds who multitask too much.

---

⚠️ Disclaimer

This project uses the Spotify Web API for personal/non-commercial purposes. You must comply with Spotify’s Developer Terms.