DKMS Spotify

DKMS is a social media-focused web application for Spotify. This application consists of a centralized feed where users can post, share, and comment with other users. Additionally, a personized profile page will enhance the user interaction experience. This application uses Spotify's Web API to build and pull data, as well as to authenticate users. DKMS is built using Next and React.

External Requirements

In order to build this project you first have to install:

• Node.js
• Yarn (v1.x)

The recommended way to get started is to use Volta to install both Node and Yarn@1.

Setup

To install all dependencies, clone the repository and run:

yarn install

This will also configure Husky, used to run pre-commit checks.

Environment Variables

Four environment variable files are required, three of which are not checked in to version control:

• .env — for all public environment variables
  • SPOTIFY_CLIENT_ID
  • NEXTAUTH_URL
• .env.{development,production}.local — for all private env secrets
  • NEXTAUTH_SECRET
  • SPOTIFY_CLIENT_SECRET
  • FIREBASE_PROJECT_ID
  • FIREBASE_CLIENT_EMAIL
  • FIREBASE_PRIVATE_KEY
  • FIRESTORE_API_KEY
• cypress.env.json — specific Cypress E2E test env vars
  • session — object containing:
    • secret
    • accessToken
    • refreshToken
  • credentials — object containing:
    • email
    • password

For more information about environment variable files, see https://nextjs.org/docs/basic-features/environment-variables. Contact the developers for env files needed for debugging.

Running

To run the repo in development mode, do:

yarn dev

To build and start in production mode, do:

yarn build && yarn start

Playback

Due to a technical limitation in Spotify's API, you must start playback on another device and then use DKMS to control it or transfer to your browser.

Deployment

The recommended way to deploy this app is by using a cloud deployment platform such as Vercel. Manual deployment instructions can be found on the Next.js website: https://nextjs.org/docs/deployment.

Testing

Testing Technology

Cypress is used for E2E behavior specifications, individual component testing, and functional unit testing.

The component and unit tests use the regex **/*.test.{ts,tsx}. The beavior specs are located in /cypress/e2e and use the regex **/*.spec.{ts,tsx}.

Make sure to run 'yarn install' before testing.

Running Tests

To start the Cypress test suite main menu, run:

yarn test

The browser and type of test can be selected visually. For a shortcut to a specific type of test, see below:

Component & Unit

To start component or unit tests, run:

yarn test:component

A browser will open with an interactive list of tests to run.

Behavior (E2E)

To start E2E tests, first start a production instance of the server:

yarn build && yarn start

In a separate window, run:

yarn test:e2e

Authors

• Dalton Craven daltoncraven@proton.me
• Sophie Crane sophieccrane@gmail.com
• Kevin Nguyen kevin.nguyen423@gmail.com
• Mason Joseph masondj1029@gmail.com
• Clay Crews claycrews2002@gmail.com