techwithtim / music-controller-web-app-tutorial

Music-Controller-Web-App-Tutorial

The code for Tech With Tim's "Django & React Full Stack Web App Tutorial" series.

Setup Instructions

Install Required Python Modules

pip install -r requirements.txt

Start Web Server

To start the web server you need to run the following sequence of commands.

First cd into your desired tutorial folder (replace x with tutorial number).

cd "Tutorial x"

Next run the django web server.

python manage.py runserver

Install Node.js

Install Node Modules

First cd into the frontend folder.

cd frontend

Next install all dependicies.

npm i

Compile the Front-End

Run the production compile script

npm run build

or for development:

npm run dev

music-controller-web-app-tutorial's Issues

npm run dev

Unknown argument: mode

Tutorial 13 - unsupported type for timedelta seconds component: NoneType

Hi,
First great tutorial but im stuck with the spotify authentication. for some reason when he redirects it says /spotify/util.py line 22 in update_or_create_user_tokens

expires_in = timezone.now() + timedelta(seconds=expires_in)

and my local vars are:

Variable | Value
access_token | None
expires_in | None
refresh_token | None
session_id | 'oxfrwmlxgj4ujn81fnigvc0u5xmt5kyx'
token_type | None
tokens | None

why are they all None. I even tried copy pasting your files to my code

app.js import homepage.html

Not sure if this file is created later on, but after tutorial #3, this file has not been created and the import causes a build error.

Nothing shown on the screen - tutorial 4

I ran server and accessed to 'http://127.0.0.1:8000/'.
But nothing displayed on screen.
And it loads perpetually.

I ran python server in a pipenv environment.

Room Code Not Generate Automatically

It shows 200 Error Code and that is for already exists the queryset when i create a room and post from backend link .

When I goto create-room url it looks like that :

After Create Room from backend it generates host key but not Room Code :

Please Solve this bug and help me to solve it as I follow this repo as my guide to build react-django app .

Docker + TypeScript

Firstly I have to say this series of videos have been amazing, Thanks Tim, So I decided to create a repository with this content using Docker + TypeScript https://github.com/Cesar90/music-controller-docker-webpack, I hope this will be usefull for you.

class Room has no objects member

Hii, can someone help me out I an error from models.py views.py with class Room.
It says that the class Room has no objects member

class RoomView(generics.CreateAPIView):
queryset = Room.objects.all()
serializer_class = RoomSerializer

Error : {
"code": "no-member",
"message": "Class 'Room' has no 'objects' member",
}

Add `node_modules` to `.gitignore`

wont run

Hello i cant get it to run can at all

Tutorial 7 Error: Cannot read properties of undefined (reading 'params') in Room.js

In Room.js, the line:

this.roomCode = this.props.match.params.roomCode;

Picks up an Uncaught TypeError, as the properties of 'params' can't be read.

song does not play on guest device

when room code is shared with others it allows them to join in room but the song is not played on guest device

Wrong APIView leading to no POST form in UI

ListAPIView should be ListCreateAPIView instead!

Music-Controller-Web-App-Tutorial/Tutorial 1 - 4/api/views.py

Line 9 in c0aa186

class RoomView(generics.ListAPIView):

...

T4, routing pages

I was able to get this page:

and i also changed the syntax for react-router-dom from v5 to v6:

render() {
        return (
            <Router>
                <Routes>
                    <Route path='/' element={<p>This is the homepage</p>} />
                    <Route path='join' element={<RoomJoinPage/> } />
                    <Route path='create' element={<CreateRoomPage/>} />
                </Routes>
            </Router>
        );
      }

My webpage takes forever to run and "Failed to execute 'querySelectorAll' on 'Element': '\\\f' is not a valid selector." was the exception.

Help much appreciated :)

It seems like the error comes from "getElementById"? I am not too sure. so i will paste my App.js here too:

import { Home } from "@material-ui/icons";
import React, {Component} from "react";
import { render } from "react-dom";
import HomePage from "./Homepage";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";

export default class App extends Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div>
                <HomePage />
            </div>
        );
    }
}

const appDiv = document.getElementById("app");
render(<App/>, appDiv);

Type Error in Tutorial 5

Type Error at /api/create-room
init() takes 1 positional argument but 2 were given.

This exception is happening in __get_response

Song not playing on other devices in the same room

when I create a room and sign into my Spotify account, I can control the music in my device and I can also hear it, but when I try doing it from other devices with different accounts, I am able to control and see the music player it but I am not able to hear the music even though I am in the same room.

204 error while running execute_spotify_api_request

when i enter the room i get only "Unexpected end of JSON input
at eval "evreytime

Tutorial 3. Where should rest_framework be located?

From what I've seen rest_framework is in two imports. In both cases VSCode is telling me that import is missing. Where should this be located? in project files? In standard lib?

HTTP 405 Method Not Allowed

tutorial 5 for create-room
"detail": "Method "GET" not allowed."

what should i do to resolve this error?

node run dev MODULE_NOT_FOUND error on Tutorial 3

Hi I build the environment following the video, but got MODULE_NOT_FOUND error, the only different is I used node 12 in babel.config.json. Any help will be highly appreciated.

node run dev
internal/modules/cjs/loader.js:796
throw err;
^

Error: Cannot find module 'C:\Users\wxsst\Desktop\Project\music\party_music\frontend\run'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
at Function.Module._load (internal/modules/cjs/loader.js:686:27)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}

Spotify API Tokens

Hi, was looking at the code and noticed your spotify API tokens are available in the code within Tutorial 15, and possibly elsewhere. Just wanted to let you know in case you were unaware.

No redirect after Spotify login

After a successful login with Spotify, the app doesn't redirect to the room, it redirects to the homepage with a new Django session. so the information is lost because there is no room code with the new session.
I downloaded the code and use Tutorial 17 folder.