ovatify-web-demo

Music platform focused on sharing and viewing music information, designed to offer tailored experiences to music enjoyers.

Preface

This is a demo version of the web app with static assets and predetermined responses. The main idea is to show a feel of the website without the need for a backend server. As such the code has been modified, please check out the main repository for the original source code and git history.

Repositories

• Web
• Backend
• Mobile

Features

• Display a wide range of songs and albums
• Personalized music recommendations
• User rating system for songs
• Social features, including friend connections
• Habit, song and artist statistics
• Responsive web and mobile interfaces

Technology Stack

• Backend: Django (Python), Firebase
• Frontend: Svelte Kit (Web), Kotlin (Mobile/Android)
• Database: PostgreSQL
• CI/CD: GitHub Actions, Fly.io, Vercel
• Project Management: Jira, Agile with Scrum

Prerequisites

• Node v18 or newer
• pnpm or npm as package manager, pnpm is preferred
• A Firebase Project (For Authentication)

Local Development Setup

1. Clone the Repository:

   git clone https://github.com/enesonus/ovatify-web.git

2. Setup:

   • Install dependencies: pnpm install

   ## Environment Variables
   
   Ensure to set up the following environment variables in your root .env file:
   
   Required env variables
   
   - `PUBLIC_BASE_URL`
   - `PUBLIC_SPOTIFY_CLIENT_ID`
   - `PUBLIC_SPOTIFY_REDIRECT_URI`
   
   Optional env variables
   
   - `PUBLIC_REQUIRE_EMAIL_VERIFICATION` // Make sure to set this to "false" for development as not having it or setting it to anything else will require emails to be verified before logging in.
   
   Take a look at `.env.example` for example values

   Configuring Firebase Integration

   Make sure to populate the firebaseConfig entry in src/lib/utils/firebase.ts with your own project credentials, these are safe to include in client side code.s

   Configuring Spotify Integration

   Make sure to populate the environment variables stated above, more information about client side spotify apps can be found in the Spotify Docs. Make sure that backend and frontend applications share the same Client ID. Also be sure to register the redsirect URI in the Spotify Dashboard as http://localhost:5173/login for development and https://<your_domain>/login for production environments and add also add the URI to the corresponding environment variable.

   Commands

   • Start the development server: npm run dev
   • Build for deployment: npm run build
   • Preview deployment build locally: npm run preview

Continuous Integration and Deployment

CI/CD is managed through the SvelteKit - Vercel project integration. This integration provides automatic deployment upon pushing to the main or dev branches. Both branches have their own Vercel project and public url, providing the benefits of separating test and production environments. Deployment instructions for Vercel can be read here. Different deployment options can be read via the official SvelteKit documentation.

Contributing

Contributions are welcome! Please read our Contribution Guidelines for more details.