How To Build A Web Scraper In Node.Js With node-fetch, Puppeteer and nodemailer

Image for post
Image for post
Source: Joshua Earl At Unsplash

One of the most useful automation projects that a novice programmer can undertake is to build a web scraper app. An important use case of web scraping can be to extract relevant data from a website and store it for later use. For example, we can retrieve the titles of the posts on the Reddit website and display them on our page without printing out the body of the title. Another example can be to extract only the names of the commentators on a Twitter post without seeing the content of their comment.

In this project, we will be building a web scraper for two types of…


All you need to know about React’s Context API

Image for post
Image for post
Source: Dave Hoeffler On Unsplash.com

Nowadays, writing web applications can get extremely tedious and complex. If you’re building a React app, you will sometimes send data from one component to another component. However, due to the complexity of your project, there might be times where you’ve had to send states and props from component to component, thus further increasing the complexity. This is where React’s Context API can prove to be incredibly useful.

Let’s first discover why we need the Context API.

What Is Context and Why Is It Useful?

As an example, let’s create an example where we build a database of a list of movies and their respective prices.

Let’s first create a file called Movies.js and define states in it. These states contain values about the movies. …


How to use Passport.js for user authentication in your node app

Image for post
Image for post
Photo by freddie marriage on Unsplash

You’re a talented web developer in extremely high demand. Time and time again, you’ve proven yourself capable of building extremely complex apps with big success.

Let’s start with an example. A local school desires its students to view their academic progress and homework right from an app. Due to your glowing recommendations, naturally, the school department hires you. These are their requirements:

  • Students first log in to the app using their email and required credentials. If an existing account is not found, they are prompted to create an account.
  • If an existing account is found, the student can now view their academic progress and homework. …


Step By Step Tutorial

How To Use the Quotes API to get Motivational Words with the fetch Method in ReactJS

A Man standing on top of a hill
A Man standing on top of a hill
Source: Joshua Earle On Unsplash

One of the most interesting projects a beginner can do while learning a framework is to build a random quote generator. In this tutorial, we’ll be building a web app that will send us an inspirational quote of the day when we run the program. Along the way, we will also learn about the fetch method in ReactJS.

In the end, this will be the result of our program:

Quote Of the day:Every day you have a choice to be honest or deceptive. If you commit to telling the truth, you will win..
Quote Of the day:Every day you have a choice to be honest or deceptive. If you commit to telling the truth, you will win..
Quote Of The Day. This will be our objective

Getting Started

Just like creating any React app, let’s run create-react-app .

npx create-react-app quotes-app

We won’t be installing any other modules. …


How to use Socket.IO in your web app

Image for post
Image for post
Source : Priscilla Du Preez on Unsplash

There might have been times where you, as a programmer, wondered how chat apps work. What’s going on under the hood that makes this technical marvel possible? Socket.IO makes the development of chat apps easier and has been used in many software projects.

In this article, we’ll build a chat app using the Socket.IO library and the Node.js engine. This is how it’ll look like:

Demo of Chat App that we will build in this tutorial
Demo of Chat App that we will build in this tutorial
Demo of chat app we’ll build in this tutorial

Getting Started

Installation of libraries

We’ll install:

  • express to handle our routes
npm install express
  • socket.io for the gist of our app — it’ll essentially handle our chat functions
npm install socket.io

That’s it! We’re now finally capable of using these libraries in our application. It’s time to get our hands dirty. …


A Tutorial on Creating A Simple Weather App in React And How To Use the fetch Method

A fleet of VORTEX2 vehicles tracks a supercell thunderstorm near Dumas. Image Credits : NOAA at Unsplash.com
A fleet of VORTEX2 vehicles tracks a supercell thunderstorm near Dumas. Image Credits : NOAA at Unsplash.com
Image Credits: NOAA at Unsplash

One of the easiest and useful projects in any programming language one can do is to build an application that simply displays the weather of your hometown.

In this post, we’ll be building an extremely simple weather app with minimal design. As this will be your program, you can customize the code as well, allowing you to change the look and feel of your program. Let’s dive in!

Getting Started

First use create-react-app to build the template of your app. The name of my app is weatherfrontend

npx create-react-app weatherfrontend

Now, you need to log on to the OpenWeatherMap website and get your API key. This API key allows you to access OpenWeatherMap’s database so that you could use the data returned from their servers to display the relevant information on the webpage. …


All You Need to Know to Create Forms in React

Image for post
Image for post
Source: Karl Lee At Unsplash.com

React.Js gives us full capability on using forms on our web page. Before diving in deep to this concept, there are a few prerequisites to learn before reading this lesson.

  • States, or hooks. As React moves towards functional components, we will be using hooks in this post.
  • Event handling.

By the end of this post, you will be fully apt to create an app that does the following function,

Output of the program that we will be building today. An example of React forms.
Output of the program that we will be building today. An example of React forms.

As you can notice, the values of the texts change dynamically depending on the user input. This allows for better visual display of the outputs.

Getting Started

Declaring Hooks

We will be using hooks to change our values according to user input.
Here, we will be creating several hooks like…


How to Implement States and Lifecycle Methods in Your Web App

Scenic shot of a mountain and roads
Scenic shot of a mountain and roads
Source: Jake Blucker On Unsplash.com

In my previous articles, I’ve extensively used functional components to create JSX elements in React.
However, apart from using the functional component method, there is another way to materialize JSX components; they’re called class components.

In this article, we will discuss

  • Why to use class components over their functional counterparts?
  • How to create class components and utilize them in our React program.

Introduction

Why to use Class Components?

  • To illustrate, let’s use an example. Here, we want to display the color of the car using functional components
function Car() {
return(
<h1> Car Color : {props.color} </h1>
)
}
ReactDOM.render(<Car color="blue"/> , document.getElementById('root'))

This is a fairly basic functions and props example. However there’s just one problem : What if I want to change the value of the prop with the click of a button?


Everything you need to know about props in React

Image for post
Image for post
Photo by Yann Allegre on Unsplash.

You want to build a website for a client’s cat store. The client has a multitude of cats and requires you to create a website that contains a full directory of the cats that are on sale.

In a simple HTML, this is how you would actually implement the cats directory:

Writing almost 30 lines of code for just four cats doesn’t seem like much of an endeavor. But what if you want to expand your website to handle even more animals (say, 30 cats)? For a web developer, this becomes an extremely tedious task.

What if we use functional components to do the same job? …


How to style React components with JavaScript

Image for post
Image for post
Source: Marc Olivier at Unsplash.com

In plain HTML, we style our components and use JavaScript like this:

<p style='color:blue;'>Hello, my name is <span id='name'> </span> </p>
<script>
let s = document.getElementById('name')
s.innerText= 'Hussain'
</script>

However in React, we do it like this:

function App() {
let myName= 'Hussain'
return(
<p style={{color:'blue'}}> My name is {myName} </p>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));

In React, we perform this task differently — in such a way that it becomes easier on the eyes. In this tutorial, we’ll discuss how to use CSS properties in React and how to run JavaScript code within JSX tags.

Styling and CSS

There are three ways to style components: inline styling, CSS style sheets, and module…

About

Hussain Arif

Programming enthusiast in Karachi,Pak. Happy to share whatever I learn. Instagram:hussainn.arif email: hussainarifkl [at] gmail [dot] com

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