DEV Community: Pratik Bhagat

My Journey of Winning Smart India Hackathon 2022: Lessons and Tips for SIH 2023

Pratik Bhagat — Wed, 30 Aug 2023 11:33:36 +0000

Introduction

Hey there, awesome folks!

I'm Pratik, and guess what? I had a blast winning the Smart India Hackathon 2022. 🎉 But you know what's even more exciting? The fact that the SIH 2023 excitement is in the air, and so many of you have been sliding into my DMs for a slice of advice. Well, you asked, and I'm delivering – in the form of this blog post!

So, whether you're a coding newbie or a hackathon pro, let's embark on a journey together. I'll spill the beans on how my team and I won SIH, and I've got some battle-tested tips up my sleeve to help you in the 2023 edition. Ready to dive in?

Keep scrolling, and let's hack our way to success!

The Adventure Begins: Understanding SIH

The Smart India Hackathon (SIH) isn't just an event; it's a journey that starts right at your college campus and takes you on a nationwide innovation roller coaster. So, let's break it down step by step:

Internal Hackathons: It all begins within the cozy confines of your college. The SIH journey starts with internal hackathons, which can vary in structure from college to college. These hackathons are like the starting point for your SIH experience. The college SPOC will be responsible for nominating the top 35 teams as per the internal hackathon results.

Connecting with Organizations: The real fun begins as your journey progresses to the next stage. The problem statements, the very heart of SIH, are sent to their respective organizations. This is where your innovation meets real-world challenges.

The Finale Beckons: Out of the numerous national teams, only around 4 to 5 teams per problem statement are chosen. These selected teams become the crème de la crème, the contenders for the grand finale. And here's the exciting part—the finale isn't virtual. It's the time when your digital journey converges into a real-world gathering. The grand finale is held offline at various nodal centres scattered across India

Gearing Up for the Grand Finale: The teams gather, the excitement is palpable, and the energy is infectious. Your journey culminates in these grand finales, where you present your solution in person, face to face with the organizations that posed the challenges.

Picking the Problem Statement

Alright, let's spill some beans on a little secret to SIH success: finding the problem statement that clicks with your team's skills and interests is like nailing the first level of a game. It's crucial. Think about it - you wouldn't send a wizard to fight dragons without a wand, right?

Playing to Our Strengths: So, what did we do? Our chosen problem statement was a true masterpiece: "Anti-doping awareness cum sensitization through Gaming App." Ah, the world of sports, gaming, and drugs - a match made in... well, somewhere quite amusing. Who would've thought that we'd find ourselves fighting the villain of doping through the power of gaming? Now, don't get us wrong. We might not be the poster children for athleticism, but we did have a genuine interest in sports, gaming and drugs(maybe). And sure, the whole anti-doping angle sounded pretty darn important too.

So, the takeaway here? When picking your problem statement, make sure it's got a wink and a nod to your team's expertise and interests. It might not be the typical superhero backstory, but hey, it's yours. Own it, embrace it, and get ready to game-change your way through SIH!

Development Process

Alright, you've got your problem statement locked in. Now, let the coding games begin! This is where the magic happens. The golden rule? Solve, solve, solve. Dive into the problem statement into parts/sections. Understand every nook and cranny of the problem. Read it, re-read it, and then read it again. The key is to know the ins and outs of the problem statement. Think of the problem statement as your blueprint. You're the architect who takes the blueprint and transforms it into a masterpiece. Whether you're coding your way through or building using a no-code tool, the goal remains the same: solve the problem. Here's the best part: you're not tied to a single path. You're free to pick the development tools, languages, or approaches that resonate with you. It's all about playing to your strengths and using your coding superpowers to overcome the challenge.

Presentation and Pitch

Breaking it Down: Imagine telling a story, but instead of bedtime tales, you're talking about your smart idea. Your goal? Make it easy for everyone – from the judges to regular folks – to understand what you're up to.

Process: Your presentation journey kicks off with the training round, your first encounter with the evaluators. Remember, first impressions can leave a lasting mark. This round is more than just a "hello." It's your chance to show that you've grasped the problem statement and are all set to tackle it head-on over the next 36 hours. Consider this round as the place where you set the stage for your entire presentation journey. The evaluators begin forming an opinion right from here. So, make sure they understand your solution and the path you're about to tread.

Now, it's time for the real journey – three evaluation rounds await you after the training. These rounds are your proving grounds. The judges take a closer look at your solution, how it evolves, and how you navigate challenges.

Now, for a twist. Throughout the journey, keep your radar tuned to the evaluators' feedback. Surprising, right? But here's the thing: the judges' suggestions for modifications hold higher importance than even the problem statement itself. Yes, you read that right. Evaluators see potential beyond the initial pitch; they see adaptability.

After the evaluation rounds, it's the moment you've been working towards – the final demo. Imagine standing in front of a panel of experts, ready to showcase your solution. It's your time to shine.

Winning Moment

The winning moment at the Smart India Hackathon. It's when all your hard work, late nights, and brainpower pay off in the most incredible way. You took an idea, crafted it into a solution, and presented it like a pro. Winning means your creation stood out among the rest. It's like turning a dream into reality.

Even if the top spot doesn't come your way, don't let that dim your spirit. The Smart India Hackathon is more than a trophy; it's an experience of a lifetime. It's about learning, growing, and enjoying the journey. Win or not, the memories you've created during this journey are yours to keep forever. The friends you've made, the skills you've honed – they're all part of your victory story.

Advice for SIH 2023 Participants

Choose Passion Over Trend: Opt for a problem statement that aligns with your passion, not just the trend. Your enthusiasm will fuel your journey.

Embrace Collaboration: Hackathons are team efforts. Embrace diverse skill sets, communicate openly, and watch how collaboration elevates your solution.

Innovate Fearlessly: Don't be afraid to think outside the box. Innovation often springs from unconventional ideas. Dare to be different.

Practice, Practice, Practice: Presentation skills matter. Rehearse your pitch till it's smooth. Engage your audience, and make your solution relatable.

Enjoy Every Step: The journey matters as much as the destination. Relish every moment, from ideation to presentation. It's a once-in-a-lifetime experience.

Conclusion

As SIH 2023 approaches, embrace the challenges, collaborate with your team, and relish every step of the process. The friendships, lessons, and solutions you create will stay with you far beyond the final pitch. So, go ahead, code your dreams, and make your mark in the world of innovation.

Here's to your journey and the impact you're about to make! Good luck! 🚀👩‍💻👨‍💻

Drop a like if you found this post helpful :) Have questions? Feel free to DM me on Twitter.

Passwordless Authentication with WebAuthn

Pratik Bhagat — Thu, 24 Nov 2022 19:21:16 +0000

Imagine being able to log in to websites without using any password, sounds cool right?

Passwords are hard to keep track of leading us to pick weak and easy ones which make us vulnerable to phishing attacks. WebAuthn solves this problem for us with passwordless authentication.

What is WebAuthn?

WebAuthn—short for Web Authentication is part of the FIDO2 framework, which is a set of technologies that enable passwordless authentication between servers, browsers, and authenticators.

WebAuthn let users authenticate with two types of authenticators:

One is with a Roaming authenticator a physical device like a Yubikey which can be used on multiple devices. The second method is with Platform authenticators attached to a device for example MacBook’s TouchBar, and Android’s fingerprint recognition.

How WebAuthn Works?

It builds a trusted relationship between the device and the browser by creating public/private key pairs so they can communicate with each other and authenticate the user. This way, as a user, you don't need to have passwords for every site you visit, just a strong authenticator that works with WebAuthn.

The public/private key is different for each website, so one website cannot determine from the authenticator what other websites you have used it for.

The Problem

No website supports WebAuthn...Wait!? What!?

The thing is all major web applications support WebAuthn as a second-factor authentication so it's not entirely passwordless after all.

The problem behind this is inconsistency in user experience between different browsers. Every website has different ways to set up passwordless authentication which makes it confusing and hard to understand for users.

We can hope for complete passwordless authentication in future with WebAuthn as it offers user-friendly authentication.

webauthn.me

webauthn.guide

Add authentication to your React apps in minutes with Auth0

Pratik Bhagat — Tue, 30 Aug 2022 10:56:10 +0000

Intro

This blog will teach you how to add authentication to your React applications with Auth0.

Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications.

Setting up the application

Create a new react application with the command

npx create-react-app app-name

Head to the Auth0 website Sign up for a free Auth0 account and create a new Single Page Web Application and select React as the technology you will use.

Next, go to the settings of the application and under Application URIs in Allowed callback URLs, Allowed logout URLs and Allowed Web origins add https://localhost:3000

We do this because Auth0 redirects us to their website which handles all of the authentications and redirects us back to the application.

During development, it will be https://localhost:3000 and in production, you should change it to your application URL.

React app

Create a .env in the root of the directory and add two variables

REACT_APP_AUTH0_DOMAIN = {domain}

REACT_APP_AUTH0_CLIENT_ID = {Client_ID}

Copy the Domain and Client ID from the settings of the application in Auth0.

Install Auth0

Next, we have to install the Auth0 package in our application

To do that run the following command in the terminal:

npm i @auth0/auth0-react

Index.js

Open Index.js file in React application.

The first thing we need is to import Auth0Provider from the Auth0 package we installed.

import { Auth0Provider } from "@auth0/auth0-react";

Auth0Provider uses React's Context API so we will wrap our App component with Auth0Provider to
access all of its properties within our app

Auth0Provider takes a couple of parameters i.e the domain and client id so we will import the environmental variables we created before.

After all the changes your Index.js file should look something like this

// index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Auth0Provider } from "@auth0/auth0-react";
const domain = process.env.REACT_APP_AUTH0_DOMAIN;
const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Auth0Provider
    domain={domain}
    clientId={clientId}
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>
);

As you can see Auth0Provider takes in another parameter i.e the redirectUri that takes our current location so after logging in the user will be redirected to the current Url in the browser meaning our App.

Components

Next, create a components folder under the src directory in our react app. In this app, we will create two components one for the login button and the other for the logout button.

Login Button

Create a LoginButton.js component under the components directory.

Import useAuth0 hook that is provided by the Auth0 package we installed

We will use loginWithRedirect from the useAuth0 hook and we will return a login button with loginWithRedirect as the onClick event

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

export default function LoginButton() {
  const { loginWithRedirect } = useAuth0();
  return (
  <button onClick={() => loginWithRedirect()}>
  Log In
  </button>
  );
}

Import the LoginButton component in App.js

When you click this button it should redirect you to the Auth0 authentication form.

Logout Button

Create another component but this time for the logout button

This is similar to the login button the only difference is we will use logout method from the useAuth0 hook

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

export default function LogoutButton() {
  const { logout } = useAuth0();
  return (
    <button
      onClick={() => {
        logout();
      }}
    >
      Log Out
    </button>
  );
}

App.js

Import and display both Login and Logout buttons

Your App.js file should look like this

import "./App.css";
import LoginButton from "./components/LoginButton";
import LogoutButton from "./components/LogoutButton";


function App() {
  return (
    <>
      <LoginButton />
      <LogoutButton />
    </>
  );
}

export default App;

User

Now to let the user know that they are logged in will just display the user information.

To do that we will create another component User.js and display JSON user data

import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

export default function User() {
  const { user } = useAuth0();
  return <div>{JSON.stringify(user, null, 2)}</div>;
}

If the user is logged in it will display the JSON data.

Click on the login button and after logging in you should see the JSON data.

That's it for this blog. Drop a like if you found this useful :)

Feel free to connect with me https://bio.link/bhagatpratik07

Fetching Data in React

Pratik Bhagat — Tue, 23 Nov 2021 15:24:46 +0000

Introduction

This blog post will teach you how to fetch data from an external API and use it in your React apps.

Before you start reading you should be familiar with React, useState and useEffect hooks in React.

Methods of Fetching Data

We will look at the following ways to fetch data:

Using Fetch API
Using async function
Using Axios
Using custom hooks

Using Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It provides a global fetch( ) method that provides an easy, logical way to fetch resources asynchronously across the network.

We will use the fetch( ) method which takes a single argument i.e the path you want to fetch data from and it returns a promise containing a response.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

Using async function

The async function returns a promise and the await keyword makes the function wait for a response.

Here's how we can use async/await to fetch data

async function fetchData() {
      const response = await fetch(
        "https://jsonplaceholder.typicode.com/todos/3"
      );
      const data = await response.json();
      console.log(data);

Using Axios

Axios is a library that is used to fetch data and it already gives the result in JSON, so we don't have to convert it.

First, we have to install Axios with the following command:

npm install axios

To use axios in our project we have to import it into our project

import axios from "axios"

  React.useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/todos/3")
    .then((response) => (console.log(response));
  }, []);

Here we used the .get() method to make a get request to our endpoint.

Using custom hook

We will make our custom react hook to fetch data which will take a single argument that is the endpoint we want to fetch the data from.

import { useEffect } from "react";

const useFetch = (url) => {
  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      });
  }, []);
};

export default useFetch;

Like this blog if you found it helpful and connect with me on Twitter and LinkedIn

Thank you for reading ;)

Next.js Authentication with Netlify Identity

Pratik Bhagat — Tue, 27 Jul 2021 08:50:54 +0000

Introduction

Next.js is an open-source development framework built on top of Node.js enabling React-based web applications functionalities such as server-side rendering and generating static websites.

In this guide, I will show you how to add authentication to your Next.js App using Netlify Identity.

Prerequisites

Basics of Next.js

Context in React

1. Next.js App

First, create/select an app you would like to add authentication to. Deploy that app to Netlify so you can use Netlify Identity it's a service provided by Netlify to add authentication to your apps.

If you don't have an app you can download the starter code.

npx create-next-app [your_project_name] -e https://github.com/bhagatpratik07/next-js-auth-blog/tree/blog

Note: Change the name of the app before you run the command.

Run the above command in the terminal. You will get a simple next.js application with Home and About Page. We will add authentication to this app.

Installing Netlify Identity in our App

Netlify Identity is a service provided by Netlify to add authentication to our apps.

Before we code we need to install Netlify identity in our app.

npm install netlify-identity-widget

Run the above command in the terminal to install Netlify Identity.

Deploying to Netlify

Now that you have downloaded the starter code it's time to deploy it to Netlify. Head over to https://www.netlify.com/ and deploy your site. After deploying you should see something like this :

Next, click on Identity in navbar and click on Enable Identity. Now Netlify Identity is enabled in our app.

Let's Start

Create a new contexts directory at the top level of our application and inside contexts create a new file called authContext.js. Our file structure should look something like this :

Coding our authContext

Add the below code to our AuthContext

import { createContext} from "react";

export const AuthContext = createContext({
  user: null,
  login: () => {},
  logout: () => {},
  authReady: false,
});

const AuthContextProvider = ({ children }) => {
  return <AuthContext.Provider>{children}</AuthContext.Provider>;
};

export default AuthContextProvider;

First, we create our AuthContext and give it default values like user initially is set to null. We have default functions for login and logout. We have authReady state, which is a boolean it will keep track of when we have established a connection with Netlify Identity. The reason we have authReady state is that when our app runs in the browser it doesn't know if the user is logged in or not.

Until we establish connection with Netlify authReady will be false, when we do establish a connection with Netlify it will be set to true.

Also, note that we have to wrap our app (pages/_app.js) with our context as we need to access context in our entire app. NavBar and Component are now children to our Context.

// pages/_app.js

import NavBar from "../components/NavBar";
import AuthContextProvider from "../contexts/authContext";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <AuthContextProvider>
      <NavBar />
      <Component {...pageProps} />
    </AuthContextProvider>
  );
}

export default MyApp;

Update your pages/_app.js file accordingly.

Establishing connection with Netlify Identity

To establish a connection with netlify identity we will use the useEffect hook in react

// contexts/authContext

import { createContext, useState, useEffect } from "react";
import { netlifyIdentity } from "netlify-identity-widget";

export const AuthContext = createContext({
  user: null,
  login: () => {},
  logout: () => {},
  authReady: false,
});

const AuthContextProvider = ({ children }) => {
  useEffect(() => {
    netlifyIdentity.init();
  }, []);
  return <AuthContext.Provider>{children}</AuthContext.Provider>;
};

export default AuthContextProvider;

We import netlifyIdentity and inside our useEffect hook we simply need to add netlifyIdentity.init( ). All this will do is initialize connection with netlify identity.

Providing value to our App

Next, we need to provide login, logout, user values to our app.

import { createContext, useState, useEffect } from "react";
import netlifyIdentity from "netlify-identity-widget";

export const AuthContext = createContext({
  user: null,
  login: () => {},
  logout: () => {},
  authReady: false,
});

const AuthContextProvider = ({ children }) => {
  const [user, setUser] = useState(null);


  useEffect(() => {
      // on login
    netlifyIdentity.on("login", (user) => {
      setUser(user);
      netlifyIdentity.close();
    });

    // on logout
    netlifyIdentity.on("logout", (user) => {
      setUser(null);
    });


    // connect with Netlify Identity
    netlifyIdentity.init();
  }, []);

  const login = () => {
    netlifyIdentity.open();
  };


  const logout = () => {
    netlifyIdentity.logout();
  };


  const context = {
    login,
    logout,
    user,
  };


  return (
    <AuthContext.Provider value={context}>
    {children}
    </AuthContext.Provider>
  );
};

export default AuthContextProvider;

That's a lot of code...let me explain

1.Login

We create a login function in which we just use open( ) which is a built-in function of Netlify Identity. All this does is open a login/signup form. We will use this as a callback function on the login button.

2.Logout

Logout function is the same as the login function but we use logout( ) which is a built-in netlify function to log out the user.

Also, we update our useEffect and we add event listeners to log in and log out actions.

On login, the user will be set to the user from null and we close our form.

On logout, we set our user to null.

And we provide all this as context to our app.

Creating Login/Logout Buttons

Now it's time to update our navbar. Open components/navbar file in the code editor.

// components/navbar

import styles from "../styles/Home.module.css";
import Link from "next/link";
import { useContext } from "react";
import { AuthContext } from "../contexts/authContext";

const NavBar = () => {
  const { user, login, logout } = useContext(AuthContext);
  return (
    <nav className={styles.nav}>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about">
        <a>About</a>
      </Link>
      <li>{!user && <button onClick={login}>Login/Signup</button>}</li>
      <li>{user && <button onClick={logout}>Logout</button>}</li>
    </nav>
  );
};

export default NavBar;

First, we access login, logout, user values from our context using the useContext hook.

Then we create a login button which on click fires off the login function we created in our context. Same with the logout button.

We conditionally render the buttons based on if the user is logged in or not.

Now click on the login button and voila.

It will ask you for the website URL. You just have to enter the URL of the website you deployed on Netlify.

You can also add external providers such as Google, Github as login options. For that head back to Netlify and go to Site Settings -> Identity (on sidebar) and on external providers select the options you want to include.

Conclusion

First, we created authContext to globally provide user values to our Apps. We added user and log-in, logout functions (built-in Netlify Identity functions) in our Context and used them as callback functions to our Login and Logout buttons.

Thank you for reading :)

Drop a like and follow me if you found this useful 😊

Introduction to React Hooks

Pratik Bhagat — Thu, 08 Jul 2021 14:53:26 +0000

What are Hooks?

Hooks allow us to use state and lifecycle features in function components that were specific to class components before React 16.8

Benefits of React Hooks

Less Code
Easily Readable
Easier to decouple logic from UI
Performance boost with functional components

useState Hook

The first hook we will look at is the useState hook. The useState hook allows us to add state to a functional component.

Syntax: The first element is the initial state and the second one is a function that is used for updating the state.

const [count, setCount] = React.useState(0)

In the above example, we declare a variable count which holds the value 0 and setCount is the function to update the count. Executing this function re-renders the component.

Let's make a counter using the useState hook

import React, { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div>{count}</div>
      <button onClick={incrementCount}>increment</button>
    </div>
  );
}

First, we initialize our count to 0, and then we created a function incrementCount which uses setCount to increase our count by 1. We display our count and a button which on click calls the incrementCount function.

useEffect Hook

In class components, you may be familiar with lifecycle methods. The lifecycle methods, componentDidMount, componentDidUpdate, and componentWillUnmount, are all handled by the useEffect hook in functional components. The Effect Hook lets you perform side effects in function components. Examples of side effects are fetching data, changing the DOM. Fetching data is one of the most common uses of the useEffect hook. The useEffect hook needs at least one argument or a function to execute. You can also add a cleanup function inside the useEffect hook.

useEffect(()=>{
    // will be called on initial render and every single re-render
})

The useEffect hook also takes an array after the function which is called the dependency array. Where we can pass dependencies on which our effect depends on. Let's take a look at an example :

useEffect(() => {
    console.log("count")
}, [count])

useEffect(()=>{
    console.log("render")
},[])

In the above example, count is our dependency so console.log("count") will only execute when the count changes. If we leave our dependency array empty console.log("
render") will only execute on the initial render.

useEffect( ()  =>  {
    effect
    return () => {
        cleanup
    }
}, [value])

Inside useEffect, we can add a return statement at the end of the function call which returns a function. This return function does all the cleanup work. It's similar to componentWillUnmount in class component. Note that adding a return statement is optional in useEffect.

DEV Community: Pratik Bhagat

My Journey of Winning Smart India Hackathon 2022: Lessons and Tips for SIH 2023

Introduction

The Adventure Begins: Understanding SIH

Picking the Problem Statement

Development Process

Presentation and Pitch

Winning Moment

Advice for SIH 2023 Participants

Conclusion

Passwordless Authentication with WebAuthn

What is WebAuthn?

How WebAuthn Works?

The Problem

Read more about WebAuthn

webauthn.me

webauthn.guide

Add authentication to your React apps in minutes with Auth0

Intro

Setting up the application

React app

Install Auth0

Index.js

Components

Login Button

Logout Button

App.js

User

Fetching Data in React

Introduction

Methods of Fetching Data

Using Fetch API

Using async function

Using Axios

Using custom hook

Thank you for reading ;)

Next.js Authentication with Netlify Identity

Introduction

Prerequisites

1. Next.js App

Installing Netlify Identity in our App

Deploying to Netlify

Let's Start

Coding our authContext

Establishing connection with Netlify Identity

Providing value to our App

Creating Login/Logout Buttons

Conclusion

Thank you for reading :)

Drop a like and follow me if you found this useful 😊

Introduction to React Hooks

What are Hooks?

Benefits of React Hooks

useState Hook

useEffect Hook

Thank you for reading.

If you found this useful drop a like :)