DEV Community: Ashutosh Dash

Social login OAuth with LinkedIn

Ashutosh Dash — Sun, 24 Jul 2022 17:49:35 +0000

With LinkedIn's user base expanding, an increasing number of software-based businesses will seek to include Linkedin as a social login to increase user registration. It will draw an increasing number of customers to the business' service.

Here is a user-friendly tutorial for developers on how to integrate LinkedIn OAuth into your project.

1. Set LinkedIn Developer Account

Go to https://developer.linkedin.com/ and click on Create React App

Before filling out the form make sure you have a company page and you have proper permission to use that page in your app because the app will be verified by the Page Admin.
Fill all the details and click on the Create App in the bottom right.

2. Verify your app

After filling up the form you will be redirected to your app dashboard which looks like this:

Go to the Settings section and click on the Verify button.

A pop-up will appear which will ask you to Generate URL which will give you a link which is needed to be sent to your Page Admin.

When the page admin will open this link, the page will appear as below and the Page Admin will need to click on Verify.

Now the app dashboard will look like this with the date of verification.

3. Add LinkedIn Sign service to your service

Now in this step, you need to go to the Products section and click on the card which says Sign In with LinkedIn

After agreeing to the Terms and Service, the card will be shown under the Added Products on the same page

4. Create auth token

Now we need to create an access token to be able to integrate it into your login/sign-up screen.
So now you need to go to the OAuth 2.0 tools page on the right side section of Auth.

And click on the Create Token button.

Now a page will show where you need to select scopes. Make sure to check r_emailaddress and r_liteprofile and then check the confirmation box and select the Request access token.

And now a sample login box will appear where you have to select the Allow button.

After that, you will have your access token which we will be going to test out in postman in the next step.

5. Test Access Token from Postman

This is the final step of this tutorial.
First, copy the Access Token and open the Postman app.
Past https://api.linkedin.com/v2/me in the request URL field and set the method as GET. (You can learn more about the LinkedIn Sign-In Methods here)
In the Authorization tab, set the authorization type as OAuth 2.0 paste the access token in the relevant field and click on the Send button next to the request URL field.

If you are getting your first name and last name that means your access token is working properly.

I appreciate you spending the time, very much. I wish you had more grasp of the LinkedIn sign-in process after reading this post. I highly recommend reading over the official documentation here.

Feel free to correct my mistakes and let me know how to improve them. You can connect with me on LinkedIn and Twitter.

What is Context API in React and how to use it?

Ashutosh Dash — Fri, 29 Apr 2022 11:07:48 +0000

N.B. This article requires you to have little knowledge of prop drilling and the issue associated with them.

Context API acts as a container for the global state variables which is helpful when you want to avoid prop drilling and pass data from one component to another without the need for passing props.

Steps to use Context API

Step 1: Create Context

Step 2: Use Context

And that's it. You have successfully implemented Context API.

Overall Code

Final Output:

Thanks for reading this article. I hope it was helpful. Feel free to let me know how I could improve it.
You can connect with me on LinkedIn and Twitter.

Frontend Internship Interview Experience

Ashutosh Dash — Sun, 27 Mar 2022 03:53:54 +0000

Long story short, I applied to XYZ company through Internshala for a frontend developer position.

1st step was to complete a task in which I was asked to make a basic hospital management system. Source code here and live preview here.
Although I submitted my project doing half of the work still the HR scheduled an HR Technical Round with their team lead. The following questions were asked and I'll try my best to answer those here.

Q1. Tell me about yourself apart from your skill sets.

Ans: My name is Ashutosh Dash and I'm from Balasore, Odisha. Currently, I'm in my 1st year of MCA at the Odisha University of Technology and Research. My hobbies include books reading and listening to songs. My strength includes my ability to work as part of a team. During hackathons, I always lead my team and out of 5 hackathons my team has secured a position in the top 10 or as a runner up. Also, I have volunteered as a frontend developer for GirlScript Bhubaneswar, where we built a homepage for them.

Q2. What are the advantages of react?

Ans: 1. Reusable Components
2. Easier to write code in JSX.
3. Ability to create SPA(Single Page Application)
4. SEO friendly (I don't why! Please mention in comments if you know)
5. Virtual DOM helps in smooth and faster performance.

Q3. Angular vs React

Ans: 1. Angular is a framework built using Typescript while React is a library built using JSX.
2. Angular is used to create complex projects while React is used to build UI components.
3. The learning curve for Angular is more than React.

Q4. What are the keys in react?

Ans: A key helps in uniquely identifying a list item or giving the elements a stable identity

Q5. Differences between Functional Components and Class Components in React

Ans: I'm not sure about its answered but I guess functional components codes are much shorter to write, more straightforward and have fewer complexities for a larger product.

Q6. What is virtual DOM? How react render virtual dom?

Ans: A virtual DOM is like a virtual representation of actual DOM UI kept in memory and synced with actual DOM UI by ReactDOM. Updating virtual DOM is faster than actual DOM.
React compares the actual DOM with the changes in the virtual one stored in memory. Once it sees which component is updated it then replaces the actual component with the changed one.

Q7. What is Redux?

Ans: Redux is a centralized state container that holds the value of the state.

Q8. What is prop drilling?

Ans: A little long explanation, so linking this video.

Q9. What are states?

Ans: A state is a property storage area belonging to the component. Every time a state is updated, the component is re-rendered.

Q10. What is JWT?

Ans: JSON Web Token(JWT) is used for authentication protocol on the web. It is based on the exchange of JSON files for authentication and authorization.

Thank you for taking your time to read this article. Please let me know if you want me to improve something.
You can connect with me on LinkedIn and Twitter.
Want to discuss an amazing opportunity, you can visit my portfolio if I'm a good fit for you.

Creating your own snippet in VS Code within 1 minute

Ashutosh Dash — Sun, 23 Jan 2022 04:25:29 +0000

You write the same basic boiler plate code every-time you create a new file and wish if I could use some snippet to write those. So in this short article, I'll tell you how you can create your own snippet in VS Code within 1 minute, which will save your lot of time and effort. For the purpose of demo I'll show how you can create code snippet for C++.

Step 1: Open your VS Code and click on the settings button in the bottom-left corner.

Step 2: Now click on `User Snippets`.

Step 3: You’ll now see a dropdown at the top for a list of various files in JSON format. Now search for `C++` or you can create of your own,

Step 4: Delete everything for the file and write the following:

"cpp snippet": {
        "prefix": "cpp",
        "body": [
            "#include<iostream>",
            "using namespace std;",
            "int main(){",
            "    $0", //$0 for where you want your cursor to be
            "    return 0;",
            "}"
        ],
        "description": "to produce the short snippet for cpp"
    }

Your final code should look like this:

Now save this file.
Create a new C++ file and write cpp, you will have like this on your screen and press enter:

Here,

prefix defines how you want to call your code snippet.
body defines what should be the content of code.
description gives a short bio about the snippet

Kudos, you have finally created your own code snippet.

If you have come this far, hope you like my article.
You can connect with me on My LinkedIn Account or follow me on Twitter or send me mail on dashashutosh1999@gmail.com.

Making Weather App using Tailwind CSS using OpenWeatherMap.org in JavaScript

Ashutosh Dash — Fri, 31 Dec 2021 17:29:12 +0000

Hey folks, in this article I'll show how you can create your own weather app using TailwindCSS using OpenWeatherMap.org in JavaScript.

1. Generating API key from OpenWeatherMap.org

Go to OpenWeatherMap.org and create your account, after all the steps you will be redirected to dashboard, in the top menu click on API Keys.

Now copy the API key and paste it here in the place of {API Key}.
https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID={API Key}
This will be our API URL.

You can read more about the API documentation here.

2. Testing the API

Open your project folder and create index.html and script.js.
Open your browser and in the search bar enter the API URL with the city name and API key. If the result is as follows that means API is working fine.

After that open up your script.js file and write following code.

Basically, we created a button, which on clicking give us the output of API URL in JSON format.

Here, we can see what the weather API offer us.

3. Generating HTML

For starters, we will create HTML file to show basic info like weather, temperature, wind Speed, humidity.

index.html

<section class="container">
        <input type="text" name="" placeholder="Search city name here..." id="city-name">
        <button id="findBtn">Find Weather</button>
        <section class="result-container">
            <p>Weather: <span id="weather-description"></span></p>
            <p>Temperature: <span id="temp"></span></p>
            <p>Wind Speed: <span id="wind-speed"></span></p>
            <p>Humdity: <span id="humidity"></span></p>
        </section>
    </section>

    <script src="script.js"></script>

Output

4. Creating the JavaScript code

The final javascript code looks like this in script.js file.

// input 
let findBtn = document.querySelector("#findBtn");
let city = document.querySelector("#city-name");

// output
let weatherDescription = document.querySelector("#weather-description");
let temp = document.querySelector("#temp")
let windSpeed = document.querySelector("#wind-speed");
let humidity = document.querySelector("#humidity");


function getWeatherAPI(){
    let apiURL = `https://api.openweathermap.org/data/2.5/weather?q=${city.value}&units=metric&APPID={API Key}`;
    fetch(apiURL)
    .then(response => response.json())
    .then((data)=> {
        weatherDescription.innerHTML = data.weather[0].description;
        temp.innerHTML = `${data.main.temp}°C`;
        windSpeed.innerHTML = `${data.wind.speed}m/s`;
        humidity.innerHTML = `${data.main.humidity}%`

    })
}

findBtn.addEventListener("click", getWeatherAPI);

5. Using Tailwind CSS

Now adding some Tailwind CSS in index.html for our app.

<body class="text-center bg-gradient-to-r from-cyan-500 to-blue-500">
    <section class="container p-8 text-center flex flex-col justify-center items-center">
        <h1 class="text-3xl font-bold p-2 m-2">Open Weather</h1>
        <p>
            <input class="border-b-4 border-b-blue-900 rounded-lg p-2 text-xl focus:outline-none" type="text" name="" placeholder="Search city name here..." id="city-name">
            <button class="border-2 border-teal-800 rounded-lg p-2 text-xl text-center transition ease-in-out delay-150 active:scale-95 bg-gradient-to-r from-emerald-500 to-teal-500 drop-shadow-md hover:drop-shadow-2xl" id="findBtn">Find Weather</button>
        </p>
        <section class="result-container p-4 m-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  gap-4">
            <div class="weather border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Weather:</p>
                <p class="font-bold" id="weather-description">_ _</p>
            </div>
            <div class="temp border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Temperature:</p>
                <p class="font-bold" id="temp">_ _</p>
            </div>
            <div class="windSpeed border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Wind Speed:</p>
                <p class="font-bold" id="wind-speed">_ _</p>
            </div>
            <div class="humidity border-2 p-4 m-4 rounded-lg backdrop-blur-md drop-shadow-xl">
                <p>Humidity:</p>
                <p class="font-bold" id="humidity">_ _</p>
            </div>
        </section>
    </section>

Output:

6. Final Project Demo

So thats it folks. This project may seem overwhelming to begineer but trust me its really easy. To newbies, try your head around JavaScript promises and fetch and play around with other free API available.

Feel free to connect with me over LinkedIn or shoot me a mail on dashashutosh1999@gmail.com

Are you a web developer from a non-engineering background?

Ashutosh Dash — Wed, 08 Sep 2021 15:18:14 +0000

Hey, If you are a web developer coming from a non-engineering background, I would like to hear your story. I would like to know how you struggled. It will inspire someone who needs hope. :)

Making 2021 your Best Year Ever

Ashutosh Dash — Fri, 01 Jan 2021 14:35:15 +0000

Hello Hackers,
First of all, I won't wish you "Happy New Year".
Celebrating the completion of revolution around a star doesn't make any sense to me but since we are citizens of Earth, we have to take some consideration.

Let's make this post one of the most productive post in DEV.
In the comments, mention:

What have you achieved in 2020 from where you were?
What are your goals in 2021?
What are you going to do to achieve that?

Let's start with me:

I was a below-average coder in python struggling to write even basic loop. Lockdown happened and I focused more on learning python. After some time, I started doing challenges in HackerRank and was able to reach a world rank of ~23k in python(BTW, here's my HackerRank Profile). Then I started web development, participated in Hackathons, got ranks, my connections grew, completed my first internship, involved in a startup, contributed in open source. Aah! Let's keep that much info for now ;P
My goal is to crack a national level exam to get into a really good college like National Institute of Technology, India, be a good Frontend Developer and grow myself as a known developer.
Perseverance, patience, consistency. Making a TODO every day. Limit my time in Social media. Make meaningful connections.

That's for me, what about you, let us know in the comments. You will never know to whom your journey is inspiring. ;P

Feel free to connect with me over LinkedIn and checkout my profile on GitHub..

Music for Coding

Ashutosh Dash — Tue, 29 Dec 2020 18:01:02 +0000

Okay, so before I start, I would confess that I don't listen to music for greater concentration, in fact listening music distracts me a lot more, but listening music keep me away from other noises which include sound from Television, someone talking on the phone etc.

So, I just thought of sharing with you my playlist. Not to mention, these are my preference so feel free to share your playlist in the comments.

Interstellar Instrumental
Ever since I came across this 1-hour long art-piece of Hans Zimmer, it's my go-to music for any important task.
Inception Instrumental
Talking about Interstellar, how can we forget to mention Inception. Another art piece by Hans Zimmer. I literally listen to the two in the loop.
Batman Trilogy Soundtrack
"Why do we fall, Bruce?"
The Score
Looking for some adrenaline booster and out of stock for Red Bull? Checkout The Score's youtube playlist and you would realise they really need some serious attention.
Some of my recomendation:
a) Stonger
b) Unstoppable
c) Born for this

These were mine preference. What are yours? Tell us in the comments.

Feel free to connect with me over LinkedIn and checkout my profile on GitHub.

Best domain for student developer?

Ashutosh Dash — Mon, 28 Dec 2020 16:32:34 +0000

Hey, I have been using Netlify as hosting service for my portfolio and other projects. (BTW, check out my portfolio here.)
But I don't like when netlify.app is added after my websites.
Can you suggest me some really good and affordable hosting services?
Also, I'm looking for a domain. Which domain would you suggest which looks professional and doesn't cost much?

Created a cool looking Basic Banking Website

Ashutosh Dash — Mon, 28 Dec 2020 15:31:48 +0000

What I built

I have created frontend of a basic banking system.
I have focused more on improving the UI.
Give it a try here.
GitHub Repo.
Feel free to give your feedback. It will help me to improve my project. :)

Additional Info

I'm looking forward to collab with creative individuals who can contribute to making the design better and improve the UX and coding stuff.
Also, if you are new to contribution, it will be great if you can contribute to improving the README.md file.

Feel free to connect with me over Linkedin here.

Website for Breast Cancer Awareness

Ashutosh Dash — Sun, 27 Dec 2020 18:37:05 +0000

What I built

Breast cancer is the 2nd most fatal cancer which needs your attention.
I have made a website for spreading awareness of breast cancer using HTML, CSS, Bootstrap and Javascript.
The site is hosted using Netlify.

Category Submission:

The site is presented in Spider Event where it ranked 7th overall and 2nd on content-wise.

App Link

Website Link

Link to Source Code

Don't forget to star the repo as it will motivate me to keep making great content.
Github Repo

Permissive License

Anyone is free to use provided you give me proper credits.

Additional Info

I'm looking forward to collab with creative individuals who can contribute to making the design better and improve the UX and coding stuff. Also, it will be great if you can contribute to improving the README.md file.

Feel free to connect with me over Linkedin here.

KDE vs GNOME

Ashutosh Dash — Sun, 27 Dec 2020 09:14:49 +0000

I'm currently using Ubuntu 20.04 with Gnome 3.36 on my laptop.
Specs: i3 7th gen, 4GB DDR4 RAM, 1TB HDD.
I heard many people saying as GNOME is bloated and I'm experiencing some performance issues.
I'm thinking of moving to KDE as it looks great and quite snappy as far I have seen in YouTube.
What are your thoughts? Is it worth shifting? Also which one should I choose between Kubuntu and KDE Neon?

DEV Community: Ashutosh Dash

Social login OAuth with LinkedIn

1. Set LinkedIn Developer Account

2. Verify your app

3. Add LinkedIn Sign service to your service

4. Create auth token

5. Test Access Token from Postman

What is Context API in React and how to use it?

Steps to use Context API

Step 1: Create Context

Step 2: Use Context

Overall Code

Frontend Internship Interview Experience

Q1. Tell me about yourself apart from your skill sets.

Q2. What are the advantages of react?

Q3. Angular vs React

Q4. What are the keys in react?

Q5. Differences between Functional Components and Class Components in React

Q6. What is virtual DOM? How react render virtual dom?

Q7. What is Redux?

Q8. What is prop drilling?

Q9. What are states?

Q10. What is JWT?

Creating your own snippet in VS Code within 1 minute

Step 1: Open your VS Code and click on the settings button in the bottom-left corner.

Step 2: Now click on User Snippets.

Step 3: You’ll now see a dropdown at the top for a list of various files in JSON format. Now search for C++ or you can create of your own,

Step 4: Delete everything for the file and write the following:

Making Weather App using Tailwind CSS using OpenWeatherMap.org in JavaScript

1. Generating API key from OpenWeatherMap.org

2. Testing the API

3. Generating HTML

4. Creating the JavaScript code

5. Using Tailwind CSS

6. Final Project Demo

Are you a web developer from a non-engineering background?

Making 2021 your Best Year Ever

Music for Coding

Best domain for student developer?

Created a cool looking Basic Banking Website

What I built

Additional Info

Website for Breast Cancer Awareness

What I built

Category Submission:

App Link

Link to Source Code

Permissive License

Additional Info

KDE vs GNOME

Step 2: Now click on `User Snippets`.

Step 3: You’ll now see a dropdown at the top for a list of various files in JSON format. Now search for `C++` or you can create of your own,