listentogether

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #typescript #golang #android #deep-learning #nodejs #cli #kubernetes #pytorch #ios #openai

(★ 47)

Listen to Spotify synchronously with your friends. Queue songs, control playback, and chat in real time.

listentogether Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Listen Together

An app for listening syncronously with friends on Spotify. Join a room, queue some songs, and chat with friends.

## Technology

Listen Together is built with Next.js and Supabase (an open-source Google Firebase alternative).

## Project Prerequisites

1. Make sure Node.js is installed. [You can download it here.](https://nodejs.org/en/)
2. Listen Together uses pnpm for package management. While we recommend using pnpm, this is only necessary if you'd like to contribute to the project. For installation instructions, see the [pnpm installation page](https://pnpm.io/installation).

## Building the Project

1. Clone this repository from GitHub.
2. Run `npm install` or `yarn` within the root project directory.
3. Rename `.env.example` to `.env` and populate it with the corresponding API keys from Supabase and Spotify.
   - Create a Supabase project: https://app.supabase.io/
       1. Create a new Supabase project.
       2. In the left sidebar navigation, go to `Settings > API`.
          1. Under API Keys, copy the `anon` `public` key and add it to your `.env` file. DO NOT use the `secret` key – this will give any user Read/Write access to your entire database.
       3. In the left sidebar navigation, go to `SQL`.
          1. Copy the SQL from the repository's `DATABASE_INIT.sql` file, paste it in the query editor, and run the query to create the required database tables. *Note: This is WIP. Please add a GitHub issues if you run into issues with this command. 🚧* 
   - Create a Spotify app: https://developer.spotify.com/dashboard/login
       1. Log in, create an app, and continue to the app dashboard.
       2. Copy the displayed **Client ID** and add it to your `.env` file.
       3. Click **Show Client Secret**, copy the displayed **Client Secret** and add it to your `.env` file.
       4. Click **Edit Settings** and perform the following:
          1. Add `localhost:3000/api/spotify/callback` to the list of Redirect URIs.
          2. If you have a production URL, add it to the list of Redirect URIs in the format `https://PRODUCTION_URL/api/spotify/callback`
4. To run the project locally, run `npm run dev` or `yarn dev`.
5. To build the project, run `npm run build` or `yarn build`.
6. Once built, the production application can be served using `npm run start` or `yarn start`.

## Testing

At the moment, testing is not a part of Listen Together. If you would like to help create tests for common database/backend interactions and other portions of the app, feel free to create a PR.

---

## Project Structure

- `.next`: Auto-generated by Next.js. No editing needed.
- `components`: This is where all React components are stored. Currently organized by type or location, will likely be changed to be organized by either type or location.
- `constants`: This is where any widely-used strings and other variables are stored. Examples include cookie/localstorage keys, API endpoints, etc.
- `hooks`: This is where all custom React hooks are stored. These often have to do with communication with Spotify, state management, or interacting with Supabase.
- `models`: This is where all project-wide Typescript interfaces are stored. Examples include the types for a User, Room, etc.
- `node_modules`: Required for using NPM packages. Auto-generated, so no editing needed. Not a part of the GitHub repository.
- `pages`: Used by Next.js to create the various routes of the application. Any .js or .tsx file in this directory will be converted into a page in the website/application. For more information, see the [Next.js documentation on the pages directory](https://nextjs.org/docs/basic-features/pages).
- `public`: Used by Next.js (and normal websites too) for resources needed in the site. The main use for this folder is to store any assets needed for the site, primarily images.
- `state`: Used for any global state management. The project currently uses Jotai, a super simple state management package. [View the documentation here](https://jotai.surge.sh/).
- `styles`: Used for global styles. Most styling happens at the component level thanks to Next.js, so use for this directory is limited.
- `util`: Used for helper functions, both generally and for specific application services. This will be used for any functions needed across a number of components, e.g. the logic for joining a room, saving/favoriting a room, etc.

### Other individual files

- `.gitignore`: Any files that shouldn't be committed to git (auto-generated files, .env files, etc.).
- `next-env.d.ts`: Specific types for Next.js. Don't edit unless there is a good reason to.
- `package.json`: Information about the application, helpful scripts, dependency management.
- `README.md`: What you're reading right now! Documentation about the application.
- `tsconfig.json`: TypeScript settings. Rarely need changing, set up to work with Next.js.
- `pnpm-lock.yml`: Auto-generated by pnpm for managing dependencies. Don't edit.

## Previous Versions

This is an updated version of the previous Listen Together, which was built in a weekend for the [Same Home Different Hacks](https://devpost.com/software/listen-together) hackathon in 2020. If you're looking for that, you can find it [here](https://github.com/hfellerhoff/listentogether-hackathon).

## License

As of 2023, Listen Together is under the GNU Affero General Public License v3.0. See the [LICENSE](https://github.com/hfellerhoff/openipa/blob/master/LICENSE) for more information.

listentogether

listentogether Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

listentogether

listentogether Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README