Hello and welcome to the finale of Let’s Build a MySQL Node.js CRUD App series! In the previous article, we have implemented our front-end with React and completed our full stack app.

If you haven’t read the previous article, please find it here.

Let’s wrap up this series by deploying our React MySQL app to Heroku. Heroku is a cloud platform (PaaS) that we can use to host our app for free.

Step 1: Install Heroku CLI

If you haven’t already, download and install Heroku CLI into your device. Click this link and follow their download instructions.

Next, create Heroku account here. Sign up for…

Hello and welcome to the 3rd part of Let’s Build a MySQL Node.js CRUD App series! In the previous article, we have implemented all our GET, POST, PUT and DELETE routes in our server.

If you haven’t read the previous article, please find it here.

In this part, we will be working on our front-end with React to complete our MySQL CRUD app!

Step 1: Install npm packages

Install axios and cors to allow our app to make requests to the server. Install react-hook-form for easy form handling in React.

npm install axios cors react-hook-form

Step 2: Import cors

In server.js, include the import statement at the top to…

Hello and welcome to the 2nd article of Let’s Build a MySQL Node.js CRUD App series! In the previous article, we have initialized our book review app as a React project and set up a simple database on MySQL.

If you haven’t read the previous article, please find it here.

In this part, we will be integrating our database and routes into our app.

Step 1: Create an Express server

Create a server.js file in our project's root directory for the back-end. We can create an Express app with:

const express = require("express");
const mysql = require("mysql");
require("dotenv").config();const app = express();
app.use(express.json()); …

Hello and welcome to the first article of Let’s Build a MySQL Node.js CRUD App series. In this series, we shall build a beginner-friendly simple CRUD (Create, Read, Update, Delete) app with MySQL and Node.js. If you are a beginner in MySQL and Node.js, I encourage you to follow along and build the app with me!

Before we start, here’s a brief overview of what to expect from this series.

The Project

We will be building a simple book reviewer app. You can add, view, edit and delete reviews in this app.

Technologies we’ll use

• React for front-end
• Node and express for back-end
• MySQL for…

A great documentation website says a lot about your software. It tells users how they can use the software. It tells developers what the software can do and how it is developed. In short, it is a must-have for developers.

But making detailed and excellent documentation websites takes too much time and effort, especially because we want to focus our attention on development instead of writing documentation.

In this article, I’d like to introduce Docusaurus by Facebook, an easy-to-use documentation site generator powered by React and uses Markdown to write docs.

Docusaurus: A Simple yet Elegant Solution

Docusaurus is an open-source project that allows you to…

In this article, we will learn how to publish a React component as an npm package and then set up a pipeline to automate testing and future publishes.

Before We Start

1. Make sure you have an npm account. If you don’t, create one.
2. Make sure you have Node and npm installed on your machine. If you don’t, get it.
3. A basic understanding of React will be needed.

Our Simple Package

For this tutorial, we are making a simple React component that can immediately draw a specified polygon in any specified color.

We will then publish this component as an npm package for anyone to install and…

In an article I wrote on Making Draggable Components in React, a reader requested to share how I built the Bulletin Board App, a simple demo app to showcase draggable components in React.

In this article, I’ll be showing step-by-step how I made this simple app, perfect for React beginners to learn how to implement draggable components in their projects. Let’s get started!

The App

This app can do the following:

1. Allows user to type something in an input and press ENTER to generate a note of a random colour.
2. Allows user to drag the note anywhere. Its position, colour and content…

Hello everyone, in this article, we shall continue from where we left off in the previous article on How to Upload Files to Firebase Cloud Storage. We will now learn how to retrieve and delete files from Firebase Cloud Storage.

Retrieve files from Firebase

Refer to the previous article to learn how to set up Firebase Cloud Storage and create our project that we will continue building in this article.

Step 1: Create allImages state

Initialize an array called allImages. This array will hold all the image URLs retrieved from Firebase.

const [allImages, setImages] = useState([]);

Step 2: getFromFirebase

Let’s create a function called getFromFirebase that will handle retrieving all files from…