Recently, I was exploring AI tools from online resources and also I came across a web-scraping Chrome extension I thought what if I can scrap this data into beautiful social media

Here are the most powerful web-scraping Chrome extension

1.  [**Bardeen - Automate manual work**](https://www.bardeen.ai/)

2.  [**Axiom Browser Automation**](https://axiom.ai/)

## What is Web scraping

Web scraping is a powerful tool for collecting data from websites quickly and efficiently. For marketers, web scraping can be especially useful for collecting data on potential leads, target audiences, or competitors. However, manually collecting data from websites can be time-consuming and tedious, particularly when dealing with websites that have large amounts of data.

### The Challenge of Data Collection

Collecting data from a large website with over 300 AI tools can be a daunting task. Manually copying and pasting the data for each tool would take hours or even days. This is where web scraping comes in handy. With a web scraping tool, it's possible to automatically collect data from a website, even if there are hundreds or thousands of pages to scrape.

## How to scrap data from any website

Here's a [YouTube channel](https://www.youtube.com/@Bardeenai) to learn about how to use Bardeen to scrap data from any website.

After collecting the data in table form using the Bardeen extension, I transfer table data into google sheets by connecting my Google account.

### Organizing Data with Google Sheets

Once the data was collected, I imported it into Google Sheets to organize it. Google Sheets is a powerful tool for data organization, allowing users to sort, filter, and analyze data in a variety of ways. I created separate columns for each data point and used filters to remove any unnecessary data.

#### Extracted data from AI tool using web scraping

-   Name

-   Description

-   Website link

-   Icon link

Here's an important phase that came up where I applied some google sheets functions to create necessary columns like,

-   Absolute URL path to extract the domain name

-   Used **IMPORTXML()** function to get meta image from extracted URL of AI tool

> Also, we can import meta descriptions of websites using the IMPORTXML function but in my case, I had the description content of the AI tool.

### Used google sheets functions

Get a domain from an absolute URL (https://abhidadhaniya.com to abhidadhaniya.com)

```
=REGEXREPLACE(A1,"http\:\/\/|https\:\/\/|\/.*|\?.*|\#.*","")
```

Import meta image using og:image property from metadata.

```
=IMPORTXML(A1,"//meta[@property='og:image']/@content")
```

After successfully fetching all data let's sync in the Figma post.

## Sync data in Figma Post

I created common components in Figma to use a common structure in all posts.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681752492933/38a8c39a-bc1d-4bae-9a4b-9e208c40de30.png)

I also created variants of Profile images and account info.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681752519622/26801dec-5d3f-475b-9f89-631c49022a2b.png)

If I want to create a new theme and post layout, Now I can easily change the design of components and it will reflect in all posts. This is the real power of Figma 🔥

### Sync data using the Google Sheets sync Figma plugin

I installed a Figma plugin called [Google Sheets sync](https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync) to fetch data from shared google sheets by inputting Google sheet URL.

After that plugin will pop up a table that we can connect to the respected element.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1681753147894/8922fd78-3a2b-4135-be3c-ee48318735ff.png)

Connect the element by clicking on the respected column and the name of the element will be replaced by #ColumnName

Now, Copy and paste the 1st post by dragging next to it and click on the sync button in the pop-up of the Google Sheets sync plugin and That's it, We're Done...!

> I choose a lazy person to do a hard job. Because a lazy person will find an easy way to do it.
> 
> **\- Bill Gates**

## Conclusion

Web scraping and Google Sheets are powerful tools for streamlining data collection and organization. By using a web scraping tool and Google Sheets, I was able to quickly and efficiently collect and organize data from a large website. By syncing the data with Figma, I was able to create social media posts quickly and easily.

I scrapped AI tools from a website to post 300+ AI tools on a social media page

Web scraping for social media content

How I Automate Social Media Page using Web Scrapping, Google sheets and Figma

This story starts from how we’ve started [Gigaweb](https://www.gigaweb.in/). If you want to read my story, [Here’s how I master full-stack web development](https://blogs.abhidadhaniya.com/post/heres-how-i-master-full-stack-development).

## Co-founder of Gigaweb

[Rohan](https://www.rohankiratsata.xyz/) and I are Co-founders of Gigaweb. We meet in a remote internship at [Adhir.info](https://www.linkedin.com/company/adhirinfo/) where We’ve built a mobile application using [React Native](https://reactnative.dev/)

We both are passionate about building websites and web applications. He’s coming from UI - UX background. He also had a great experience in Fiverr from dealing with clients to creating stunning user interfaces and social media posts.

We started our journey in June 2022 and decided to start a service-based agency that provides services like:

- Web Design
- UI - UX Design
- Graphic Design
- Full-stack web development
- No code websites using WordPress
- Mobile application development

## Completed Projects

We've completed projects like

- [Viapply](https://www.gigaweb.in/work/viapply-visa-immigration?ref=blogs.abhidadhaniya.com) - A visa agent based in Canada.
- [Varandani Solution](https://www.gigaweb.in/work/varandani-solutions?ref=blogs.abhidadhaniya.com) - A digital marketing agency based in Canada.

We’ve completed 5+ projects and generated 50k to 55k. We’ve worked with clients from Canada. You can verify more work on our [Portfolio](https://www.gigaweb.in/work).

## Our Mission

Our mission is to help all small businesses to grow their online presence. We want to help them to create a website that helps them to grow their business.

![https://www.gigaweb.in/metaImg.png](https://www.gigaweb.in/metaImg.png)

## Product Building

We started building products at the end of 2022 because, in this type of business, you can't completely rely on clients. You need to have a product that solves real-world problems and you can sell it to the market to generate revenue.

We've built products like

- [GigaResources](https://gigaresources.xyz/) - A collection of resources for creators and developers.
- [Foodie VVN](https://foodie-vvn.web.app/) - A food application to find restaurants and foods in vidhyanagar

### Agency vs Company

The difference between a service-based agency and a product-based company is that a service-based agency provides services to clients and a product-based company provides a product to the market.

## Future Plans

We're continuously growing our business and we're planning to build more products that solve real-world problems.

In this article, I've shared how we've started Gigaweb and how many revenue generated so far... 

Story of Gigaweb

How We've started Gigaweb Company

Nowadays, So many freshers want to become a full-stack developers and want to jump into this field and In this post, I’ve shared my journey. Hope my journey will inspire you in your career.

## Starting of journey

My journey started in 12th standard. I was curious to gain knowledge and I like to create websites using pure HTML and CSS from scratch without using any 3rd party service.

I don’t prefer any dependency on other platforms like NoCode website builder (WordPress, Wix etc..) or anything else as much as I can.

> Warning: In these platforms we can’t get what we want from a design perspective I can customize my designs using CSS or tailwindcss.

Then, I learned JavaScript basic concepts from [Code With Harry](https://www.youtube.com/@CodeWithHarry) and [Yahoo Baba](https://www.youtube.com/@YahooBaba) youtube channels. I learned basic concepts of javascript.

## Project development
> [Here](https://github.com/abhidadhaniya23/Portfolio-Website/tree/master/public/projects), you can find those beginner-level projects that I’ve developed.

Then, I developed so many projects in HTML, CSS and JavaScript. Here’s the [GitHub Repository](https://github.com/abhidadhaniya23/Portfolio-Website) that might be helpful for you.

> Note: Heroku is no longer free to deploy backend apps and You can’t visit that portfolio I apologize for it.

After developing only front-end projects, I was getting bored and then I switched to the backend and choose [Node.js](https://nodejs.org/en/) and [Express.js](https://expressjs.com/) to learn.

I’ve also implemented some projects in [EJS](https://ejs.co/) which is a template engine in JavaScript.

> Tip: I don’t recommend you learn EJS template methods which are not useful nowadays because of React.js (we can create components).

After that, I learned database concepts in [MongoDB](https://www.mongodb.com/) and then I learned about [Mongoose Package](https://mongoosejs.com/) which helps to connect MongoDB to Node.js and Express.js server applications.

## Close to becoming Full stack developer

I was only one step away to become a full stack developer and then I’d learned [React.js](https://reactjs.org/) which is in demand nowadays and then I became MERN Stack Developer.

![https://www.bigscal.com/wp-content/uploads/2022/09/Features-of-Mern-stack-development-services-You-Should-Know.png](https://www.bigscal.com/wp-content/uploads/2022/09/Features-of-Mern-stack-development-services-You-Should-Know.png)

> Tip: Here’s the [guide to learning react.js](https://blogs.abhidadhaniya.com/post/guide-to-learn-react-js)

One thing is missing in React.js for front-end applications and is SEO (Search Engine Optimization).

React is a client-side rendering technology and that’s why react.js has so many cons and one of the cons is SEO.

Then, [Next.js](https://nextjs.org/) was becoming popular in the market and I jumped into it. Next.js has some built-in functions for SEO and next.js is a powerful framework of React.js. Next.js has some amazing concepts like SSR (Server side rendering), SSG (Static site generation) etc.

![https://miro.medium.com/max/1200/1*1zgWFU3ZIYbmhlCUwiMmLw.png](https://miro.medium.com/max/1200/1*1zgWFU3ZIYbmhlCUwiMmLw.png)

## Conclusion

I had so many dreams of building something big with the help of technology and that’s why I’ve started my journey as a full-stack developer.

In this post, I've share my journey that might be inspire to freshers.

3 Posts found for Self Growth

How I Automate Social Media Page using Web Scrapping, Google sheets and Figma

How We've started Gigaweb Company

Here’s how I Master Full Stack Development

Want to build brand website?

3 Posts found for Self Growth

How I Automate Social Media Page using Web Scrapping, Google sheets and Figma

How We've started Gigaweb Company

Here’s how I Master Full Stack Development

Get the latest updates

Want to build brand website?