MERN Stack Music Player App 2022

Focused View

K.Sathyaprakash Reddy

9:09:15

3 View

1 - Introduction Project Setup

1 - PROMO Source Code.mp4

06:25

1 - Source code.txt

2 - Project Preview.mp4

13:55

3 - Front End Setup.mp4

03:43

4 - Tailwind Setup.mp4

07:32

5 - NodeExpress setup.mp4

04:29

6 - Node Mongo Connection.mp4

11:31

2 - User Registration

7 - Register Page.mp4

20:27

8 - User Model.mp4

02:11

9 - Register API.mp4

16:09

3 - User Login

10 - Login API.mp4

14:06

11 - Authorization Middlewares.mp4

15:05

12 - Protected Routes.mp4

11:37

4 - Alerts Toast Messages

13 - Redux Setup.mp4

18:42

14 - Alerts Toasts.mp4

16:14

5 - Layout

15 - Default Layout.mp4

09:39

6 - Get Songs List to Home Page

16 - Song Model.mp4

04:13

17 - Gel all songs API.mp4

06:43

18 - Display Songs in UI.mp4

13:20

7 - Designing Audio Player

19 - Audio Player1.mp4

14:10

20 - Audio Player2.mp4

04:06

21 - Audio Player3.mp4

11:03

22 - Audio Player4.mp4

14:21

23 - Audio Player5.mp4

11:38

24 - Audio Player6.mp4

09:23

8 - Playlists

25 - Default Playlists.mp4

15:04

26 - Add Playlist1.mp4

12:51

27 - Add Playlist2.mp4

07:30

28 - Add Playlist3.mp4

18:20

9 - Edit & Delete Playlists

29 - Edit Playlists.mp4

20:44

30 - Delete Playlists.mp4

06:47

10 - First Round Testing

31 - Testing Fixing.mp4

30:17

11 - Admin Panel

32 - Admin Home All Songs.mp4

14:05

33 - Add Song Form.mp4

09:00

34 - Upload File UI.mp4

11:57

35 - Upload File Multer.mp4

13:23

36 - Add Song Final API.mp4

23:56

37 - Edit Song.mp4

19:42

12 - Search and Shuffle Songs

38 - Search Songs.mp4

18:08

39 - Shuffle Songs.mp4

07:33

13 - Final Round Testing

40 - UI Fixes.mp4

22:52

41 - Testing2.mp4

10:32

42 - Admin access fix.mp4

08:47

14 - Deployment

43 - Deployment HerokuGithub.mp4

17:05

Description

Build a fullstack dynamic music/audio player using React , Redux , Node , Mongo , Multer , Cloudinary

What You'll Learn?

Building Real Time Project From Scratch
Building our custom audio player which will have all the controls like play , pause , next song , previous song , shuffle songs , forward song , volume controls
Handling file uploads with Multer and Cloudinary
Working with Tailwind CSS
Building everything from scratch by avoiding external libraries
We will also work on playlists concept , Creating playlist , add songs to playlist , removing songs from playlist etc.
Working with admin panel where the admin can control the entire application.
Adding song , uploading files , edit song etc.
Two rounds of unit testing , Fixing issues after unit testing
By the end of this course you can able to build your own music player with all controls and functionalities.
Deployment to Heroku.

Who is this for?

MERN Stack Developers

Fullstack Developers

What You Need to Know?

React

Node

More details

Description
Hi Guys ,
Welcome to the course MERN Stack Music Player
By listening the word music player you may be wondering that why we need a separate course for music player app.
Because already we lot of tutorials available to build music player. So to the student who are having this question...my answer is very simple You might have seen music player web apps which were build using plain Html/CSS or React or Plain Java script.
But in this course we will build the music player using MERN STACK.
What will students learn in this course ?
Building Real Time Project From Scratch
Handling file uploads with Multer and Cloudinary
Working with Tailwind CSS.
Building components from scratch without using any external libraries and frameworks.
Building our custom audio player which will have all the controls like play , pause , next song , previous song , shuffle songs , forward song , volume controls etc.
We will also work on playlists concept.
Creating playlist , add songs to playlist , removing songs from playlist etc.
Working with admin panel where the admin can control the entire application.
Adding song , uploading files , edit song etc.
Two rounds of unit testing.
Fixing issues after unit testing
By the end of this course you can able to build your own music player with all controls and functionalities.
24/7 Q/A Support
Deployment to Heroku.
--------------------------------------------------------------------------------------------------------------
MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.
MongoDB - document database
Express(.js) - Node.js web framework
React(.js) - a client-side JavaScript framework
Node(.js) - the premier JavaScript web server
Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.
React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.
Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser, which was designed to build scalable network applications.
MongoDB is an open source cross-platform document-oriented database program. Classified as a NoSQL database program, MongoDB uses JSON-like documents with optional schemas. MongoDB is developed by MongoDB Inc. and licensed under the Server Side Public License which is deemed non-free by several distributions
Who this course is for:
MERN Stack Developers
Fullstack Developers

User Reviews

Rating

average 0

Total votes0

Focused display

Hi,I am Satyaprakash Reddy, I am a freelance developer in India.I've 5 years of experience in developing applications in Android and Web Development.I've been teaching coding lectures from the past three years in an Institute. So now I wanted to share my knowledge across the globe through Udemy.I spend most of my time researching how to make learning to code fun and make hard concepts easy to understand. I apply everything I discover into my Bootcamp courses. In my courses, you'll find lots of geeky humor but also lots of explanations and animations to make sure everything is easy to understand.Thank U.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.