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.
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. …
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.
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!
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
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.
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.
We will be building a simple book reviewer app. You can add, view, edit and delete reviews in this app.
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 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.
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!
This app can do the following:
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.
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.
Initialize an array called allImages
. This array will hold all the image URLs retrieved from Firebase.
const [allImages, setImages] = useState([]);
Let’s create a function called getFromFirebase
that will handle retrieving all files from…
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.
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…
A nerd in books, tea and programming.