Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

14h 59m 31s
English
Paid
April 25, 2024

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!

More

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 :)

Requirements:

  • No prior knowledge needed! A basic understanding of HTML is helpful - but not essential

  • A computer

Who this course is for:
  • Any aspiring software engineers or web developers dreaming of working at a company like Google, Facebook or Microsoft
  • Anyone who wants to master HTML, JavaScript, PHP, MySQL

What you'll learn:

  • 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

Watch Online Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

Join premium to watch
Go to premium
# Title Duration
1 Setting up your local server 08:34
2 Creating the login form 09:29
3 Creating the register form 04:54
4 Intro to PHP - Handling form submission 04:11
5 Form sanitation - Cleaning the input 10:58
6 Separating our code 04:41
7 Preparing our validation functions 03:40
8 Creating the Account class 07:20
9 Validating the username 06:52
10 Validating the name and emails 04:45
11 Validating the passwords 03:58
12 Checking if the sign up was successful 03:08
13 Outputting error messages 08:59
14 Creating our Constants class 08:59
15 Remembering form values 05:49
16 Creating the users table 04:59
17 Connecting to our database from PHP 04:47
18 Inserting user details 09:11
19 Testing out the sign up process! 03:33
20 Query not working? Watch this video 04:36
21 Last remaining validation checks 04:45
22 Login handler 06:08
23 Sessions 05:35
24 Adding a background image 06:56
25 Styling the login container 08:34
26 Styling our text boxes 06:55
27 Input placeholder color 03:22
28 Styling the submit buttons 03:57
29 Buttons to switch between forms 03:25
30 Showing and hiding the forms on press 07:56
31 Showing only the relevant form when data is submitted 06:57
32 Show/hide button - mouse pointer 01:16
33 Right section content 04:31
34 Applying style to the right section content 05:11
35 56,800+ icons FOR FREE - Icons8 08:17
36 Styling the error messages 02:47
37 Remembering the username after failed log in attempt 01:10
38 Quick overview of the index page 01:18
39 Now playing bar container 05:19
40 Creating the now playing bar element 03:53
41 Left, center and middle sections of the bar 05:00
42 All the icons for our site 02:31
43 Adding our player buttons 10:32
44 Making the play and pause buttons larger 02:33
45 Progress bar parent elements 04:56
46 The progress bar 05:59
47 Album artwork 05:24
48 Track info labels 06:58
49 Volume bar 05:36
50 Page containers 03:37
51 Creating our navigation bar container 02:56
52 Navigation bar site logo 05:34
53 Navigation items 05:38
54 Navigation search icon 06:12
55 Navigation links color change on hover 01:52
56 Overview of our MySQL table structure 05:57
57 Creating our database tables 05:13
58 Inserting data into the artists, genres and albums tables 06:14
59 Inserting data into the songs table + FREE music files 04:42
60 Shortcut to inserting data into the songs table 00:59
61 Organisational trick 03:55
62 Main view containers 06:23
63 Header and footer files 02:46
64 Getting albums from the database 05:21
65 Outputting the album artwork images 05:45
66 Styling the album artwork images 05:26
67 Styling the album title 02:59
68 Making the albums clickable links 04:39
69 Getting album id from url 05:23
70 Getting the artist of the album 03:17
71 Creating the Artist class 05:58
72 Creating the Album class 07:46
73 Album header section 05:00
74 Styling the header section 06:19
75 Displaying the number of songs in the album 04:37
76 Creating the Song class 07:29
77 Getting the songs on an album 06:57
78 Outputting the track count 05:59
79 Outputting the track name and artist name 02:44
80 Outputting the track duration 02:19
81 Styling the track list rows 03:44
82 Styling the track count 04:04
83 Track style finishing touches 05:45
84 Introduction to HTML5 Audio 07:40
85 Creating our initial playlist of 10 random songs 06:25
86 Including JQuery 01:59
87 Set track function setup 05:47
88 Set track function 04:58
89 Playing and pausing the song via buttons 06:41
90 Introduction to Ajax calls 05:57
91 Getting a song via ajax 07:21
92 Getting the artist via ajax 06:27
93 Getting the album via Ajax 04:37
94 Updating the plays count when a song is played 09:22
95 Displaying the time remaining label 03:38
96 Formatting the time remaining 05:43
97 Updating the progress bar as the song plays 07:12
98 Dragging the progress bar on click 11:46
99 Controlling the volume 04:06
100 Updating the volume progress bar 04:38
101 Preventing controls from highlighting on mouse drag 03:44
102 Skipping to the next song 05:53
103 Song repeat mode 02:59
104 Repeat button 03:58
105 Playing the next song when current song ends 01:43
106 Previous song button 04:08
107 Mute button 03:31
108 Shuffle button 03:27
109 Shuffle - Part 1 06:20
110 Shuffle - Part 2 10:23
111 Playing songs by clicking on the song's play button 08:43
112 Fixing the song's play button bug 04:29
113 UserLoggedIn JavaScript variable 02:19
114 Changing pages dynamically 07:51
115 Knowing if a page was loaded from ajax or not 09:07
116 Replacing all links with our dynamic links 07:59
117 Small play button bug 01:03
118 Changing the URL when we load a new page 02:33
119 Browse page 02:31
120 Artist info section 05:31
121 Styling the artist info section 04:34
122 Songs section 05:33
123 Albums section 03:30
124 Artist page play button 01:49
125 Now playing bar links 07:11
126 Creating our search input section 06:34
127 Styling the search input 04:28
128 Searching when the user stops typing 07:42
129 Searching for songs 06:56
130 Searching for artists 08:05
131 Styling the artists search results section 02:39
132 Fixing the artist name bug 02:53
133 Searching for albums 04:58
134 Invalidating the search timer 01:53
135 Creating our playlist MySql tables 02:38
136 Creating the playlist page 05:58
137 The createPlaylist function 07:05
138 Create playlist file 08:00
139 Creating the User class 06:43
140 Outputting the user's playlists 05:31
141 Creating the Playlist class 04:30
142 Playlist links 02:32
143 Styling the playlists 01:25
144 Creating the header section of the page 08:22
145 Displaying the playlist's songs 05:13
146 Delete playlist function 02:55
147 Delete playlist ajax 04:43
148 Creating the options menu 07:25
149 Showing the options menu 07:08
150 Hiding the options menu 04:51
151 Add to playlist dropdown menu 04:38
152 Populating the dropdown with playlists 04:13
153 Styling the dropdown menu 03:08
154 When the dropdown menu is changed 09:19
155 Saving songs to a playlist 13:19
156 Copying options menu to other pages 03:46
157 Remove song from playlist function 02:34
158 Removing song ajax code 05:54
159 Settings page setup 07:13
160 Logout button 05:22
161 Settings link on the navigation menu 05:10
162 User details forms 06:34
163 Styling the user details forms 05:52
164 Update email function 04:11
165 Update email ajax code 09:38
166 Update password function 03:34
167 Update password ajax code 12:10
168 You made it! Congratulations! 02:10

Similar courses to Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

70+ JavaScript Challenges: Data Structures & Algorithms
Object-oriented Programming in JavaScript
Writing Readable PHP

Writing Readable PHPspatie.be

Duration 2 hours 40 minutes 32 seconds
DevOps.js Conference 2021

DevOps.js Conference 2021devopsjsconf.com

Duration 7 hours 51 minutes 4 seconds
JavaScript & LeetCode | The Ultimate Interview Bootcamp
Ultimate PHP, Laravel, CSS & Sass! Learn PHP, Laravel & Sass
phpspec: Testing... *Designing* with a Bite

phpspec: Testing... *Designing* with a Bitesymfonycasts

Duration 2 hours 54 minutes 25 seconds