Forem: Suhail Kakar

How to Build a Full Stack Web3 TikTok Clone with React Native, Livepeer, and Lens Protocol

Suhail Kakar — Tue, 07 Mar 2023 11:16:21 +0000

This article is originally published on blog.suhailkakar.com

Building real-world projects in Web3 is important for anyone looking to understand and develop decentralized applications. It's essential to gain hands-on experience in using the latest technologies and frameworks to build a functional application.

By working on projects like a Tiktok clone, you can learn about various aspects of Web3, such as social graphs, data querying, video infrastructure, and wallet authentication. These skills can be applied to develop more complex and sophisticated decentralized applications, paving the way for the future of the internet.

In this tutorial, you are going to build a full-stack Tiktok clone using the below tech stack.

Mobile framework: React Native
Social graph: Lens Protocol
Querying data: Lens API
Video Infrastructure: Livepeer
Wallet Authentication: WalletConnect

You can find the final code of the application here.

Prerequisites

Before you start with the tutorial make sure you have Node.js v16 or greater and Expo CLI installed on your machine.

Setting up React Native app

To get started, you need to set up a React Native app and install the required dependencies. To do this, simply run the following command in your terminal:

npx create-expo-app web3-tiktok

This command creates a new React Native app using Expo CLI. The process may take some time depending on the speed of your machine and internet connection. Once the project has been created successfully, run the following command to install additional dependencies.

cd web3-tiktok && yarn add react-native-webview react-native-walletconnect @react-native-async-storage/async-storage @apollo/client graphql @livepeer/react-native @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context @react-navigation/material-bottom-tabs expo-media-library react-native-gesture-handler expo-av livepeer react-native-svg

react-native-walletconnect provides a way for our app to connect with a user's crypto wallet using WalletConnect. This is important since we want to authenticate users with their wallets.
@react-native-async-storage/async-storage provides a simple way to store key-value data in our app. We can use this to save different data such as auth tokens, user IDs, etc.
@apollo/client is a package that allows us to easily connect your app to a GraphQL server (Lens API).
graphql is a query language for APIs that works seamlessly with @apollo/client.
@livepeer/react-native is a package that provides components and hooks to make it easier to work with Livepeer's video infrastructure in our React Native app.
@react-navigation/native is a library for implementing navigation in React Native apps
react-native-screens provides an easy way for managing screens and transitions in React Native apps
react-native-safe-area-context is used for handling safe area insets in our app
@react-navigation/material-bottom-tabs is a package for implementing bottom-tab navigation in our app
expo-media-library is used for accessing and managing media assets (such as videos) on a user's device

Yeah, I know the list is pretty long. But hey, we gotta have all these libraries for our app to work smoothly. I mean, we are building a Tiktok clone, so we gotta make sure it's on point!

Setting up the navigation

Now we can move forward and add navigation to our app. We will be using react-navigation which is a widely used navigation library for react native apps.

To get started, create a new folder called screens inside the root directory of the project. Then, create a new file inside that folder called Login.js. For now, you can add the simple code snippet below to the Login.js file, which will just display the words Login Screen:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

export default function Login() {
    return (
        <View style={styles.container}>
            <Text>Login Screen</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        backgroundColor: "#fff",
        alignItems: "center"
    }
})

Next, create a new file called routes.js in the root directory and add the code below to it. This code imports the Login screen we just created and adds it to the navigation container:

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Login from './screens/Login';

const Stack = createStackNavigator();

function Routes() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}
            >
                <Stack.Screen name="Login" component={Login} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}
export default Routes;

Finally, replace the existing code inside app.js with the following code to import and define the route file

import React from 'react'
import Routes from './routes'

export default function App() {
  return (
    <Routes />
  )
}

With these steps, we've set up a basic navigation structure for our app, and we can now easily add more screens and navigation options as needed.

Setting up GraphQL Client

Let's now set up our GraphQL client which will allow us to interact with Lens API. We'll be using Apollo GraphQL, a popular and efficient way to set up a GraphQL client.

GraphQL is an open-source query language that offers flexible and user-friendly syntax to describe data requirements and interactions. As an alternative to REST, you can create GraphQL requests that include data from various sources from a single API call.

To get started, create a new folder named clients inside the root directory. Inside the clients folder, create a new file named apollo.js and add the following code to this file:

import { ApolloClient, InMemoryCache } from "@apollo/client";

const APClient = new ApolloClient({
    link: "https://api-mumbai.lens.dev",
    cache: new InMemoryCache(),
});

export default APClient;

https://api-mumbai.lens.dev is the Lens API for the test net, you can use https://api.lens.dev/ for the main net. For more information, refer Lens docs.

Setting up Livepeer

Livepeer is a decentralized video processing network and developer platform which you can use to build video applications. It is very fast, easy to integrate and cheap. In this tutorial, we will be using Livepeer to upload videos and play them back.

As mentioned earlier, Livepeer will be used as the video infrastructure in our application. It automatically transcodes and serves the videos that users upload for seamless playback.

Navigate to https://livepeer.studio/register and create a new account on Livepeer Studio.

Once you have created an account, in the dashboard, click on the Developers on the sidebar.

Then, click on Create API Key, give a name to your key and then copy it as we will need it later.

Livepeer.js is a JavaScript SDK with ready-to-use hooks that allows us to quickly upload videos, serve videos and connect to Livepeer Studio.

Then, create a new file named livepeer.js inside the clients folder you created earlier, and add the following code to it:

import { createReactClient } from "@livepeer/react";
import { studioProvider } from "livepeer/providers/studio";

const LPClient = createReactClient({
  provider: studioProvider({ apiKey: "API_KEY" }),
});

export default LPClient;

The above code is a client that we'll use to interact with Livepeer. Don't forget to replace API_KEY with the key you copied from the Livepeer dashboard.

Setting up WalletConnect

WalletConnect is an open-source protocol that allows your wallet to connect and interact with DApps and other wallets. In this tutorial, we will use WalletConnect to allow users to connect their wallets and verify their ownership.

In the app.js file, import the WalletConnect provider and wrap your application inside of it:

import React from 'react'
import Routes from './routes'
import WalletConnectProvider from "react-native-walletconnect";

export default function App() {
  return (
    <WalletConnectProvider>
      <Routes />
    </WalletConnectProvider>
  )
}

Setting up the Clients

We have added two clients, Apollo GraphQL and Livepeer. Next, we need to add these two into our app.js

Similar to wallet connect, you just need to wrap the routes with these clients. You can replace inside app.js with the below code

import React from 'react'
import Routes from './routes'
import WalletConnectProvider from "react-native-walletconnect";
import { LivepeerConfig } from '@livepeer/react-native';
import LPClient from './clients/livepeer';
import { ApolloProvider } from '@apollo/client';
import APClient from './clients/apollo';

export default function App() {
  return (
    <WalletConnectProvider>
      <ApolloProvider client={APClient}>
        <LivepeerConfig client={LPClient}>
          <Routes />
        </LivepeerConfig>
      </ApolloProvider>
    </WalletConnectProvider>
  )
}

Now it's time to see our app in action! Open your terminal and type npx expo start to start the development server. You can run the app on an iOS simulator (if you have a Mac), an Android emulator, or on your own device. Once you've selected your preferred device, the Expo CLI will launch the app on your device/simulator. You should now see the app running on your device, looking similar to this:

Phew, that was a lot to set up, but we're just getting started. So, let's move on to the authentication part.

Authentication

Now, it is time to add authentication to our app. This involves a series of steps, including connecting the user's wallet, getting a message from Lens API, signing the message with the user's wallet, and sending it back to Lens API for verification, and if everything is successful, we will get access token and verify the token which we will save to your device.

Connecting user wallet

To allow users to connect their wallets to our application, we will be using react-native-walletconnect. Remove everything inside of Login.js file and instead adding the following code.

import { Pressable, StyleSheet, Text, TextBase, View } from 'react-native'
import React from 'react'
import { StatusBar } from 'expo-status-bar';
import { useWalletConnect } from "react-native-walletconnect";

export default function Login() {
    const {
        createSession,
        killSession,
        session,
        signPersonalMessage,
    } = useWalletConnect();

    return (
        <View style={styles.container}>
            <StatusBar />
            <Text style={styles.text}>Sign up for TikTok</Text>
            <Pressable
                onPress={createSession}
                style={styles.button}>
                <Text style={styles.buttonText}>
                    Connect your wallet
                </Text>
            </Pressable>
            <Text style={styles.footer}>
                Connecting your wallet & siging message, simply proves ownership of the wallet. Signing message doesn't initiate any transaction on the blockchain
            </Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        paddingTop: 50,
        paddingLeft: 30,
    },
    text: {
        fontSize: 40,
        fontWeight: "700",
        width: "50%",
        lineHeight: 50,
        marginTop: 50,
    },
    button: {
        borderWidth: 1,
        width: "90%",
        marginTop: 50,
        padding: 15,
        borderColor: "#ccc",
        alignItems: "center"
    },
    buttonText: {
        fontWeight: "600",
    },
    footer: {
        position: "absolute",
        bottom: 50,
        marginLeft: 30,
        textAlign: "center",
        color: "#aaa",
    }
})

In the above code,

We imported various React Native and WalletConnect libraries, such as Pressable, StyleSheet, Text, View, and useWalletConnect.
Next, inside the component, useWalletConnect hook is used to create a session, kill a session, get the current session, and sign a transaction.
The main Login component returns a View that contains a Text component displaying the "Sign up for TikTok" header, a Pressable component that triggers the createSession function when clicked, and a Text component displaying a message about the purpose of connecting a wallet and signing a message.
The StyleSheet object is used to style the components, including setting the background color, font size, and positioning of the text and buttons.'
Finally, the StatusBar component from the expo-status-bar library is used to display a status bar at the top of the screen.

Once you've finished editing the file, save it and you should see a nice-looking clean login screen:

If you click on the "Connect Your Wallet" button, a little window will pop up that lets you choose from different wallet options. This is how you can connect your wallet to the app.

After you click on a wallet option in the pop-up window, you'll be redirected to that wallet app to complete the connection process. This is how the app knows that you're the owner of the wallet.

Now that we are completed the connecting wallet part, we can move on to the next step which will sign a message with the user wallet and verify it with Lens API

Signing the message

Now that users have connected their wallet and we have their wallet address, we can continue to sign in part.

Add the following code before the return statement:

  const signMessage = async () => {
    const response = await client.query({
      query: gql`query Challenge {
        challenge(request: { address: "${address}" }) {
          text
        }
      }`,
    });
    let challenge = convertUtf8ToHex(response.data.challenge.text);
    const msgParams = [challenge, address];
    connector.signPersonalMessage(msgParams).then(async (result) => {
      getTokens(result);
    });
  };


  const getTokens = async (result) => {
    const response = await client.mutate({
      mutation: gql`mutation Authenticate {
        authenticate(request: {
          address: "${address}",
          signature: "${result}"
        }) {
          accessToken
          refreshToken
        }
      }`,
    });
    await saveItem("accessToken", response.data.authenticate.accessToken);
    await saveItem("refreshToken", response.data.authenticate.refreshToken);

  };

Here, we are:

First, we define an asynchronous function called signMessage. This function makes a query to a Lens API and requests for a challenge string that the user must sign with their private key to prove their identity. The query returns the challenge string
Next, the signPersonalMessage method from a wallet-connect library with the challenge string and the user's address as parameters. This method uses the user's wallet to sign the message and returns a result. The getTokens function is then called with this result.
The getTokens function sends a mutation request to the server using the and request includes the user's address and the signature generated by the signPersonalMessage method. The server verifies the signature and if it's valid, it returns an access token and a refresh token. These tokens are then stored locally using the Async Storage.

Home

Now that we're done with the authentication, let's move on to the home screens. First, we need to create a screen for the home. Go to the screens folder and create a new file called Home.js. Inside it, add this simple component:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

export default function Home() {
    return (
        <View style={styles.container}>
            <Text>Home Screen</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        backgroundColor: "#fff",
        alignItems: "center"
    }
})

Next, let's set up the bottom tabs.

Setting up Bottom Tabs

First, download the icons from the GitHub repo and add them to the assets folder. Then create a new folder called components, and inside it, create a new file called BottomTabs.js.

import { Image, StyleSheet } from "react-native";
import React from "react";

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "../screens/Home";

const BottomTab = createBottomTabNavigator();

export default function BottomTabs() {
    return (
        <BottomTab.Navigator
            screenOptions={{
                tabBarStyle: { backgroundColor: "black", borderWidth: 0 },
                headerShown: false,
                tabBarActiveTintColor: "white",
            }}
        >
            <BottomTab.Screen
                name="Home"
                component={Home}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <Image
                            source={require("../assets/home.png")}
                            style={[
                                styles.bottomTabIcon,
                                focused && styles.bottomTabIconFocused,
                            ]}
                        />
                    ),
                }}
            />
            <BottomTab.Screen
                name="Discover"
                component={Home}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <Image
                            source={require("../assets/search.png")}
                            style={[
                                styles.bottomTabIcon,
                                focused && styles.bottomTabIconFocused,
                            ]}
                        />
                    ),
                }}
            />
            <BottomTab.Screen
                name="NewVideo"
                component={Home}
                options={{
                    tabBarLabel: () => null,
                    tabBarIcon: ({ focused }) => (
                        <Image
                            source={require("../assets/new-video.png")}
                            style={[
                                styles.newVideoButton,
                                focused && styles.bottomTabIconFocused,
                            ]}
                        />
                    ),
                }}
            />
            <BottomTab.Screen
                name="Inbox"
                component={Home}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <Image
                            source={require("../assets/message.png")}
                            style={[
                                styles.bottomTabIcon,
                                focused && styles.bottomTabIconFocused,
                            ]}
                        />
                    ),
                }}
            />
            <BottomTab.Screen
                name="Profile"
                component={Home}
                options={{
                    tabBarIcon: ({ focused }) => (
                        <Image
                            source={require("../assets/user.png")}
                            style={[
                                styles.bottomTabIcon,
                                focused && styles.bottomTabIconFocused,
                            ]}
                        />
                    ),
                }}
            />
        </BottomTab.Navigator>
    );
}

const styles = StyleSheet.create({
    bottomTabIcon: {
        width: 20,
        height: 20,
        tintColor: "grey",
    },
    bottomTabIconFocused: {
        tintColor: "white",
    },
    newVideoButton: {
        width: 50,
        height: 25,
    },
});

In the above file, we have created a Bottom Tabs navigation similar to Tiktok, using the @react-navigation/bottom-tabs library. We have also added custom icons to the bottom tabs, making them look exactly the same as TikTok.

To use the Bottom Tabs navigation, we need to add it to our routes.js file. After completing the authentication process, we want to redirect the user to the home screen with the Bottom Tabs navigation.

Save the file and then add the Bottom Tabs after the Login in the routes.js file. Here is the updated routes.js file with the Bottom Tabs navigation:

//... <Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Home" component={BottomTabs} />

Now, when the user successfully logs in, they will be redirected to the Home screen, which includes the Bottom Tabs navigation.

Fetching videos from Lens

Next, create a new file named queries.js in the root directory and for now add the explore posts query to it.

import { gql } from "@apollo/client";
export const EXPLORE_POSTS = gql`
  query ($request: ExplorePublicationRequest!) {
    explorePublications(request: $request) {
      items {
        __typename
        ... on Post {
          ...PostFields
        }
      }
      pageInfo {
        prev
        next
        totalCount
      }
    }
  }
  fragment MediaFields on Media {
    url
    width
    height
    mimeType
  }
  fragment ProfileFields on Profile {
    id
    name
  }
  fragment PublicationStatsFields on PublicationStats {
    totalAmountOfMirrors
    totalUpvotes
    totalAmountOfCollects
    totalAmountOfComments
  }
  fragment MetadataOutputFields on MetadataOutput {
    name
    description
    content
    media {
      original {
        ...MediaFields
      }
      small {
        ...MediaFields
      }
      medium {
        ...MediaFields
      }
    }
  }

  fragment PostFields on Post {
    id
    profile {
      ...ProfileFields
    }
    stats {
      ...PublicationStatsFields
    }
    metadata {
      ...MetadataOutputFields
    }
    createdAt
  }
`;

Back, in the home.js replace everything inside of the file with the below code:

import { FlatList, StyleSheet, View, Text, Dimensions } from "react-native";
import React, { useState } from "react";
import { EXPLORE_POSTS } from "../queries";
import { useQuery } from "@apollo/client";
import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";

export default function Home() {
    const [activeVideoIndex, setActiveVideoIndex] = useState(0);

    const bottomTabHeight = useBottomTabBarHeight();
    const { height: WINDOW_HEIGHT } = Dimensions.get("window");
    const { data } = useQuery(EXPLORE_POSTS, {
        variables: {
            request: {
                limit: 5,
                sources: ["lenstube-bytes"],
                publicationTypes: ["POST"],
                sortCriteria: "CURATED_PROFILES",
            },
        },
    });

    const pageInfo = data?.explorePublications?.pageInfo;
    const videos = data?.explorePublications?.items;

    return (
        <View style={styles.container}>
            <FlatList
                data={videos}
                pagingEnabled
                renderItem={({ item, index }) => <Text>{item.metadata.content}</Text>}
                onScroll={(e) => {
                    const index = Math.round(
                        e.nativeEvent.contentOffset.y / (WINDOW_HEIGHT - bottomTabHeight)
                    );
                    setActiveVideoIndex(index);
                }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        backgroundColor: "#fff",
        alignItems: "center",
    },
});

In the above code,

First, we are importing several components and libraries, including FlatList, StyleSheet, View, Text, Dimensions, and useState from React and React Native, as well as useQuery and useBottomTabBarHeight from Apollo Client and React Navigation, respectively.
The Home function is the main component that is exported. It includes the useState hook to create a state variable called activeVideoIndex, which is initially set to 0. This variable is used to keep track of the index of the currently active video in the list of videos that will be rendered later.
The useBottomTabBarHeight hook is used to get the height of the bottom tab bar in the current navigation stack. This value is stored in the bottomTabHeight variable.
The useQuery hook is used to fetch data from the EXPLORE_POSTS query, which is defined earlier. The variables option is used to specify the parameters of the query, including the limit, sources, publication types, and sort criteria.
The data variable is used to store the data that is returned by the query. The pageInfo and videos variables are extracted from the data object using the optional chaining operator (?). The pageInfo variable contains information about the current page of videos, while the videos variable contains an array of video objects.
Finally, a FlatList component is rendered, which displays the list of videos. The data prop is set to the videos array, and the renderItem prop is used to specify how each item in the list should be rendered. In this case, each video is rendered as a Text component that displays the metadata property of the video.
The onScroll prop is used to handle scrolling events in the FlatList. When the user scrolls the list, the onScroll function is called with an event object. This function uses the Math.round method to calculate the index of the video that is currently visible based on the contentOffset and the WINDOW_HEIGHT and bottomTabHeight variables. This index is then used to update the activeVideoIndex state variable.

Save the file, and as you can see for now we are just rending the metadata of the video.

Let's create a video player component and then render it inside of the Flatlist.

Adding the Video Player

Inside the components directory, create a new file named VideoPlayer.js and add the following code to it.

import React from "react";
import { Image, StatusBar, StyleSheet, Text, View } from "react-native";
import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
import { Player } from "@livepeer/react-native";

export default function VideoPlayer({ data, isActive }) {
    const bottomTabHeight = useBottomTabBarHeight();
    const statusBarHeight = StatusBar.currentHeight || 0;

    const getIPFSLink = (hash) => {
        const gateway = "https://lens.infura-ipfs.io/ipfs/";

        return hash
            .replace(/^Qm[1-9A-Za-z]{44}/gm, `${gateway}${hash}`)
            .replace("https://ipfs.io/ipfs/", gateway)
            .replace("ipfs://", gateway);
    };

    return (
        <View
            style={[
                styles.container,
                { height: WINDOW_HEIGHT - bottomTabHeight - statusBarHeight },
            ]}
        >
            <StatusBar barStyle={"light-content"} />
            <Player
                src={getIPFSLink(data.metadata.media[0].original.url)}
                priority
                aspectRatio={"16:9"}
                loop
                autoplay={isActive}
            />
            <View style={styles.bottomSection}>
                <View style={styles.bottomLeftSection}>
                    <Text style={styles.channelName}>{data.profile.name}</Text>
                    <Text style={styles.caption}>{data.metadata.name}</Text>
                </View>
                <View style={styles.bottomRightSection}>
                    <Image
                        source={require("../assets/floating-music-note.png")}
                        style={[styles.floatingMusicNote]}
                    />
                    <Image
                        source={require("../assets/disc.png")}
                        style={[styles.musicDisc]}
                    />
                </View>
            </View>

            <View style={styles.verticalBar}>
                <View style={[styles.verticalBarItem, styles.avatarContainer]}>
                    <Image
                        style={styles.avatar}
                        source={{
                            uri: getIPFSLink(data.profile.picture.original.url),
                        }}
                    />
                    <View style={styles.followButton}>
                        <Image
                            source={require("../assets/plus-button.png")}
                            style={styles.followIcon}
                        />
                    </View>
                </View>
                <View style={styles.verticalBarItem}>
                    <Image
                        style={styles.verticalBarIcon}
                        source={require("../assets/heart.png")}
                    />
                </View>
                <View style={styles.verticalBarItem}>
                    <Image
                        style={styles.verticalBarIcon}
                        source={require("../assets/message-circle.png")}
                    />
                </View>
                <View style={styles.verticalBarItem}>
                    <Image
                        style={styles.verticalBarIcon}
                        source={require("../assets/reply.png")}
                    />
                </View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        width: WINDOW_WIDTH,
    },
    video: {
        position: "absolute",
        width: "100%",
        height: "100%",
    },
    bottomSection: {
        position: "absolute",
        bottom: 0,
        flexDirection: "row",
        width: "100%",
        paddingHorizontal: 8,
        paddingBottom: 16,
    },
    bottomLeftSection: {
        flex: 4,
    },
    bottomRightSection: {
        flex: 1,
        justifyContent: "flex-end",
        alignItems: "flex-end",
    },
    channelName: {
        color: "white",
        fontWeight: "bold",
    },
    caption: {
        color: "white",
        marginVertical: 8,
    },
    musicNameContainer: {
        flexDirection: "row",
        alignItems: "center",
    },
    musicNameIcon: {
        width: 12,
        height: 12,
        marginRight: 8,
    },
    musicName: {
        color: "white",
    },
    musicDisc: {
        width: 40,
        height: 40,
    },
    verticalBar: {
        position: "absolute",
        right: 8,
        bottom: 72,
    },
    verticalBarItem: {
        marginBottom: 24,
        alignItems: "center",
    },
    verticalBarIcon: {
        width: 32,
        height: 32,
    },
    verticalBarText: {
        color: "white",
        marginTop: 4,
    },
    avatarContainer: {
        marginBottom: 48,
    },
    avatar: {
        width: 48,
        height: 48,
        borderRadius: 24,
    },
    followButton: {
        position: "absolute",
        bottom: -8,
    },
    followIcon: {
        width: 21,
        height: 21,
    },
    floatingMusicNote: {
        position: "absolute",
        right: 40,
        bottom: 16,
        width: 16,
        height: 16,
        tintColor: "white",
    },
});

First, we are importing necessary components from the React Native library, as well as some third-party libraries such as @react-navigation/bottom-tabs and @livepeer/react-native.
The component takes in two props, data and isActive. Next, Inside the component, we use a hook from @react-navigation/bottom-tabs to get the height of the bottom tab bar, and the StatusBar.currentHeight property to get the height of the status bar.
We also defines a helper function called getIPFSLink that takes in a hash and returns a link to an IPFS gateway (Infura).
Inside the return statement, the View component is then used to create a container that holds all the components to be rendered on the screen. The height of the container is adjusted by subtracting the height of the bottom tab bar and the status bar from the height of the window.
The StatusBar component is used to set the color of the status bar to white.
The Player component from @livepeer/react-native is used to render the video player on the screen. The source of the video is the first media item from the data.metadata object. The player is set to play on loop and autoplay when the isActive prop is true.
The rest of the components rendered in the View container are some text and image components that display the profile name, caption, and icons for various actions such as liking, commenting, and following. Finally, we also define some styles using the StyleSheet.create method.

Back to home.js, import the VideoPlayer component and replace the FlatList renderItem property with the it.

    <FlatList
                data={videos}
                pagingEnabled
                renderItem={({ item, index }) => (
                    <VideoPlayer data={item} isActive={activeVideoIndex === index} />
                )}
                onScroll={(e) => {
                    const index = Math.round(
                        e.nativeEvent.contentOffset.y / (WINDOW_HEIGHT - bottomTabHeight)
                    );
                    setActiveVideoIndex(index);
                }}
            />

Save the file and you should see a video player with the video information. That looks very similar to TikTok.

Upload

Now, it is time to work on the upload video process. The upload process would be:

First, the user selects a video from the library.
Then, we upload that video to Livepeer.
After that, we save the metadata to IPFS.
Finally, we post the IPFS CID for the metadata to Lens API.

Before that create a new file named "upload.js" in the "screens" folder of your React Native project. And for now, you can add the following code to it:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

export default function Home() {
    return (
        <View style={styles.container}>
            <Text>Home Screen</Text>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        backgroundColor: "#fff",
        alignItems: "center"
    }
})

Uploading video to Livepeer

The first step is to allow the user to select a video from the library. Inside the upload screen, create a function named pickVideo that will allow the user to select a video from their device's media library and add the following code to it:

const pickVideo = async () => {
  const { status } = await requestMediaLibraryPermissionsAsync();
  if (status !== "granted") {
    alert("Sorry, we need camera roll permissions to make this work!");
    return;
  }
  const result = await launchImageLibraryAsync({
    mediaTypes: MediaTypeOptions.Videos,
    allowsEditing: true,
  });
  if (!result.cancelled) {
    setVideo(result);
  }
};

Here we are using the expo-media-library to select videos and then set the video state to the result. Now that we have the video, we can use Livepeer SDK to upload these videos to Livepeer Studio.

We can just add the following hook to the top of the file and then pass the video to it

  const {
    mutate: createAsset,
    progress,
    error,
  } = useCreateAsset({
    sources: [{ name: "video", file: media }],
  });

Next, you can add this video to the Lens metadata and then we can use it to playback the video from the Livepeer.

Saving metadata to IPFS

Once you have the metadata object ready, you can use any ipfs services or Arweave to upload the metadata. In this tutorial, we will be using IPFS. Add the following function after the pick video function:

const saveToIPFS = async (body: any) => {
  var config = {
    method: "post",
    url: "",
    data: body,
  };

  const response = await axios(config);
  return response.data.cid;
};

Posting the metadata to Lens API

Now that we also have the IPFS CID, we can use it to post the metadata to Lens API. Add the following query to the queries file:

export const CreatePostViaDispatcher = gql`
  mutation CreatePostViaDispatcher($request: CreatePublicPostRequest!) {
    createPostViaDispatcher(request: $request) {
      ... on RelayerResult {
        txHash
        txId
      }
      ... on RelayError {
        reason
      }
    }
  }
`;

Then, inside of the upload.js screen, you can use useMutation to post the metadata to Lens API:

  const [createPostViaDispatcher] = useMutation(CreatePostViaDispatcher, {
    onCompleted: (data) => {
      if (data.createPostViaDispatcher.__typename === "RelayerResult") {
        generateOptimisticPost(data.createPostViaDispatcher);
      }
    },
  });

What’s Next?

So, you've made it this far! That's awesome and it tells me that you're enthusiastic about creating Web3 apps. Now, if you're feeling up for it, I have some ideas on how you can take your app to the next level:

How about giving users the ability to search for other users and videos? It could make your app more user-friendly and convenient.
You could also experiment with using Arweave instead of IFPS and see how that affects your app's performance.
If you're looking to make your app more comprehensive, why not add some extra screens such as a user profile section? This could give your app more depth and allow users to personalize their experience.
And finally, if you want to get your app ready for prime time, don't forget to make the like and comment buttons actually work! Adding these functionalities will make your app more engaging and keep users coming back for more.

These are just a few ideas, but the possibilities are endless. Don't be afraid to get creative and have fun with it!

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section or DM me on Twitter.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

How I Created a React Native Ecommerce App for Medusa's Hackathon

Suhail Kakar — Mon, 10 Oct 2022 11:48:39 +0000

Medusa is currently hosting a Hackathon where developers can create amazing projects with Medusa and win prizes and swag. An example of a Hackathon project is building an ecommerce app with React Native, which is covered in this article.

This is part 2 of Creating a React Native ecommerce App with Medusa series. In the previous article, you learned how to set up the Medusa server and admin, and how to create a basic ecommerce app.

In this part, you will learn how to implement cart and checkout functionalities. You can also find the source code of the React Native app on GitHub.

Prerequisites

You need a Stripe account, you can signup here.

Clone the Starter Code

If you skipped part 1, you can clone the code from GitHub. To do that, simply run the below command:

git clone -b part-1 https://github.com/suhailkakar/react-native-medusajs

Once you have cloned the repository, move to the newly-created directory, react-native-medusajs, by running cd react-native-medusajs. Run the below command to install the node modules:

yarn install

The above command will install the necessary packages and dependencies from the NPM registry.

After the dependencies are installed successfully, run expo start to start the application. You can either scan the QR code using your device or run the app on an Android/iOS simulator. You should see a similar screen once the app is opened on your device/emulator.

Make sure that the Medusa server is running as well.

You might need to modify the URL in constants/urls.js if you can't see the products. You can update the base URL to the IP address where the backend server is running.

Creating the Cart

The first step is to implement the cart functionality. Install async-storage to save the cart id in the device’s local storage. Run the below command to install @react-native-async-storage/async-storage in the project:

expo install @react-native-async-storage/async-storage

Once the package is installed, open the project in any code editor and paste the below code into App.js before the return function:

const getCartId = () => {
    axios.post(`${baseURL}/store/carts`).then((res) => {
      AsyncStorage.setItem("cart_id", res.data.cart.id);
    });
  };

In the above code, you created a function named getCartId and inside of that function, you are querying the backend API to get a cart id using Axios and then saving it in the device’s local storage using async-storage.

Make sure to import async-storage, useEffect, Axios and baseURL in the App.js file:

import axios from "axios";
import baseURL from "./constants/url";
import { useEffect } from "react";
import AsyncStorage from "@react-native-async-storage/async-storage";

The above function (getCartId) will not run since you didn’t call it yet. However, you want to run this function only if there is no cart id saved in the device’s local storage.

Now, write another function to check if there’s already a cart id in the device’s local storage. If there isn’t, the function should call getCartId. Lastly, call the checkCartId inside of useEffect:


// Check cart_id 
  const checkCartId = async () => {
    const cartId = await AsyncStorage.getItem("cart_id");
    if (!cartId) {
      getCartId();
    }
  };

useEffect(() => {
    checkCartId();
}, []);

Adding Products to the Cart

First, let’s update the button component and add a prop to update the button layout based on the size provided. You can replace the code inside components/Button.js with the code below:

import { View, Text, StyleSheet } from "react-native";
import React from "react";
import { widthToDp } from "rn-responsive-screen";

export default function Button({ title, onPress, style, textSize, large }) {
  return (
    <View style={[styles.container, style, large && styles.large]}>
      <Text
        style={[
          styles.text,
          { fontSize: textSize ? textSize : widthToDp(3.5) },
          ,
        ]}
        onPress={onPress}
      >
        {title}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#C37AFF",
    padding: 5,
    width: widthToDp(20),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 59,
  },
  large: {
    width: "100%",
    marginTop: 10,
    height: widthToDp(12),
  },
  text: {
    color: "#fff",
    fontWeight: "bold",
  },
});

Recall that by the end of Part 1, you have created a component at components/ProductInfo/MetaInfo.js to display the description, size, and other information about the product. Go ahead and add a button component after the description:

<Button title="Add to Cart" onPress={addToCart} large={true} />

Also, make sure to import the button component from components/Button:

import Button from "../Button";

As you can see, you are calling addToCart function when the user presses the button, so declare that function.

On top of MetaInfo.js component before return, declare a new function named addToCart and add the below code inside of it:

const addToCart = async () => {
    const cartId = await AsyncStorage.getItem("cart_id");
    axios
      .post(`${baseURL}/store/carts/${cartId}/line-items`, {
        variant_id: product.variants[0].id,
        quantity: 1,
      })
      .then(({ data }) => {
        alert(`Item ${product.title} added to cart`);
      })
      .catch((err) => {
        console.log(err);
      });
  };

In the above code, first, you are fetching the cart_id from async storage and then posting the product’s first variant with 1 quantity to the cart API. Next, you are navigating users to the cart screen.

You also need to import AsyncStorage, axios and baseURL in the MetaInfo.js file:

import axios from "axios";
import baseURL from "../../constants/url";
import AsyncStorage from "@react-native-async-storage/async-storage";

Cart Screen

This is the screen where the user will see the products they added to the cart. Create a new file named screens/Cart.js and use it to render a simple Text component for now:

import { View, Text } from "react-native";
import React from "react";

export default function Cart() {
  return (
    <View>
      <Text>Cart Screen</Text>
    </View>
  );
}

Then, import the cart screen at the top of App.js:

import Cart from "./screens/Cart";

Add a new Scene component below the existing Scene component in the returned JSX:

<Scene key="cart" component={Cart} hideNavBar />

In the components directory, create a new file named CartItem.js and add the following content:

import { View, Text, StyleSheet, Image } from "react-native";
import React from "react";
import { heightToDp, width, widthToDp } from "rn-responsive-screen";

export default function CartItem({ product }) {
  return (
    <View style={styles.container}>
      <Image source={{ uri: product.thumbnail }} style={styles.image} />
      <View style={styles.info}>
        <View>
          <Text style={styles.title}>{product.title}</Text>
          <Text style={styles.description}>
            {product.description} • ${product.unit_price / 100}
          </Text>
        </View>
        <View style={styles.footer}>
          <Text style={styles.price}>${product.total / 100}</Text>
          <Text style={styles.quantity}>x{product.quantity}</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 20,
    flexDirection: "row",
    borderBottomWidth: 1,
    paddingBottom: 10,
    borderColor: "#e6e6e6",
    width: widthToDp("90%"),
  },
  image: {
    width: widthToDp(30),
    height: heightToDp(30),
    borderRadius: 10,
  },
  title: {
    fontSize: widthToDp(4),
    fontWeight: "bold",
  },
  footer: {
    flexDirection: "row",
    justifyContent: "space-between",
  },
  info: {
    marginLeft: widthToDp(3),
    flexDirection: "column",
    justifyContent: "space-between",
    marginVertical: heightToDp(2),
    width: widthToDp(50),
  },
  description: {
    fontSize: widthToDp(3.5),
    color: "#8e8e93",
    marginTop: heightToDp(2),
  },

  price: {
    fontSize: widthToDp(4),
  },
  quantity: {
    fontSize: widthToDp(4),
  },
});

The above code is a simple React Native cart component which will be rendered on the cart screen. You are passing the props to the component from the parent component. This is the component that will represent an item in the cart.

Next, in the screens/Cart.js file, add the below function and useState before the return statement to fetch the products from the cart API and store them in the state:

const [cart, setCart] = useState([]);

  const fetchCart = async () => {
    // Get the cart id from the device storage
    const cartId = await AsyncStorage.getItem("cart_id");
    // Fetch the products from the cart API using the cart id
    axios.get(`${baseURL}/store/carts/${cartId}`).then(({ data }) => {
      // Set the cart state to the products in the cart
      setCart(data.cart);
    });
  };

  useEffect(() => {
        // Calling the fetchCart function when the component mounts
    fetchCart();
  }, []);

In the above code, you are getting the cart id from the device storage, fetching the products from the cart API and saving the data to the state. Next, you are calling the function inside of useEffect. Replace the import at the top of the screens/Cart.js file with the code below:

import { View, Text, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import Header from "../components/Header";
import axios from "axios";
import baseURL from "../constants/url";
import CartItem from "../components/CartItem";
import { ScrollView } from "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";
import { width, widthToDp } from "rn-responsive-screen";
import Button from "../components/Button";
import { Actions } from "react-native-router-flux";
import AsyncStorage from "@react-native-async-storage/async-storage";

Now that you have fetched the data and saved it to the state, it's time to render the products on the cart screen. Replace everything below useEffect function with the below code:

return (
    // SafeAreaView is used to avoid the notch on the phone
    <SafeAreaView style={[styles.container]}>
      {/* SchrollView is used in order to scroll the content */}
      <ScrollView contentContainerStyle={styles.container}>
        {/* Using the reusable header component */}
        <Header title="My Cart" />

        {/* Mapping the products into the Cart component */}
        {cart?.items?.map((product) => (
          <CartItem product={product} />
        ))}
      </ScrollView>
      {/* Creating a seperate view to show the total amount and checkout button */}
      <View>
        <View style={styles.row}>
          <Text style={styles.cartTotalText}>Items</Text>

          {/* Showing Cart Total */}
          <Text
            style={[
              styles.cartTotalText,
              {
                color: "#4C4C4C",
              },
            ]}
          >
            {/* Dividing the total by 100 because Medusa doesn't store numbers in decimal */}
            ${cart?.total / 100}
          </Text>
        </View>
        <View style={styles.row}>
          {/* Showing the discount (if any) */}
          <Text style={styles.cartTotalText}>Discount</Text>
          <Text
            style={[
              styles.cartTotalText,
              {
                color: "#4C4C4C",
              },
            ]}
          >
            - ${cart?.discount_total / 100}
          </Text>
        </View>
        <View style={[styles.row, styles.total]}>
          <Text style={styles.cartTotalText}>Total</Text>
          <Text
            style={[
              styles.cartTotalText,
              {
                color: "#4C4C4C",
              },
            ]}
          >
            {/* Calculating the total */}$
            {cart?.total / 100 - cart?.discount_total / 100}
          </Text>
        </View>
        <View>
          {/* A button to navigate to checkout screen */}
          <Button
            large={true}
            onPress={() => {
              Actions.checkout({
                cart,
              });
            }}
            title={cart?.items?.length > 0 ? "Checkout" : "Empty Cart"}
          />
        </View>
      </View>
    </SafeAreaView>
  );
}

// Styles....
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: widthToDp(90),
    marginTop: 10,
  },
  total: {
    borderTopWidth: 1,
    paddingTop: 10,
    borderTopColor: "#E5E5E5",
    marginBottom: 10,
  },
  cartTotalText: {
    fontSize: widthToDp(4.5),
    color: "#989899",
  },
});

Next, you’ll add a basic and simple button component in the screens/Products.js in order to navigate to the cart screen.

Add the below code after the ScrollView component in the screens/Products.js screen:

<View style={styles.addToCart}>
        <Feather
          name="shopping-cart"
          size={24}
          color="white"
          onPress={() => Actions.cart()}
        />
      </View>

Make sure to also add the style object inside StyleSheet.create function:

addToCart: {
    position: "absolute",
    bottom: 30,
    right: 10,
    backgroundColor: "#C37AFF",
    width: widthToDp(12),
    height: widthToDp(12),
    borderRadius: widthToDp(10),
    alignItems: "center",
    padding: widthToDp(2),
    justifyContent: "center",
  },

You also need to import the feather icons from @expo/vector-icons at the top of the file:

import { Feather } from "@expo/vector-icons";

Test Cart Screen

The cart screen is ready. Make sure that the Medusa server is running, then re-run your React Native app.

Try adding a few products into the cart, and then view the cart. Your cart screen should look like this:

Checkout & Payment

Now that we have completed the cart flow, it is time for checkout flow.

Configure the Stripe Plugin

Navigate to the Medusa server directory and install the Stripe plugin by running the command below:

npm install medusa-payment-stripe

Add the following code at the end of the plugins array in the medusa-config.js.

const plugins = [
  ...,
  {
    resolve: `medusa-payment-stripe`,
    options: {
      api_key: process.env.STRIPE_API_KEY,
    },
  },
];

For this tutorial, I used Stripe to handle payments. Navigate to the Stripe dashboard and make sure to turn on the toggle button of Test Mode on the top right. Click the developers button beside the Test Mode. On the left, choose API key and you can find the Publishable key and Secret key. Copy the two keys, as you will need them later.

In the .env file, paste your secret key where is it written STRIPE_API_KEY.

Enable Stripe as a Payment Provider

Make sure that the Medusa server and admin panel is running. Now, open the Medusa admin panel and choose Settings from the Sidebar. Then, choose Regions.

Then, choose the regions you want to add Stripe as a payment provider. In the right-side settings, click on the three dots icon and choose “Edit Region Details”.

In the new window that opens, choose Stripe in the payment providers field. Once you’re done, click the save and close button.

Checkout

Coming back to the React Native app, create a new file screens/Checkout.js and add a simple Text component to it:

import { View, Text } from "react-native";
import React from "react";

export default function Checkout() {
  return (
    <View>
      <Text>Checkout</Text>
    </View>
  );
}

Then, import the checkout screen at the top of App.js:

import Checkout from "./screens/Checkout";

Add a new Scene component below the existing Scene components in the returned JSX:

<Scene key="checkout" component={Checkout} hideNavBar />

In the components folder, create a new file named ShippingAddress.js and you can add the following code to it:

// Importing a few package and components
import { View, StyleSheet, Text, TextInput } from "react-native";
import React, { useState } from "react";
import { heightToDp } from "rn-responsive-screen";

export default function ShippingAddress({ onChange }) {
  // Passing onChange as a prop

  // Declaring a few states to store the user's input
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [AddressLine1, setAddressLine1] = useState("");
  const [AddressLine2, setAddressLine2] = useState("");
  const [city, setCity] = useState("");
  const [country, setCountry] = useState("");
  const [province, setProvince] = useState("");
  const [postalCode, setPostalCode] = useState("");
  const [phone, setPhone] = useState("");
  const [company, setCompany] = useState("");
  const [email, setEmail] = useState("");

  // Function to handle the user's input
  const handleChange = () => {
    // Creating an object to store the user's input
    let address = {
      first_name: firstName,
      last_name: lastName,
            email,
      address_1: AddressLine1,
      address_2: AddressLine2,
      city,
      province,
      postal_code: postalCode,
      phone,
      company,
            country
    };
    // Calling the onChange function and passing the address object as an argument
    onChange(address);
  };

  return (
    // Creating a view to hold the user's input
    <View style={styles.container}>
      {/* Creating a text input for the user's first name */}
      <TextInput
        onChangeText={(e) => {
          // Setting the user's input to the firstName state
          setFirstName(e);
          // Calling the handleChange function
          handleChange();
        }}
        placeholder="First Name"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setLastName(e);
          handleChange();
        }}
        placeholder="Last Name"
        style={styles.input}
      />
         <TextInput
        onChangeText={(e) => {
          setEmail(e);
          handleChange();
        }}
        placeholder="Email"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setAddressLine1(e);
          handleChange();
        }}
        placeholder="Address Line 1"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setAddressLine2(e);
          handleChange();
        }}
        placeholder="Address Line 2"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setCity(e);
          handleChange();
        }}
        placeholder="City"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setCountry(e);
          handleChange();
        }}
        placeholder="Country"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setProvince(e);
          handleChange();
        }}
        placeholder="Province"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setPostalCode(e);
          handleChange();
        }}
        placeholder="Postal Code"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setPhone(e);
          handleChange();
        }}
        placeholder="Phone"
        style={styles.input}
      />
      <TextInput
        onChangeText={(e) => {
          setCompany(e);
          handleChange();
        }}
        placeholder="Company"
        style={styles.input}
      />
    </View>
  );
}

// Creating a stylesheet to style the view
const styles = StyleSheet.create({
  container: {
    marginTop: heightToDp(2),
  },
  input: {
    borderWidth: 1,
    padding: 12,
    borderColor: "#E5E5E5",
    borderRadius: 5,
    marginTop: 10.2,
  },
});

In the above code, you imported a few components and created a function that handles the onChange event for the inputs. You have also created a few TextInputs for the shipping address.

Create a new file named RadioButton.js in the components folder and add the below code to it. It is a very simple component that will render radio buttons:

import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import React from "react";

const RadioButton = ({ onPress, selected, children }) => {
  return (
    <View style={styles.radioButtonContainer}>
      <TouchableOpacity onPress={onPress} style={styles.radioButton}>
        {selected ? <View style={styles.radioButtonIcon} /> : null}
      </TouchableOpacity>
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.radioButtonText}>{children}</Text>
      </TouchableOpacity>
    </View>
  );
};
const styles = StyleSheet.create({
  radioButtonContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 45,
  },
  radioButton: {
    height: 20,
    width: 20,
    backgroundColor: "#F8F8F8",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#E6E6E6",
    alignItems: "center",
    justifyContent: "center",
  },
  radioButtonIcon: {
    height: 14,
    width: 14,
    borderRadius: 7,
    backgroundColor: "#C37AFF",
  },
  radioButtonText: {
    fontSize: 16,
    marginLeft: 16,
  },
});
export default RadioButton;

Create another file named stripe.js in the constants folder and add the below code. Make sure to update the YOUR_STRIPE_PUBLISHABLE_KEY with your publishable key:


const publishable_key = "YOUR_STRIPE_PUBLISHABLE_KEY";

export { publishable_key };

Next, install the Stripe SDK for react native using the command below:

npm install @stripe/stripe-react-native

Now, update the checkout screen (screens/Checkout.js) by replacing the imports with the below components and dependencies:

import { View, Text, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import Header from "../components/Header";
import axios from "axios";
import baseURL from "../constants/url";
import { ScrollView } from "react-native-gesture-handler";
import { SafeAreaView } from "react-native-safe-area-context";
import { heightToDp, widthToDp } from "rn-responsive-screen";
import Button from "../components/Button";
import ShippingAddress from "../components/ShippingAddress";
import Payment from "../components/Payment";
import { publishable_key } from "../constants/stripe";
import RadioButton from "../components/RadioButton";
import { CardField, useStripe } from "@stripe/stripe-react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { StripeProvider } from "@stripe/stripe-react-native";

Next, create a few useStates that will be used to capture the input values in the Checkout component:

const [paymentInfo, setPaymentInfo] = useState({});
const [shippingAddress, setShippingAddress] = useState({});
const [shippingOptions, setShippingOptions] = useState([]);
const [selectedShippingOption, setSelectedShippingOption] = useState("");
const [paymentSession, setPaymentSession] = useState({});

const { confirmPayment } = useStripe();

Create two functions that will be used to capture the input values that we will declare later on.

// const [selectedShippingOption, setSelectedShippingOption] = useState("");
// ......

  const handlePaymentInputChange = (card) => {
    setPaymentInfo(card.values);
  };

  const handleAddressInputChange = (address) => {
    setShippingAddress(address);
  };

When the page opens and before the payment providers are displayed to the customer to choose from, you must initialize the payment sessions. To do that, we create a function named InitializePaymentSessions and call it on useEffect function. Here is what the code should look like:

const InitializePaymentSessions = async () => {
    // Getting cart id from async storage
    let cart_id = await AsyncStorage.getItem("cart_id");
    // Intializing payment session
    axios
      .post(`${baseURL}/store/carts/${cart_id}/payment-sessions`)
      .then(({ data }) => {
        axios
          .post(`${baseURL}/store/carts/${cart_id}/payment-session`, {
            provider_id: "stripe",
          })
          .then(({ data }) => {
            setPaymentSession(data.cart.payment_session);
          });
      });
  };

  useEffect(() => {
    // Calling the function to fetch the payment options when the component mounts
    fetchPaymentOption();
  }, []);

Next, create other functions to handle payment. Add the below functions the the Checkout.js :

const handlePayment = async () => {

        // Getting client secret from the payment session state
    const clientSecret = paymentSession.data ? paymentSession.data.client_secret : paymentSession.client_secret

    const billingDetails = {
      email: shippingAddress.email,
      phone: shippingAddress.phone,
      addressCity: shippingAddress.city,
      addressCountry: shippingAddress.country,
      addressLine1: shippingAddress.address_1,
      addressLine2: shippingAddress.address_2,
      addressPostalCode: shippingAddress.postalCode,
    };
    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      type: "Card",
      billingDetails,
    });
        if (error) {
      alert("Payment failed", error);
    }
    if (paymentIntent) {
      alert("Payment successful");

// Calling the complete cart function to empty the cart and redirect to the home screen
    completeCart();
    }

  };

const completeCart = async () => {
    const cartId = await AsyncStorage.getItem("cart_id");

    // Sending a request to the server to empty the cart
    axios
      .post(`${baseURL}/store/carts/${cartId}/complete`)
      .then(async (res) => {
        // Removing the cart_id from the local storage
        await AsyncStorage.removeItem("cart_id");
        // Redirecting to the home screen
        Actions.push("products");
      });
  };

  // Calling the API when user presses the "Place Order" button
  const placeOrder = async () => {
    // Getting cart id from async storage
    let cart_id = await AsyncStorage.getItem("cart_id");
    // Post shipping address to server
    axios
      .post(`${baseURL}/store/carts/${cart_id}`, {
        shipping_address: shippingAddress,
      })
      .then(({ data }) => {
        // Post shipping method to server
        axios
          .post(`${baseURL}/store/carts/${cart_id}/shipping-methods`, {
            option_id: selectedShippingOption,
          })
          .then(({ data }) => {
            // Calling the handle Payment API
            handlePayment();
          });
      });
  };

  const fetchPaymentOption = async () => {
    // Getting cart id from async storage
    let cart_id = await AsyncStorage.getItem("cart_id");

    // Fetch shipping options from server
    axios
      .get(`${baseURL}/store/shipping-options/${cart_id}`)
      .then(({ data }) => {
        setShippingOptions(data.shipping_options);
        // Initializing payment session
        InitializePaymentSessions();
      });
  };

These functions handle retrieving payment and shipping options from Medusa. It also handles processing the payment through Stripe, and then handles the checkout in Medusa.

You can also replace the return function with the below code:

return (
<StripeProvider publishableKey={publishable_key}>
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <Header title="Checkout" />
        <View style={styles.address}>
          <Text style={styles.title}>Shipping Address</Text>
          <ShippingAddress onChange={handleAddressInputChange} />
        </View>

        <View style={styles.payment}>
          <Text style={styles.title}>Payment</Text>
          <CardField
            postalCodeEnabled={false}
            placeholders={{
              number: "4242 4242 4242 4242",
            }}
            cardStyle={{
              backgroundColor: "#FFFFFF",
              textColor: "#000000",
            }}
            style={{
              width: "100%",
              height: 50,
              marginVertical: 30,
            }}
            onCardChange={(cardDetails) => {
              handlePaymentInputChange(cardDetails);
            }}
            onFocus={(focusedField) => {
              console.log("focusField", focusedField);
            }}
          />
        </View>
        <View style={styles.shipping}>
          <Text style={styles.title}>Shipping Options</Text>
          {shippingOptions.map((option) => (
            <View style={styles.shippingOption}>
              <RadioButton
                onPress={() => setSelectedShippingOption(option.id)}
                key={option.id}
                selected={selectedShippingOption === option.id}
                children={option.name}
              />
            </View>
          ))}

          <Button onPress={placeOrder} large title="Place Order" />
        </View>
      </ScrollView>
    </SafeAreaView>
</StripeProvider>
  );

Lastly, add the below style object at the end of the file:


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  address: {
    marginHorizontal: widthToDp(5),
  },
  payment: {
    marginHorizontal: widthToDp(5),
    marginTop: heightToDp(4),
  },
  shipping: {
    marginHorizontal: widthToDp(5),
  },
  title: {
    fontSize: widthToDp(4.5),
  },
  shippingOption: {
    marginTop: heightToDp(2),
  },
});

And that’s it! You should now be able to make payments and purchase items from the store.

Test Checkout

Now, try adding a few items to the cart and navigate to the checkout screen, you should be able to add an address and make payment. Here is what the checkout screen should look like:

What’s Next?

This article is part 2 of Creating an ecommerce app using Medusa and React Native. You can also add more functionalities using Medusa:

Add a search engine using MeiliSearch.
Check out the documentation for what more you can do with Medusa.

Should you have any issues or questions related to Medusa, feel free to reach out to the Medusa team via Discord.

Building a Full Stack Web3 YouTube Clone with Next, IPFS, The Graph, Solidity, and Polygon

Suhail Kakar — Tue, 13 Sep 2022 09:25:24 +0000

Every day more and more people are transiting to Web3. The demand for developers is increasing and skills in blockchain development are among the most in-demand in the tech industry.

The greatest approach to improving your Web3 skills is to use them to create projects. In this article, you are going to build a full-stack YouTube clone on top of the Polygon blockchain using the below tech stack.

Frontend framework: Next.js
Smart contracts: Solidity
Ethereum web client library: Ethers.js
File storage: IPFS
Querying data: The Graph
CSS Framework: TailwindCSS
Ethereum development environment: Hardhat
Layer 2 blockchain: Polygon

Prerequisites

Before you start with the tutorial make sure you have Node.js v14 or greater, and the Metamask browser extension installed on your machine.

Setting up Next.js App

The first step is to set up a next.js app and install the required dependencies. In order to do that, you would need to run the below command in your terminal.

mkdir web3-youtube && cd web3-youtube && npx create-next-app .

The following command creates a new directory named web3-youtube, then navigates to that directory and creates a next.js app.

Once the project is created successfully, run the following command to install a few other dependencies.

npm install react-icons plyr-react moment ipfs-http-client ethers @apollo/client graphql dotenv

react-icons is an icon library that we will be using in the app.
plyr-react is a video player component with rich plugins and functionalities.
moment is a JavaScript date library for parsing, validating, manipulating, and formatting dates.
ipfs-http-client is used to upload videos and thumbnails to IPFS.
ethers is an Ethereum client literary that will be used to interact with the smart contracts

You can also run the below command to install Hardhat as a dev dependency in your project.

npm install --dev hardhat @nomicfoundation/hardhat-toolbox

Initialize local Ethereum environment

Next, it is time to initialize a local smart contract development using Hardhat. To do that, simply run the below command in your terminal.

npx hardhat

The above command will scaffold the basic Solidity development environment. You should see below the new files/folders generated in your project directory.

test: This folder contains a test script written in Chai and it is used to test the smart contract.

hardhat.config.js: This file contains the configuration for Hardhat.

scripts: This folder contains a sample script to show to deploy a smart contract.

contracts: This is the folder that includes the files in which we write our smart contract code.

Adding TailwindCSS

Tailwind CSS is a utility-first CSS framework for building user interfaces rapidly. We will be using it for styling our applications. Run the below command to install tailwindcss and its dependencies.

npm install --dev tailwindcss postcss autoprefixer

Once the dependencies are installed, we need to initiate the Tailwind CSS. To do that, run the below code in your terminal.

npx tailwind init -p

The above command will generate two files named tailwind.config.js and postcss.config.js. Next, open the project in any code editor and replace the code inside tailwind.config.js with the below code.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

At last, add the tailwind directives for each of Tailwind’s layers to the ./styles/globals.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

You can also check if Tailwind CSS is integrated successfully by updating the code inside of the pages/index.js file.

import React from "react";

export default function index() {
  return (
    <div className="flex flex-col justify-center items-center h-screen">
      <h1 className="text-6xl font-bold text-slate-900">Web3 YouTube Clone</h1>
      <h3 className="text-2xl mt-8 text-slate-900">
        Next.js, TailwindCSS, Solidity, IPFS, The Graph and Polygon
      </h3>
    </div>
  );
}

Save the file and run npm run dev to start the next.js app and you should see a similar page.

The smart contract

Now that the project setup is completed, we can start writing smart contracts for our application. In this article, I will be using Solidity.

A smart contract is a decentralized program that responds to events by executing business logic.

In the contracts folder, create a new file named Youtube.sol and add the following code to it.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

contract YouTube {
    // Declaring the videoCount 0 by default
    uint256 public videoCount = 0;
    // Name of your contract
    string public name = "YouTube";
    // Creating a mapping of videoCount to Video
    mapping(uint256 => Video) public videos;

    //  Create a struct called 'Video' with the following properties:
    struct Video {
        uint256 id;
        string hash;
        string title;
        string description;
        string location;
        string category;
        string thumbnailHash;
        string date;
        address author;
    }

    // Create a 'VideoUploaded' event that emits the properties of the video
    event VideoUploaded(
        uint256 id,
        string hash,
        string title,
        string description,
        string location,
        string category,
        string thumbnailHash,
        string date,
        address author
    );

    constructor() {}

    // Function to upload a video
    function uploadVideo(
        string memory _videoHash,
        string memory _title,
        string memory _description,
        string memory _location,
        string memory _category,
        string memory _thumbnailHash,
        string memory _date
    ) public {
        // Validating the video hash, title and author's address
        require(bytes(_videoHash).length > 0);
        require(bytes(_title).length > 0);
        require(msg.sender != address(0));

        // Incrementing the video count
        videoCount++;
        // Adding the video to the contract
        videos[videoCount] = Video(
            videoCount,
            _videoHash,
            _title,
            _description,
            _location,
            _category,
            _thumbnailHash,
            _date,
            msg.sender
        );
        // Triggering the event
        emit VideoUploaded(
            videoCount,
            _videoHash,
            _title,
            _description,
            _location,
            _category,
            _thumbnailHash,
            _date,
            msg.sender
        );
    }
}

Modifying the Hardhat configurations

Now, we need to do some modifications to the Hardhat configuration file in order to deploy our smart contract. Open hardhat.config.js in your code editor and update the module.exports object to the below code.

require("@nomicfoundation/hardhat-toolbox");
require("dotenv").config();

module.exports = {
  solidity: "0.8.9",
  networks: {
    mumbai: {
      url: "https://rpc-mumbai.maticvigil.com",
      accounts: process.env.PRIVATE_KEY,
    },
  },
  paths: {
    artifacts: "./artifacts",
  },
};

To deploy our contract, we need a private key. Open Metamask in your browser and click on three top right and choose account details.

Then, click on "Export Private Key". You will be prompted to enter your Metamask password. Enter your password and click on Confirm.

You should see your private key inside a box in red color.

Create a .env file in the projects root directory and add your private key.

PRIVATE_KEY="YOUR_METAMASK_PRIVATE_KEY"

Never ever share your private key. Anyone with your private keys can steal any assets held in your account.

Compiling smart contracts with Hardhat

Now that our smart contract is completed, let's go ahead and compile them. You can compile it using the command below.

npx hardhat compile

if you have encountered Error HH801: Plugin @nomicfoundation/hardhat-toolbox requires the following dependencies to be installed. Run the below command to install hardhat dependencies

npm install --save-dev "@nomicfoundation/hardhat-network-helpers@^1.0.0" "@nomicfoundation/hardhat-chai-matchers@^1.0.0" "@nomiclabs/hardhat-ethers@^2.0.0" "@nomiclabs/hardhat-etherscan@^3.0.0" "@types/chai@^4.2.0" "@types/mocha@^9.1.0" "@typechain/ethers-v5@^10.1.0" "@typechain/hardhat@^6.1.2" "chai@^4.2.0" "hardhat-gas-reporter@^1.0.8" "solidity-coverage@^0.7.21" "ts-node@>=8.0.0" "typechain@^8.1.0" "typescript@>=4.5.0"

Once the package is installed, re-run the above compile command.

After the compile successfully completes, you should see a new directory named artifacts created in your projects directory.

Artifacts contain the compiled version of our smart contract in JSON format. This JSON file contains an array called ABI. ABI or Application Binary Interface is what we need to connect our client (Next app) with our compiled smart contract.

Deploying smart contract on Polygon

Now, we can deploy our smart contract on a Polygon Mumbai. We have already added RPC and Metamask private keys, so we don't need to do it again. However, you need some $MATIC in order to deploy a smart contract.

Navigate to https://faucet.polygon.technology/ and paste your wallet address. Click on confirm and you should receive 0.2 MATIC in your wallet.

By default, Metamask doesn't have Polygon blockchain in the list of networks, so we need to add it manually. Go to Metamask settings and choose to Add a network manually. Use the below information to add Polygon Mumbai to the Metamask.

Network Name: Mumbai Testnet
New RPC URL: <https://rpc-mumbai.maticvigil.com/>
Chain ID: 80001
Currency Symbol: MATIC
Block Explorer URL: <https://polygonscan.com/>

Save it and you should see 0.2 MATIC on your Metamask wallet.

Next, replace the code inside scripts/deploy.js with the below code.

// We require the Hardhat Runtime Environment explicitly here. This is optional
// but useful for running the script in a standalone fashion through `node <script>`.
//
// When running the script with `npx hardhat run <script>` you'll find the Hardhat
// Runtime Environment's members available in the global scope.
const hre = require("hardhat");

async function main() {
  // Hardhat always runs the compile task when running scripts with its command
  // line interface.
  //
  // If this script is run directly using `node` you may want to call compile
  // manually to make sure everything is compiled
  // await hre.run('compile');

  // We get the contract to deploy
  const YouTube = await hre.ethers.getContractFactory("YouTube");
  const youtube = await YouTube.deploy();

  await youtube.deployed();

  console.log("YouTube deployed to:", youtube.address);
}

// We recommend this pattern to be able to use async/await everywhere
// and properly handle errors.
main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

At last, run the below command to deploy your smart contract.

npx hardhat run scripts/deploy.js --network mumbai

This command will take some time, but once it is completed, you should see a message similar to this:

YouTube deployed to: 0x0AE42f411420b2710474e5e4f2F551b36350F9D1

And that means our contract was successfully deployed 🎉

Setting up The Graph

You can either use smart contract events with help of packages like ethers.js or you can use The Graph to query data from Blockchain. The Graph is an off-chain indexing solution that can help you query data in a much easier way.

In this tutorial, we will be using The Graph to query the videos from the blockchain, because it makes it so easy and it uses GraphQL query language.

Creating a Subgraph

A subgraph extracts data from a blockchain, processing it and storing it so that it can be easily queried via GraphQL.

To create a subgraph, you first need to install The Graph CLI. The Graph CLI is written in JavaScript, and you will need to install either yarn or npm to use it. You can run the below command to install it.

npm install -g @graphprotocol/graph-cli

Once installed, run graph init in order to initialize the subgraph in the project. You will be prompted with some questions. You can follow the below code for the answers:

✔ Protocol · ethereum
✔ Product for which to initialize · hosted-service
✔ Subgraph name · suhailkakar/blog-yt-clone
✔ Directory to create the subgraph in · indexer
✔ Contract address · 0x0AE42f411420b2710474e5e4f2F551b36350F9D1
✖ Failed to fetch ABI from Etherscan: ABI not found, try loading it from a local file
✔ ABI file (path) · /Users/suhail/Desktop/web3-youtube/frontend/artifacts/contracts/Youtube.sol/YouTube.json
✔ Contract Name · YouTube
✔ Add another contract? (y/N) · false

Make sure to update the contract address, name, and ABI.

Next, let’s declare the schema for our application. Replace the code inside of schema.graphql inside of the indexer directory with the below code.

type Video @entity {
  id: ID!
  hash: String! # string
  title: String! # string
  description: String # string
  location: String # string
  category: String # string
  thumbnailHash: String! # string
  date: String # string
  author: Bytes! # address
  createdAt: BigInt! # timestamp
}

Now, replace the code inside of you-tube.ts with the below code.

import { VideoUploaded as VideoUploadedEvent } from "../generated/YouTube/YouTube";
import { Video } from "../generated/schema";

export function handleVideoUploaded(event: VideoUploadedEvent): void {
  let video = new Video(event.params.id.toString());
  video.hash = event.params.hash;
  video.title = event.params.title;
  video.description = event.params.description;
  video.location = event.params.location;
  video.category = event.params.category;
  video.thumbnailHash = event.params.thumbnailHash;
  video.date = event.params.date;
  video.author = event.params.author;
  video.createdAt = event.block.timestamp;
  video.save();
}

Navigate to the indexer directory and run yarn codegen to generate code from your GraphQL operations and schema.

Building Subgraph

Before we deploy the subgraph, we need to build it. To do that simply run the below command in your terminal.

yarn build

Next, in order to deploy our subgraph, we need to create an account on The Graph.

Deploying Subgraph

Go ahead and create an account and then navigate to https://thegraph.com/hosted-service/dashboard. Click on Add Subgraph button.

On the next, screen fill in information related to your subgraph and create Subgraph Button at the bottom of the screen

Once the subgraph is created, copy its access token as we would need it later. In your terminal run graph auth and choose hosted service. In the deploy key, paste the key that you copied earlier.

At last, run the below command to deploy your subgraph.

yarn deploy

If everything goes fine, you should see your subgraph link similar to the below output. 🎉

Build completed: QmV19RJaCXCcKKBe3BTyrL8cGqKNaEo9kpwxMTgrPnDKYA

Deployed to https://thegraph.com/explorer/subgraph/suhailkakar/test-blog-yt

Queries (HTTP):     https://api.thegraph.com/subgraphs/name/suhailkakar/test-blog-yt

The Frontend

Now that we have completed smart contracts, it is time to work on the front end of the application. Let’s start with the Authentication of the app.

Authentication

The first step is to set up authentication in our app that allows users to connect their wallets. Create a new folder named landing inside of the pages folder and create a new file inside of it named index.js. This file will have the code for the landing page in our application, which will also allow users to connect their wallets.

Erase everything inside of index.js in the page directory and inside import the Landing file to the file. Here is what your index.js file should look like.

import React from "react";
import Landing from "./landing";

export default function index() {
  return (
   <Landing />
  );
}

Now, on the landing page, we will create a simple hero component with connect wallet button that will allow users to connect their wallets and access our application.

Add the below code to the landing page. I have already added comments so you can understand them properly.

import React, { useState } from "react";

function Landing() {
  // Creating a function to connect user's wallet
  const connectWallet = async () => {
    try {
      const { ethereum } = window;

      // Checking if user have Metamask installed
      if (!ethereum) {
        // If user doesn't have Metamask installed, throw an error
        alert("Please install MetaMask");
        return;
      }

      // If user has Metamask installed, connect to the user's wallet
      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });

      // At last save the user's wallet address in browser's local storage
      localStorage.setItem("walletAddress", accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      {/* Creating a hero component with black background and centering everything in the screen */}
      <section className="relative bg-black flex flex-col h-screen justify-center items-center">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="pt-32 pb-12 md:pt-40 md:pb-20">
            <div className="text-center pb-12 md:pb-16">
              <h1
                className="text-5xl text-white md:text-6xl font-extrabold leading-tighter tracking-tighter mb-4"
                data-aos="zoom-y-out"
              >
                It is YouTube, but{" "}
                <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-400">
                  Decentralized
                </span>
              </h1>
              <div className="max-w-3xl mx-auto">
                <p
                  className="text-xl text-gray-400 mb-8"
                  data-aos="zoom-y-out"
                  data-aos-delay="150"
                >
                  A YouTube Clone built on top of Polygon network, allow users
                  to create, share and watch videos, without worrying about
                  their privacy.
                </p>
                <button
                  className="items-center  bg-white rounded-full font-medium  p-4 shadow-lg"
                  onClick={() => {
                    // Calling the connectWallet function when user clicks on the button
                    connectWallet();
                  }}
                >
                  <span>Connect wallet</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default Landing;

If everything goes fine you should see a similar screen. You should also be able to connect your MetaMask wallet.

Uploading videos

Now that users are able to connect their wallets, it is time to add upload video functionality to our app.

Create a new folder in the pages directory named upload and add a file named index.js. Inside of the file adds the below code. Again I have already added the comments on the code, so I hope that helps you to understand it.

import React, { useState, useRef } from "react";
import { BiCloud, BiMusic, BiPlus } from "react-icons/bi";
import { create } from "ipfs-http-client";

export default function Upload() {
  // Creating state for the input field
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [category, setCategory] = useState("");
  const [location, setLocation] = useState("");
  const [thumbnail, setThumbnail] = useState("");
  const [video, setVideo] = useState("");

  //  Creating a ref for thumbnail and video
  const thumbnailRef = useRef();
  const videoRef = useRef();

  return (
    <div className="w-full h-screen bg-[#1a1c1f] flex flex-row">
      <div className="flex-1 flex flex-col">
        <div className="mt-5 mr-10 flex  justify-end">
          <div className="flex items-center">
            <button className="bg-transparent  text-[#9CA3AF] py-2 px-6 border rounded-lg  border-gray-600  mr-6">
              Discard
            </button>
            <button
              onClick={() => {
                handleSubmit();
              }}
              className="bg-blue-500 hover:bg-blue-700 text-white  py-2  rounded-lg flex px-4 justify-between flex-row items-center"
            >
              <BiCloud />
              <p className="ml-2">Upload</p>
            </button>
          </div>
        </div>
        <div className="flex flex-col m-10  mt-5  lg:flex-row">
          <div className="flex lg:w-3/4 flex-col ">
            <label className="text-[#9CA3AF]  text-sm">Title</label>
            <input
              value={title}
              onChange={(e) => setTitle(e.target.value)}
              placeholder="Rick Astley - Never Gonna Give You Up (Official Music Video)"
              className="w-[90%] text-white placeholder:text-gray-600  rounded-md mt-2 h-12 p-2 border  bg-[#1a1c1f] border-[#444752] focus:outline-none"
            />
            <label className="text-[#9CA3AF] mt-10">Description</label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="Never Gonna Give You Up was a global smash on its release in July 1987, topping the charts in 25 countries including Rick’s native UK and the US Billboard Hot 100.  It also won the Brit Award for Best single in 1988. Stock Aitken and Waterman wrote and produced the track which was the lead-off single and lead track from Rick’s debut LP “Whenever You Need Somebody."
              className="w-[90%] text-white h-32 placeholder:text-gray-600  rounded-md mt-2 p-2 border  bg-[#1a1c1f] border-[#444752] focus:outline-none"
            />

            <div className="flex flex-row mt-10 w-[90%]  justify-between">
              <div className="flex flex-col w-2/5   ">
                <label className="text-[#9CA3AF]  text-sm">Location</label>
                <input
                  value={location}
                  onChange={(e) => setLocation(e.target.value)}
                  type="text"
                  placeholder="Bali - Indonesia"
                  className="w-[90%] text-white placeholder:text-gray-600  rounded-md mt-2 h-12 p-2 border  bg-[#1a1c1f] border-[#444752] focus:outline-none"
                />
              </div>
              <div className="flex flex-col w-2/5   ">
                <label className="text-[#9CA3AF]  text-sm">Category</label>
                <select
                  value={category}
                  onChange={(e) => setCategory(e.target.value)}
                  className="w-[90%] text-white placeholder:text-gray-600  rounded-md mt-2 h-12 p-2 border  bg-[#1a1c1f] border-[#444752] focus:outline-none"
                >
                  <option>Music</option>
                  <option>Sports</option>
                  <option>Gaming</option>
                  <option>News</option>
                  <option>Entertainment</option>
                  <option>Education</option>
                  <option>Science & Technology</option>
                  <option>Travel</option>
                  <option>Other</option>
                </select>
              </div>
            </div>
            <label className="text-[#9CA3AF]  mt-10 text-sm">Thumbnail</label>

            <div
              onClick={() => {
                thumbnailRef.current.click();
              }}
              className="border-2 w-64 border-gray-600  border-dashed rounded-md mt-2 p-2  h-36 items-center justify-center flex"
            >
              {thumbnail ? (
                <img
                  onClick={() => {
                    thumbnailRef.current.click();
                  }}
                  src={URL.createObjectURL(thumbnail)}
                  alt="thumbnail"
                  className="h-full rounded-md"
                />
              ) : (
                <BiPlus size={40} color="gray" />
              )}
            </div>

            <input
              type="file"
              className="hidden"
              ref={thumbnailRef}
              onChange={(e) => {
                setThumbnail(e.target.files[0]);
              }}
            />
          </div>

          <div
            onClick={() => {
              videoRef.current.click();
            }}
            className={
              video
                ? " w-96   rounded-md  h-64 items-center justify-center flex"
                : "border-2 border-gray-600  w-96 border-dashed rounded-md mt-8   h-64 items-center justify-center flex"
            }
          >
            {video ? (
              <video
                controls
                src={URL.createObjectURL(video)}
                className="h-full rounded-md"
              />
            ) : (
              <p className="text-[#9CA3AF]">Upload Video</p>
            )}
          </div>
        </div>
        <input
          type="file"
          className="hidden"
          ref={videoRef}
          accept={"video/*"}
          onChange={(e) => {
            setVideo(e.target.files[0]);
            console.log(e.target.files[0]);
          }}
        />
      </div>
    </div>
  );
}

And you should see a similar screen if you navigate to http://localhost:3000/upload.

This is a basic upload page, for now, we just have the inputs and save their value of them in the state.

Before working on the handle submit function, create a new folder named utils and inside of it create a file named getContract. This file will be used to interact with your contract on the upload page. Add the below code to it and make sure to replace the contract address with your contract address.

import ContractAbi from "../artifacts/contracts/YouTube.sol/YouTube.json";
import { ethers } from "ethers";

export default function getContract() {
  // Creating a new provider
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  // Getting the signer
  const signer = provider.getSigner();
  // Creating a new contract factory with the signer, address and ABI
  let contract = new ethers.Contract(
    "0xf6F03b0837569eec33e0Af7f3F43B362916e5de1",
    ContractAbi.abi,
    signer
  );
  // Returning the contract
  return contract;
}

Now we need an IPFS client to upload videos and thumbnails. There are many services that offer IPFS service, you can signup and paste your IPFS URL below code.

Back to the upload page (pages/upload/index.js), let's first create an IPFS client to upload videos and thumbnails.

  const client = create("YOU_IPFS_CLIENT_LINK_HERE");

Now let's declare 4 functions in the upload page.

  // When user clicks on the upload button
  const handleSubmit = async () => {
    // Checking if user has filled all the fields
    if (
      title === "" ||
      description === "" ||
      category === "" ||
      location === "" ||
      thumbnail === "" ||
      video === ""
    ) {
      // If user has not filled all the fields, throw an error
      alert("Please fill all the fields");
      return;
    }
    // If user has filled all the fields, upload the thumbnail to IPFS
    uploadThumbnail(thumbnail);
  };

  const uploadThumbnail = async (thumbnail) => {
    try {
      // Uploading the thumbnail to IPFS
      const added = await client.add(thumbnail);
      // Getting the hash of the uploaded thumbnail and passing it to the uploadVideo function
      uploadVideo(added.path);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  };

  const uploadVideo = async (thumbnail) => {
    try {
      // Uploading the video to IPFS
      const added = await client.add(video);
      // Getting the hash of the uploaded video and passing both video and thumbnail to the saveVideo function
      await saveVideo(added.path, thumbnail);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  };

  const saveVideo = async (video, thumbnail) => {
    // Get the contract from the getContract function
    let contract = await getContract();
    // Get todays date
    let UploadedDate = String(new Date());
    // Upload the video to the contract
    await contract.uploadVideo(
      video,
      title,
      description,
      location,
      category,
      thumbnail,
      UploadedDate
    );
  };

I have already commented on each line of the code so you can understand what is going on.

Save the file and BOOM!!
We are done with the upload functionality. You should now be able to upload videos to the contract.

Connecting with The Graph

In order to fetch videos from The Graph, we need to set up a graphQL client. Create a new file named client.js in the root directory and add the following code inside of it.

import { ApolloClient, InMemoryCache } from "@apollo/client";

const client = new ApolloClient({
uri: "YOUR_GRAPHQL_URL_HERE",
cache: new InMemoryCache(),
});

export default client;

Make sure to replace the URI with your graph URL. And also replace the code inside of _app.js in the page directory with the below code.

import { ApolloProvider } from "@apollo/client";
import client from "../client";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

In the above code, we have wrapped our code with ApolloProvider and provided the client which we created earlier as a prop.

Fetching videos from Blockchain

Create a new file named index.js inside of a new folder named home. And for now you can add the below code to the file.

import React, { useEffect, useState } from "react";
import { useApolloClient, gql } from "@apollo/client";

export default function Main() {
  // Creating a state to store the uploaded video
  const [videos, setVideos] = useState([]);

  // Get the client from the useApolloClient hook
  const client = useApolloClient();

  // Query the videos from the the graph
  const GET_VIDEOS = gql`
    query videos(
      $first: Int
      $skip: Int
      $orderBy: Video_orderBy
      $orderDirection: OrderDirection
      $where: Video_filter
    ) {
      videos(
        first: $first
        skip: $skip
        orderBy: $orderBy
        orderDirection: $orderDirection
        where: $where
      ) {
        id
        hash
        title
        description
        location
        category
        thumbnailHash
        isAudio
        date
        author
        createdAt
      }
    }
  `;

  // Function to get the videos from the graph
  const getVideos = async () => {
    // Query the videos from the graph
    client
      .query({
        query: GET_VIDEOS,
        variables: {
          first: 200,
          skip: 0,
          orderBy: "createdAt",
          orderDirection: "desc",
        },
        fetchPolicy: "network-only",
      })
      .then(({ data }) => {
        // Set the videos to the state
        setVideos(data.videos);
      })
      .catch((err) => {
        alert("Something went wrong. please try again.!", err.message);
      });
  };

  useEffect(() => {
    // Runs the function getVideos when the component is mounted
    getVideos();
  }, []);
  return (
    <div className="w-full bg-[#1a1c1f] flex flex-row">
      <div className="flex-1 h-screen flex flex-col">
        <div className="flex flex-row flex-wrap">
          {videos.map((video) => (
            <div className="w-80">
              <p>{video.title}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Save the file and you should see a similar output.

As you can see for now we are just fetching the video title. So let's create a reusable component to display the videos nicely.

Make sure to upload a few videos so you can see the above output

Create a folder named components, and then create a new file named Video.js inside of it. Add the below code the file. It is a very basic video component.

import React from "react";
import { BiCheck } from "react-icons/bi";
import moment from "moment";

export default function Video({ horizontal, video }) {
  return (
    <div
      className={`${
        horizontal
          ? "flex flex-row mx-5 mb-5  item-center justify-center"
          : "flex flex-col m-5"
      } `}
    >
      <img
        className={
          horizontal
            ? "object-cover rounded-lg w-60  "
            : "object-cover rounded-lg w-full h-40"
        }
        src={`https://ipfs.io/ipfs/${video.thumbnailHash}`}
        alt=""
      />
      <div className={horizontal && "ml-3  w-80"}>
        <h4 className="text-md font-bold dark:text-white mt-3">
          {video.title}
        </h4>
        <p className="text-sm flex items-center text-[#878787] mt-1">
          {video.category + " • " + moment(video.createdAt * 1000).fromNow()}
        </p>
        <p className="text-sm flex items-center text-[#878787] mt-1">
          {video?.author?.slice(0, 9)}...{" "}
          <BiCheck size="20px" color="green" className="ml-1" />
        </p>
      </div>
    </div>
  );
}

Import the Video component to the home file and replace the map function with the below code.

{videos.map((video) => (
        <div 
            className="w-80"
            onClick={() => {
                // Navigation to the video screen (which we will create later)
                window.location.href = `/video?id=${video.id}`;
       }}
            >
                <Video video={video} />
        </div>
))}

Save the file and now you should see a nice-looking homepage, similar to below image.

Video page

Now that we are able to fetch the videos in the home screen. Let's work on the video page where the user will be redirected if they click on any video component.

Create a new file in the components folder named Player and add the below code to it.
We are using react plyr to create a video player component.

import Plyr from "plyr-react";
import "plyr-react/plyr.css";

export default function Player({ hash }) {
  let url = `https://ipfs.io/ipfs/${hash}`;
  return (
    <Plyr
      source={{
        type: "video",
        title: "Example title",
        sources: [
          {
            src: url,
            type: "video/mp4",
          },
        ],
      }}
      options={{
        autoplay: true,
      }}
      autoPlay={true}
    />
  );
}

Create another file in the same directory named VideoContainer . Imagine this component as the left side of the youtube video page, which contains a player, video title, upload date, and description. Add the below code to the file.

import React from "react";
import Player from "./Player";

export default function VideoComponent({ video }) {
  return (
    <div>
      <Player hash={video.hash} />
      <div className="flex justify-between flex-row py-4">
        <div>
          <h3 className="text-2xl dark:text-white">{video.title}</h3>
          <p className="text-gray-500 mt-1">
            {video.category} •{" "}
            {new Date(video.createdAt * 1000).toLocaleString("en-IN")}
          </p>
        </div>
      </div>
    </div>
  );
}

At last create a new folder named video inside of pages folder and create a new file index.js of it.

For now you can add the following code to the file.

import React, { useEffect, useState } from "react";
import { useApolloClient, gql } from "@apollo/client";
import Video from "../../components/Video";
import VideoComponent from "../../components/VideoContainer";

export default function VideoPage() {
  const [video, setVideo] = useState(null);
  const [relatedVideos, setRelatedVideos] = useState([]);

  const client = useApolloClient();
  const getUrlVars = () => {
    var vars = {};
    var parts = window.location.href.replace(
      /[?&]+([^=&]+)=([^&]*)/gi,
      function (m, key, value) {
        vars[key] = value;
      }
    );
    return vars;
  };

  const GET_VIDEOS = gql`
    query videos(
      $first: Int
      $skip: Int
      $orderBy: Video_orderBy
      $orderDirection: OrderDirection
      $where: Video_filter
    ) {
      videos(
        first: $first
        skip: $skip
        orderBy: $orderBy
        orderDirection: $orderDirection
        where: $where
      ) {
        id
        hash
        title
        description
        location
        category
        thumbnailHash
        isAudio
        date
        author
        createdAt
      }
    }
  `;

  const getRelatedVideos = () => {
    client
      .query({
        query: GET_VIDEOS,
        variables: {
          first: 20,
          skip: 0,
          orderBy: "createdAt",
          orderDirection: "desc",
          where: {},
        },
        fetchPolicy: "network-only",
      })
      .then(({ data }) => {
        setRelatedVideos(data.videos);
        const video = data?.videos?.find(
          (video) => video.id === getUrlVars().id
        );
        setVideo(video);
      })
      .catch((err) => {
        alert("Something went wrong. please try again.!", err.message);
      });
  };

  useEffect(() => {
    getRelatedVideos();
  }, []);

  return (
    <div className="w-full   bg-[#1a1c1f]  flex flex-row">
      <div className="flex-1 flex flex-col">
        {video && (
          <div className="flex flex-col m-10 justify-between      lg:flex-row">
            <div className="lg:w-4/6 w-6/6">
              <VideoComponent video={video} />
            </div>
            <div className="w-2/6">
              <h4 className="text-md font-bold text-white ml-5 mb-3">
                Related Videos
              </h4>
              {relatedVideos.map((video) => (
                <div
                  onClick={() => {
                    setVideo(video);
                  }}
                  key={video.id}
                >
                  <Video video={video} horizontal={true} />
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Save the file and click on any videos on the home screen. You should be redirected to the video screen similar to the below page.

Search Functionality

Now that we are almost completed with app’s functionality. Let’s also add a search functionality.

In the components folder, create a new file named Header.js. For now, you can add the below code.

import React from "react";
import { AiOutlinePlusCircle } from "react-icons/ai";

export const Header = ({ search }) => {
  return (
    <header className="w-full flex justify-between h-20 items-center border-b p-4 border-[#202229]">
      <div className=" w-1/3    ">
        <img
          width={80}
          src={"https://i.ibb.co/JHn1pjz/logo.png"}
          alt="YouTube Logo"
        />
      </div>
      <div className=" w-1/3 flex justify-center items-center">
        {search ? (
          <input
            type="text"
            onChange={(e) => search(e.target.value)}
            placeholder="Type to search"
            className=" border-0 bg-transparent focus:outline-none text-white"
          />
        ) : null}
      </div>
      <div className=" w-1/3 flex justify-end">
        <AiOutlinePlusCircle
          onClick={() => {
            window.location.href = "/upload";
          }}
          size="30px"
          className="mr-8 fill-whiteIcons dark:fill-white cursor-pointer"
        />
      </div>
    </header>
  );
};

This is a very simple component that is divided into 3 parts. On the left we have a logo of the application, on the middle we have declared a input that users can type to search and at the last we have a icon that navigates users to the upload screen.

Back to the home page (pages/home/index.js) import the Header component and add if after line number 73

// <div className="flex-1 h-screen flex flex-col">
        <Header
          search={(e) => {
            console.log(e);
          }}
        />
// <div className="flex flex-row flex-wrap">

Now you should see a header component in the home page.

Declare a new state on the home page after line 8 to capture the value in the search screen.

const [search, setSearch] = useState("");

You can also update the Header component to set the value of the input in the above useState.

<Header
    search={(e) => {
        setSearch(e);
    }}
 />

Let’s also update the getVideos function to search videos in case there is some value in the state.

const getVideos = async () => {
    // Query the videos from the graph
    client
      .query({
        query: GET_VIDEOS,
        variables: {
          first: 200,
          skip: 0,
          orderBy: "createdAt",
          orderDirection: "desc",
                    // NEW: Added where in order to search for videos
          where: {
            ...(search && {
              title_contains_nocase: search,
            }),
          },
        },
        fetchPolicy: "network-only",
      })
      .then(({ data }) => {
        // Set the videos to the state
        setVideos(data.videos);
      })
      .catch((err) => {
        alert("Something went wrong. please try again.!", err.message);
      });
  };

In the above function, we just added a where object to search for videos in case there is a value in the state.

Finally, update the useEffect function to also run the function if there is a change in the search state.

useEffect(() => {
    // Runs the function getVideos when the component is mounted and also if there is a change in the search stae
        getVideos();
  }, [search]);

And now if you search anything, you should see the videos automatically filters. Yayy 🎉

What’s Next?

If you have come this far, it means that you have very passionate about building Web3 applications. here are a few other functionalities/improvements which you can add to the application if you are interested.

Allowing users to search for videos based on video category. (Check this repo, if you need a reference)
Trying to use Arweave instead of IFPS and see how it works.
Trying adding light mode to the application and allow users to toggle
You can also make the application responsive

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section or DM me on Twitter.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

How I Created an Ecommerce App from Scratch Using React Native and Medusa

Suhail Kakar — Thu, 09 Jun 2022 12:53:00 +0000

React Native is a cross-platform mobile app framework that allows you to build native mobile applications for iOS and Android using JavaScript. It was developed by Meta Platforms, Inc. and it is currently among the most popular JavaScript frameworks with a huge active community behind it.

Medusa is an open source headless commerce platform that allows you to create stores in a few minutes. It includes every feature a store needs such as order management, customers, payments, products, discounts, and a lot more.

In this tutorial, you are building a React Native ecommerce mobile application with Medusa. For this part, you are going to create two screens, one for all products and the other for the product info.

You can also find the source code of the application on the GitHub

Prerequisites

Before you start with the tutorial make sure you have Node.js v14 or greater installed on your machine.

Set Up Medusa Server

The first step is to setup the Medusa server, where the backend and APIs are handled.

You can install the Medusa CLI on your machine by running the following command:

npm install -g @medusajs/medusa-cli

Once the CLI is installed successfully, run the following command to create a Medusa project:

medusa new my-medusa-store --seed

The --seed option is used to add dummy data such as products and users to the store.

Change to the newly-created directory my-medusa-store and run the following command to start the medusa server:

npm start

It is recommended to add a storage plugin to be able to add products with images in Medusa. You can use MinIO, AWS S3, or Spaces.

Set Up Medusa Admin

Medusa has a very powerful admin dashboard where you can manage your products, payments, transaction, and more. This is very easy to setup however it is optional, so if you want you can skip this section.

In a separate directory, clone the Medusa Admin:

 git clone https://github.com/medusajs/admin medusa-admin

Once it is cloned, you should see a new directory named medusa-admin. Navigate to the new directory and run the following command to install the dependencies of the project:

npm install

Finally, make sure that the Medusa server is still running and start the admin panel server by running the following command:

npm run develop

Now, open your browser and navigate to localhost:7000 and you should see the login page for admin panel. Login in to the admin with the below credentials.

Email: admin@medusa-test.com
Password: supersecret

The --seed option you used earlier adds an admin user with the email and password

Once you are logged in successfully, choose Products from sidebar and you should see the list of products in your store.

If you are experiencing connection issues, it's most likely because of CORS issues. Check here how to fix it.

You can also create a new product by clicking on the "New Product" button. Add information for your product such as a name, description, handle, variants, images, prices, and a lot more.

Set Up React Native Ecommerce Project

Now that you have the store backend and admin panel ready it is time to start working on the react native ecommerce app.

In this tutorial, you are using Expo CLI to build the app. Run the following command to install the Expo CLI:

npm install -g expo-cli

Once the CLI is installed successfully, run the following command to create a new react native ecommerce project:

expo init

You will be promoted with some questions. You can follow the below code for the answers:

What would you like to name your app? … medusa-store
Choose a template: › blank a minimal app as clean as an empty canvas
Downloaded template.

🧶 Using Yarn to install packages. Pass --npm to use npm instead.
Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd medusa-store
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web

Once the project is created successfully you should see a new directory named medusa-store. Navigate to the new directory and run the following command to install a few other dependencies:

expo install react-native-screens react-native-router-flux react-native-reanimated rn-responsive-screen react-native-safe-area-context @expo/vector-icons react-native-gesture-handler axios

react-native-screens is used to expose native navigation container components to React Native.
react-native-router-flux provides API that helps users navigate between screens.
react-native-reanimated creates smooth animations and interactions that run on the UI thread.
rn-responsive-screen is a small package used for responsiveness in the app.
react-native-safe-area-context is a flexible way to handle safe areas.
react-native-gesture-handler provides native-driven gesture management APIs for building the best possible touch-based experiences.
axios is a promise-based HTTP Client to easily send requests to REST APIs and perform CRUD operations.
@expo/vector-icons includes popular icons sets which you can use in the app.

After the packages are installed successfully, start the development server by running the following:

expo start

You can either scan the QR code using your device or run the app on an Android/iOS simulator. Once the app is shown on your mobile, you should see a similar screen.

This is a basic react native code in the App.js file.

Set Up Routes

In this section, you’ll set up different routes in your app.

Before setting up the routes, you have to create a few screens. Create a new folder named screensand inside it create a new file named Products.js.

Inside Products.js insert the following code:

import { StyleSheet, Text, View } from "react-native";

export default function Products() {
  return (
    <View style={styles.container}>
      <Text>Product Screen!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

For now it contains a very simple Text component.

Now that you have a screen setup, you can continue to add routes to the project. Replace the code inside of the App.js with the following:

import { Router, Scene, Stack } from "react-native-router-flux";
import Products from "./screens/Products";

export default function App() {
  return (
    <Router>
      <Stack key="root">
        <Scene key="products" component={Products} hideNavBar />
      </Stack>
    </Router>
  );
}

In the above code, you are using react-native-router-flux to create the navigation. Router is used as a parent component and each Scene represents one screen. For now you have just one screen.

Save the file and you might see an error similar to this.

Error: Requiring module "node_modules/react-native-reanimated/src/Animated.js", which threw an exception: Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

It is because that react-native-router-flux uses react-native-reanimated and in order to make it work you need to add it to babel.config.js. Open the babel file from your directory and add the below line after presents:

plugins: ["react-native-reanimated/plugin"],

Save the file and restart the server with the following command:

expo start -c

The option -c clears the cache before running the server.

If you see the error “Invariant Violation: Tried to register two views with the same name RNGestureHandlerButton”, delete the node_modules directory and use Yarn to re-install the dependencies.

Products List Screen

Create a new folder in the root directory named components. In the components folder create 3 files. Button.js, ProductCard.js, and Header.js.

In the Button.js file insert the following code to create a basic button component:

import { View, Text, StyleSheet } from "react-native";
import React from "react";
import { widthToDp } from "rn-responsive-screen";

export default function Button({ title, onPress, style, textSize }) {
  return (
    <View style={[styles.container, style]}>
      <Text
        style={[styles.text, { fontSize: textSize ? textSize : widthToDp(3.5) }, ]}
        onPress={onPress}
      >
        {title}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#C37AFF",
    padding: 5,
    width: widthToDp(20),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 59,
  },
  text: {
    color: "#fff",
    fontWeight: "bold",
  },
});

Similarly in the Header.js insert the following code to create a simple header component:

import { View, Image, StyleSheet, Text } from "react-native";
import React from "react";

export default function Header({ title }) {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: "https://user-images.githubusercontent.com/7554214/153162406-bf8fd16f-aa98-4604-b87b-e13ab4baf604.png",
        }}
        style={styles.logo}
      />
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: "500",
  },
  logo: {
    width: 50,
    height: 50,
  },
});

The last one is ProductCard.js. It is the main component in which you render the product data:

import { View, Text, Image, StyleSheet } from "react-native";
import React from "react";
import { widthToDp, heightToDp } from "rn-responsive-screen";
import Button from "./Button";

export default function ProductCard({ key, product }) {
  return (
    <View style={styles.container} key={key}>
      <Image
        source={{
          uri: product.thumbnail,
        }}
        style={styles.image}
      />
      <Text style={styles.title}>{product.title}</Text>
      <Text style={styles.category}>{product.handle}</Text>
      <View style={styles.priceContainer}>
        <Text style={styles.price}>
          ${product.variants[0].prices[1].amount / 100}
        </Text>

        <Button
          title="BUY"
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    shadowColor: "#000",
    borderRadius: 10,
    marginBottom: heightToDp(4),
    shadowOffset: {
      width: 2,
      height: 5,
    },
    shadowOpacity: 0.25,
    shadowRadius: 6.84,
    elevation: 5,
    padding: 10,
    width: widthToDp(42),
    backgroundColor: "#fff",
  },
  image: {
    height: heightToDp(40),
    borderRadius: 7,
    marginBottom: heightToDp(2),
  },
  title: {
    fontSize: widthToDp(3.7),
    fontWeight: "bold",
  },
  priceContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: heightToDp(3),
  },
  category: {
    fontSize: widthToDp(3.4),
    color: "#828282",
    marginTop: 3,
  },
  price: {
    fontSize: widthToDp(4),
    fontWeight: "bold",
  },
});

In the above code, the product price is divided by 100 because in Medusa the prices are hosted on the server without decimals.

Create a new folder named constants and inside it create a new file named url.js with the following content:

const baseURL = "http://127.0.0.1:9000";

export default baseURL;

In the above code, you define your Medusa server’s base URL. To be able to connect from your device to the local server, you must change the value of baseURL to your machine’s IP address. You can refer to this guide to learn how to find your IP address.

That’s it for the components. Now replace the code in the Products.js with the following:

import { ScrollView, StyleSheet,TouchableOpacity, View } from "react-native";
import React, { useEffect, useState } from "react";
import ProductCard from "../components/ProductCard";
import { widthToDp } from "rn-responsive-screen";
import axios from "axios";
import Header from "../components/Header";
import { Actions } from "react-native-router-flux";
import baseURL from "../constants/url";

export default function Products() {
  const [products, setProducts] = useState([]);

  function fetchProducts() {
        axios.get(`${baseURL}/store/products`).then((res) => {
      setProducts(res.data.products);
    }); 
 }

  useEffect(() => {
    fetchProducts();
  }, []);

  return (
    <View style={styles.container}>
      <Header title="Medusa's Store" />
      <ScrollView>
        <View style={styles.products}>
          {products.map((product) => (
            <ProductCard key={product.id} product={product} />
          ))}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  products: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    width: widthToDp(100),
    paddingHorizontal: widthToDp(4),
    justifyContent: "space-between",
  },
});

In the code above, you call fetchProducts when the screen loads using useEffect. In the fetchProducts function, you use axios to fetch the products from the Medusa server and save it in the state.

Once you fetch the products, you render them using the ProductCard component.

Save the file and make sure that Expo and the Medusa server are running. Then, open the app on your device and you should see on the home screen the products from your Medusa server.

Product Info Screen

In this section, you’ll create the Product Info screen where the user can see more details about the product.

In the screens directory, create a new file named ProductInfo.js and for now you can use it to render a simple Text component:

import { View, Text } from "react-native";
import React from "react";

export default function ProductInfo() {
  return (
    <View>
      <Text>Product Info Screen</Text>
    </View>
  );
}

Then, add the import ProductInfo at the top of App.js:

import ProductInfo from "./screens/ProductInfo";

And add a new Scene component below the existing Scene component in the returned JSX:

<Scene key="ProductInfo" component={ProductInfo} hideNavBar />

In the components directory, create a new directory named ProductInfo and create inside it Image.js with the following content:

import { View, TouchableOpacity, Image, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import { widthToDp } from "rn-responsive-screen";

export default function Images({ images }) {
  const [activeImage, setActiveImage] = useState(null);

  useEffect(() => {
    setActiveImage(images[0].url);
  }, []);

  return (
    <View style={styles.imageContainer}>
      <Image source={{ uri: activeImage }} style={styles.image} />
      <View style={styles.previewContainer}>
        {images.map((image, index) => (
          <TouchableOpacity
            key={index}
            onPress={() => {
              setActiveImage(image.url);
            }}
          >
            <Image
              source={{ uri: image.url }}
              style={[
                styles.imagePreview,
                {
                  borderWidth: activeImage === image.url ? 3 : 0,
                },
              ]}
            />
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  image: {
    width: widthToDp(100),
    height: widthToDp(100),
  },
  previewContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginTop: widthToDp(-10),
  },
  imageContainer: {
    backgroundColor: "#F7F6FB",
    paddingBottom: widthToDp(10),
  },
  imagePreview: {
    width: widthToDp(15),
    marginRight: widthToDp(5),
    borderColor: "#C37AFF",
    borderRadius: 10,
    height: widthToDp(15),
  },
});

In the above component you display a main big image and below it the rest of the product images as thumbnails. When the user press on one of the thumbnail images it is set as the active image and displayed as the main image.

In the Products.js file, replace the map function in the returned JSX with the following:

{products.map((product) => (
    <TouchableOpacity key={product.id} onPress={() => Actions.ProductInfo({ productId: product.id })}>
      <ProductCard product={product} />
    </TouchableOpacity>
  ))
}

You add a TouchableOpacity that navigates the user to the product info screen when they click on a product.

Using react-router-flux you pass the product ID from the home screen to the product info screen.

Then, replace the code in ProductInfo.js with the following:

import { View, Text, ScrollView,TouchableOpacity, StyleSheet } from "react-native";
import React, { useState, useEffect } from "react";
import axios from "axios";
import { SafeAreaView } from "react-native-safe-area-context";
import Images from "../components/ProductInfo/Image";
import baseURL from "../constants/url";
import { Actions } from "react-native-router-flux";
import { Ionicons } from "@expo/vector-icons";

export default function ProductInfo({ productId }) {
  const [productInfo, setproductInfo] = useState(null);

    useEffect(() => {
    axios.get(`${baseURL}/store/products/${productId}`).then((res) => {
      setproductInfo(res.data.product);
    });
  }, []);

  return (
    <SafeAreaView style={styles.container}>
            <TouchableOpacity onPress={() => Actions.pop()}>
        <Ionicons
          style={styles.icon}
          name="arrow-back-outline"
          size={24}
          color="black"
        />
      </TouchableOpacity>
      <ScrollView>
        {productInfo && (
          <View>
            <Images images={productInfo.images} />
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: "#fff",
    justifyContent: "center",
  },
  icon: {
    marginLeft: 10,
  },
});

To briefly explain the code snippet:

First you import all necessary components.
Then you fetch the product data in useEffect function and save it in the state.
Finally, you display the images using the Images component.

Open the app now and click on any product on the home screen. A new screen will open showing the product’s images.

Now, you’ll display the product’s information.

In the components folder, inside the ProductInfo directory create a new file named MetaInfo.js with the following content:

import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import { height, heightToDp } from "rn-responsive-screen";

export default function MetaInfo({ product }) {
  const [activeSize, setActiveSize] = useState(0);
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.title}>{product.title}</Text>
        <View>
          <Text style={styles.price}>
            ${product.variants[0].prices[1].amount / 100}
          </Text>
          <Text style={styles.star}>⭐⭐⭐</Text>
        </View>
      </View>
      <Text style={styles.heading}>Available Sizes</Text>
      <View style={styles.row}>
        {product.options[0].values.map((size, index) => (
          <Text
            onPress={() => {
              setActiveSize(index);
            }}
            style={[
              styles.sizeTag,
              {
                borderWidth: activeSize === index ? 3 : 0,
              },
            ]}
          >
            {size.value}
          </Text>
        ))}
      </View>
      <Text style={styles.heading}>Description</Text>
      <Text style={styles.description}>{product.description}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: heightToDp(-5),
    backgroundColor: "#fff",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    height: heightToDp(50),
    padding: heightToDp(5),
  },
  title: {
    fontSize: heightToDp(6),
    fontWeight: "bold",
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  price: {
    fontSize: heightToDp(5),
    fontWeight: "bold",
    color: "#C37AFF",
  },
  heading: {
    fontSize: heightToDp(5),
    marginTop: heightToDp(3),
  },
  star: {
    fontSize: heightToDp(3),
    marginTop: heightToDp(1),
  },
  sizeTag: {
    borderColor: "#C37AFF",
    backgroundColor: "#F7F6FB",
    color: "#000",
    paddingHorizontal: heightToDp(7),
    paddingVertical: heightToDp(2),
    borderRadius: heightToDp(2),
    marginTop: heightToDp(2),
    overflow: "hidden",
    fontSize: heightToDp(4),
    marginBottom: heightToDp(2),
  },
  description: {
    fontSize: heightToDp(4),
    color: "#aaa",
    marginTop: heightToDp(2),
  },
});

In the above component, you render the product title, price, description and variants.

For the product variant, you map all the variants and when a user press on one of them, you set that variant as active.

Save the MetaInfo.js file and import it at the top of screens/ProductInfo.js:

import MetaInfo from "../components/ProductInfo/MetaInfo";

Then, in the returned JSX add the MetaInfo component below the Images component:

<MetaInfo product={productInfo} />

Save the changes and check the app now. The product info screen now shows details about the product.

What’s Next?

This article gives you the basis to creating a Medusa and React Native ecommerce app. Here are some more functionalities you can add using Medusa:

Add a cart and allow adding products to cart.
Add a payment provider using Stripe.
Add a search engine using MeiliSearch.
Check out the documentation for what more you can do with Medusa.

Should you have any issues or questions related to Medusa, then feel free to reach out to the Medusa team via Discord.

The Complete Roadmap and Resources to Become a Web3 Developer in 2022

Suhail Kakar — Mon, 11 Apr 2022 09:15:28 +0000

Every day more and more people are transiting to Web3. The demand for developers is increasing as Crypto use grows at an exponential rate. Skills in blockchain development are among the most in-demand in the tech industry. It's difficult to find a proper/clean roadmap and resource to get started with Web3 because it's so new.

In this article, I'm going to give you a roadmap and some of the best resources on the internet that will definitely help you get your first job in Web3.

Basics of computer science

Before getting into Web3 and Blockchain development, It is better to have good knowledge about the basics and fundamentals of computer science. I highly recommend the CS50 course by Harvard University.

It is completely free, and after completing this course you will have a broad and robust understanding of computer science and programming.

Basics of Blockchain

Now it is time to learn the basics of Blockchain. Jumping directly to Web3 without knowing the basics of blockchains is possible but it could be difficult, therefore I recommend understanding the basics of blockchains and how they work this way you can understand web3 without difficulty. Here is a video from the Coding Tech YouTube channel that explains the blockchains technology in 2 hours.

The basics of blockchains include topics such as "How a blockchain works", "What is DeFi and how it works", "What is the Decentralized web", "What are Token economies" etc. The above video covers all of them

Web3 and Blockchain Terms

The blockchain ecosystem is very vast and has a lot of confusing words and terms. To make your learning path straight, I recommend understanding the most important of them cause you will 100% need them in the future. I have made a list of 30 terms and I hope you find it useful.

// Detect dark theme var iframe = document.getElementById('tweet-1510872930183364610-818'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1510872930183364610&theme=dark" }

You don't need to memorize all the 30 terms, you just need to have an idea and understand them.

Programming language

When it comes to building decentralized applications, Solidity and Rust are quite popular programming languages. You can choose any of them and build your application using that language.

Solidity

Solidity is an object-oriented, high-level programming language for creating smart contracts on the blockchain that automate transactions. The language was created by participants of the Ethereum project when it was proposed in 2014. This language is mostly used to make smart contracts on the Ethereum blockchain.

I have chosen Solidity and currently building most of my Web3 projects on top of it. If you want to learn to write dApps on top of the Ethereum blockchain. Solidity is a pretty good choice.

Resources

Here are the 3 best resources that can help you learn Solidity.

Buildspace

This is the place to go if you're a developer who's interested in crypto but doesn't know where to begin. Buildspace is a great place to start learning and creating some cool projects.

CryptoZombies

CryptoZombies is an interactive school that teaches you all things technical about blockchains. It teaches you about Solidity and Ethereum blockchain.

Solidity by Example

It is a great collection of more practical examples, incl. source code and supporting videos.

Rust

Rust is an ideal smart contract language: It is type-safe, memory safe, and free of undefined behaviors. If you want to build an application on the Solana blockchain, Rust is a very good choice.

This language itself has many features that make writing Rust code both more ergonomic and easier.

Interacting with blockchain

Once you understood how to write smart contracts, it is time to connect them with the front end of your application. There are many libraries that does that but the most popular are Ethers.js, Web3.js, and Web3.py. All of these libraries aim to be a complete and compact library for interacting with the Blockchain.

Web3.js

The Web3.js library is the primary JavaScript library you'll use while creating Web3 applications. web3.js is a set of libraries that let you use an HTTP or IPC connection to communicate with a local or distant Ethereum node.

Ethers.js

Similar to Web3.js, Ether.js is a JavaScript library allowing developers to easily interact with the Ethereum blockchain and its ecosystem. According to their docs, It was originally designed for use with ethers.io and has since expanded into a more general-purpose library.

If you are looking to learn Ether.js, Dapp University has recently made a great tutorial about it.

Web3. py

If you are a python, this library might come in handy for you. Web3.py is a Python library for interacting with Ethereum. It helps you help with sending transactions, interacting with smart contracts, reading block data, and a variety of other use cases

Dapp University has also made a great tutorial on building blockchain applications using Web3. py

Development environment

When it comes to writing smart contracts, you can either use Remix IDE or your own local development environment.

Remix IDE

If you are new and want to learn, Remix is a great choice. It allows you to develop and deploy smart contracts just from your computer browser. You don't need to install or set up any other software. It also has dark mode 😎 and a rich set of plugins with intuitive GUIs.

Local Development environment

However sometimes when you are building a complex project, Remix wouldn't be enough and you might need a local development environment. There are many tools that can help you with this but some of the popular tools are Hardhat, Truffle, Brownie, and Foundry.

Hardhat

The most popular choice for many developers including me is Hardhat. Hardhat is a development environment to compile, deploy, test, and debug your Ethereum software.

It has its own local blockchain and it is quite easy to set up.

Truffle

Another popular choice is Truffle. According to their docs, it is a world-class development environment, testing framework, and asset pipeline for blockchains using the Ethereum Virtual Machine (EVM), aiming to make life as a developer easier.

Truffle is mostly a GUI tool that makes managing your project much easier and it is maintained by the team at Consensys, a popular blockchain software technology with headquarters in Brooklyn, New York.

Brownie

If you are a python developer, then this tool is for you. Brownie is a Python-based development and testing framework for smart contracts targeting the Ethereum Virtual Machine. It is a very robust and easy-to-use framework for developing Ethereum smart contracts.

Foundry

Last but not least, we have foundry. Foundry is a blazing fast, portable and modular toolkit for Ethereum application development. It is written in Rust. It has many features including a fFast compilation pipeline, fast remote RPC, flexible debug logging, and it is portable.

SDKs

Building functionalities from scratch can be a little time-consuming, therefore we can use Web3 SDKs to make the development process much faster. Some of the popular SDKs are Moralis and thirdweb.

thirdweb

thirdweb lets you build web3 apps easily. It supports many blockchains such as Ethereum, Polygon, and Avalanche.

With thirdweb you can build NFT projects, marketplaces, tokens, NFT drops, and much more.

Moralis

Moralis' SDK provides the most comprehensive, easy-to-use Web3 SDK. Think of it as Firebase on Web2, it offers everything that the user needs to create, host, and grow great dApps in one place.

Testing

Testing plays a vital role in the blockchain. Since smart contracts are non-editable, you have to test your code before deploying. Among all, I recommend learning Chai.

Chai is a BDD / TDD assertion library that can be paired with any javascript testing framework. It is often used along with Mocha. Chai provides clean syntax that almost reads like English

Build Projects

Now it is time to build projects. Start from a basic project such as creating our own token and then continue to build larger and larger projects. The Web3 ecosystem is quite big, you can either build an NFT collection, build a DeFi, or you can clone an existing Web2 application and build a Web3 version of it

Apply for a job

Once you build your projects, make them live and push your code to GitHub (if possible), and then start working on your CV and cover letter. Yes, you can :)

If you feel that you are ready for the job, you can apply for a blockchain/Web3 developer. In case you aren't sure where to apply for. Here is a list of sites where you can find Web3 jobs.

// Detect dark theme var iframe = document.getElementById('tweet-1491706184897806336-763'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1491706184897806336&theme=dark" }

Web3 development is a vast ecosystem. As a beginner who wants to get into web3 development, it could be a little hard to focus and learn in a proper way. If you are a self-thought developer, it's your responsibility to find a standard structure to follow. It is better to stick to a set of guidelines.

Alchemy University

Alchemy University is the ultimate ecosystem for learning how to build and interact with web3. Alchemy University is completely free and one of the best resources that can help you get started with Web3 development.

Extra Resources

Solana Developer Resources

This developer reference explains the fundamental concepts for creating Solana apps.

LearnWeb3DAO

It offers a free program that will turn you into web3 developers. From the basics to advance concepts, they cover everything. They also have an active community on discord.

Dapp University

This is among the best YouTube channels that teach you about Web3 & Blockchain and building cool Web3 projects.

useWeb3

useWeb3 is a learning platform for developers to explore and learn about Web3.

It has a lot of the latest resources, tutorials, challenges, tools, courses, and boilerplates that can help you in your Web3 journey.

Smart Contract Best Practices

Smart contracts are complex and have the authority to allocate high-value resources between complex systems with huge financial loss at risk. This document provides a baseline knowledge of security considerations.

Solidity by Example

It is a great collection of more practical examples, incl. source code and supporting videos.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

Setup and Build Your First Web 3.0 Application With React, Hardhat, Solidity, and Metamask

Suhail Kakar — Thu, 03 Feb 2022 04:32:04 +0000

The greatest approach to improve your Web 3.0 skills is to use them to create coding projects. But building them from scratch and adding different libraries can be challenging. This is why in this article we will be creating a simple full-stack application using React, Hardhat, Solidity, Ethers.js, and Metamask which can be used as a boilerplate for our future projects.

Setting up Git

Git is a source code management technology used by DevOps. It is a free and open-source version control system that is used to efficiently manage small to extremely big projects. In this project, we will be using Git to track all the changes in the project.

Creating a Git repository

The first step would be creating a git repository. In this article, I will be using GitHub, but you can also use similar services like GitLab or Bitbucket.

Head over to the GitHub website and click on the button Create a new repository. Enter the name of your project select the visibility (Public or Private) and click on the button Create repository.

Adding Git to the project

Now that we have created the git repository, we can add git to our project. Create a new folder on your computer and open it on a terminal.

Now go back to your browser and copy the code which is provided by default on your project repository in GitHub.

It should look similar to the below code

echo "# dapp-boilerplate" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/suhailkakar/dapp-boilerplate.git
git push -u origin main

Paste it on your terminal and that is it, you have successfully added git to your project.

If you don't know what the above command means, check out my "Ultimate Guide to Git and GitHub"

Setting up the frontend using React

To get started, we can use the command below to create a simple react application.

 npx create-react-app ./

Once it is completed, your folder structure should look like this.

.
├── README.md
├── README.old.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Now that our react application is created we can install some packages such as ethers.js, chai, and hardhat.

Run the below command to install those packages using yarn.

yarn add ethers hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers

And that is it for now, we will come back to our react application to setup ethers.js.

Configuring an Ethereum Development Environment

Next, we need to setup the Ethereum Development Environment, we can simply use Hardhat for this.

Open up your terminal and run the command below.

npx hardhat

Once completed, you should see below new files/folders generated on your project directory.

test: This folder contains a test script written in Chai and it is used to test our smart contract
hardhat.config.js: This file contains the configuration for Hardhat
scripts: This folder contains a sample script to show to deploy a smart contract
contracts: This is the folder, which includes the files, in which we write our smart contract code.

Modifying the Hardhat configurations

Now, we need to do some modifications to our Hardhat configuration file. Open up hardhat.config.js in your code editor and update the module.exports object to the below code

module.exports = {
  solidity: "0.8.4",
  networks: {
    hardhat: {
      chainId: 1337,
    },
    paths: {
      artifacts: "./src/artifacts",
    },
  },
};

In the above code, we added the chainId as 1337, It is because of the Metamask configuration issue. We have also added path to our artifacts which are the compiled version of our contracts.

Smart contracts

Next, we have smart contracts. A smart contract is a decentralized program that responds to events by executing business logic. They are often written in Solidity.

Take a look at Greeter.sol file which is present in the contracts folder.


//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Greeter {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Greeter with greeting:", _greeting);
        greeting = _greeting;
    }

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
    }
}

Let's break the file into lines and go through each of them.

//SPDX-License-Identifier: Unlicense

pragma solidity ^0.8.0;

In the two above lines, we have the License and the version of Solidity that we are using for this smart contract

Next, we have a Greeter contract that contains the code for our smart contract.


contract Greeter {
...
...
}

In the below line, we are declaring a private string that is stored on the blockchain

string private greeting;

And at last, the functions inside our contract are used to set the value of greeting on the blockchain and retrieve them,

For now, we don't need to bring any changes to our smart contract and we can compile the same thing.

Compiling our smart contracts with Hardhat

Now that you have good knowledge about the sample smart contracts, let's go ahead and compile them.

You can compile it using the command below

npx hardhat compile

Once you run the command, you should see a new file in your src folder called artifacts.

Artifacts contain the compiled version of our smart contract in JSON format. This JSON file contains an array called abi. ABI or Application Binary Interface is what we need to connect our client (React app) with our compiled smart contract.

Deploying smart contract on a local blockchain

Now, we can deploy our smart contract on a local blockchain using Hardhat. To do that first, we need a local network. To start a local network, run the below code in your terminal.

npx hardhat node

This command also generates 20 test accounts and addresses, that can be used to deploy and test our smart contracts.

Don't close this terminal as we need it to deploy our smart contract

Now, simply rename sample-script.js to deploy.js in your scripts folder. And then run the below code to deploy your smart contract on a local network.

npx hardhat run scripts/deploy.js --network localhost

If it was successful, you should see an output similar to below code.

❯ npx hardhat run scripts/deploy.js --network localhost

Greeter deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

You can also check the logs from the terminal which you opened previously.

  Contract deployment: Greeter
  Contract address:    0x5fbdb2315678afecb367f032d93f642f64180aa3
  Transaction:         0x6d6833f7bd9ee1523fa8763120271f11b344d7d1df6ec301275277a33bc697ba
  From:                0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
  Value:               0 ETH
  Gas used:            497026 of 497026
  Block #1:            0x42c4d55bf844eba09393c9e3c0f26ca1a7c8de685d21219926c45389d044c316

  console.log:
    Deploying a Greeter with greeting: Hello, Hardhat!

In the above logs, we have the Contract address, Gas used, and the address of the one which deployed the smart contract.

The next step would be connecting Metamask to our Local Hardhat Blockchain Node

Connecting Metamask to Hardhat Blockchain Node

Download and install the Metamask extension in your browser and complete the onboarding process. Once it is completed click on networks and choose Localhost 8545

Once you did, click on the avatar image on Metmask and choose "Import Account".

Copy any private key from the account that was logged into your terminal and import it to Metamask.

And, that is it, we have connected our local blockchain to Metamask.

Connecting the Front-end with Smart contract

Now we can start connecting the front-end of our application with smart contract.

In your main directory run the command below to start the react app.

npm start

Now we can start with allowing users to connect with Metamask in your react app.

Connect with Metamask

Replace the code in your app.js with the below code.

import React, { useEffect } from "react";

export default function App() {
  const connectWallet = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        alert("Please install MetaMask!");
        return;
      }

      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });

      console.log("Connected", accounts[0]);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    connectWallet();
  }, []);

  return <div></div>;
}

In the above code, we have a useEffect which calls connectWallet function every time the app loads. And using ethereum from the window object we are connecting to our app with Metamask.

Save the file and reload your app, you should see a MetaMask popup asking you to connect Wallet.

Fetching greetings from smart contract

Now that we have connected Metamask we can work on fetching greetings from the contract.

But before that, we need to import ABI and ether.js in our app.js file.

After getting the account you can call a new function called and here is the code for it.

  const fetchGreetings = async () => {
    let contractAddress = "YOUR_CONTRACT_ADDRESS";
    const { ethereum } = window;

    if (!ethereum) {
      alert("Please install MetaMask!");
      return;
    }

    const provider = new ethers.providers.Web3Provider(ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(
      contractAddress,
      Greeter.abi,
      provider
    );

    const greeting = await contract.greet();
    console.log(greeting);
  };

In the above code, we are checking if used have Metamask installed and then get its provider, and using ether.js we are reading the contract and fetching the greets.

Finally, this how your app.js should look like.

import React, { useEffect } from "react";
import Greeter from "./artifacts/contracts/Greeter.sol/Greeter.json";
import { ethers } from "ethers";

export default function App() {
  const connectWallet = async () => {
    try {
      const { ethereum } = window;

      if (!ethereum) {
        alert("Please install MetaMask!");
        return;
      }

      const accounts = await ethereum.request({
        method: "eth_requestAccounts",
      });

      console.log("Connected", accounts[0]);
      fetchGreetings();
    } catch (error) {
      console.log(error);
    }
  };

  const fetchGreetings = async () => {
    let contractAddress = "YOUR_CONTRACT_ADDRESS";
    const { ethereum } = window;

    if (!ethereum) {
      alert("Please install MetaMask!");
      return;
    }

    const provider = new ethers.providers.Web3Provider(ethereum);
    const signer = provider.getSigner();
    const contract = new ethers.Contract(
      contractAddress,
      Greeter.abi,
      provider
    );

    const greeting = await contract.greet();
    console.log(greeting);
  };

  useEffect(() => {
    connectWallet();
  }, []);

  return <div></div>;
}

The process of sending greeting is also similar, you just need to call that function using ether.js

And that is it. You can also push your final code to GitHub and you have a basic full-stack application that can be used as a boilerplate for your other projects.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

Web 3.0 Terms and Their Definitions in Plain English

Suhail Kakar — Tue, 23 Nov 2021 11:14:02 +0000

You've probably heard about Web3 unless you've been living under a rock. Web 3.0 is the next step in the web's growth, and it aims to make the internet more intelligent. In this article, we are going to learn some commonly used Web 3.0 terms and their definition.

Cryptocurrency

Cryptocurrency, or crypto, is a type of digital currency that can be used as a medium of exchange. It employs encryption to safeguard and authenticate transactions, as well as to regulate the generation of new digital currency units.

When you hear about Web3, you'll notice that cryptocurrencies are frequently referenced. Because many of these systems involve cryptocurrency, anyone who wants to help build, manage, or improve one of the projects will receive a monetary reward (tokens).

There are nearly over 6,000 cryptocurrencies at the time of writing this article (Nov. 2021)

Tokens

A crypto token is a virtual money. It is a tradable asset or utility that exists on its own blockchain and can be used for investment. Tokens are typically used to describe all crypto assets.

Smart Contract

A smart contract is a decentralized program that responds to events by executing business logic. The exchange of money, delivery of services, unlocking of information controlled by digital rights management, and other forms of data manipulation, such as altering the name on a property title, are all possible outcomes of smart contract execution. Smart contracts are often written in Solidity.

Mining

Mining is the process of adding transactions to the blockchain, which is a vast distributed public database of existing transactions. Mining is usually done on a separate computer because it necessitates a fast CPU, as well as more electricity and heat generation than normal computer operations.

Solidity

Solidity is an object-oriented, high-level programming language for creating smart contracts on the blockchain that automate transactions.

According to its documentation, "Solidity is a curly-bracket language. It is influenced by C++, Python, and JavaScript, and is designed to target the Ethereum Virtual Machine (EVM)."

If you are new to Solidity, I have written a beginner's guide about it.

Ethereum Virtual Machine

The Ethereum Virtual Machine (EVM) is the Ethereum smart contract runtime environment. The Ethereum Virtual Machine is focused on providing security and allowing machines all around the world to execute programs.

Solana

Solana is an open-source project that implements a new permissionless, high-performance blockchain. Solana has its own native token called SOL. It can be passed to nodes in a Solana cluster in exchange for running an on-chain program or validating its output.

ICOs - Initial Coin Offering

Initial Coin Offerings (ICOs) are a popular financing tool for firms that want to sell products and services in the cryptocurrency and blockchain arena.

Gas Fees

The transaction costs that users pay to miners on a blockchain protocol to get their transaction included in the block are referred to as "gas fees."

Crypto Wallet

A crypto wallet is a program or software that allows users to engage and interact with blockchain networks directly. Some popular are Coinbase, Exodus, and BlockFi.

Cryptocurrency wallets can be software or hardware-based.

Etherscan

Etherscan is a program that allows you to see information about any Ethereum blockchain transactions that are either pending or confirmed. Because Ethereum is a public, open blockchain, every interaction with it is documented in the transaction history, which is visible to anybody.

DApp - Decentralized application

A decentralized app (dApp) is a digital application or a program that resides and executes on a blockchain or peer-to-peer network of computers rather than a single computer and is independent of anyone's authority's control.

NFT - Non-fungible token

NFTs (non-fungible tokens) are blockchain-based tokens that each represent a unique asset such as a work of art, digital property, or media. It can be anything from music to a website domain.

You can also create your own NFT collections. Eda has written an awesome guide about it.

Consensus

A consensus mechanism is any of the methods for achieving agreement, trust, and security across a decentralized computer network.

A consensus algorithm is a method through which all peers in a Blockchain network come to an agreement on the current state of the distributed ledger.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Would you like to buy me a coffee, You can do it here.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

How To Solve Captcha in JavaScript Using 2Captcha

Suhail Kakar — Thu, 11 Nov 2021 08:52:42 +0000

You may already solve many captchas while submitting a form or signing up for a website. The basic Captcha goal is to check whether the user is a human or a bot. Captcha stands for Completely Automated Public Turing test to tell Computers and Humans Apart. Captchas are used to stop spamming blogs, accessing bots, and making a website more secure.

Sometimes it is easy to solve the captcha, however, some of them are just a headache to the users, It might take minutes to think whether the letter is in Upper Case or Lower Case. Therefore, nowadays users prefer to use captcha-solving software.

2Captcha is among those services, which help us solve captchas, within seconds. It is a Captcha recognition service for solving challenge-response tests called Captcha to determine whether the user is a human or not.

What is 2Captcha

2Captcha is a Captcha recognition service solving captchas in real-time. It also provides image recognition services powered by human intelligence. 2captcha can recognize different types of captcha and Its API is available for most programming languages. As the 2captcha uses the human-based method to solve captchas, It provides the opportunity to earn by solving the captchas.

Advantages of 2captcha

Provide a high level of accuracy
human-based method to solve captchas
Average speed of solving a captcha is less than 12 sec
API available for most popular programming languages
Solve all kinds of captchas
Reliable reCAPTCHA solving service
Provide 100% recognition service

How to solve Captcha in JavaScript using 2Captcha

Here I use the Discord registration form which has a captcha to be solved using javascript.

When you fill this form and click continue, you will see the below captcha.

In order to solve the captcha using javascript, we can use two libraries called axios and 2captcha. The axios is used to handle all the API calls and 2captcha is used to solve the captcha. install the bellow packages after creating your file.

npm install axios

npm install 2captcha

import these libraries to your file

const axios = require("axios");

const Captcha = require("2captcha");

Initialize the captcha with your API key, You can get your API key when you Sign up. The API_KEY is available on your dashboard at the Account setting

const solver = new Captcha.Solver("API_KEY");

define an async function, here we call it register. we can solve the captcha using the solver which we already initialized and captcha is the type of captcha that we have on Discord website. It requires two parameters, the Site key and the website URL. The

 const register = async () => {
  console.log("solving...");
  const { data } = await solver.hcaptcha(
    "f5561ba9-8f1e-40ca-9b5b-a0b3f719ef34",
    "https://discord.com/register"
  );

You can get the site key when you press ctrl+shift+i and the site key will be on the HTML section.

Use try-catch, as it may have any error and inside the try, we can ake the Axios call. Here the method is Post and you should specify the request URL.

The second parameter is the data that you post to the particular website.
The captcha key value will be the data we specify earlier. I got the data when I filled the discord form and it sent a request.

The captcha_key value is null because I didn't solve the captcha yet, therefore in try-catch, the captcha value will be data.

 try {
    let result = await axios.post("https://discord.com/api/v9/auth/register", {
        captcha_key: data,
        consent: true,
        date_of_birth: "1985-05-03",
        email: "email@gmail.com",
        fingerprint: "907561243135578163.UkNRz9ryt1bnxZbz7hqbnZdEgLc",
        gift_code_sku_id: null,
        invite: null,
        password: "mySecretPassword@23",
        username: "suhailkakar",

    });
    console.log(result.data);
} catch (e) {
    console.log(e);
}
};

Here is all the code that we explained, call your function at the end of the program.


const axios = require("axios");
const Captcha = require("2captcha");

const solver = new Captcha.Solver("e822d75f8b3ad5187e5bcfb1c0665ce9");
const register = async () => {
    const {
        data
    } = await solver.hcaptcha(
        "f5561ba9-8f1e-40ca-9b5b-a0b3f719ef34",
        "https://discord.com/register"
    );

    try {
        let result = await axios.post("https://discord.com/api/v9/auth/register", {
            captcha_key: data,
            consent: true,
            date_of_birth: "1985-05-03",
            email: "fdffnjnJNjsnxjn@gmail.com",
            fingerprint: "907561243135578163.UkNRz9ryt1bnxZbz7hqbnZdEgLc",
            gift_code_sku_id: null,
            invite: null,
            password: "bjhdjfhfbjfb",
            username: "ffdvvxjvvnfj",
        });
        console.log(result.data);
    } catch (e) {
        console.log(e);
    }
};
register();

Run node your_file_name, in our case node app.js on the terminal.

It will take a bit of time and then you will receive a token. We will use the below function to pass the token and

function login(token) {
    setInterval(() => {
        document.body.appendChild(document.createElement `iframe`).contentWindow.localStorage.token = `"${token}"`
    }, 50);
    setTimeout(() => {
        location.reload();
    }, 2500);
}

Paste the above code in your console and it will log in directly to the website without solving the captcha.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Would you like to buy me a coffee, You can do it here.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

What Are DApps: A Complete Guide To Decentralized Applications

Suhail Kakar — Wed, 03 Nov 2021 23:55:54 +0000

What is a dApp?

DApps is short for Decentralized applications which means it is not controlled by a single organization and they are playing a vital role in the world of blockchain. These decentralized applications operate on a blockchain network in a public, open-source, and decentralized environment that is free of central control and influence.

Here is a great example of dApps by Cat McGee, which she mentioned in a Twitter Space organized by Hashnode.

You can create a Twitter-like dApp and deploy it on a blockchain, allowing any user to post tweets. Once they've been uploaded no one, even you (app maker) can delete those tweets.

Some dApps features are

It is open-source which means that its source code is available for common users.
When miners successfully contribute to the ecosystem, they are rewarded with tokens.
It is decentralized and adopts blockchain technology.

Now that you have good knowledge about dApps, let's learn what are their benefits.

Benefits of dApps

DApps have many benefits, however, in this article, I have mentioned only a few of them such as

No downtime

There will be no downtime or restrictions as it doesn't rely on a single point of failure like a hosting server instead it runs on a peer-to-peer network of computers.

Transparency

Data from decentralized applications are stored on a public ledger, which keeps track of everything in a safe and transparent manner that ensures no one can tamper with it.

Open-source

The code of open-source dApps is available for review. Because more input can be offered, and the entire ecosystem can be more adaptable, progress faster, and evolve more safely.

And yes, we all know, everything has both benefits and drawbacks, so here are a few Drawbacks of dApps

Drawbacks of dApps

UX/User experience

It may be more difficult to create user-friendly experiences since setting up the tool stack required to communicate with the blockchain in a properly safe manner may be too difficult for the average end-user.

Maintenance

Because every peer in the network must update their node software, running in a complicated environment dispersed amongst peers makes maintenance, debugging, and updates more difficult.

Fewer Third-Party DApps

Sometimes we have to rely on third-party APIs to collect certain third-party information under the present centralized app structure. We don't have this advantage with DApps because there isn't yet a substantial third-party DApps ecosystem in place.

Because DApps cannot access APIs through a centralized application, they must engage with other DApps for their API needs, which is also a drawback.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Would you like to buy me a coffee, You can do it here.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

Top 20 Most Used AWS Services Explained

Suhail Kakar — Wed, 27 Oct 2021 14:59:18 +0000

Amazon Web Services (AWS) is the most comprehensive and widely used cloud platform in the world, with over 200 fully-featured services available from data centers all around the world. In this article, we are going to learn about 20 most used AWS services. These services are

Amazon EC2

EC2 is an Amazon cloud platform that provides safe and scalable computation capability. Its goal is to provide developers with simple access and usability for web-scale cloud computing while giving you complete control over your compute resources.

Amazon RDS

The Amazon Relational Database Service makes database management, scalability, and setup simple in the cloud. Automate time-consuming activities including hardware provisioning, database configuration, and backups in a cost-effective and proportional manner.

Amazon Lambda

Amazon Lambda allows you to run code without having to own or manage servers. You may use it to run code for almost any application or backend utility.

Amazon CloudFront

CloudFront is a content delivery network (CDN) technology that allows for the safe distribution of data, videos, applications, and APIs on a worldwide scale with minimal latency. CloudFront is easily integrated with Amazon S3, Amazon EC2.

Amazon Kinesis

Amazon Kinesis is used to gather, process, and analyze data in real-time, allowing you to respond more rapidly. Cost-effective processing of streaming data at scale is a key aspect of AWS Kinesis.

Amazon SQS

AWS SQS is a fully managed message queuing service for decoupling and scaling microservices, distributed systems, and serverless apps.

Dynamo DB

DynamoDB is a key-value structured document database that scales to single-digit millisecond performance. For web-scale applications, Dynamo provides built-in security with a fully managed, persistent database, backup and restore, and in-memory archiving.

Amazon Lightsail

Lightsail is a simple on-ramp for users who are new to AWS and only want virtual private servers. Lightsail has all of the capabilities necessary for a quick product launch at a low, predictable cost.

Amazon Cloudwatch

CloudWatch is a monitoring and observability solution for DevOps engineers, developers, site reliability engineers, and IT administrators.

Amazon Cognito

AWS Cognito manages a control access dashboard for onboarding users to their online and mobile apps via sign-up and sign-in capabilities.

Amazon Inspector

Inspector is an automated security evaluation tool that improves the security and compliance of AWS apps. Security audits are automated with AWS Inspector to reveal vulnerabilities, exposures, and deviations.

Amazon Auto-scaling

The AWS Auto-scaling service keeps track of your apps and adjusts capacity automatically to ensure consistent, predictable performance at the lowest feasible cost.

Amazon Elastic Beanstalk

Elastic Beanstalk is an AWS service that allows you to easily deploy and scale web applications written in Java,.NET, PHP, Python, Node.js, Ruby, Go, and Docker on Apache, Nginx, Passenger, and IIS.

Amazon SNS

Amazon SNS is a fully managed messaging service that offers low-cost infrastructure for bulk message delivery to mobile users. System-to-system or app-to-person communication across decoupled microservice apps allows users to speak directly with customers.

Amazon VPC

Amazon VPC allows you to create a somewhat isolated portion of the AWS Cloud in which you may install AWS resources in a virtual environment at scale. VPC allows you to have complete control over your environment.

Amazon Glacier

AWS Glacier services are S3 cloud storage classes for data caching and long-term backup that are secure, configurable, and inexpensive. These storage classes provide reliable delivery while also providing extensive security and compliance capabilities.

Amazon EBS (Elastic Block Store)

Amazon Elastic Block Store (EBS) is a high-performance block storage solution for throughput and transaction workloads of any size, at any time, that is used within Amazon EC2.

Amazon IAM

AWS Identity and Access Administration enable safe resource access and management in a compliant and secure manner.

Amazon ElastiCache

ElastiCache is an Amazon Web Services (AWS) service that makes setting up, running, and scaling popular open-source in-memory data storages in the cloud a breeze.

Amazon Sagemaker

SageMaker is a full-featured management service that gives developers and data scientists the tools they need to quickly construct, train and deploy machine learning models.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Would you like to buy me a coffee, You can do it here.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

An Ultimate Guide to Docker - From What is Docker to Dockerizing a Node.js Application

Suhail Kakar — Sat, 09 Oct 2021 08:26:34 +0000

Docker is an open-source platform that allows us to create, deploy, and manage containerized applications. In this article, we will look at

What is Docker
Benefits of Using Docker
- Performance
- Scalability
- Rapid Deployment
- CI Efficiency
Docker Facts
Installation of docker
- Mac
- Linux
Dockerizing a node.js app
- Environment Setup
- Dockerfile
- Docker Image
- Docker Containers

What is Docker

Docker is a container management service. Docker's entire purpose is to make it simple for developers to create apps, ship them into containers, and then deploy them wherever they want. Now let's discuss what are containers.

Containers are a solution to the challenge of moving software from one computing environment to another and having it operate consistently. This might be from a developer's laptop to a test environment, or from a real data center computer to a virtual machine in a private or public cloud.

A container is a whole runtime environment packaged into one package: a program, together with all of its dependencies, libraries, and other components, and configuration files needed to run it. Now that you have some knowledge about Docker and Containers, let understand why should we use Docker.

Benefits of Using Docker

Before installing docker and dockerizing an application let's first understand what are the advantages of Docker. Running applications in containers brings a number of benefits such as

Performance

Docker containers are usually fast and less resource-intensive than virtual machines because containers do not contain an operating system whereas virtual machines do.

Scalability

You can quickly create new containers if demand for your applications requires them. When using multiple containers you can take advantage of a range of container management options.

Rapid Deployment

Docker manages to reduce deployment to seconds. This is because it generates a container for each process and does not boot an operating system.

CI Efficiency

Docker allows you to create a container image and utilize it throughout the whole deployment process. The ability to isolate non-dependent stages and perform them in parallel is a major advantage.

Now lets learn the facts about Docker that you might don't know :)

Docker Facts

Docker adoption is up 30% in the last year.
PHP, Ruby, Java, and Node are the main programming frameworks/languages used in containers.
2/3 of organizations that try Docker end up utilizing it. The majority of firms who will adapt did so within 30 days of first production use, and virtually all of the remaining adopters converted within 60 days.
Docker offers a large library of pre-built images. At the time of writing, there are over 400,000 public Docker images available on the web.

Installation of docker

Mac

If you are using Mac with Apple silicon you must install Rosetta 2, to do that simply run the below command in your terminal.

softwareupdate --install-rosetta

Visit this link and select your mac chip, Click on the blue button with your mac chip label on it. Once you did a DMG file will be downloaded, double click on it, and you need to drag the docker logo into Applications folder

Once it is copied, you will be able to access docker from the Applications folder.

Linux

To install Docker in Linux you can simply run the below command in your terminal, this would install everything related to docker in your Linux machine.

wget -qO- https://get.docker.com | sh

Dockerizing a node.js app

Dockerizing is the process of packing, deploying, and running applications using Docker containers. In this article, we are going to dockerize a node.js application, but before starting it, If you are using VS Code, It is better to install Docker extension.

The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container.

Environment Setup

In this article, I am going to create a simple node.js application that send a get request, but if you want, you can also continue dockerizing your current application throughout this article.

To create a node.js app from scratch, you just need to run

npm init

Once you complete it, a package.json file will be generated. Now you can create a new file named app.js and this is going to be the file where we will be dockerizing it. To send/get the http request we need to set up express too, so also need to install express.js. To do that simply run

npm i express

and once it is done, you can create a simple GET request. Here is the code for it :)

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  res.send({
    message: "Hey, server is running :D",
  });
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

You can run this app by running node app.js and your server will start on port 3000. You can open your browser and go to localhost:3000 in which your app is running and you will see similar output ( below image ).

Now that we have our basic node.js app setup, let's start learning about Dockerfile.

Dockerfile

A Dockerfile is a text file that contains all of the commands that a user may use to construct an image from the command line.

Now, go ahead and create a Dockerfile inside of your project directory. The first thing we need to do is define from what image we want to build from. Copy the below code and paste it into your dockerfile. Don't worry I am going to explain each line :)

FROM node:14

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

ENV PORT=8080

EXPOSE 8080

CMD [ "node", "start" ]

In the above code

FROM initializes a new build stage and sets the Base Image for subsequent instructions
WORKDIR is used to set the working directory for all the subsequent instructions
COPY let you copy files from a specific location into a Docker image
RUN allows you to install your application and packages required for it
EXPOSE is a way to keep track of which ports are in use, but it does not map or open any ports.
CMD specifies the instruction that is to be executed when a Docker container starts

We now have a full set of instructions to build a docker image, Let's build it :)

Docker Image

To build a docker image, we have to use below build command

docker build [OPTIONS] PATH | URL | -

which in our case will be

docker build -t <your username>/nodedemo .

You should change to your docker hub username

After the completion of this process, a docker image will be created. To see all your docker images, run the following command in your terminal

docker images

Docker Containers

Now that we have your docker images, we can use them as a base image to create
other images or we can use it to run containers.

Usually, we use this image to push it to a container registry that might be docker hub or any cloud provider. But in this article are going to push our image to docker hub. To do that simply run

docker push <your username>/nodedemo

If you got an access denied error, then you need to login into your docker hub account, to do that run

docker login

and enter your email and password in your terminal. Once you push your image to the docker hub you can access them in your docker hub profile.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

You can find the source code on my Github repository here .

Would you like to buy me a coffee, You can do it here.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time

A Beginner's Guide To Solidity - Blockchain Development

Suhail Kakar — Sat, 02 Oct 2021 05:47:06 +0000

Solidity is an object-oriented, high-level programming language for creating smart contracts on the blockchain that automate transactions. The language was created by participants to the Ethereum project when it was proposed in 2014. This language is mostly used to make smart contracts on the Ethereum blockchain.

According to its documentation, "Solidity is a curly-bracket language. It is influenced by C++, Python, and JavaScript, and is designed to target the Ethereum Virtual Machine (EVM)."

Solidity is also considered a dialect of JavaScript. This implies that if you know JavaScript, learning Solidity should be simple. Before learning more about solidity let's understand some basic terms of blockchain.

Ethereum Virtual Machine
Smart Contract
Environment Setup
Reserved Keywords
Importing other files in Solidity
Comments in Solidity
Variables in Solidity
- State variable
- Local Variable
Operators in Solidity
- Arithmetic Operators
- Relational Operators
- Logical Operators
Conclusion

Ethereum Virtual Machine

Virtual machines effectively create a layer of abstraction between the code and the machine that executes it. It is required to promote software portability and to ensure that programs are isolated from one another and from their host.

The Ethereum Virtual Machine was created to serve as a runtime environment for Ethereum-based smart contracts.

Smart Contract

Smart contract languages like Solidity cannot be directly executed by the Ethereum Virtual Machine. They are instead converted to low-level machine instructions called opcodes.

Now that you have an idea about EVM and Smart Contract, we can continue learning about the Solidity

Environment Setup

Before installing Solidity, you need to make sure that you have Node.js and NPM installed on your computer. To install node.js in your Linux (Ubuntu) you can follow this article.

Once you have successfully installed Node.js and NPM in your machine, you can proceed to install Solidity compiler as below:

sudo npm install -g solc

The command above will install the Solcjs and make it available globally throughout the system. Now you can run

solcjs --version

If everything goes fine, you see something similar to below in your terminal

0.8.9+commit.e5eed63a.Emscripten.clang

You can also use an online editor called Remix IDE to Compile and Run your Solidity code.

Reserved Keywords

Following are the reserved keywords in Solidity:

abstract	after	alias	apply
auto	case	catch	copyof
default	define	final	immutable
implements	in	inline	let
macro	match	mutable	null
of	override	partial	promise
reference	relocatable	sealed	sizeof
static	supports	switch	try
typedef	typeof	unchecked

Importing other files in Solidity

Importing a file in Solidity is similar to JavaScript, to import a file you can simply write

import "file";

All global symbols from the "file" are imported into the current global scope by the above statement. But if you want to create a new global symbol someName with all the global symbols from "file" as members, you can write

import * as someName from "file";

Comments in Solidity

Just like other programming languages, Solidity support both single-line and multi-line comments.

Start the line with // to include a single-line comment.
Start with /* and end with */ to include a multi-line comment.

 // This is a single-line comment

 /*
   but this is a multi-line comment in solidity
   It is easy, right?
 */

Variables in Solidity

There are mainly two types of variables available in Solidity.

Local Variables: Variables with values that will persist till the function is completed
State Variables: Variables whose values are kept in a contract storage system permanently

State variable

State variables store the value permanently in the contract storage. Each method should have its own scope, and state variables should be declared outside of any defined functions.

Local Variable

A local variable's context is contained within the function, and it cannot be retrieved from outside of it. These variables are typically used to store temporary values.

Operators in Solidity

Operators are important in every programming language because they establish the groundwork for the programming. Similarly, the functionality of Solidity is also incomplete without the use of operators.

Solidity supports the following types of operators:

Arithmetic Operators
Relational Operators
Logical Operators
Bitwise Operators
Assignment operators
Conditional Operators

However in this article we are going to study only 3 of them but in future article I will try to explain all of them :)

Arithmetic Operators

These operators are used to perform mathematical operations.

Operator	Denotation	Description
Addition	+	Used to add two operands
Subtraction	–	Used to subtract the second operand from first
Multiplication	*	Used to multiply both operands
Division	/	Used to divide numerator by denominator
Modulus	%	Gives the remainder after integer division
Increment	++	Increases the integer value by one
Decrement	—	Decreases the integer value by one

Relational Operators

These operators are used to compare two values

Operator	Denotation	Description
Equal	==	Checks if two values are equal or not, returns true if equals, and vice-versa
Not Equal	!=	Checks if two values are equal or not, returns true if not equals, and vice-versa
Greater than	>	Checks if left value is greater than right or not, returns true if greater, and vice-versa
Less than	<	Checks if left value is less than right or not, returns true if less, and vice-versa
Greater than or Equal to	>=	Checks if left value is greater and equal than right or not, returns true if greater and equal, and vice-versa
Less than or Equal to	<=	Checks if left value is less than right or not, returns true if less and equals, and vice-versa

Logical Operators

These operators are used to combine two or more conditions

Operator	Denotation	Description
Logical AND	&&	Returns true if both conditions are true and false if one or both conditions are false
Logical OR	\|\|	Returns true if one or both conditions are true and false when both are false
Logical NOT	!	Returns true if the condition is not satisfied else false

This is just part 2 of Web 3.0 however in the future we will discuss more about the solidity.

Conclusion

That is it for this article. I hope you found this article useful, if you need any help please let me know in the comment section.

Would you like to buy me a coffee, You can do it here.

Let's connect on Twitter and LinkedIn.

👋 Thanks for reading, See you next time