Merge pull request #21 from michiganhackers/dev

v1.0.1 Updates to docs, standardized .env usage within code for dev and prod environments

Author: foleyash

docs/CONTRIBUTING.md

@@ -0,0 +1,29 @@
+# Contributing Guidelines
+
+## Table of Contents
+
+1. [Introduction](#introduction)
+2. [Development Process](#development-process)
+3. [Best Practices](#best-practices)
+4. [How to make a good issue/pull request?](#how-to-make-a-good-issuepull-request)
+
+## Introduction
+The purpose of this document is to provide a general set of guidelines for contributing to Green Monster Jelly. It will consist of a guide to the development process, some best practices for improving the speed of getting your code shipped, and what constitutes a good issue or pull request. These are not rigid rules, and are meant to guide new contributors through making there first pull request.
+
+## Development Process
+So, you set up your environment, played around with the app, and you discover a bug you'd like to fix, where should you start? Well, when you have decided you want to contribute, the very first step should be to make an issue on our [github page](https://github.com/michiganhackers/spotify-open-source-proj/issues). Here, you will include information about what you would like to add/change to the project as well as why you believe it will benefit the project. Check out [making a good issue/pull request](#how-to-make-a-good-issuepull-request) for more information on crafting a quality issue. From here, you will be contacted by a project maintainer who may either approve your request or follow up with questions and/or concerns. At some point, you will likely gain approval to submit a pull request to this issue, and will be assigned to the issue.
+
+Alternatively, if you decide to attack an already posted issue, you should again request approval to be assigned to the issue.
+
+After meticulously debugging the project and finally arriving at a suitable solution, you decide your code is suitable to be pushed to ~~main~~ dev. To do so, you should submit a pull request again on our [github](https://github.com/michiganhackers/spotify-open-source-proj/pulls). In here, you will document your changes to the code and how you've tested them. Expect to receive heavy feedback, including any requested changes. More info on making a good pull request [here](#how-to-make-a-good-issuepull-request). Eventually, your pull request may be approved and your code committed to our codebase. Congratulations!
+
+
+## Best Practices
+- Always work out of the dev branch.
+- Communicate your ideas early and often, there is no point in implementing and debugging code that doesn't comply with the goals of the project.
+- When attempting to resolve an issue on our github, make sure nobody has been assigned to it yet.
+- Before submitting a pull request, make sure you have removed all unnecessary comments, debugging logging statements, and any other changes that are not vital to the functionality.
+- Always provide a comprehensive list of how you tested your pull request, it will help to speed up maintainers' response times.
+
+## How to make a good issue/pull request?
+Coming soon.

docs/README.md

@@ -63,7 +63,13 @@ SPOTIFY_CLIENT_SECRET="<your-spotify-client-secret>"
 
 ### Next.js Application Setup
 
-To run the development server:
+Install dependencies:
+
+```
+npm i
+```
+
+Run the development server:
 
 ```bash
 npm run dev
@@ -101,7 +107,7 @@ The responsibility of the client is to provide a web interface for which users c
 
 #### 2. Next.js Server
 
-The responsibility of the server is to maintain and arbitrate the state of a given session (as well as to serve front-end files that will be used by the client, but this is all done behind the scenes with Next so no need to worry too much about this). This means that any call that will interact with a user's Spotify queue must travel through the Next.js server via one of its api endpoints (defined in /api/spotify/). In addition to this, the server provides clear methods for initializing and connecting to sessions (/api/sessionDB/{connect | create}). This also means that the Next.js server is responsible for the destruction of said sessions and any related clean up calls to the database ** yet to be implemented **.
+The responsibility of the server is to maintain and arbitrate the state of a given session (as well as to serve front-end files that will be used by the client, but this is all done behind the scenes with Next so no need to worry too much about this). This means that any call that will interact with a user's Spotify queue must travel through the Next.js server via one of its api endpoints (defined in /api/spotify/). In addition to this, the server provides clear methods for initializing and connecting to sessions (/api/sessionDB/{connect | create}). This also means that the Next.js server is responsible for the destruction of said sessions and any related clean up calls to the database (/api/sessionDB/delete).
 
 #### 2.1. Database!!
 Speaking of the database, a dedicated library of database focused functions are defined within the /database/db.ts file. These functions are available for access by both the Next.js server and its Websocket counterpart, but should **not** be utilized within any direct client component. In addition to this, you will find the schema of said database is accessible within the /database/ directory.

src/app/page.tsx

@@ -48,7 +48,7 @@ export default function Home() {
                 sessionStorage.setItem("username", hostUsername); // change this to a nextjs cookie (server-side)
                 sessionStorage.setItem("isHost", "true"); // change this to a nextjs cookie (server-side)
                 const client_id : string | undefined = process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID; // Spotify developer client id for API calls
-                const redirect_uri : string = `${process.env.APP_SERVER}/api/spotify/getToken`
+                const redirect_uri : string = `${process.env.NEXT_PUBLIC_APP_SERVER}/api/spotify/getToken`
                 const scope : string = 'user-read-currently-playing user-read-playback-state user-modify-playback-state';
                 handleSpotifyAuth(client_id, redirect_uri, scope); }
                 }}>
@@ -89,7 +89,7 @@ async function connectToSession(guestCode : string, username : string, router :
  let stat; 
   try {
 
-    await fetch(`${process.env.APP_SERVER}/api/sessionDB/connect`, {
+    await fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/sessionDB/connect`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/app/session/[id]/client.tsx

@@ -175,7 +175,7 @@ function Queue({ isHost, initQueue, socket, username, sid }: { isHost : boolean,
   // Handles song submission then clears input
   const handleAddSong = (songId : string) => {
 
-    fetch(`${process.env.APP_SERVER}/api/spotify/addSong`, { // Adds song to the database
+    fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/spotify/addSong`, { // Adds song to the database
         method: 'POST',
         headers: {
             'Content-Type': 'application/json',
@@ -217,7 +217,7 @@ function Queue({ isHost, initQueue, socket, username, sid }: { isHost : boolean,
       return;
     }
     // Requests all similar song names
-    fetch(`${process.env.APP_SERVER}/api/spotify/searchSongs`, {
+    fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/spotify/searchSongs`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

src/app/session/[id]/page.tsx

@@ -20,7 +20,7 @@ export default function SessionPage({ params } : { params: { id: string} }) {
     useEffect(() => {
         // Add host's name to DB now that session has been created
         if(sessionStorage.getItem('isHost') === "true") {
-            fetch(`${process.env.APP_SERVER}/api/sessionDB/addHostName`, {
+            fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/sessionDB/addHostName`, {
                 method: "POST",
                 headers: {
                     'Content-Type': 'application/json'
@@ -43,7 +43,7 @@ export default function SessionPage({ params } : { params: { id: string} }) {
         }
         else{
             // This functionality below should be encompassed by initSession, including the clientNames and current queue state as well
-            fetch(`${process.env.APP_SERVER}/api/sessionDB/getHostName?session_id=${params.id}`, {
+            fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/sessionDB/getHostName?session_id=${params.id}`, {
                 method: "GET", 
                 headers: {
                     'Content-Type': 'application/json'
@@ -70,7 +70,7 @@ export default function SessionPage({ params } : { params: { id: string} }) {
 
       useEffect(() => {
         const initSession = () => {
-          fetch(`${process.env.APP_SERVER}/api/sessionDB/initSession`, {
+          fetch(`${process.env.NEXT_PUBLIC_APP_SERVER}/api/sessionDB/initSession`, {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',