Suggestify

Suggestify is a web application allows people to recommend tracks they think I should listen to. It features a search functionality to find tracks, preview playback in search results, and a public list of suggested tracks. The app is built using Astro and utilizes the Deezer API for music data.

Features

• Search Tracks: Find your favorite songs or discover new ones.
• Preview Music in Search Results: Listen to song previews while browsing search results.
• Public Playlist: View and suggest tracks to be added to the public playlist.
• Responsive Design: Optimized for both desktop and mobile devices.

Technologies Used

• Frontend: Astro for server-side rendering and React-based UI.
• Styling: Tailwind CSS for utility-first styling.
• Backend: Server-side logic powered by Astro API routes.
• Third-party Integration:
  • Deezer API for fetching song data.
  • Cloudflare Turnstile for bot protection.
  • ntfy to send notifications directly to your phone.
• Hosting: Deployed on Cloudflare Workers.
• Package Manager: Uses Bun for faster dependency management and builds.

Getting Started

Prerequisites

• Node.js (v16 or later)
• npm, yarn, or bun package manager

Installation

1. Clone the repository:

   git clone https://github.com/your-username/suggestify.git
   cd suggestify

2. Install dependencies:

   bun install

3. Start the development server:

   bun dev

4. Configure environment variables in your .env file:

   TURSO_DATABASE_URL=libsql://your-database.turso.io
   TURSO_AUTH_TOKEN=your-turso-auth-token
   PUBLIC_TURNSTILE_SITE_KEY=your-turnstile-site-key
   TURNSTILE_SECRET_KEY=your-turnstile-secret-key

5. Open the app in your browser at http://localhost:3000.

Turso Database Schema

Run this SQL in Turso to create the required tables:

CREATE TABLE IF NOT EXISTS Suggestions (
  id INTEGER PRIMARY KEY,
  track_id INTEGER NOT NULL,
  track_title TEXT NOT NULL,
  artist_name TEXT NOT NULL,
  album_name TEXT NOT NULL,
  cover_url TEXT NOT NULL,
  link TEXT NOT NULL,
  created_at TEXT NOT NULL
);

CREATE TABLE IF NOT EXISTS Geolocation (
  id INTEGER PRIMARY KEY,
  suggestion_id INTEGER NOT NULL,
  city TEXT NOT NULL,
  country TEXT NOT NULL,
  flag TEXT NOT NULL,
  latitude REAL,
  longitude REAL,
  recorded_at TEXT NOT NULL,
  FOREIGN KEY (suggestion_id) REFERENCES Suggestions(id)
);

CREATE INDEX IF NOT EXISTS idx_geolocation_suggestion_id
  ON Geolocation(suggestion_id);

Build for Production

To build the app for production:

bun build

Deploy to Cloudflare Workers

Build the Worker artifacts first:

bun run worker:build

Then create the session namespace:

bunx wrangler kv namespace create SESSION

Copy the namespace ID and set it in dist/server/wrangler.json under kv_namespaces (after running bun run build):

"kv_namespaces": [
  {
    "binding": "SESSION",
    "id": "YOUR_SESSION_KV_NAMESPACE_ID"
  }
]

If you run bun run worker:build again, update dist/server/wrangler.json with the namespace ID again.

Set Turso secrets in Cloudflare:

bunx wrangler secret put TURSO_DATABASE_URL
bunx wrangler secret put TURSO_AUTH_TOKEN

Set Turnstile secrets/config:

bunx wrangler secret put TURNSTILE_SECRET_KEY

Set PUBLIC_TURNSTILE_SITE_KEY in your deployment build environment (non-secret public key).

Set ntfy secrets in Cloudflare (kept server-side only):

bunx wrangler secret put NTFY_URL
bunx wrangler secret put NTFY_TOPIC
bunx wrangler secret put NTFY_TOKEN

Turnstile setup (prod + local)

1. In Cloudflare Turnstile, create a widget and add your production domain(s).
2. Use the widget keys:
   • Site key -> PUBLIC_TURNSTILE_SITE_KEY
   • Secret key -> TURNSTILE_SECRET_KEY
3. For local testing you can use Cloudflare test keys:
   • PUBLIC_TURNSTILE_SITE_KEY=1x00000000000000000000AA
   • TURNSTILE_SECRET_KEY=1x0000000000000000000000000000000AA

Run a local Worker preview:

bun run worker:dev

Deploy:

bun run worker:deploy

Project Structure

• src/layouts/layout.astro: Defines the root layout of the application, including metadata and global styles.
• src/pages/index.astro: Main page of the application.
• src/assets/css/globals.css: Tailwind CSS configuration and global styles.
• .astro/: Auto-generated folder containing the Astro build output.

Metadata

• Title: Suggestify - Discover and Share Brutal Tunes
• Description: Search, preview in search results, and suggest tracks for the public playlist.

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes and push the branch.
4. Open a pull request.

License

This project is licensed under the MIT License.

---

Enjoy discovering and sharing brutal tunes with Suggestify! 🤘