Mern Stack Music Player App 2022

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.

Requirements

React

Node

Description

Hi Guys , Welcome to the course MERN Stack Music PlayerBy 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 ScratchHandling file uploads with Multer and CloudinaryWorking 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 testingBy the end of this course you can able to build your own music player with all controls and functionalities.24/7 Q/A SupportDeployment to Heroku.–––––––––––––––––––––––––––––––––––––––––––––––––––––––MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.MongoDB - document databaseExpress(.js) - Node.js web frameworkReact(.js) - a client-side JavaScript frameworkNode(.js) - the premier JavaScript web serverExpress 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

Overview

Section 1: Introduction / Project Setup

Lecture 1 PROMO / Source Code

Lecture 2 Project Preview

Lecture 3 Front End Setup

Lecture 4 Tailwind Setup

Lecture 5 Node/Express setup

Lecture 6 Node Mongo Connection

Section 2: User Registration

Lecture 7 Register Page

Lecture 8 User Model

Lecture 9 Register API

Section 3: User Login

Lecture 10 Login API

Lecture 11 Authorization / Middlewares

Lecture 12 Protected Routes

Section 4: Alerts / Toast Messages

Lecture 13 Redux Setup

Lecture 14 Alerts - Toasts

Section 5: Layout

Lecture 15 Default Layout

Section 6: Get Songs List to Home Page

Lecture 16 Song Model

Lecture 17 Gel all songs - API

Lecture 18 Display Songs in UI

Section 7: Designing Audio Player

Lecture 19 Audio Player-1

Lecture 20 Audio Player-2

Lecture 21 Audio Player-3

Lecture 22 Audio Player-4

Lecture 23 Audio Player-5

Lecture 24 Audio Player-6

Section 8: Playlists

Lecture 25 Default Playlists

Lecture 26 Add Playlist-1

Lecture 27 Add Playlist-2

Lecture 28 Add Playlist-3

Section 9: Edit & Delete Playlists

Lecture 29 Edit Playlists

Lecture 30 Delete Playlists

Section 10: First Round Testing

Lecture 31 Testing / Fixing

Section 11: Admin Panel

Lecture 32 Admin Home - All Songs

Lecture 33 Add Song Form

Lecture 34 Upload File UI

Lecture 35 Upload File - Multer

Lecture 36 Add Song Final API

Lecture 37 Edit Song

Section 12: Search and Shuffle Songs

Lecture 38 Search Songs

Lecture 39 Shuffle Songs

Section 13: Final Round Testing

Lecture 40 UI Fixes

Lecture 41 Testing-2

Lecture 42 Admin access fix

Section 14: Deployment

Lecture 43 Deployment - Heroku/Github

MERN Stack Developers,Fullstack Developers