If you’re like me…and Google Play Music handed you a gold platter a couple years ago with a decent platform for music and then changed its mind in 2020 to dropkick you from behind while you weren’t looking…

You’ve come to the right place to learn about some thing Youtube Music (YTM) can do for you that Google Play Music (GPM) couldn’t.

Things to Note

There are distinctions that we need to make before we move forward.

Youtube Music playlists are natively, regular Youtube Playlists.
You know…like those meme playlists you probably make or playlists of all your kpop biases???

This is important…


Source Code — https://github.com/JinKim7/mern-weather-app

“Production” Ready

There’s only a few places that we need to update within the app to make it more “production ready”, in other words, just make it work once deployed.

root/package.json
  • Added "heroku-postbuild" script to your package.json so Heroku can run that script when deploying…
server/server.js
  • Use the path npm package to find the directory route to the build folder for our client-side app.
  • Added a conditional to check if the application is in a production environment. And if it is…


Source Code — https://github.com/JinKim7/mern-weather-app

Concurrently Run Frontend and Backend

Within the server app, we need to add more scripts in package.json so we can run both the frontend and backend at the same time.

In the scripts property, we should only have the start command.
Add in these additional commands (server, client, and dev commands):

"scripts": {
"start": "node server/server.js",
"server": "nodemon server/server.js",
"client": "cd client && npm run start",
"dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
},
  • npm run server — this command uses nodemon


Source Code — https://github.com/JinKim7/mern-weather-app

Create-react-app Boilerplate

We will now be creating our client side (frontend) portion of our app.

Since we installed Node from the previous tutorial, we’re free to run create-react-app (more info about create-react-app) to create boilerplate(template) of a react application.

Run this command with in your root directory, mern-weather-app :

npx create-react-app client

This client folder will be the destination where we will store all our frontend code.

Once the client folder is created, cd into the client folder and to make…


This tutorial is another resource for people to use when learning how to build a full-stack MERN application…except mine will include saving to local storage and using Redux for state management…

Source Code — https://github.com/JinKim7/mern-weather-app

Demo

We’ll be building a weather web app called Weathering With You.

Screenshot of Weathering With You — MERN web app

This app will be able to let you, the user, enter a zip code, choose Celsius or Fahrenheit, and then get the current weather data at that time when you click Save.

This app uses a free…

Jin

c#/.net dev@day — js dev@night 🦄

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store