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! …


Hello everyone! In this article, we will learn step-by-step how to publish a React component as a npm package then set up a pipeline to automate testing and future publishes.

Image for post
Image for post

Before we start…

  1. Make sure you have an npm account. If not, create one here.
  2. Make sure you have Node and npm installed on your machine. If not, get it here.
  3. 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 a 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. …


Enzyme makes testing your React apps a whole lot easier

Diving into a body of water
Diving into a body of water
Photo by Amy Lister on Unsplash.

Testing front-end applications can be a pain and time-consuming to write. In this article, let’s discuss Enzyme and how we can use it to make testing UI much easier.

What’s Enzyme?

Enzyme is a JavaScript testing utility for React. It makes testing React components easy by asserting, manipulating, and traversing every component’s output. Currently, it is open-sourced and maintained by Airbnb.


Hello everyone! Time sure flies fast and it’s almost the end of October! For those who participated in Hacktoberfest, congratulations! I hope it went well and amazing.

As for me, though I initially wanted to participate as well, I found Facebook’s 2020 Developer Circles Community Challenge to be interesting, so I decided to sign up for that instead.

Hence, I built a project with a friend throughout the month of October to submit it for the hackathon. …


In today’s modern society, we are entering a data collection era, everything from our preferences to our search histories are stored and used to recommend us related items.

For example, YouTube recommends us what videos to watch next. Amazon recommends related items to add to our shopping cart and Facebook suggests new people you might be interested to follow.

Image for post
Image for post

Recommendation systems exist almost everywhere these days. So in this article, I’d like to briefly explain how they work as I recently read some fascinating articles on it. …


CORS explained for beginners

Server’s response to browser blocked
Server’s response to browser blocked
Photo from haproxy.com.

In web development, it is common for web apps to separate their front-end services from their back-end services. As such, accessing resources from the back end requires a grasp of Cross-Origin Resource Sharing (CORS). It is an essential part of understanding web infrastructure for developers.

In this article, we will discuss CORS, why we need it, and how we can implement it. We’ll also look at related concepts such as the Same-Origin Policy.

First, An Experiment

If you are on a website (e.g. Google) and then on your browser inspector, try to send a request to an API like so:

const response = await fetch("https://tea-api-vic-lo.herokuapp.com/tea);


Ever wondered how to make words auto-type themselves onto a page? In this article, we shall go through a step-by-step tutorial on how to do so in your React app.

Image for post
Image for post

Some Prerequisites you need:

  • Basic understanding of React
  • Basic understanding of useState and useEffect React Hooks

Step 1: Import hooks

In our new React app project, let’s import the hooks we will need: useState and useEffect.

import React, { useState, useEffect } from "react"

Step 2: Initialize States

We are going to initialize 3 states:

  • text: This is the current text that is displayed on the page.
  • fullText: This is the final text we want to see after everything is typed out on the page. …

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