Hello everyone! Today, I want to share what I built over the weekend for the New Year New Hack hackathon! It was an amazing experience and a fun way to start the new year.

Image for post
Image for post

My Project

It is a web app that is able to identify the original 151 species of Pokémon using a custom image classification model. The user will first supply an image, it can be a 2D image or from a camera. Then, click on ‘Run Pokédex Analysis’. The model will return its prediction and then the app will fetch the data of that predicted Pokémon. …


Image for post
Image for post

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 the free tier (or any) to get started. …


Image for post
Image for post

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 use cors. …


Image for post
Image for post

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()); …


Image for post
Image for post

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.

Image for post
Image for post

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 write documentation as Markdown and gives you tons of flexibility to customize and create visually appealing documentation websites in no time! …


A step-by-step guide to publishing your own React component to npm as a package

Hand holding compass
Hand holding compass
Photo by Aron Visuals on Unsplash.

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 use. …


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!

Image for post
Image for post

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 will be saved even after the user exits the app. …


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.

Image for post
Image for post

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 Firebase. …


Some apps allow users to upload images and files, read them, delete them and even download them whenever users want. Such functionality can be useful for social media platforms, blogging platforms or storage services. Firebase Cloud Storage offers a solution to store user-generated content easily.

Hello fellow devs, in this article, we’ll be discussing Firebase Cloud Storage and how we can implement it to upload, retrieve and store user files securely.

Image for post
Image for post

What is Firebase Cloud Storage?

Firebase Cloud Storage is a service that developers can use to store and download files generated directly by clients. No server-side code is needed.

It uses Google Cloud Storage buckets to store the files, allowing accessibility from both Google Cloud and Firebase. These buckets are formed within a hierarchical structure. …

About

Victoria Lo

A nerd in books, tea and programming.

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