4.57 out of 5
4.57
1549 reviews on Udemy

Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

Learn JavaScript, PHP and MySQL by building the ultimate music streaming website from scratch! The complete guide!
Instructor:
Reece Kenney
8,321 students enrolled
English [Auto] More
Build your own music streaming service like Spotify
Master important areas of development in JavaScript, PHP, HTML and MySQL
Discover important techniques that are essential for any aspiring software engineers

Do you want to become an expert in JavaScript, PHP and MySQL?

Do you want to build a real music streaming site just like Spotify?

If so, you’re in the right place! This course will guide you step by step in creating your own Spotify clone COMPLETELY from scratch.

We’re talking the kind of website that will amaze anybody that sees it. The kind of website that will get you hired in no time!

Why let me teach you?

I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!

I’ve taught thousands of students here on Udemy and created some of the most popular development courses on Udemy!

Okay so what’s the course about?

I will personally guide you, step by step, in creating your own music streaming site just like Spotify complete with:

  • User registration

  • Search for all their favorite artists, albums and songs in real time!

  • Create and customize their own playlists

  • Control the music with all the usual controls such as play, pause, skip, previous, shuffle, repeat etc.

  • And much, much more! 

Whether you are a complete beginner* or an experienced programmer, this course will be massively beneficial to you.

Why should I take the course?

In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials: HTML, CSS, PHP, JQuery, JavaScript and MySQL.

If you take this course, you will have nothing to worry about because we use all of these skills extensively!

Skills: 

There is so much to learn! In the course, you will become very familiar an excellent range of technical skills such as HTML, CSS, PHP, JavaScript, JQuery and MySQL. Any good developer will agree that these skills are KEY to becoming an excellent developer/software engineer. If you’re just starting out, after completing this course, you will be in a very good position with a fundamental foundation of skills. 

Support: 

By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I’m always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice – it doesn’t matter, I’m always happy to help! I always aim to respond to questions within a few hours and it’s also worth noting that I’ve answered EVERY SINGLE question asked so far on all of my courses.

Future course discounts:

By enrolling in this course, you will get access to ALL of my current and future courses for the lowest possible discount we as instructors are capable of offering on Udemy – FOREVER

Project portfolio:

The site you create in this course will be the highlight of your project portfolio! Any potential employer who see’s this project on your resume will want to hear all about it. The reason? They know that a project like this means you’re familiar with the wide range of technical skills they need their employees to know.  

Fun!

Finally, this project is a lot of fun and I know you’ll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for? 

*You don’t need any experience to take this course, however a basic understanding of HTML would be great. I will explain everything as I go, but some things I spent more time on than others. I don’t spent a huge amount of time on the absolute lowest level basics e.g. what is HTML. So if you have absolutely no experience programming, you are absolutely fine to take this course, just ask me to explain things further if you would like a more detailed explanation 🙂

Setting up the sign up/ log in forms

1
Setting up your local server

So let's get started! Unfortunately the first lecture is the least exciting, but it needs to be done. We're setting up the local server which will allow you to test your sites locally! Don't worry, it's super easy, we just need to download one thing :)

2
Creating the login form

So in this lecture we will be creating the html for our login form! As the name suggests, this is what the user will use to log into the website. 

3
Creating the register form

This lecture will be fairly similar to the previous one, but we are creating our registration form instead. This is what the user will use to sign up to our website.

Handling the user's submitted data

1
Intro to PHP - Handling form submission

Now we'll learn how to use PHP to perform an action when the button is pressed! 

2
Form sanitation - Cleaning the input

Once we take the user's information that they entered into the form, we want to clean it up a little before we send it to the database. Let's do it!

3
Separating our code

So our register page is beginning to get a little long. What we can do, is split the code up into separate files which makes it easier to work with! 

4
Preparing our validation functions

So we're going to want to validate the user's input when they submit the form. This is different than sanitation that we did a few lectures back. This is to do with making sure that the input is the right number of characters, that the emails match, that the passwords are valid etc. In this video we are setting these functions up so that we will be ready to start coding them :)

5
Creating the Account class

So now we're going to start working more OOP (Object oriented programming). We're creating the class which will be used to validate the user's account credentials and eventually sign the user up/log them in. 


6
Validating the username

So we need to do certain checks to the data that the user enters. In this video we will write the function that checks if the username is suitable.

7
Validating the name and emails

So we've checked the username, now it's time to check the first name, last name and email addresses to make sure they are valid.

8
Validating the passwords

So the last validation function is for the passwords! :) 

9
Checking if the sign up was successful

So we've done all our validation checks now (with the exception of the things we're coming back to do later) so now we can check if their sign up was successful or not.

10
Outputting error messages

So if any of the data that the user entered is invalid, we need to tell them. For example, if their emails do not match, we need to let them know. In this video we will be outputting an error message for each failed validation check. 

11
Creating our Constants class

So at the moment we need to make sure our error message strings that we put into the array match exactly with the ones we check for when outputting the errors. In this video we will create a class which allows us to only store these strings in one location. 

12
Remembering form values

It would be nice if the when the user entered invalid data into our form and error messages are shown, all of their details that were just entered would be remembered. This would prevent them from having to re-enter them again. Let's do that now! 

Completing the sign up / log in process

1
Creating the users table

So in order to save our users account details, we need to create a table in which to save to. So let's create the users table :)

2
Connecting to our database from PHP

So in order to perform queries on our database using php code, we need to connect to it. So in this video, we will be handling this connection.

3
Inserting user details

So it's time to write our first MySql query! We're going to write the function that actually inserts the data into the users table. 

4
Testing out the sign up process!

So we've handled data sanitation, validation and finally insertion. Now let's give it a try! :)

5
Query not working? Watch this video

There's a good chance that if it's your first time working with MySQL, that your query isn't working. If that's the case, watch this video where I'll show you some tips for debugging your queries. 

6
Last remaining validation checks

If you remember, there are two things that we haven't done yet in terms of validation. We still need to check if the username the user is trying to sign up with has been taken already and also check if the email has already been used before. 

7
Login handler

So a while ago, we created our login_handler,php file. We haven't done anything with that file yet but now it's time to start using it. Compared to the register process, this is really really simple. 

8
Sessions

When we log in, we need a way to remember that the user is in fact logged in. We also need the user to be redirected to the register page if they try to access any of our site without logging in. We can do this using sessions. 

Styling the registration page

1
Adding a background image

We're finally ready to add some CSS style to our site! Let's start by adding a background image to our page.

2
Styling the login container

So we're going to have a container div around out login container. In this video we will add this container and also apply CSS to it. 

3
Styling our text boxes

Now let's move on to styling the input boxes that the user will type into.

4
Input placeholder color

In this video I will show you a way in which you can change the color of the textbox placeholders.

5
Styling the submit buttons

Now we will apply CSS style to the buttons that the user uses to submit the forms.

6
Buttons to switch between forms

Now what we are going to do is add the text that will be used to switch between the sign up and login forms. 

7
Showing and hiding the forms on press

Last video we added the text which will show and hide the forms when they are clicked and now we will actually add some functionality to them. This will be our first use of JavaScript!

8
Showing only the relevant form when data is submitted

Now we need to make it automatically show and hide the forms depending on which form was submitted.

9
Show/hide button - mouse pointer

One little usability improvement is to change the mouse to a pointer when they hover over the text so that they know it is a clickable element. 

10
Right section content

It's finally time to add some content to the right of the forms. So we'll add some welcome text that just gives a little information about what our site is used for.

11
Applying style to the right section content

Last video we added the content itself, now we are going to style it. 

12
56,800+ icons FOR FREE - Icons8

I'm going to show you a really cool app which gives your access to thousands of icons for free! 

13
Styling the error messages

We're just going to add a very small amount of css to our error messages now so that they match the rest of the style on the page.

14
Remembering the username after failed log in attempt

So I just realised that I forgot to add the code which makes the form remember the username when a user has an unsuccessful login attempt. We've already done all the work for this, we just need to add the function call to our textbox. Simple!

Creating the now playing bar

1
Quick overview of the index page

I'll just give you a very brief overview of the index page and the three main sections that make up the page.

2
Now playing bar container

In this video we create as style the container for our now playing bar.

3
Creating the now playing bar element

So now we're going to create the actual now playing bar element itself. You won't notice a whole lot of difference visually after this video, but the now playing bar container will be taking the height of the actual now playing bar element. 

4
Left, center and middle sections of the bar

In this video I'll show you how we're going to split our now playing bar into three sections.

5
All the icons for our site

In this video, you'll get access to all of the icons that I use throughout my site. You can use your own icons or if you want to use the same ones as me, you can get them from the zip file attached to this course.

6
Adding our player buttons

So now that we have our icons, let's create the buttons for our music player!

7
Making the play and pause buttons larger

So our play/pause buttons are going to be slightly larger than the other buttons on our now playing bar. Let's do that now!

8
Progress bar parent elements

Let's add the elements that will make up the container for the progress bar of the currently playing song. 

9
The progress bar

Now, it's finally time to create the progress bar itself!

10
Album artwork

Let's create the image that will display the album artwork for the song that is currently playing.

11
Track info labels

Now we're going to add the text elements that will display the track info such as artist name and track name.

12
Volume bar

Now we're going to create the volume bar!

Navigation menu

1
Page containers

What we're going to do now is add some containers to our page which will section off certain elements in our page.

2
Creating our navigation bar container

Now lets set up the container for the navigation bar.

3
Navigation bar site logo

So now that we have the navigation bar container set up, we can start adding items to it. Lets add the site logo first.

4
Navigation items

Now we are going to put the actual navigation items (links) into the navigation bar.

5
Navigation search icon

We're going to now give the search link a magnifying glass icon.

6
Navigation links color change on hover

One small detail we didn't do yet is to make the navigation items links change color when you hover over them. This is real simple and only requires one line of css. 

Tables and data

1
Overview of our MySQL table structure

To store data, we will of course require some database tables. In this video I'm just going to give you a quick overview of our tables including how they link together and what the columns mean.

2
Creating our database tables

Now we are going to create the tables that we discussed in the previous video.

3
Inserting data into the artists, genres and albums tables

So in this video I'll show you how we insert data into the artists, genres and albums tables.

4
Inserting data into the songs table + FREE music files

Let's add some songs into the songs table now. Music files can be found in the attached source files. 

5
Shortcut to inserting data into the songs table

'Music you might like' page

1
Organisational trick

Our index page is a bit of a mess at the moment so I'm going to show you a really simple way for us to clean this up.

2
Main view containers

So the last thing to do before we can begin adding contain to the main 'center section' of our website, is to create the containers.

3
Header and footer files

So everything is now set up for us to be able to add content to our 'main section' of the site. Before we do that, let's just take a few minutes to improve the structure of our site and make things a whole lot easier for us to work with going forward. 

4
Getting albums from the database

So we're going to finally add some content to the main section of our page. Let's start by executing a simple query which goes to the database and selects all the albums. 

5
Outputting the album artwork images

So last time we output the album titles from the database. Now we will output the album artwork images.

6
Styling the album artwork images

Lets work on getting the albums to look a little nicer now. 

7
Styling the album title
8
Making the albums clickable links

Now we will turn the albums listed on the page into clickable links which will take you to that album's page.

Album page

1
Getting album id from url

On our album page, we need to know which album we should display. We do this by passing the album into the page through the url. In this video we will retrieve the id from the url. 

2
Getting the artist of the album

Now lets use the album id to get the artist of the album.

3
Creating the Artist class

We don't really want to have to manually perform a bunch of MySQL queries each time we want artist information. What we will do now is create an Artist class which will allow us to create an artist object just by passing the artist id into the constructor. 

4
Creating the Album class

So we have our Artist class, now we will create our Album class.

5
Album header section

We're now going to create the section at the top of the page which displays album information such as the the album and artist name.

6
Styling the header section

Last time we created the header section for our album page. Now we will apply some css style to it.

7
Displaying the number of songs in the album

Now we will make the number of songs show at the top of the page. 

8
Creating the Song class

We have classes for Album and Artist at the moment, but now we will create a class for Songs.

9
Getting the songs on an album

Before we output the data for each song on the album, we need to first retrieve the data from the songs table in our database. Let's do that now.

10
Outputting the track count

We're going to output the number which will appear next to each song. This number corresponds to the number of the song on the album. 

11
Outputting the track name and artist name

Now let's output the song and artist name.

12
Outputting the track duration

The final thing to do before we can start styling this page is to output the track duration.

13
Styling the track list rows

Finally it's time to start styling what we've been working on over the last few videos. We will start with the row containers for each track. 

14
Styling the track count

Now we will apply css style to our track count section. 

15
Track style finishing touches

Now we're going to finish up our album page by completing the styling on the track list items.

The music player

1
Introduction to HTML5 Audio
2
Creating our initial playlist of 10 random songs

When the page load, before the user has selected any music, we will select 10 songs at random form the database and create a virtual playlist. This means when the user presses play (before they have selected a song from the page), there will actually be music to play.

3
Including JQuery

We're going make use of a very good (and extremely popular) JavaScript library called JQuery. In this video we'll add this to our project. 

4
Set track function setup

So we have a function in our Audio class which sets the track. We also want a setTrack function outside the track that will do some additional processing to our track before playing it. We're going to do all the preparation in this video so that we can begin working on this function.

5
Set track function

Now we will start on our setTrack function which will be the main function for loading and playing songs. 

6
Playing and pausing the song via buttons

Now let's hook the play and pause buttons up to some code which will allow the user to play and pause the song that is currently playing.

7
Introduction to Ajax calls
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6
4.6 out of 5
1549 Ratings

Detailed Rating

Stars 5
1102
Stars 4
368
Stars 3
47
Stars 2
20
Stars 1
10
fa50aa15320c5fe894bdc6a1a58f938d
30-Day Money-Back Guarantee

Includes

15 hours on-demand video
Full lifetime access
Access on mobile and TV
Certificate of Completion

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday 9:30 am - 3.00 pm
Sunday Closed
Make a Spotify Clone from Scratch: JavaScript PHP and MySQL
Price:
$49.99 $35