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.
In order to build this project you first have to install:
The recommended way to get started is to use Volta to install both Node and Yarn@1.
To install all dependencies, clone the repository and run:
yarn install
This will also configure Husky, used to run pre-commit checks.
Four environment variable files are required, three of which are not checked in to version control:
.env
— for all public environment variablesSPOTIFY_CLIENT_ID
NEXTAUTH_URL
.env.{development,production}.local
— for all private env secretsNEXTAUTH_SECRET
SPOTIFY_CLIENT_SECRET
FIREBASE_PROJECT_ID
FIREBASE_CLIENT_EMAIL
FIREBASE_PRIVATE_KEY
FIRESTORE_API_KEY
cypress.env.json
— specific Cypress E2E test env varssession
— 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.
To run the repo in development mode, do:
yarn dev
To build and start in production mode, do:
yarn build && yarn start
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.
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.
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.
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:
To start component or unit tests, run:
yarn test:component
A browser will open with an interactive list of tests to run.
To start E2E tests, first start a production instance of the server:
yarn build && yarn start
In a separate window, run:
yarn test:e2e
- Dalton Craven [email protected]
- Sophie Crane [email protected]
- Kevin Nguyen [email protected]
- Mason Joseph [email protected]
- Clay Crews [email protected]