+- Forum Rockoldies (https://rockoldies.net/forum)
+-- Forum: Fotobearbeitung - Photoshop (https://rockoldies.net/forum/forumdisplay.php?fid=16)
+--- Forum: E-Learning, Tutorials (https://rockoldies.net/forum/forumdisplay.php?fid=18)
+--- Thema: MERN Stack Music Player App 2022 (/showthread.php?tid=68752)
MERN Stack Music Player App 2022 - Panter - 07.03.2023
![[Bild: rwtwille79jbpxcdp5sgyzae14.jpg]](https://abload.de/img/rwtwille79jbpxcdp5sgyzae14.jpg)
Mern Stack Music Player App 2022
Last updated 7/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 5.12 GB | Duration: 9h 9m
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
![[Bild: mernstackmusicplayera09e85.jpg]](https://abload.de/img/mernstackmusicplayera09e85.jpg)