DEV Community: Ali Zulfaqar

Bright Data Web Scraping Challenge

Ali Zulfaqar — Thu, 26 Dec 2024 08:34:19 +0000

This is a submission for the Bright Data Web Scraping Challenge: Scrape Data from Complex, Interactive Websites

What I Built

I created a webpage that displays real-time cryptocurrency data scraped from CoinGecko using Bright Data. The webpage provides users with up-to-date information on various cryptocurrencies, including their prices, market caps, and trading volumes.

Demo

You can check out the live demo of the project here. Below are some screenshots of the webpage:

How I Used Bright Data

I scraped the data using JavaScript and created an Express.js API to handle the data. This API sends the scraped data to Supabase, a backend-as-a-service platform. The data is then displayed on a dashboard that pulls the information from Supabase. The scraping process runs at an interval of every 3 minutes to ensure the data is always up-to-date.

Team Submissions This project was a collaborative effort. Special thanks to muhdmokhtar for developing the dashboard.

MongoDB Atlas Hackathon 2022 on DEV

Ali Zulfaqar — Sun, 13 Nov 2022 09:22:40 +0000

What I built

Realtime Chat Application

Category Submission:

About Real-time

App Link

Screenshots

Description

Work in progress for realtime chat using MongoDB Atlas

Link to Source Code

https://github.com/AHFoD/realm-web-changestreams-mongodb

Permissive License

Apache-2.0 license

Background

(What made you decide to build this particular app? What inspired you?)
I love challenge. Doing this particular app allow me to test my knowledge for MongoDB usage

How I built it

(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)
I managed to learn a few things

How to listen to changes on database in realtime
Make your own HTTP endpoints with API Service
Make your own function for the HTTP endpoints

Additional Resources/Info

Run multiple services with nginx reverse proxy

Ali Zulfaqar — Sun, 03 Jul 2022 12:59:42 +0000

Requirement

docker desktop
basic knowledge of how docker works

Getting Started

What is nginx reverse proxy ?

nginx reverse proxy can be simplified as client is accessing the site via nginx acting as the middleware between client and site

What is the benefit ?

you can have multiple site under 1 nginx middleware

How to get started ?

Create a new docker-compose.yml file
Content of the docker-compose.yml

version: '3.7'

services:

  proxy:
    image: jwilder/nginx-proxy
    container_name: proxy-test
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro

  container1:
    image: httpd:2.4
    container_name: container-1
    environment:
      - VIRTUAL_HOST:container1.com
    ports:
      - 8080:80

  container2:
    image: httpd:2.4
    container_name: container-2
    environment:
      - VIRTUAL_HOST:container2.com
    ports:
      - 8081:80

after you have filled in the docker-compose.yml with the code above, save and run the file by using command

docker-compose up -d

You can access the container by opening localhost:<port>, for this example it is running on localhost:8080 and localhost:8081

Conclusion

As my writing has reached it's end, i would like to say thank you for reading this article and have a try playing around with nginx reverse proxy, maybe it will give you more ideas on how to manage your site deployment

Getting started with NodeJS

Ali Zulfaqar — Thu, 30 Dec 2021 01:08:34 +0000

Hello everyone wish you are well and good. For this post i will be sharing on how to get started with NodeJS backend. This is a really basic step. Lets get started

Getting the idea what is NodeJS

Node.js is a way for web applications to have real-time two-way connections, where both the client and server can initiate communication, allowing them to exchange data freely.

create a folder and run npm init with your CMD

npm init

So what does npm init does is that it will initialize a package.json file

For the next step, we need to create a file that contains code for the web application. For the naming of the file, it is upon your own naming convention. A lot of tutorial is using app.js, or server.js as the name of the file. Below is the code needed just to test whether our web server is running or not

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Next, inside the folder directory use command
node {yourwebserverfilename}
The image is showing that the web application is running on port 3001
Open the browser and check whether it is giving a response or not.

If you manage to reach the steps above basically you are done with the basic of NodeJS. There will be an upcoming post to continue from this post as this is just a basic on how to get started with NodeJS

Thank you for your time and i hope you can gain something from this post. See you in the next post 🙌🙌

Getting started with ReactJS

Ali Zulfaqar — Fri, 30 Jul 2021 14:50:40 +0000

"The secret to getting ahead is getting started."
― Mark Twain

Introduction

Hello and welcome to my 3rd post, hope everyone is doing well. The content for this post is what do you need to know in order to code with ReactJS

react is a JavaScript library for building interfaces.
The basic of react is understanding state and props

pre-requisite

javascript
html

State

state is a built-in React object that is used to contain data or information about the component. A component state can change over time

class Greetings extends React.Component {
 state = {
  greetings:"Hello"
}

updateName(){
  this.setState({greetings: Welcome to ReactJS})
}

render() {
  return(
    <div>
      {this.state.greetings}
    </div>
  )
 }
}

this.setState() is used to change the value of the state object

Props

props is being used for passing data from one component to another

import React, { Component } from 'react';
import FirstChild from './firstChild';  // we need to import the child component first

class ParentComponent extends Component {
  state={
    name:"Ali"
  }
  render() {
    return (
      <h1>I'm the parent component.</h1>;
      <FirstChild
        name={this.state.name}
      />
    )
  }
}
export default ParentComponent;

FirstChild component

import React from 'react';

const FirstChild = () => {
  return <p>{this.props.name}</p>  
}

export default FirstChild

to refer props in the child component, use this.props.[name]. In this example refer to this.props.name as i am passing name as a prop to FirstChild component

Conclusion

By understanding how state and props works, you are able to code with ReactJS easily. From my point of view, the things that i share is the basic of getting started with ReactJS. There is a lot more to cover and i'll continue to share another post for the follow up on what's next. Stay tuned and thank you for your time

"Practice the philosophy of continuous improvement. Get a little bit better every single day."
― Brian Tracy

ExpressJS application generator

Ali Zulfaqar — Fri, 16 Jul 2021 06:31:57 +0000

Introduction

Hello and welcome to my 2nd post, this post is to share how you can streamline your files and folder for Express application generator. With Express application generator, you can have your files and folder up in no time. And make sure you have the basic knowledge for setting up backend file and folder such as npm init to make server.js file as this is just a tool to help simplify the process of setting up express files and folder

Installation steps

In the project directory, you can run:

npx express-generator

and you will have the folder and files as below
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug

7 directories, 9 files

After the files and folder has been created, run below command

npm install

this will install all require dependency package from package.json

npm start

to run the express file

Conclusion

For anyone who is interested to dive in ExpressJS without headache to create new model, controller and routes. I recommend use express generator to get a grip of how the files and folders are structured. From there you can get familiar on how ExpressJS works

Simple alert notification for your react app

Ali Zulfaqar — Mon, 05 Jul 2021 05:53:24 +0000

react-toastify

react-toastify is a npm package to replace your default alert notification on the browser.

Installation

Use the node package manager (npm) to install react-toastify.

react-toastify

npm install --save react-toastify

Usage with class component

 import React from 'react';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';

class App extends React.Component {

onClick = () => {
  toast.info("Info")
  toast.success("Success");
  toast.warning("Warning");
  toast.error("Error");
  toast.default("Default");
  toast.dark("Dark");
}
render() {
  return (
   <>
    <div>
    <button onClick={this.onClick}>Notify!</button>
    <ToastContainer />
    </div>
   </>
)}
}

Usage with functional component

  import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';

  function App(){
    const notify = () => {
      toast.info("Info")
      toast.success("Success");
      toast.warning("Warning");
      toast.error("Error");
      toast.default("Default");
      toast.dark("Dark");
    }

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

By default, ToastContainer have the attributes as below

<ToastContainer
  position="top-right"
  autoClose={5000}
  hideProgressBar={false}
  newestOnTop={false}
  closeOnClick
  rtl={false}
  pauseOnFocusLoss
  draggable
  pauseOnHover
/>
{/* Same as */}
<ToastContainer />

Conclusion

With a few steps to install the package and usage with code, you now have a colourful alert to use to make it more attractive for user, thank you for your time.