feat(ui): add socials to share with your friends with shorten url

.env.example

@@ -1,2 +1,5 @@
+#backend
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
+#frontend (db)
+ASTRO_STUDIO_APP_TOKEN=

.github/workflows/_studio.yml

@@ -0,0 +1,26 @@
+name: Astro Studio
+
+env:
+  ASTRO_STUDIO_APP_TOKEN: ${{secrets.ASTRO_STUDIO_APP_TOKEN }}
+
+on:
+  push:
+    branches:
+      - main # '*' for all branches
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  DB:
+    permissions:
+      contents: read
+      actions: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: jaid/[email protected]
+      - uses: withastro/action-studio@main

README.md

@@ -1,6 +1,6 @@
 # Alternify
 
-Find Alternatives to your Spotify Tracks
+Find Alternatives to your Spotify Tracks & share them with your friends!
 
 
 https://github.com/user-attachments/assets/c533eff8-3e5e-4bbd-87e0-6760900aab86
@@ -13,7 +13,8 @@ https://github.com/user-attachments/assets/c533eff8-3e5e-4bbd-87e0-6760900aab86
 - [**Vercel**](https://vercel.com/) - Provides the developer tools and cloud infrastructure.
 - [**Flask**](https://flask.palletsprojects.com/) - A lightweight WSGI web application framework.
 - [**Spotify API**](https://developer.spotify.com/documentation/web-api/) - Web API that provides access to Spotify music catalog.
-- [**svgl**](https://svgl.app/) - Beautifully SVG logos.
+- [**Astro DB**](https://astro.build/db/) - fully managed SQL database.
+- [**svgl**](https://svgl.app/) - Beautiful library with SVG logos.
 
 ## 🚀 Quick start (Frontend)
 
@@ -59,12 +60,14 @@ pip install -r requirements.txt
 python main.py
 ```
 
-4. Create a `.env` file in the root of the project and add the following variables:
+4. Create a `.env` file in the root of the project and add the following variables (check the `.env.example` file):
 
 ```bash
 # Get your client id and secret from https://developer.spotify.com
 SPOTIFY_CLIENT_ID=
 SPOTIFY_CLIENT_SECRET=
+# Get your Astro Studio app token from https://studio.astro.build
+ASTRO_STUDIO_APP_TOKEN=
 ```
 
 ## 🔑 License

frontend/astro.config.mjs

@@ -5,9 +5,11 @@ import tailwind from '@astrojs/tailwind';
 
 import vercel from '@astrojs/vercel/serverless';
 
+import db from '@astrojs/db';
+
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind()],
+  integrations: [tailwind(), db()],
   output: "server",
   adapter: vercel({
     webAnalytics: { enabled: true }

frontend/db/config.ts

@@ -0,0 +1,13 @@
+import { defineDb, defineTable, column } from 'astro:db';
+
+const Share = defineTable({
+  columns: {
+    id: column.text({ primaryKey: true }), // spotify trackId
+    url: column.text(),
+    createdAt: column.date(),
+  }
+})
+
+export default defineDb({
+  tables: { Share },
+});

frontend/db/seed.ts

@@ -0,0 +1,9 @@
+import { db, Share, NOW } from 'astro:db';
+
+export default async function seed() {
+	await db.insert(Share).values({
+		id: '0kNnKLmor8UVqFMMjwKtIE',
+		url: '?artist=Baby%20Keem%20-%2016&results=youtube-music%3Dhttps%253A%252F%252Fmusic.youtube.com%252Fwatch%253Fv%253Ds529iTY777w',
+		createdAt: NOW
+	})
+}