1varunvc / snyder

MIT License
0 stars 0 forks source link

Snyder

Snyder is a progressive web application (PWA) that allows users to search for and play music across both Spotify and YouTube, providing a unified experience similar to YouTube Music. Users can log in via Spotify to personalize their experience and enjoy continuous playback. Built using the MERN stack, Snyder aims to deliver a modern, fast, and responsive user interface that merges the best of Spotify and YouTube’s music capabilities.

Features

Tech Stack

Frontend

Backend

Other Technologies

Architecture Overview

  1. Frontend: A React-based user interface similar to Google’s search page, allowing users to search for songs, log in via Spotify, and view results in a YouTube Music-like interface.
  2. Backend: Node.js and Express.js handle API requests, search queries, and authentication.
  3. Search Flow:
    • User searches on the React-based homepage.
    • The search request is sent to the backend.
    • The backend fetches data from Spotify and YouTube APIs and responds with JSON.
    • Results are displayed on the frontend, where clicking on a song embeds an iframe for playback.
  4. Login Flow:
    • Users log in via Spotify using OAuth (handled via Passport.js).
    • Token management is implemented for getting songs and personalizing the experience.

Installation and Setup

Prerequisites

Getting Started

  1. Clone the Repository:

    git clone https://github.com/your-username/Snyder.git

    Replace your-username with your actual GitHub username.

  2. Navigate to the Project Directory:

    cd Snyder
  3. Install Backend Dependencies:

    npm install
  4. Install Frontend Dependencies: Navigate to the frontend directory and run:

    cd frontend
    npm install
  5. Environment Variables Setup: Create a .env file in the root directory and add the following variables:

    SPOTIFY_CLIENT_ID=your_spotify_client_id
    SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
    YOUTUBE_API_KEYS=your_youtube_api_keys_comma_separated
    SESSION_SECRET=your_session_secret

    Replace placeholders with your actual credentials.

  6. Run the Application:

    • Backend: In the root directory:
      npm run server
    • Frontend: In the frontend directory:
      npm start

Deploying Snyder

Usage

  1. Home Page:
    • Users can log in with their Spotify account and use the search bar to find songs.
  2. Search Results:
    • Display search results from Spotify and YouTube with a similar layout to YouTube Music.
  3. Playback:
    • Click on a song to embed a YouTube iframe and start playback. Continuous playback will automatically play the next song in the search results.
  4. Progressive Web App:
    • Users can add the app to their home screen for a more native-like experience.

Project Structure

Snyder/
│
├── backend/
│   ├── server.js
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   ├── .env
│   └── .gitignore
│
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── context/
│   │   ├── App.js
│   │   └── index.js
│   ├── public/
│   ├── .gitignore
│   ├── package.json
│   └── README.md
│
└── README.md

Contributing

We welcome contributions from everyone! Here’s how you can help:

  1. Fork the repository.
  2. Create a new feature branch:
    git checkout -b feature/your-feature-name
  3. Commit your changes and push them to your fork:
    git commit -m "Add your descriptive commit message"
    git push origin feature/your-feature-name
  4. Open a pull request.

Security and Authentication

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments