CF

Make a Spotify Clone from Scratch: JavaScript PHP and MySQL

14h 59m 31s
English
Paid

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 about the kind of website that will amaze anyone who sees it—the kind of website that will get you hired in no time!

Why Learn from Me?

I work as a Software Engineer at Microsoft, building products used by millions worldwide! I want to transfer the skills I've gained through years of working with some of the best developers in the world directly to you.

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

Course Overview

What Will You Build?

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!

Who Should Enroll?

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

Why Take This Course?

Master Essential Skills

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

This course extensively covers all of these skills, ensuring you're well-prepared!

Enhance Your Project Portfolio

The site you create will be the highlight of your project portfolio! Any potential employer who sees this project on your resume will be impressed with the wide range of technical skills it demonstrates.

Comprehensive Support

By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I'm always ready to help with programming issues, feature requests, and general advice. I strive to respond to questions within a few hours.

Exclusive Discounts

Enroll now for access to ALL of my current and future courses at the lowest possible discount on Udemy—FOREVER.

Have Fun While Learning

This project is a lot of fun, and you'll enjoy implementing your unique ideas alongside the ones we create together. What are you waiting for?

Course Requirements

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

Target Audience

  • Aspiring software engineers or web developers dreaming of working at companies 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 essential techniques for aspiring software engineers

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 168 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 168 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Setting up your local server
All Course Lessons (168)
#Lesson TitleDurationAccess
1
Setting up your local server Demo
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
Unlock unlimited learning

Get instant access to all 167 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What prior knowledge do I need before taking this course?
This course is suitable for both complete beginners and experienced programmers. It covers the essential tools and languages like JavaScript, PHP, and MySQL from the ground up, starting with setting up a local server and creating basic forms. Beginners can learn foundational skills, while experienced developers can enhance their understanding of how to build complex applications.
What will I be able to build by the end of the course?
By the end of this course, you will have built a fully functional music streaming site similar to Spotify. This includes features like user registration, real-time search for artists, albums, and songs, playlist creation and customization, and music control functions such as play, pause, skip, and others.
Who is the target audience for this course?
The course is designed for anyone looking to gain expertise in JavaScript, PHP, and MySQL, whether you're a beginner or an experienced programmer. It's particularly beneficial for individuals interested in building web applications or pursuing careers in software development.
How does the depth of this course compare to similar courses?
This course provides a comprehensive learning experience with 168 lessons covering everything from setting up a local server to creating complex functionalities like the now playing bar and navigation elements. This depth ensures students not only learn to code but also apply their skills to build a project of significant complexity.
What specific tools or platforms will I use throughout the course?
Throughout the course, you'll use tools and platforms such as JavaScript for client-side operations, PHP for server-side scripting, and MySQL for database management. You'll also learn how to handle form submissions, sanitize inputs, and manage sessions.
Are there any topics specifically not covered in this course?
The course does not cover advanced topics like deploying the application to production environments or using version control systems like Git. It focuses primarily on building the application from scratch using JavaScript, PHP, and MySQL.
What is the expected time commitment to complete this course?
The course consists of 168 lessons and is designed to be completed at your own pace. The total runtime is not specified, so the time commitment will vary depending on your learning speed and familiarity with the concepts being taught.