As a student and working professionals, we have to go through lots of projects, and assignments and don’t even have free time left to enjoy life. For those monthly projects in college half of them are about building some cool AI-powered image classification App, for which we have to spend lots of time. Whether disease prediction or classification, dog breed classification, most of the projects done by a student in their lifetime include one of these apps. Talking about our work, most of time we need to test with data and develop some quick test solutions with them. Now let’s discuss what is the problem here and why I made this app.

What made me think about Making Custom AI

Whenever I think about making a project, I think of an app that involves AI. Recently I thought about making an app that helps to diagnose tuberculosis. In my past experiences also I have built a similar type of project like paddy disease prediction, malaria prediction, etc that involves providing labeled data and running inferences, spending hours to train data, and then just getting disappointed at the last minute by creating some half working API. I am thinking here I am not alone and most of you have done that too.

For building those projects, I have to do intense research, search for datasets, and then train the model, and spend days creating API. Then I thought Ahh! So why not just create a platform that takes your label images and performs a vector similarity search to just return your label from the most similar image? This way I can just create those projects in a few minutes and focus my entire time watching series and playing around.

Jokes aside now let’s talk the real-world problems. Let’s say I run multiple businesses. I own an e-commerce store for clothes. I have to organize those clothes, identify which clothes are under what label, and suggest those clothes with similar labels accordingly. For these I have to spend days or even months to create a API that does this. CustomAI can help you with this problem.

The problem customAI deals with is it helps you create ready-to-use API for your labeled image dataset in just a few minutes or hours, which you can then integrate into your applications. It can be your day-to-day projects, assignments, or solving your crucial business needs.

Initial BrainStorming and browsing

I had a rough idea about what I was going to build. Then I started listing the features and started brainstorming. I had to find technical, time, and economic feasibility. Then I came across hypermode modus and dgraph. Features that helped me decide why I chose them:

• I had to provide users the ability to query their own data. I couldn’t just make endpoints for everyone. I have to use GraphQL. Then I came across Modus. Code Functions and get ready to use graphql endpoints. What more could I ask for?

• I have to store data and my app will be dealing with vector embeddings. Any good database that works well with Modus? Yes, Dgraph. More than that It provided me ready to use graphql API, which I just had to integrate with my Modus application to play with selected data and endpoints. I began questioning discord members from the hypermode channel and started my journey.

Exploring Modus, Dgraph, and going through discord helps

I started going through Modus and dgraph documentation. Browsed everything and here are some key points that I found.

For modus 🛠️

• It is an open-source serverless framework for building powerful AI-powered applications.

• You can write code either in webAssembly or Go.

• You can invoke AI models just like you invoke functions.

• Easily secure your endpoints and add authentications.

For Dgraph 🧠⃤

• Powerful Graph Database

• Dgraph Cloud provides you ready to use graphql API along with features to explore API and data in their platform.

• Allows vector embedding storage and embedding relation operations.

• Best for AI-powered applications not limited to being vector databases alone but multipurpose ones.

How customAI works

With customAI you can create a project, upload your labeled images, and get ready to use API to run inferences to find similar images and labels. You can create multiple projects and create different API for your different needs. You can also run test for the dataset you uploaded.

Building backend with hypermode, modus and Dgraph

Here is the general workflow for my project creation journey.

Getting started with hypermode and dgraph

Go to hypermode and sign up for your account. Then click Create Project.

Then connect your github account and follow the steps mentioned. You just have to upload github workflow files and it will automatically build backend deployment for you with you commits.

Graphql schema defining in dgraph database

Here is how I defined my Graphql schema.

 type User {
  id: ID!
  clerkId: String! @search(by: [exact])
  email: String
  projects: [Project] @hasInverse(field: user)
}

type Project {
  id: ID!
  name: String
  description: String
  owner: String @search(by:[exact])
  user: User
  datasets: [Image] @hasInverse(field: project)
  isDeployed:Boolean
  endpoint: String
  token: String
}

type Image {
  id: ID! 
  imageUrl: String!
  label: String @search(by:[exact])
  project: Project
  projectId: String @search(by: [exact])
  token: String @search(by: [exact])
  owner:String @search(by:[exact])
  embedding: [Float!] @embedding @search(by: ["hnsw(metric: euclidean, exponent: 4)"])
}

Problem encountered with type defining in dgraph

Then I started building with modus. You can create modus app by installing modus cli and with modus new command. Basic step is given below.

npm install -g @hypermode/modus-cli

modus new

Now follow the questions asked and you are good to go.

For querying graphql api you have to define the connection in the modus.json file.

  "connections": {
    "flaskapi": {
      "type": "http",
      "endpoint": "https://embeddingextractor.com/extract-embedding"
    },
      "dgraph": {
        "type": "http",
        "endpoint": "https://yourapi/graphql",
        "headers": {
          "Authorization": "Bearer {{API_KEY}}"
        }
      }
  }

I have used two api endpoints. One had AI model to extract embeddings and another was dgraph graphql API.

I had faced lots of type mismatched issues between modus queries and dgraph graphql queries. The major ones were between type String! and String, type ID, and [ID!]. I simply checked my schema definition while writing mutations or queries in modus. Here is how I did that.

Here is my project type from graphql schema

type Project { id: ID! name: String description: String owner: String @search(by:[exact]) user: User datasets: [Image] @hasInverse(field: project) isDeployed:Boolean endpoint: String token: String }

All I had to do was mention same type in the first line of mutation statement.

  const statement = `
    mutation updateProject($id: string!, $owner: String!, $name: String!, $endpoint: String!, $isDeployed: Boolean!, $description: String!, $token: String!) {
        updateProject(input: {filter: {id: {eq: $id}}, set: {name: $name, endpoint: $endpoint, isDeployed: $isDeployed, description: $description, token: $token, owner: $owner}}) {
            numUids
        }
    }
`;

I wrote String! as a variable type for a variable that maps to the same type in my schema. Problem solved!

Problem encounter with matching types of data between modus and dgraph graphql API response

Query was working in dgraph graphql API playground but I wasn’t getting any results back for the same query. I was going nowhere due to those null results while querying graphql endpoints in modus. Then after hours of research, checking types and everything I found the one major issue was response wasn’t properly mapped. Here is how I learned how to do so easily.

Go to dgraph and query the data. Now observe properly the returned data. You will see something like this:

{
data: [{
id: “iowahe”,
name: “roshan”
}]
}

Now you have to define class in your modus function at first with @json. If i want those id and name my class will be like this.

@json
class ProjectData {
  id: string;
  name: string;
}

Then as you see the response is an array so create a new response class to get those arrays.

@json
class ProjectResponse {
  queryProject: ProjectData[];
}

Then create a function to query and get a result. Your graphql.execute function will now have ProjectResponse class so it properly maps and returns value.

export function getProjects(userId: string): ProjectData[] {
  const statement = `
    query queryProject($userId: String) {
        queryProject(filter: {owner: {eq: $userId}}) {
           description
            endpoint
            id
            isDeployed
            name
            owner
            token
        }
    }
`;

  const vars = new graphql.Variables();
  vars.set("userId", userId);

  const response = graphql.execute<ProjectResponse>(
    connection,
    statement,
    vars,
  );

  return response.data!.queryProject;
}

This simple thing took me hours to learn and after that took minutes to build my entire enpoints. Hope you will find this useful.

How I added filtered in dgraph graphql API

I was having hard time on how to filter the embedding search to limit it for only the project created by the specific user. Then I found one easy way to add a filter in dgraph graphql. Here is how I did that.

First, go to schema and add @search(by: [exact]) in the attribute by which you want to filter your queries. This indicates you can search by the exact value.

Now I went to graphql tab to play around with queries. That gave me query to use in my modus application for retrieving data.

The last thing remaining was to create an endpoint to filter through this data in modus. Here is how I did that.

import { graphql } from "@hypermode/modus-sdk-as";
import { embeddingGenerate } from "../helpers/embeddings";
import { JSON } from "json-as";

const connection: string = "dgraph";


@json
class LabelData {
  label: string;
}


@json
class QueryImageByEmbeddingResponse {
  querySimilarImageByEmbedding: LabelData[];
}

export function runInference(
  imageUrl: string,
  projectId: string,
  token: string,
): LabelData[] {
  const embedding = embeddingGenerate(imageUrl);
  const data = embedding.embedding;

  const log = JSON.stringify(data);
  console.log(log);
  const statement = `
  query querySimilarImageByEmbedding($embeddings: [Float!]!, $projectId: String, $token: String) {
      querySimilarImageByEmbedding(by: embedding, topK:1, vector: $embeddings, filter: {projectId: {eq: $projectId}, token: {eq: $token}}) {
        label
      }
  }
`;

  const vars = new graphql.Variables();
  vars.set("embeddings", data);
  vars.set("token", token);
  vars.set("projectId", projectId);

  const response = graphql.execute<QueryImageByEmbeddingResponse>(
    connection,
    statement,
    vars,
  );

  const resdata = response.data!.querySimilarImageByEmbedding;
  const logdata = JSON.stringify(resdata);
  console.log(logdata);

  return resdata;
}

Here you can see I created a class for the label and mapped the response. Like this, I implemented for my every endpoints, minimizing errors and rapid developments.

Building Frontend For customAI

The problem that I faced while building the backend was integrating with API, matching types for data sent and received, and everything. It was such a helpless situation. I have to query through Apollo client, write mutations and queries one by one and aah that is such as nightmare.

But guess what building frontend with nextjs was rapid not because I could create components faster but because I came across modus API explorer for the backend API that I created with modus. Here is an example I will show you.

First, run your modus app with modus dev the command go to the API endpoint with http://localhost:8686/explorer

Here you can see options to choose between graphql and Typescript.

I choose typescript. Then I was surprised it provided me necessary codes to make queries. Lack of time, sleepless nights, and what’s even a hackathon if you don’t use hacks like that? I pasted that in my component and made the request.

And with such ease, I could make requests to API endpoints and get data. I began implementing features rapidly in my application after that.

Usage

Currently, you can create image inferences API with customAI. It utilizes vector embedding and similarity search in dgraph database to return labels of similar items. Here is how you can use CustomAI.

• Open customAI website and click Get Started.

  

• Log in with your email account. Then click on Create Project. Fill in your project details.

• 

• Click on your project. Now you can upload your images and labels one by one. I have done this to prevent abuse of the demo for now.

• 

• Then you can test and upload one of the images you provided. This is because you might not have a good labeled dataset.

  

• Get your API and integrate it into your application.

  

Future of CustomAI with modus and dgraph 🚀🔜

Dgraph and modus have been core technologies for my application. My future thoughts for customAI are providing the ability for people to create their own AI features to use within the application or outside by creating a dedicated API as it does now. Here are some future improvements and additions that I have thought about adding to my project.

• 💲 Adding a subscription tier to the platform. Implementing credit system for API calls.

• ⚡ Adding the ability to create multipurpose text-based API with custom data and prompts utilizing the llms provided by hypermode. For example, uploading college notes to generate important questions from own content provided.

• 💼 The tailored algorithm as per use case: Adding the Ability to choose the best possible way between algorithms or to train custom train models as per need in order to generate API or feature.

• 🛠️ Adding custom feature creation ability. Not only creating API, user can create and use the features with text and image data of their own, extended by the powerful AI models integrated through modus. For example: User can create their own best health insurance plans finding feature by providing updated policies from their own countries or regions in CustomAI by creating a new project. The project can be the custom features we want, which will work for specific tasks that we want.

Many more things can be added but I have listed these four which can show you future potential.

Technologies used ⚙️

Here are the major technologies that helped me build this project.

• Modus and AssemblyScript: A framework that uses typescript-like language and Go programming language and enables you to create powerful AI-powered and or non-AI multi-functional applications.

• HyperMode: Platform that allows you to host your modus backend and provides ready-to-use state-of-the-art AI models that can be easily integrated into backends.

• Dgraph database and dgraph cloud: A graph database that has a feature to store vector embeddings and perform operations like similarity search and a platform that provides ready-to-use Graphql API.

• Nextjs: Full stack framework to develop scalable efficient and powerful web applications typically used to create the front end of web apps.

• Clerk: A simple-to-use authentication management service.

• Cloudinary: Easy and secure cloud storage service optimized for image data.

Thank you for reading through my blog. I am happy to share my knowledge, learnings, problems encountered and experiences of solving them with you all. Feel free to share it with your friends and have a good holiday!😁🌸

Important Links 🔗

Github Repository - Frontend and backend 📦

Demo URL - https://customai-eight.vercel.app/ 🚚

Modus Documentation 🔨

Dgraph Similarity search 🧠

Hypermode website 🏠

I am an introverted person and like to spend most of my time inside the house. Because of this reason I like to find solutions to my problems from home i.e online. Normally I can buy things, and find/hire freelancing remote work online. What if I need to repair something in my house? If a light bulb breaks or if I need to paint the house then I just need to roam around and find suitable workers which are really boring.

This is where physicalli comes to save the day of people like me and others. It is a platform dedicated to posting and finding physical jobs. You can post the job and find a suitable professional from your local neighborhood. You can search for the jobs available in your neighborhood.

Introduction to physicalli

Physicalli is a platform to post physically presence demanding jobs like painting, plumbing, electric repairing, etc. You can post your job and get contacted by a technician from your city. You can also search for workers according to your location. Users can just create accounts and find suitable work available near them or post their works. It is just a beautiful platform to make your physical labor easier by connecting workers and works available near them.

Technologies used

I have made this app with the help of AWS amplify and reactjs. Here is the list of tech stacks that are used to build this platform.

• Reactjs - For frontend
• tailwindcss - For designing the user interface
• AWS Amplify - For backend and hosting
• AWS S3 - For image storage
• Google maps API - For location autocomplete while posting and searching job
• Graphql with help of amplify - For querying database

How does it work?

To use physicalli you need to signup for an account. You can create an account to email and verify it. After that, you can navigate to your respective places and do your work.

Schema for graphql I used amplify to create the schema. Visual editor of amplify made it easier to define schema for physicalli.

type Jobpost @model
@auth(rules: [
    { allow: owner },
    { allow: public, operations: [read] },
    { allow: private, operations: [read] }
  ]){
  id: ID!
  title: String!
  description: String!
  image: String
  price: String
  contact: String!
  location: String!
  createdAt: AWSDateTime
  updatedAt: AWSDateTime
  owner: String
  pro: String!
}

type User @model @auth(rules: [
    { allow: owner },
    { allow: public, operations: [read] },
    { allow: private, operations: [read] }
  ]){
  id: ID!
  firstname: String!
  lastname: String!
  email: String!
  description: String
  skill: [String]
  profilepic: String
  createdAt: AWSDateTime
  updatedAt: AWSDateTime
  owner: String
  location: String!
}

• Create an account with your email address and login

I used amplify to add authentication to the application. Only authenticated users can perform activities like job posting, editing jobs posted by you, and searching for jobs.

• On the dashboard page, you can choose what you want to do.

• Click on Post job to post your work on the app

You can post images related to your job. Location autocomplete is made with help of google maps API. You can include details about jobs that are saved to dynamodb with help of graphql. S3 is used to store images related to jobs.

• You can click on the find job option if you want to find work.

• You can also click on Check your post option from the dashboard to edit/delete posts done by you.

Features of physicalli

Here are some of the features of physicalli

• Post job You can post a job with details about the job and your location and contact details. You can include an image of the job also.

• Find Job You can browse jobs and also search for jobs as per your preferred location and title. Google maps API is used to autocomplete location searches.

• View Job posted by You You can edit and delete job posted by you. This can be helpful to delete job if it is completed and edit job if you made mistake while posting.

• Update your profile You can update your profile.

Challenges faced during development

I was completely new to aws amplify. I had to learn a great deal about what it is and how to use it. I found so many errors during development and couldn't find reliable resources.

Hosting

Amplify is used to host applications. After completing I ran the command amplify publish which hosted my application and provided live URL. If we made changes to our project code on the local machine then we can enter the same command (amplify publish) on the terminal at the root directory of the project which will reflect changes to the live URL.

Some URL

• GitHub repo: https://github.com/roshankcpkr/physicalli
• Demo URL: https://dev.d35k3ru9hsakk9.amplifyapp.com

Demo Credentials

Here is a demo credential that you can use to sign in to the application.

Email: pkrrosh@gmail.com

Password: Yagami123@

Future improvements

I have some future improvement plans which I was unable to complete due to lack of time. Here are some of the features which I will add soon.

• Fetch the location with help of a map.
• Feature of saving jobs for future reference
• Search for freelancers according to location
• Using machine learning to suggest jobs
• Real-time chat between client and worker

My final thoughts

This hackathon has been a great learning opportunity. I was able to create a platform that could solve a problem that many people might be facing regarding physical or local job postings and searching. I learned various AWS services such as S3, Amplify, Cognito, and Dynamodb, Google maps. Thank you Hashnode and amplify for organizing such an amazon hackathon.

The problem of creating components manually

We had created a card component on our previous blog. Here is the code of App.js file where we were using Card component.

import './App.css';
import Card from './card'
import data from './data.js'

function App() {
  let firstData = data[0]
  let secondData = data[1]
  let thirdData = data[2]
  return (
    <div className="App">
      <Card
        name = {firstData.name}
        pic = {firstData.profilePic}
        title = {firstData.title}
        email = {firstData.email}
        about = {firstData.about}
      />
       <Card
        name = {secondData.name}
        pic = {secondData.profilePic}
        title = {secondData.title}
        email = {secondData.email}
        about = {secondData.about}
      />
      <Card
        name = {thirdData.name}
        pic = {thirdData.profilePic}
        title = {thirdData.title}
        email = {thirdData.email}
        about = {thirdData.about}
      />
    </div>
  );
}

export default App;

Here we have a problem with our code. Our component is manually used and data are also passed manually. What if new data is added to data.js file? Will it automatically form a new Card component? No. We are manually accessing data from data.js file and passing them by calling Card manually. Our code isn't self-sustaining. To solve this issue map comes to the rescue.

Mapping over Data to create the component

Now instead of manually passing data, we will now use the map to go through an array of data and pass the props into our component. Here is how we will do that.

import './App.css';
import Card from './card'
import data from './data.js'

function App() {
  let profileCard = data.map((el)=>{
    return <Card
                name = {el.name}
                pic = {el.profilePic}
                title = {el.title}
                email = {el.email}
                about = {el.about}
            />
  })
  return (
    <div className="App">
      {profileCard}
    </div>
  );
}

export default App;

We have mapped over data and we know that data is an array of objects. So el is an object of a specific index starting from 0 to the length of the array and we access data in the format of objectName.keyname like we did on our code. Then we saved it in a profileCard variable which will now contain jsx element returned by the card. Then we used the profileCard variable in div with curly braces.

Fix warning: Each child in a list should have a unique "key" prop.

If you open dev tools on your browser, you will see this error on your console. This means that you need to pass a key prop with a unique value each time you are passing props on a component. In our cases when we are passing props on Card component, we must pass additional props called keyswith unique values. So, how to pass unique values to the key? Well, there are certain ways but for now, we will just add an id field to data.js file with a unique value for data and pass it to the key.

Here is how our data.js file look now

const  data = [
    {
        id: 1,
        name: "Roshan K.C",
        title: "Software engineer | Cybersecurity enthusiast",
        profilePic: "https://avatars.githubusercontent.com/u/83297534?v=4",
        email: "admin@roshankc.info.np",
        about: "I am a computer science student from Pokhara Nepal who is interested in software engineering, Cybersecurity research, and blogging."
    },
    {
        id: 2,
        name: "Yagami light",
        title: "Software engineer",
        profilePic: "https://avatars.githubusercontent.com/u/83297534?v=4",
        email: "test1@gmail.com",
        about: "I am kira."
    },
    {
        id: 3,
        name: "James bond",
        title: "007",
        profilePic: "https://avatars.githubusercontent.com/u/83297534?v=4",
        email: "007@gmail.com",
        about: "Name is enough."
    }
]
export default data

Here is how you pass a key prop.

import './App.css';
import Card from './card'
import data from './data.js'

function App() {
  let profileCard = data.map((el)=>{
    return <Card
                key={el.id}
                name = {el.name}
                pic = {el.profilePic}
                title = {el.title}
                email = {el.email}
                about = {el.about}
            />
  })
  return (
    <div className="App">
      {profileCard}
    </div>
  );
}

export default App;

Now the warning should be gone.

Pass object as props

Here we are passing our props individually. What if there are more props? It would be a hassle to pass all items individually. Why not pass the whole object as props? Yes, we can do that.

import './App.css'; import Card from './card' import data from './data.js'

function App() { let profileCard = data.map((el)=>{ return }) return (

export default App;

I have passed all el objects as data props. Now we need to go back to our card component and fix some issues. Now try to console.log(props) in Card.js file. We will see that props object has another object named data inside it whose value is the object we passed. So like we access and object inside the object in normal javascript, we do same here. Here is how our Card component looks now.

import './card.css'

export default function Card(props) {
    console.log(props)
    return (
        <div className="card">
            <img src={props.data.profilePic} className="pp-img" alt="profile" />
            <div className="bio">
                <h2 className="name">{props.data.name}</h2>
                <p className="title">{props.data.title}</p>
                <a href={`mailto:${props.data.email}`} className='email'>Email</a>
            </div>
            <div className='about'>
            <h2>About</h2>
            <p>{props.data.about}</p>
            </div>
        </div>
    )
}

Spread Object while passing

Instead of a directly passing object, we can also use a spread operator to spread our data before passing. This is how our App component looks now. We have spread the object el, which will pull out all values of the object and spread them out, which will be similar to before when we passed individually.

import './App.css';
import Card from './card'
import data from './data.js'

function App() {
  let profileCard = data.map((el)=>{
    return <Card
                key={el.id}
                {...el}
            />
  })
  return (
    <div className="App">
      {profileCard}
    </div>
  );
}

export default App;

Now the last thing is to fix our Card component because it is receiving the properties of objects directly. You can console.log(props) and see so that you know how to fix it. Here is how I have fixed it.

import './card.css'

export default function Card(props) {
    console.log(props)
    return (
        <div className="card">
            <img src={props.profilePic} className="pp-img" alt="profile" />
            <div className="bio">
                <h2 className="name">{props.name}</h2>
                <p className="title">{props.title}</p>
                <a href={`mailto:${props.email}`} className='email'>Email</a>
            </div>
            <div className='about'>
            <h2>About</h2>
            <p>{props.about}</p>
            </div>
        </div>
    )
}

What we learned

We have learned how to map over data to create self-sustaining code. We learned how to pass objects as props and use of spread operator to make our life easier.

Custom Component for Card

Let us start with an example. Suppose you have a card component. To create that you can create a new file called card.js and export the following code from it just like you did to create the navbar component on our previous blog.

Card.js

import './card.css'

export default function Card() {
    return (
        <div className="card">
            <img src="https://avatars.githubusercontent.com/u/83297534?v=4" className="pp-img" alt="profile" />
            <div className="bio">
                <h2 className="name">Roshan K.C</h2>
                <p className="title">Software engineer | Cybersecurity enthusiast</p>
                <a href="mailto:admin@roshankc.info.np" className='email'>Email</a>
            </div>
            <div className='about'>
            <h2>About</h2>
            <p>I am a computer science student from Pokhara Nepal who is interested in software engineering, Cybersecurity research, and blogging.</p>
            </div>
        </div>
    )
}

Here in this code, we have imported CSS from a new file called card.css. You can create a file called card.css which will contain normal CSS code to style jsx returned from card.js.

.card{
    width: 250px;
    height: auto;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background: #1A1B21;
    overflow: hidden;
    color: #F5F5F5;
    margin: 1em;
}
.pp-img{
    width: 100%;

}
.bio{
    display: flex;
    flex-direction: column;
    padding: 1em;
    text-align: center;
}
.name{
    font-weight: 700;
    font-size: 1.5rem;
    color: #FFFFFF;
    margin: 0;
}
.title{
    font-weight: 400;
    font-size: 0.9rem;
    color: #e1e0d9;
    letter-spacing: 0.4px;
    margin-bottom: 0;
}
.about{
    padding:0 1em 1em 1em; 
    text-align: left;
}
.about h2{
    margin: 0;

}
.about p{
    font-weight: 400;
    font-size: 0.9rem;
    color: #DCDCDC;
}
.email{
    text-decoration: none;
    color: #374151;
    padding: 0.5em 0.7em 0.5em 0.6em;
    margin: 0.4em;
    background: #FFFFFF;
    border: 1px solid #D1D5DB;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}
.email:hover{
    filter: brightness(0.8);
}

Now you can import the Card component on the App.js file. Remember how you call a custom component function to get returned value where we need it. We call custom components like we call a normal function. In our case, if we need to call the card function which is returning jsx( Html like code for card component) then we say card(). But inside jsx we call it by saying . Below is an example of using it inside App.js component.

import './App.css';
import Card from './card'
function App() {
  return (
    <div className="App">
      <Card/>
    </div>
  );
}

export default App;

Here the jsx returned from the Card component will be placed inside a div with the class name called App which will eventually get utilized to render through index.js file where the App component is called to render. This is how we utilize react to create a custom component that we can use anywhere just by importing and calling it in the place where we need it.

Problem with our Card component

But we have an issue with this method. We aren't making our component dynamic. Whenever we call it, it will return a component with static values. We might need a card for another person with different values. Our card component is not data-driven which means for every new type of card we need to again create a new card component. This means the component isn't generated as per data but by manually putting data inside it.

Let's take an example of the amazon products page. Here you can see every card contains details of the different products but the layout of the cards are same. Which means they are the same component with different data. But when a new product is added, a new card with details of the new product is automatically formed. Does that mean there is a person who updates the product card component with all the new data and makes a new card? Of course not. The card is updated with new data and generated accordingly when we add a new product.

But in our profile card, there is a need for a person who will update the card values as per new data. How can we make our component dynamic so that we can make it return with data as per our need? This is where props come into saving.

Props in Reactjs

Let's understand the concept of props and u can define yourself what are props. Let's start with this example. Here you have a function named squareNum to return the square of a number.

function squareNum()
{
    return a*a
}

Now you can see every time you call this function, you will only get the square value of a. This function isn't returning dynamic values. So, how do you make this function return different values as per your data? Yes by setting parameters and passing your data through arguments. Now see the function given below.

  function squareNum(num)
{
    return num*num
}

squareNum(2)
squareNum(5)

Now you can see your function will return values as per the data you pass. Setting a parameter called num made your function reusable and dynamic. This is what the concept of props is. It is just a value you pass in your function/component and which value you will pass while calling/using your component. And the passing of value you do while calling method is passing props.

How to pass Props

As you know in real-world apps, data are fetched from api/db. In our case, we will create a file called data.js inside src directory where we will upload all our data in form of objects. Here is an example of data.js file from where we have exported an array of objects containing card component data.

const  data = [
    {
        name: "Roshan K.C",
        title: "Software engineer | Cybersecurity enthusiast",
        profilePic: "https://avatars.githubusercontent.com/u/83297534?v=4",
        email: "admin@roshankc.info.np",
        about: "I am a computer science student from Pokhara Nepal who is interested in software engineering, Cybersecurity research, and blogging."
    },
    {
        name: "Yagami light",
        title: "Software engineer",
        profilePic: "https://avatars.githubusercontent.com/u/83297534?v=4",
        email: "test1@gmail.com",
        about: "I am kira."
    },
    {
        name: "James bond",
        title: "007",
        profilePic: "https://avatars.githubusercontent.com/u/83297534?v=4",
        email: "007@gmail.com",
        about: "Name is enough."
    }
]
export default data

Let's see how we add a variable inside jsx.

function Title()
{
    let name = "Roshan K.C"
    return <h1>{name}</h1>
}

So you basically put them inside curly braces.

Now import the data on Card.js file. Then when you call the Card component you can pass props in form of the following format in App.js file.

import './App.css';
import Card from './card'
import data from './data.js'

function App() {
  let firstData = data[0]
  let secondData = data[1]
  let thirdData = data[2]
  return (
    <div className="App">
      <Card
        name = {firstData.name}
        pic = {firstData.profilePic}
        title = {firstData.title}
        email = {firstData.email}
        about = {firstData.about}
      />
       <Card
        name = {secondData.name}
        pic = {secondData.profilePic}
        title = {secondData.title}
        email = {secondData.email}
        about = {secondData.about}
      />
      <Card
        name = {thirdData.name}
        pic = {thirdData.profilePic}
        title = {thirdData.title}
        email = {thirdData.email}
        about = {thirdData.about}
      />
    </div>
  );
}

export default App;

As you can see I have stored the objects at the different indexes of the array(data) in 3 different variables (firstData, secondData, thirdData). Then while calling , I passed the props in this format name = {firstData.profilePic}. Here, name will be now passed just like an argument to the function Card() in card.js file.

{firstData.profilePic} is just a way to get value from the object and as you can see it is an expression so we put it inside curly braces to use its value in jsx. So like that you pass each data with a different name as I did. I have called three different times and passed different values, so this means we will get card component called three times and we will have three html for card component.

Receiving props in Reactjs

Now just like passing argument, props are also passed into their main function. Here our function is Card(). So to receive props, we need to set a parameter in function. Which we will set as props. So this parameter named props will receive all the values we pass as an object which you can verify by doing console.log(props) inside the function.

import './card.css'

export default function Card(props) {
    console.log(props)
    return (
        <div className="card">
            <img src="https://avatars.githubusercontent.com/u/83297534?v=4" className="pp-img" alt="profile" />
            <div className="bio">
                <h2 className="name">Roshan K.C</h2>
                <p className="title">Software engineer | Cybersecurity enthusiast</p>
                <a href="mailto:admin@roshankc.info.np" className='email'>Email</a>
            </div>
            <div className='about'>
            <h2>About</h2>
            <p>I am a computer science student from Pokhara Nepal who is interested in software engineering, Cybersecurity research, and blogging.</p>
            </div>
        </div>
    )
}

You will get 3 objects logged on console with keyname as the props key you set and value as the value you had set. You get 3 object because card component is called three times on App component. Now how to use the value we received as props in our html? Remember, the props parameter is just receiving values as an object. So, how do we extract values from an object? Obviously with the help of key. Here is an example of using props.

import './card.css'

export default function Card(props) {
    console.log(props)
    return (
        <div className="card">
            <img src={props.pic} className="pp-img" alt="profile" />
            <div className="bio">
                <h2 className="name">{props.name}</h2>
                <p className="title">{props.title}</p>
                <a href={`mailto:${props.email}`} className='email'>Email</a>
            </div>
            <div className='about'>
            <h2>About</h2>
            <p>{props.about}</p>
            </div>
        </div>
    )
}

Here you just need to wrap your javascript expression inside curly braces to use in jsx(Jsx is just a javascript that looks like html). Now your card component will return value as per the data your pass in your props. This makes our code more reusable.

Important Note

You must always remember that you can only pass props on to the custom components. You cannot pass props as "<h1 name="Roshan" " on a html component. It is because h1 tag doesn't have any attribute known as a name. You should always remember that your custom component will at last get converted into html component that dom understands. Passing custom attributes on already existing tags like h1 will break your app and cause errors.

To summarize

Props are just values that are passed through custom components. They are given specific names and values. Props are received through a parameter set in the component it is passed at. The value received is an object which is in form of {keyName: value}. We can use this as a normal object with curly braces inside jsx.

What we learned

• What are props
• Passing props to custom components
• Receiving and using props
• Things to consider while passing props.

Tomorrow we will learn how to use maps to dynamically render cards as data gets updated, various ways to receive and pass props and have a sneak peek at conditional rendering.

Reactjs uses JSX that helps to write HTML in react. JSX stands for JavaScript XML. JSX makes it easier to write and add HTML in React.

Prerequisites for Learning React.js

1. HTML
2. CSS
3. Javascript-ES6
4. Node js in your system. Click here to download.
5. Code editor(VS code preferred)

Intermediate-level experience with HTML, CSS, and javascript is required if you want to learn Reactjs. You must have web dev experience with vanilla CSS and js if you want to start learning Reactjs.

Installation of starter code for React

If you have node/npm in your system then you can open your preferred code editor and follow the steps given below to install react.

• Create a folder with the name of your choice and open it in the code editor. I am using VS code.

• Now open a terminal in vs code. You can use the (control + ~) shortcut on windows and (command+~) on mac. The tilde sign is situated on side of the number 1 on your keyboard. Then type the following command.

• If you want to create react starter code on a new folder inside the folder you then type the following command

npx create-react-app your-folder-name

• If you want to install react on the folder you are in then type the following command.

npx create-react-app .

Directories and files.

Now after installation we will have some directories created on our code editor. Inside the src directory, we will see some files. This is where we will write our react code for our website. Meanwhile, the Public directory contains our images and HTML files. We edit the HTML as per our choice and there we will see div with id="root" on the body of the index.html file.

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>

Custom Component and Reactjs code example

Inside the src directory, we will see a bunch of files. Among them, App.js and index.js are important for us as of now.

App.js will contain a function called App which is exported from there. The function is returning HTML code. HTML is written inside the App function. But it isn't completely HTML but what we called jsx. You can see a change in how you write class attributes on normal HTML but here you write className in camelCase format just like in javascript.

import './App.css';

function App() {
  return (
    <div className="App">
    <h1>I am App file that get rendered through index.js</h1>
    </div>
  );
}

export default App;

We can write HTML inside functions and return them. In fact, what is returned from the function App are just javascript objects which are imported on the index.js file. You can console.log value returned from the App function to see what we get too.

console.log(App())

We need to import React from 'react' in our file because React (which you just imported from 'react') is what defines JSX.

Here in index.js file, we see a root variable that is just using createRoot method from ReactDOM to create the root. We are selecting the div with an id called root from index.html which we had seen inside public/index.html directory. Then we are passing that div with id root to createRoot element where we will render all our reactjs codes and components. So the div with id called root on index.html file will have all our components of react inside it because we just declared it as root by passing it on ReactDOM.createRoot () method.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

You can see the root.render() method which is rendering a component called which is non other than the App function which we imported from App.js file. This is the syntax for the custom component. You write them just like a HTML component with closing syntax. In fact, what we call custom component are nonother than javascript functions like App() that returns jsx. We just call the function in the format of to get object returned by them. render() function available on root variable is what converts the javascript to HTML code understood by the browser.

Composable due to custom components

Custom components are part of our application which are represented as components. They are just function that returns a component of the website. For example if you want to create a navbar component for your website, then you can create a file called navbar.js in src directory. Then to create a custom component called navbar you need to import React from 'react'. After that you can create a function called Navbar and write your HTML inside it. Then you can export it.

function Navbar()
{
    return (
        <nav>
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Contact</li>
                <li>Skils</li>
            </ul>
        </nav>
    )
}

export default Navbar

After that, you can import the function called Navbar on index.js file. We always capitalize first letter for our component. Now you can call the function Navbar inside root.render method below just like you called. This navbar is now a custom component that we can give any name and call on any place where we need it.

After that try to run your react app by typing the following command on the terminal.

npm start

Now you will face some errors. The reason for that error is you cannot render two components directly under the root component. You need to house them inside a parent div. Here is kept and component inside a parent div to render them. We render jsx in this format.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Navbar from './navbar'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <div>
    <App />
    <Navbar />
    </div>
  </React.StrictMode>
);

Or you can use what we call jsx fragment i.e <></>.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import Navbar from './navbar'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <>
    <App />
    <Navbar />
    </>
  </React.StrictMode>
);

To Summarize

So we just create a component which is just a javascript function that returns jsx codes. JSX is just an extension to js syntax that helps to structure a component on react like our App and Navbar. They look familiar to HTML but are just javascript objects. So when you log output while calling a function that returns jsx, you will get object as output. You then import components from files you exported, in our case imported at index.js.

Then you select where you want to render the components. We select a div with id root and passed it to createRoot method to make it as a parent div which will hold our all components then save it as root. Inside root.render method you put which component you want to render in that div called root. In our case, we rendered App and Navbar inside that div. We can only render one component directly so, to render more than one component we need to put them inside a parent div which we did to solve the issue.

What did we learn?

1. What is react and how do we create react projects?
2. Directories and files we get by creating react project
3. Basic syntax of react and custom components.
4. Creating and using custom components.

I hope this article was helpful for you. Now you can practice creating custom components for simple components of the website like the navbar, body, footer, cards, etc, export and import them and use them on index.js file as I did. You can try this by converting a page made with HTML CSS to reactjs. Share with your friends and bye-bye till the second part where we will learn about props.

Node js, an asynchronous event-driven javascript runtime designed for building scalable network applications. Designed by Ryan Dahl and released in 2009, Nodejs is a javascript runtime built on google's open-source v8 js engine second line.

Js is run in a browser so the browser is js runtime, Nodejs enables the environment running js outside the browser on top of a v8 engine, like a container so it is js runtime.

Uses of Nodejs

Nodejs is used for building fast and scalable data-intensive applications. Server-side apps, API with DB, data streaming, server-side web apps, and real-time chat apps all can be made with node js.

Architecture of Nodejs

Following single thread architecture, node js follows a non-blocking event-driven coding pattern to ensure the process run for every use without blocking.

Simple server in Nodejs

Example: Import HTTP module. Now use the createServer method on it and send a response from the callback. The callback function has a request and response parameter. Then save on a variable and listen using that variable on desired port and IP.

const http = require('http')
const server = http.createServer((req,res)=>{
    res.end("Hell from server of roshan")
})
server.listen(8000, '127.0.0.1',()=>{
    console.log("listening on port 8000")
})

Routing in Nodejs

Example of routing on nodejs: Import HTTP module and save it on a variable, then use createServer method on HTTP with callback function with req and res as a variable, save URL from request in a variable use if else to send the response as per pathname you can write a custom header as per the status code then listen to your desired port and IP.

const http = require('http')
const server = http.createServer((req,res)=>{
    const pathName = req.url
    if(pathName === "/" || pathName === "/overview")
    {
        res.end("Hell from server overview")
    }
    else if(pathName === "/products")
    {
        res.writeHead(200, {
            'content-type': 'text/html'
        })
        res.end("<h1>hello from product page</h1>")
    }
    else{
        res.writeHead(404, {
            'content-type': "text/html",
            'my-own':'hehe' 
        })
        res.end("<h1>404 error: Page not found</h1>")
    }
})
server.listen(8000, '127.0.0.1',()=>{
    console.log("listening on port 8000")
})

Simple API in Nodejs

To import content from a JSON file we need to import the fs module, then http now read a file with a pathname and utf-8 encoding then parse data into JSON and save on variable create server and route as per request URL for the response also, you can specify header content. Then listen for the request.

const fs = require('fs')
const http = require('http')

const data = fs.readFileSync(${__dirname}/data/data.json, 'utf-8')
const productData = JSON.parse(data)

const server = http.createServer((req, res)=>{
    const path = req.url
    if(path === '/api')
    {
        res.writeHead(200,{
            'content-type': 'application/json'
        })
        res.end(data)
    }
    else if(path === "/")
    {
        res.end("server is running")
    }
    else{
        res.writeHead(404,
            {
                'content-type': 'text/html'
            })
            res.end("<h1>404 error: page not found</h1>")
    }
})
server.listen(8000, '127.0.0.1', ()=>
{
    console.log("listening on port 8000")
})

Does anyone use Nodejs?

Nodejs has many frameworks and libraries as per your need. Expressjs, socket.io, next.js, meteorjs are some of them. Big community, millions of packages and modules, and used big corporations like Netflix, eBay, PayPal, and uber, Nodejs popularity is increasing daily and so does job opportunity.