Aero makes listening to music feel light and breezy

🚩 Installation

1. Clone this repository

   git clone https://github.com/swayam25/Aero aero
   cd aero

2. Install dependencies

   pnpm i

3. Create an application at the Discord Developer Portal.

4. Create .env file from .env.example in the root directory and fill in the required values.

   ENV Vars

   • Get DATABASE_URL from Supabase.
   • Get VITE_SUPABASE_URL and VITE_SUPABASE_KEY from Supabase API Settings.
   • Get JWT_SECRET by running the following command.

     pnpm run gen-secret

   • Get DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET from the Discord Developer Portal.
   • Get DISCORD_BOT_TOKEN from the Discord Developer Portal.
   • Set YOUTUBE_DL_PATH to the path of youtube-dl or yt-dlp executable. You can install it from GitHub Releases (yt-dlp) or use a package manager.
   • Set DOMAIN to your domain name or https://localhost for local development. The variable is required for production.

     DOMAIN="https://your-domain.com"

5. Add redirect url at the Discord Developer Portal.

6. Push the database schema to Supabase.

   pnpm run db:push

7. Navigate to Table Editor in Supabase Dashboard and enable RLS for all the tables.

8. Navigate to Authentication > Policies in Supabase Dashboard and create policies for all the tables.

9. Navigate to Database > Publications in Supabase Dashboard. Then click on supabase_realtime and enable the playlist table.

10. Navigate to Table Editor in Supabase Dashboard and enable Realtime for playlist table.

Note

Check the Supabase Docs for more information on enabling Realtime.

11. Start the app

    pnpm run dev

🚀 Production

1. Follow steps 1-10 from the installation section.

2. Change DOMAIN in .env file to your domain name.

   DOMAIN="https://your-domain.com"

Important

DOMAIN is the URL you will use to access the app. This dynamically sets ORIGIN during node build and configure the Caddy server's domain (for the reverse proxy). For local development, you can set it to https://localhost. Ensure this matches the Redirect URL in the Discord Developer Portal (see step 5 in the installation section).

Check the SvelteKit Docs for more information about the ORIGIN variable.

1. Run docker container (via docker compose)

   docker compose up -d

❤️ Contributing

• Things to keep in mind

  • Follow our commit message convention.
  • Write meaningful commit messages.
  • Keep the code clean and readable.
  • Make sure the app is working as expected.

• Code Formatting

  • Run pnpm run format before committing your changes or use Prettier extension in your code editor.
  • Make sure to commit error free code. Run pnpm run check to check for any errors.

• CSS Style Guide (Tailwind CSS)

  • Primary Font Color: slate-50 (No need to add this explicitly, it is already added as global font color in app.css)
  • Secondary Font Color: slate-200
  • Tertiary Font Color: slate-400
  • Theme Color: sky-500
  • Primary Background Color: slate-950 (Globally added in app.css)
  • Secondary Background Color: slate-900 (For cards/containers)
  • Tertiary Background Color: slate-800 (For cards/options on hover)
  • Card/Container Background Color: slate-900 (For cards add border-slate-700)
  • For other colors use <color>-500 as text color and <color>-500/10 as background color on hover (make sure to have bg color as slate-800/slate-900/slate-950 before hover).
  • Border radius: rounded-lg (For every possible card/container)
  • For buttons and links, we strictly use the <Button /> component.

• Z Index Layer System

  • Base Layer (z-0): Layout components and default content.
  • Content Layer (z-10): Drawer content and elevated cards.
  • UI Components (z-50): Tooltips and popovers.
  • Modals & Overlays (z-100): Dialog and alert popups.
  • Toast Notifications (z-2000): Toast messages using style="z-index: 2000;".
  • Context Menus (z-[1000]): Right-click context menu using z-[1000] class.
  • Submenus (z-[1001]): Context menu submenus using z-[1001] class.
  • Mobile Drawers: Dynamic zIndex prop values:
    • Player drawer: zIndex={1000} (default MobileDrawer component zIndex value)
    • Queue & Lyrics drawer: zIndex={1100}
    • Context menu drawer: zIndex={1300}