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:
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?
If you take this course, you will have nothing to worry about because we use all of these skills extensively!
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.
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.
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
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 :)
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.
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
Now we'll learn how to use PHP to perform an action when the button is pressed!
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!
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!
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 :)
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.
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.
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.
So the last validation function is for the passwords! :)
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.
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.
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.
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
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 :)
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.
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.
So we've handled data sanitation, validation and finally insertion. Now let's give it a try! :)
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.
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.
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.
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
We're finally ready to add some CSS style to our site! Let's start by adding a background image to our page.
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.
Now let's move on to styling the input boxes that the user will type into.
In this video I will show you a way in which you can change the color of the textbox placeholders.
Now we will apply CSS style to the buttons that the user uses to submit the 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.
Now we need to make it automatically show and hide the forms depending on which form was submitted.
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.
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.
Last video we added the content itself, now we are going to style it.
I'm going to show you a really cool app which gives your access to thousands of icons for free!
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.
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
I'll just give you a very brief overview of the index page and the three main sections that make up the page.
In this video we create as style the container for our now playing bar.
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.
In this video I'll show you how we're going to split our now playing bar into three sections.
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.
So now that we have our icons, let's create the buttons for our music player!
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!
Let's add the elements that will make up the container for the progress bar of the currently playing song.
Now, it's finally time to create the progress bar itself!
Let's create the image that will display the album artwork for the song that is currently playing.
Now we're going to add the text elements that will display the track info such as artist name and track name.
Now we're going to create the volume bar!
What we're going to do now is add some containers to our page which will section off certain elements in our page.
Now lets set up the container for the navigation bar.
So now that we have the navigation bar container set up, we can start adding items to it. Lets add the site logo first.
Now we are going to put the actual navigation items (links) into the navigation bar.
We're going to now give the search link a magnifying glass icon.
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
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.
Now we are going to create the tables that we discussed in the previous video.
So in this video I'll show you how we insert data into the artists, genres and albums tables.
Let's add some songs into the songs table now. Music files can be found in the attached source files.
'Music you might like' page
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.
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.
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.
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.
So last time we output the album titles from the database. Now we will output the album artwork images.
Lets work on getting the albums to look a little nicer now.
Now we will turn the albums listed on the page into clickable links which will take you to that album's page.
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.
Now lets use the album id to get the artist of the album.
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.
So we have our Artist class, now we will create our Album class.
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.
Last time we created the header section for our album page. Now we will apply some css style to it.
Now we will make the number of songs show at the top of the page.
We have classes for Album and Artist at the moment, but now we will create a class for Songs.
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.
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.
Now let's output the song and artist name.
The final thing to do before we can start styling this page is to output the track duration.
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.
Now we will apply css style to our track count section.
Now we're going to finish up our album page by completing the styling on the track list items.
The music player
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.
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.
Now we will start on our setTrack function which will be the main function for loading and playing songs.
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.