Guide to learn react.js

Story of Gigaweb

Abhi's journey

Web scraping for social media content

gigaresources

Xlinks pro

Foodie VVN

Publish website from github

Flow Launcher

React.js

MERN Stack

Social Media

Guide

Product

Hosting

Productivity

Self Growth

Gigaweb

Github

Development

Project

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

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

As a digital creator, designer, or developer, finding the right tools can be the key to success. Whether you're looking for inspiration, productivity hacks, or cutting-edge technology, having the right resources at your fingertips can help you achieve your goals.

## What GigaResources is?

That's why we're excited to introduce [GigaResources](https://www.gigaresources.xyz/), a comprehensive tool that has been built by [Gigaweb](https://www.gigaweb.in/). GigaResources is an all-in-one resource that offers a vast collection of tools for digital creators, designers, and developers. With GigaResources, you can search for any tools and categories from the given categories at the left sidebar, making it easier for you to find what you need.

## Technologies to build

We built GigaResources using next.js and server-side rendering techniques, which means that the website is lightning-fast and responsive, giving you a seamless experience every time you visit. With its intuitive design and easy-to-use interface, GigaResources is the perfect tool for anyone looking to stay up-to-date on the latest tools and resources in the digital space.

## Newsletter

In addition to the website, we also run a weekly newsletter that shares the latest and greatest tools and resources with our subscribers. Each week, we curate a list of the most valuable and interesting tools, tips, and resources to help you stay on top of your game. By subscribing to our newsletter, you'll be the first to know about the latest and greatest tools and resources that can help you take your digital creations to the next level.

## Variety of tools

At GigaResources, we are committed to making sure that our users have access to the best tools and resources available. If there is a tool that you need that isn't currently listed on our website, you can request it to be added to our website. Our team of experts is always on the lookout for new and innovative tools to add to our collection.

At [GigaResources](https://www.gigaresources.xyz/), we have organized our collection of tools and resources into several categories, including:

1.  Design Tools: This category includes tools for graphic design, UI/UX design, and prototyping. Some popular tools in this category include Adobe Creative Suite, Sketch, and Figma.

2.  Development Tools: This category includes tools for front-end and back-end development, including code editors, version control systems, and testing frameworks. Some popular tools in this category include Visual Studio Code, GitHub, and Selenium.

3.  No Code Website Builders: This category includes tools that allow you to build websites and web applications without writing any code. Some popular tools in this category include Webflow, Bubble, and Carrd.

4.  Mockup Tools: This category includes tools for creating high-fidelity mockups and prototypes of websites and applications. Some popular tools in this category include InVision, Balsamiq, and Marvel.

5.  Icons: This category includes tools for finding and creating icons for use in your designs and websites. Some popular tools in this category include IconFinder, Flaticon, and Font Awesome.

6.  Illustrations: This category includes tools for finding and creating illustrations for use in your designs and websites. Some popular tools in this category include UnDraw, Humaaans, and ManyPixels.

These are just a few examples of the categories we have at GigaResources. We have a wide variety of tools and resources in each category, so you can find exactly what you need to bring your digital creations to life.

Finally, we'd like to ask for your help in spreading the word about [GigaResources](https://www.gigaresources.xyz/). If you find our website helpful and valuable, please take a moment to vote for us on [Product Hunt](https://www.producthunt.com/posts/gigaresources?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-gigaresources). By voting for us, you can help more people discover the power and convenience of GigaResources.

## Conclusion

[GigaResources](https://www.gigaresources.xyz/) is an all-in-one resource for digital creators, designers, and developers. With its vast collection of tools and resources, intuitive design, and lightning-fast performance, GigaResources is the perfect tool for anyone looking to stay up-to-date in the digital space. Don't forget to subscribe to our newsletter and help us spread the word by voting for us on [Product Hunt](https://www.producthunt.com/posts/gigaresources?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-gigaresources).

Manually curated collection of resources for developers, designers, and other creative professionals to help them build better products.

Revolutionize Your Design and Development Process with GigaResources

## Introduction to the content management system

Nowadays, Websites are switching from no-code website builders (WordPress, Wix etc) to the latest technology stacks like React.js, Next.js, Django, Flask etc. WordPress takes too much time to load pages.

There are many alternatives for no-code website builders like [webflow](https://webflow.com/). You can check out the [pricing plans](https://webflow.com/pricing) to develop a no-code website on this platform.

There are 2 types of possible data on the website

1.  Static Data

2.  Dynamic Data

Let's suppose, a [blog website](https://blogs.abhidadhaniya.com/) holds static data which is not gonna change frequently. We can use a content management system to manage those data without appending static content in the code repository. That's why CMS (Content management system) came into the picture.

These 3 cms platforms are becoming powerful and these are easy to integrate with javascript frameworks.

## [Sanity.io](https://sanity.io/)

![Sanity - Abhi's Blogs](https://cdn.hashnode.com/res/hashnode/image/upload/v1675932907107/c5867227-bf02-4516-ab82-468550670301.png?auto=compress,format&format=webp)

Sanity is a content management solution for a website that holds some static data in an entire website like websites of small and individual businesses, portfolio websites etc.

**Pros of sanity**

-   Sanity is a very good option to integrate with react app

-   Easy to setup and integrate

-   Sanity studio works in localhost as well as production level

-   Useful for client websites and full fill their requirements

-   The clean and beautiful user interface of sanity studio

**Cons of sanity**

-   Not so good support for rich text or you can say the content of markdown

-   Can not embed code because of no markdown support in rich text

## [Contentful](https://www.contentful.com/)

![Contentful - Abhi's Blogs](https://cdn.hashnode.com/res/hashnode/image/upload/v1675932928738/18c077cd-537b-45dc-b677-7a8a883bf995.png?auto=compress,format&format=webp)

Contentful is the best solution for static websites like my [blog](https://blogs.abhidadhaniya.com/) website. I like contentful because of its simplicity and the relationship between various collections models.

**Pros of Contentful**

-   Simplicity and clean user interface

-   Easy to connect SDK (Software development kit) and client configuration

-   Works on only contentful platform (Means you have to manage content on their web app)

-   GraphQL API support

-   CDN Support

-   Image upload support

-   Markdown support in the rich text editor

-   Good for blogs content management

**Cons of Contentful**

-   Not supported on localhost

## [Strapi](https://strapi.io/)

![Strapi - Abhi's Blogs](https://cdn.hashnode.com/res/hashnode/image/upload/v1675932922179/ea6db9e5-913d-43d6-a570-dfec29f94c5c.png?auto=compress,format&format=webp)

Strapi is the best content management system for API development. Strapi is easy to use and set up and more time-consuming while working with a data model for backend development. Strapi is built for API development purposes

**Pros of Strapi**

-   The best solution to powerup the backend servers

-   Strapi is an Open-source project ([GitHub Repository](https://github.com/strapi/strapi))

**Cons of Strapi**

-   A little bit tough to deploy the Strapi backend

-   Can not deploy freely

You can compare pricing plans for all of these cms at here. [Sanity](https://www.sanity.io/pricing), [Contentful](https://www.contentful.com/pricing/), [Strapi](https://strapi.io/pricing-self-hosted).

## Conclusion

We can't compare all cms with each other. All content management systems had been made for some special purpose to solve some problems in real-world applications. Strapi is built for API development. Sanity is for website content management and Contentful is (Good for blog applications) for both but only accessible from its web app.

CMS is becoming a good options to manage content in websites do check it out the differences among these powerful platforms.

Powerful content management systems - Sanity vs Contentful vs Strapi

## What is the Flow Launcher?

Flow Launcher is open-source software. Here's the Website and GitHub provided.

Here's the [website](https://flowlauncher.com/), [GitHub repository](https://github.com/Flow-Launcher/Flow.Launcher) and you can [download the software](https://github.com/Flow-Launcher/Flow.Launcher/releases/download/v1.9.3/Flow-Launcher-Setup.exe).

Using Flow Launcher you can search anything from your local files and folders, Google searches, System settings and many more by just pressing Alt + Space.

![](https://user-images.githubusercontent.com/6903107/207167068-2196d2a3-2caa-4856-958b-a780fbda95c6.gif)

Flow Launcher has its plugin store. You can install some useful plugins from it. Follow the below process to install 3rd party plugins.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682527418672/1fc99deb-768c-4678-acb5-cf183c182b97.png)

In this setting of Flow Launcher, You'll see some basic modules on the left-hand side like General, Plugins, Plugin store, Theme etc.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1682527537345/7ac8a02a-4bbb-4cbe-acbd-44267f35849a.png)

From the plugin store, you can install additional plugins which will useful for you. In the theme section, You can customize your search bar theme.

In the Plugins section, you can customize your specific plugin shortcut key. You can try it by yourself.

![Image](https://pbs.twimg.com/media/FT6GAHuUsAAUICW?format=png&name=medium)

Here are 15 tricks and tips to use flow launcher and increase productivity

1.  Calculator

2.  Currency converter

3.  Browser bookmarks

4.  Clipboard history

5.  Shell commands

6.  Find your network IP

7.  Plugin Manager

8.  Manage TODO Tasks

9.  Search URL

10.  Kill process

11.  Local files and folder search

12.  Google searches

13.  YouTube, Twitter, Wikipedia and many more searches.

14.  Notion workspace search

15.  VS code workspaces

16.  GitHub quick launcher

17.  Google search plus

18.  Web searches

## Calculator

You can simply search numbers and start your calculation.

![Image](https://pbs.twimg.com/media/FT6F_wVUYAElLMo?format=png&name=900x900)

## Currency converter

You can add your shortcut like cc as a currency converter. Then, You can search like this syntax

```
<shortcut> {number} <1st currency> <2nd currency>
```

![Image](https://pbs.twimg.com/media/FT6GAV_UYAAMErF?format=png&name=900x900)

## Browser bookmarks

After the shortcut key like `b` stands for bookmarks, then you can search for any bookmark And it'll pop up some results from your browser bookmarks.

![Image](https://pbs.twimg.com/media/FT6GAw_UcAAWcte?format=png&name=900x900)

## Clipboard History

Simply by pressing ch (clipboard history), you can show your recently copied content.

![Image](https://pbs.twimg.com/media/FT6GBLcUYAAUmUT?format=png&name=900x900)

## Shell Commands

By just pressing `>` You can execute your command prompt commands. Also, you can open this shell execution by pressing "Windows + R".

![Image](https://pbs.twimg.com/media/FT6GBkuVsAEynrs?format=png&name=900x900)

## Find your network IP Address

I've set the IP shortcut in the general setting of the Flow Launcher. After pressing the IP, I can see my IP Address with the connected network.

![Image](https://pbs.twimg.com/media/FT6GB9eUYAEODCP?format=png&name=small)

## Plugin indicator

By pressing `PM` you can install, uninstall and update any plugin.

![Image](https://pbs.twimg.com/media/FT6GMiFaAAAEsJp?format=png&name=900x900)

## Manage Tasks

You can manage your to-do list inside the Flow Launcher.

![Image](https://pbs.twimg.com/media/FT6GgAgakAE0SVd?format=png&name=900x900)

## Search URL

You can search URLs by pasting them in the search bar.

![Image](https://pbs.twimg.com/media/FT6G1IraUAAT9H6?format=png&name=900x900)

## Kill Process

You can kill processes by `kill` keywords.

## Search files and folders

You can directly search a file or folder name in the search bar.

![Image](https://pbs.twimg.com/media/FT6SPBGUsAA-wyY?format=png&name=900x900)

## Google Searches

If flow launcher doesn't find any search query from your local files, folders or system setting or somewhere else, then it'll show an option to search that in Google.

![Image](https://pbs.twimg.com/media/FT6SPbYVIAArG2S?format=png&name=900x900)

## Search YouTube, GitHub, and Wikipedia

There is a popular website to direct search by typing keywords of that website. → In the plugin section of the Flow Launcher setting, you can customize it according to your need and also you can add your own.

![Image](https://pbs.twimg.com/media/FT6SQCIUAAAAXK0?format=png&name=large)

## Notion workspace search

Using the Flow Launcher, you can directly search from your notion workspaces. → To do that, you have to generate an access token of your account from the integration of your app. Create a new integration token from [here](https://notion.so/my-integrations).

After generating an access token, You have to add in the plugin of notion. Add your notion and set a keyword like "n" or anything else that you want to set. Don't forget to share your notion workspace page or access to created tokens like the below picture.

![Image](https://pbs.twimg.com/media/FT6SQ1uVIAIjhk2?format=png&name=large)

![Image](https://pbs.twimg.com/media/FT6SRC3UEAY1GcH?format=png&name=small)

## Open VS Code Workspaces

By simply pressing `/` or default : `{` You can search your last opened workspaces. → I've set `/` to search workspace of vs code. You can customize yours.

![Image](https://pbs.twimg.com/media/FT6SRZmUEAAHyoA?format=png&name=900x900)

Flow launcher is similar to microsoft power toys and this helps to make you more productive read more.

Boost Your Productivity with These 15 Flow Launcher Hacks

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... 

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.

Here’s how I Master Full Stack Development

## Problem statement

Currently, I’m pursuing computer engineering in Vidhyanagar, Anand. In our vvn(vidhyanagar), There’s a problem for students while in search of food to eat at noon and night.

Students like me, wasting their around 1 hour deciding what to eat in food, We’ve options but still can’t decide what to eat.

> Having too many options create confusion.

### Food options

-   Mug pulav (One of the famous food items in vvn)

-   Gujarati dish at a fixed price

-   Other fast foods

> Note: [Foodie VVN](https://www.foodievvn.com/) is a product by [Gigaweb](https://www.gigaweb.in/)

Here’s the post about Gigaweb.

## The solution that we’ve founded

We’ve developed a web app that provides restaurants, cafes, lounges and tiffin services. Especially this will help those students who are new in vvn. In this web app, we also provide a food menu which will be updated by restaurant owners.

### Functionalities

-   Searching functions

-   [Filter restaurants](https://www.foodievvn.com/category/restaurant) by category - [Cafe](https://www.foodievvn.com/category/cafe), [Lounges](https://www.foodievvn.com/category/lounge), and [Tiffin services](https://www.foodievvn.com/category/tiffin-service)

-   Filter restaurants by food - [Gujarati](https://www.foodievvn.com/food/gujarati), [Punjabi](https://www.foodievvn.com/food/punjabi), [Chinese](https://www.foodievvn.com/food/chinese), [South Indian](https://www.foodievvn.com/food/south-indian), and [Fast food](https://www.foodievvn.com/food/fast-food)

-   Owner right to update food menu

### Features

-   Secure and fast server connectivity

-   Install as a mobile application

-   Clean and eye catchy user interface

-   Smooth user experience

-   User-friendly and responsive

## Add restaurants functions

Any user or restaurant owner can submit restaurant data and once we verify it from our admin panel, It will publicly available.

## Market survey

All lounges write daily food on board at their place. What happens if we bring those data in our foodie vvn app. It saves up to 1 hour for students.

We’ll not only list out lounges but we are including tiffin services as well. So that owners of tiffin services don’t need to share the food menu with students every day anymore.

We’ve analysed the market by visiting the restaurants in vidhyanagar and this application will be helpful for them again it’s a useful platform to publicity and list out their restaurant.

## About Foodievvn Web app

### Used technologies

-   [React.js](https://reactjs.org/) for frontend

-   [Firebase](https://firebase.google.com/) for server and database

-   [Progressive web apps](https://web.dev/progressive-web-apps/) (PWA) technology to convert web app in to mobile application

## Marketing

We’ve created awesome posts for social media marketing, especially for an Instagram post here is the post that we’ve shared.

We’ve created an account for foodie vvn on Instagram where we will publish some useful content which will be beneficial for students.

Follow [Foodie VVN](https://www.instagram.com/foodievvn/) for further updates on Instagram.

## Conclusion

Foodie vvn is a good option for students to save up to 1 hour daily to decide what to eat every day.

In this post, I've described a problem and depth solution in vidhyanagar using web app technologies.

Here's How We solve a daily problem for students

> Warning: This [xlinks.pro](https://www.xlinks.pro/) is not working right now because of I've hosted this web app in heroku and heroku is no more free to deploy backend apps.

Recently, I've build a platform [xlinks.pro](https://www.xlinks.pro/) to link all social media links together. I've used MERN Stack technology to develop this full stack application. I've implemented CRUD operations in REST Api. If you don't know about CRUD operations, Don't worry, I'm here to explain.

```
C - Create
R - Read
U - Update
D - Delete
```

It is the kind of database (MongoDB) operations in backend with the REST Api.

## Why I build this MERN Stack Application?

[Me](https://twitter.com/AbhiDadhaniya3) and my developer friend [Rohan K.](https://twitter.com/rohan_jpeg) were working on a large scale project where I was working on backend authentication and all kind of stuffs like that. When, I was dealing with google signin, I don't know that how can I deal with google login and even I also don't know that Can I build that functionality using client ([React](https://reactjs.org/)) or backend (Node.Js & Express.Js). ![xlinks.pro](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7o6zu7847lm78fgy95ek.jpg) For trying purpose, I started that functionality to implement with [passport.js](https://www.passportjs.org/) which is a popular library for authorization in Javascript. Passport.Js has so many strategies to authenticate user. Also they've strategies for third party authentication.

> Tip: Here is the difference between [authorization and authentication](https://www.onelogin.com/learn/authentication-vs-authorization).

After dealing with passport.js with Node.Js and Express.Js, I feel tired and hard way to implement with google login. Then I've tried to find the answer : to implement google signin using react package and I founded packages to integrate google signin with React.Js. There are 2 popular packages to integrate with google signin.

1.  [react-google-login](https://www.npmjs.com/package/react-google-login)
2.  [react-oauth/google](https://www.npmjs.com/package/@react-oauth/google)

Both are good packages to integrate signin functionality in react application. But I was facing some problems while installing 1st react-google-login package where it was showing that react-google-login doesn't support react > 18. That's why I was facing some problems in build process of deployment and I couldn't found any solutions to fix these npm errors and finally at the end, I decreased versions of react, react-dom and react-scripts and I fixed all errors of my application.

## Features of this MERN Stack application

-   Google login function on client side
-   Beautiful UI & UX using Tailwindcss

### Dependencies

#### Client side

-   Toastify
-   React-google-login
-   Axios
-   React icons
-   React meta tags
-   React share : to share in twitter
-   Tailwindcss, Autoprefixer, Postcss

#### Server side

-   Cors
-   Dot env
-   Express
-   Mongoose

## Purpose to develop this application

-   To implement CRUD operations in Api.
-   To create REST Api.
-   To implement signin functionality - integrated with google

## Quick tips for terminal while installing npm packages

-   `ctrl + c` to break the terminal processes.

-   `--force` to install any packages forcessfully.

-   To delete file or folder In Linux terminal (or git)

```
rm -rf <filename or foldername>
```

## About xlinks.pro

First of all, user have to [singin in with google](https://www.xlinks.pro/signin) in this [application](https://www.xlinks.pro/). After signin, User can go to dashboard and create their profile by filling their social media links data in a form and then When user click on update profile, This application takes little bit time to add userdata in database. Then, user can share their profile in twitter where I've used [react-share](https://www.npmjs.com/package/react-share) npm package. (where we can integrate with all social media sharing links.)

> Tip: I used [toastify](https://www.npmjs.com/package/react-toastify) ([official website](https://fkhadra.github.io/react-toastify/introduction/)) to give better ui and ux in xlinks.pro

## Conclusion

Thanks for reading this blog. Hope you understood about [xlinks.pro](https://xlinks.pro/) Don't forget to create your profile in xlinks and add your profile's link your all social media account.

xLinks is a MERN Stack web app to create links for social media bio.

xLinks pro - Clone of Bio.link

[React](https://reactjs.org/) is an open source front-end javascript library to build web application and websites. React is build by [Facebook](https://facebook.com/) in may 2013.

There are so many resources to learn react.js but here, I've shared my journey about how I learned react.js after learning javascript. Before to learn react.js, You've to learn basic javascript concepts.

## List of concepts to learn before react

-   Function Declarations and Arrow Functions
-   Template Literals
-   Short Conditionals
-   Three Array Methods: `.map()`, `.filter()`, `.reduce()`

Warning: These array methods are very useful while implementing data populating concepts where you'll fetch data from an API to your front-end interface. very useful while implementing data populating.

-   Object Tricks: Property Shorthand, Destructuring, Spread Operator
-   Promises + Async/Await Syntax
-   ES Modules + Import / Export syntax

Here's the [blog post](https://www.freecodecamp.org/news/javascript-skills-you-need-for-react-practical-examples/) to refer all the things and I've list out above concepts from this article.

## Learning perspectives

There are 2 learning point of views by my side.

1.  Learn concepts by doing projects.
2.  Learn concepts by making notes for those concepts.

Personally, I prefer 1st aspect to learn any technology. Again, there's nothing is wrong with 2nd point of view. It's also a good way to learn concepts. But 2nd way is better when if we are learning any particular programming language.

### Here's, Why I prefer 1st way to learn react.js

I've noticed one thing while learning react.js or learning any framework or library implementation where every youtuber or anyone who is teaching react.js, there are directly implementing concepts of that library or framework in any project and again trust me, It's the best way to learn framework.

Tip: The best way to learn any framework is from it's own documentation.

## Where We've to learn React.js

So, Finally came to the point, I wasn't following any particular course from youtube or udemy. I switched to many courses and tutorials and finally I've realized the one thing, which is to learn react.js by doing projects and implementing concepts in my projects.

## Personal advice to learn React.js

So, my personal advice to learn react.js is to not stick to any one course or tutorial. The best way to learn react.js is to explore blogs which is written by developers but for that you need to get an index or kind of [roadmap of react.js](https://github.com/adam-golab/react-developer-roadmap)

So, first explore react.js road map [(github repository)](https://github.com/adam-golab/react-developer-roadmap) and then go with the flow. You can also follow youtube videos for any specific concept or a topic.

### Why I prefer online tutorials over books?

React.js versions update on daily bases. In current version of `react@18.2.0` There are top updates and it [changes](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) some code basis of index root files. In this versions they've [updated to server side rendering apis](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-server-rendering-apis). So, the point is when you're learning from books, it can't be update but online tutorials can be. That's why, I prefer to learn from online resources.

## Creating animations with react.js

There's one of the best library to create animations with react.js is called [Framer Motion](https://www.framer.com/motion/).

## React.js examples

Here, I'm mentioning the best websites for react examples

-   [ReactJs Examples](https://reactjsexample.com/)
-   [FreeCodeCamp Tags](https://www.freecodecamp.org/news/tag/reactjs/)

[I](https://www.abhidadhaniya.com/) and my developer friend [Rohan](https://www.rohankiratsata.xyz/) have created free resources to master full stack web development by using this [free resources](https://web-dev-resources.notion.site/web-dev-resources/Web-Development-Resources-be1207bcc32e434481c1ce6e90756964).

Eager to learn react.js? But don't know how and where to start?

Guide to learn React.js

There are lots of hosting services available to publish websites. Github is a free hosting service provider. You can publish your front-end website using github pages. Here, I will explain you how to publish your github website for free in easy steps.

Before you host your website on github first of all you have to learn about git. Git is a open source version control system to track your code history and changes. Git is created by Linus Torvalds (creator of linux).

You can upload your codes in github using git terminal or any other graphical user interface like sublime merge, Github desktop and also you can use vscode to track your code using git. Here is the blog post which is written by me on git.

If you feels hard to remember all git commands then you should use all commands cheat sheet [PDF](https://education.github.com/git-cheat-sheet-education.pdf).

## How to upload website code on github

### Upload files using git

First of all you need to create an account on github. So if you don't have any github account then you need to create it right now. Now, you need to create a repository by clicking on + icon which is shown in below picture.

![hello](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRI7_O92CTZznLf0MDTVh3Y0P2npYc50rs3GQ&usqp=CAU)

Github will ask you about repository name and visibility of repository.

First of all let's set repository name. You need to strictly follow this rules to publish website from github. Your repository name must be unique and follow this sequence **`name.github.io`** Example : if your project name is **color-game** then you should set repository name `color-game.github.io`

You have to choose unique name otherwise github will not allow you to create repository. Once you create your repository and published your code in that repository then your URL of website is like `https://<username>/<project-name>/github.io/`

Once you pass and select the name of your repository then you have to choose **public repository** insted of private repository because when you want to publish your website you have to set your code as public repository.

![enter image description here](https://developers.sap.com/tutorials/webide-github-create-git-repo/_jcr_content.github-proxy.1563441917.file/p2_4.png)

Now, click on create repository and your repository will be created. Once you will create repository, you will able to see below picture.

![enter image description here](https://curriculum-content.s3.amazonaws.com/web-development/enough-git-for-learn-co/github_quick_setup.png)

Now, you have to click on marked copy button and it will copy the ssh URL of your repository. This URL called your remote repository URL. You have to open git bash by clicking right click in your website code folder. Make sure you are inside your code folder and you have to keep **`` `index.html` ``** outside any folder **(not from this folder)**.

![enter image description here](https://i.stack.imgur.com/7BI04.png)

> Before we use git commands make sure you have already set ssh key of your computer in github.

Now, you have to use basic commands of git. If you good at git commands then not any problem but if you don't know about basic git commands then first you have to learn all those commands.

Here, I will show some basic commands to upload files and folder to remote repository (GitHub Repository). This is called a local repository.

First of all we need to initialize repository using

```
git init
```

After initializing repository, we have to stage files and folders using

```
git add .
```

After staging all files and folder, we have to commit files from staging area. So that git can understand we have finally commit changes.

```
git commit -m "initial commit"
```

In inverted commas you can write any message about what you have change in code.

after commit we have to push our changes or files & Folder to local repository.

But, before we use the push command we need to add that remote URL to git so that out git can understand about where we want to push our files (at which location).

To add remote HTTP URL instead of SSH, we need to run this command

```
git remote add origin <remote url>
```

Don't forget to replace your remote repository url in above command like

```
git remote add origin https://github.com/abhidadhaniya23/demo.git
```

Once we add remote origin now we have to use push command to push all data on out github repository.

```
git push -u origin master
```

Once we don't this all process then we able to see our files and folder on github repository. If it's now showing your files and folder then you have to refresh your repository page.

Once again, make sure you keep `` `index.html` `` outside the folder so github pages can easily check `` `index.html` `` file to publish our website.

Now, you have to go repository setting and go to github pages. If you don't able to find github pages you can search github pages.

![enter image description here](https://i.stack.imgur.com/4upKT.png)

In github pages you have to select master branch. After selecting master branch also you have to mark below option to get secure connection in your website.

![enter image description here](https://docs.github.com/assets/images/help/pages/enforce-https-checkbox.png)

Mark this Enforce HTTPS to get secure connection for your website.

If you want to add any custom domain then you can add that also in custom domain but for now, we can keep it simple and default pages link.

Now, click on save button and it will show you website is publishing at **`<website-link>`**.

> Warning: When you click on that link you will see 404 not found error but don't worry github will generate your website page shortly. (around 20 - 25 min OR maximum 2 - 3 hours).

If you will not able see your published website you probably made any mistake.

## Conclusion

We discussed about how we can publish our front-end website using github pages. Github is a free hosting service provider by microsoft. We don't need to purchase money to host code of our website and we can easily host our website in github completely for free. I think it's the best platform to host front-end websites.

Publish frontend website using github as a free hosting solution

Abhi's Blogs

Recently Posted

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

Revolutionize Your Design and Development Process with GigaResources

Powerful content management systems - Sanity vs Contentful vs Strapi

Boost Your Productivity with These 15 Flow Launcher Hacks

How We've started Gigaweb Company

Here’s how I Master Full Stack Development

Here's How We solve a daily problem for students

xLinks pro - Clone of Bio.link

Guide to learn React.js

Publish your first website using github pages

Want to build brand website?

Abhi's Blogs

Recently Posted

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

Revolutionize Your Design and Development Process with GigaResources

Powerful content management systems - Sanity vs Contentful vs Strapi

Boost Your Productivity with These 15 Flow Launcher Hacks

How We've started Gigaweb Company

Here’s how I Master Full Stack Development

Here's How We solve a daily problem for students

xLinks pro - Clone of Bio.link

Guide to learn React.js

Publish your first website using github pages

Get the latest updates

Want to build brand website?