DEV Community: Gaurav Adhikari

How to customize Strapi Dashboard / Home Page: The Right Way

Gaurav Adhikari — Sat, 07 Dec 2024 06:31:54 +0000

Strapi is a powerful headless CMS that provides a robust admin panel. But sometimes, you want to make it your own for branding, but the Strapi official docs miss the how-tos of customizing the admin homepage. This quick guide shows you how to customize Strapi’s Admin Panel the right way, and easy as well.

Rename src/admin/app.example.tsx to app.tsx
Change the contents to

// src/admin/app.tsx

import type { StrapiApp } from "@strapi/strapi/admin"

export default {
  config: {
    locales: [],
  },
  bootstrap() {},
}

Just create a Homepage.tsx file with your custom Homepage

// src/admin/Homepage.tsx

const Homepage = () => {
  return (
    <div
      style={{
        textAlign: "center",
        backgroundColor: "#f1f1f1",
        padding: "20px",
        borderRadius: "5px",
        fontFamily: "Arial, sans-serif",
        fontSize: "24px",
        color: "#333",
        fontWeight: "bold",
      }}
    >
      Welcome to the CMS!
    </div>
  )
}

export { Homepage }

This is how the final version of app.tsx looks like and you are done. 😉

// src/admin/app.tsx

import type { StrapiApp } from "@strapi/strapi/admin"

export default {
  config: {
    tutorials: false,
    locales: [],
  },
  bootstrap() {},
  register(app: StrapiApp) {
    const indexRoute = app.router.routes.find(({ index }) => index)
    if (!indexRoute) throw new Error("unable to find index page")
    indexRoute.lazy = async () => {
      const { Homepage } = await import("./Homepage")
      return { Component: Homepage }
    }
  },
}

Kind credits to Andrew Bone for his solution in https://feedback.strapi.io/feature-requests/p/customize-the-admin-panel-welcome-page-strapi-5

When I’m not tweaking Strapi dashboards or writing tutorials like this, I’m working on WorkSage — a smart hybrid work planner I built to manage remote/office days for developers.

If you’re curious or juggling hybrid work yourself, give it a look — I’d love feedback from fellow devs.

Show JSON As Pretty Print With Syntax Highlighting in React

Gaurav Adhikari — Fri, 04 Mar 2022 18:57:46 +0000

In this post, we will learn how to show the JSON data as pretty printed, and with colored highlighted syntax in our ReactJS/JS apps.

Coming straight to the utility function below

export function syntaxHighlight(json) {
  if (!json) return ""; //no JSON from response

  json = json
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
  return json.replace(
    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
    function (match) {
      var cls = "number";
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = "key";
        } else {
          cls = "string";
        }
      } else if (/true|false/.test(match)) {
        cls = "boolean";
      } else if (/null/.test(match)) {
        cls = "null";
      }
      return '<span class="' + cls + '">' + match + "</span>";
    }
  );
}

and the CSS

pre {
  outline: 1px solid #ccc;
  padding: 5px;
  margin: 15px;
}
.string {
  color: green;
}
.number {
  color: darkorange;
}
.boolean {
  color: blue;
}
.null {
  color: magenta;
}
.key {
  color: red;
}

Now we can use our syntaxHighlight function, just pass it with JSON to prettify and highlight

Example usage in ReactJS app:

import { useEffect, useState } from "react";

import { syntaxHighlight } from "./utils";
import "./styles.css";

export default function App() {
  const [ourJSON, setOurJSON] = useState();

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => setOurJSON(json));
  }, []);

  return (
    <div>
      <h3 className="header">
        Show JSON As Pretty Print With Syntax Highlighting
      </h3>
      <pre
        dangerouslySetInnerHTML={{
          __html: syntaxHighlight(JSON.stringify(ourJSON, undefined, 4))
        }}
      />
    </div>
  );
}

Credit for utility function

When I’m not formatting JSON or writing tutorials like this, I’m working on WorkSage — a smart hybrid work planner I built to manage remote/office days for developers.

If that sounds interesting, check it out and let me know what you think!

Happy Coding, Thanks!

Scrollable Content With Sticky Sidebar Using CSS

Gaurav Adhikari — Mon, 28 Feb 2022 17:15:05 +0000

In this post, we are going to quickly see how can we create a page with Scrollable Content and Sticky/Fixed Sidebar.

We will create three div, one parent div i.e. Container and rest two are for Content and Sidebar.

<div class='container'>
   <div class='content'>
   </div>
   <div class='sidebar'></div>
</div>

We will use display as Grid to achieve our task, the CSS goes below

.container {
display: grid;
gap: 0 1rem;
grid:
"header side" auto
"inside side" auto
"content side" auto
"footer side" auto / auto 16rem;
margin: 0 auto;
max-width: 50rem;
padding: 1rem;
position: relative;
}
.content {
grid-area: content;
}
.sidebar {
grid-area: side;
margin-top: 1.5rem;
position: fixed;
right: calc(50% - 28.5rem);
top: 0;
width: 15rem;
}

That's it, just add your required HTML into content and side div respectively.

Happy Coding, Thanks!

How To Add Mentions And Hashtags In React JS

Gaurav Adhikari — Sat, 27 Feb 2021 06:39:16 +0000

# And @ In React Apps

There are many use cases in real-world applications where you need to implement triggers like showing a list of users to mention on pressing @ symbol or to write a tag after pressing the # key, which should actually save to DB as tag/mention and then render it correctly to the screen.

It is understandable for a social media app to have such a feature, but this can be taken further to some apps where you need to trigger functions on some special keypresses, like in a Library Management Software to tag a Resource in someplace.

If you are interested in the preview of the app, here is the deployed URL -> https://hashtags-n-mentions.netlify.app
Please note: Since I am using free API backend, it will show up posts/users after a while, please refresh after 10 seconds.

⚠️ Alert: This blog is outdated, please read the updated (June 2025) blog at https://gauravadhikari.com/mentions-and-hashtags-in-reactjs

Prerequisites

— Node.js ≥v6 is installed on your machine
— npm/yarn is installed on your machine
— You have a basic understanding of React.js

We Will Be Using

— Create-React-App template.
— Functional components with hooks.
— TailwindCSS to style our app.
— NPM package called react-mentions
— Backend API to fetch posts, users, tags, and create posts. (No worries, I have already created the API)

Now let’s get our hands dirty?
Setup our app using CRA template

Once it is done, move in the directory and start the show!

We will create the UI first then implement functionality ;-)
This is the folder structure of our final application

Before anything else, we will install TailwindCSS and configure it in our app
You can refer to their doc - https://tailwindcss.com/docs/guides/create-react-app or
~ Take the boilerplate code till this point from here https://github.com/gauravadhikari1997/hashtags-and-mentions-in-react/tree/98737fc89586d6697f23349f1e0c98fa7ac38cfb

yarn add react-router-dom axios react-mentions html-react-parser

App.js

import { BrowserRouter, Route } from "react-router-dom";

import { Filter, Header, NewPost, Posts } from "./components";

function App() {
  return (
    <BrowserRouter>
      <Header />
      <Route exact path="/">
        <section className="px-4 sm:px-6 lg:px-4 xl:px-6 pt-4 pb-4 sm:pb-6 lg:pb-4 xl:pb-6 space-y-4">
          <Filter />
          <Posts />
        </section>
      </Route>
      <Route path="/new">
        <NewPost />
      </Route>
    </BrowserRouter>
  );
}

export default App;

components/Header.js

import { Link } from "react-router-dom";

const Header = () => {
  return (
    <header className="flex items-center justify-between">
      <Link to="/">
        <h2 className="text-lg leading-6 font-medium text-black px-4 py-2">
          <span className="text-green-400">#</span>n
          <span className="text-blue-400">@</span>
        </h2>
      </Link>
      <Link
        to="/new"
        className="hover:bg-light-blue-200 hover:text-light-blue-800 group flex items-center rounded-md bg-light-blue-100 text-light-blue-600 text-sm font-medium px-4 py-2"
      >
        New
      </Link>
    </header>
  );
};

export default Header;

components/Filter.js

const Filter = () => {
  return (
    <form className="relative">
      <svg
        width="20"
        height="20"
        fill="currentColor"
        className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"
      >
        <path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
        />
      </svg>
      <input
        className="focus:ring-1 focus:ring-light-blue-500 focus:outline-none w-full text-sm text-black placeholder-gray-500 border border-gray-200 rounded-md py-2 pl-10"
        type="text"
        aria-label="Filter posts"
        placeholder="Filter posts"
      />
    </form>
  );
};

export default Filter;

services/service.js

import axios from "axios";

const instance = axios.create({
  baseURL:
    process.env.REACT_APP_SERVER_API ||
    "https://hashtags-n-mentions.herokuapp.com/api",
  headers: { "Content-Type": "application/json" },
  timeout: 1000 * 2, // Wait for request to complete in 2 seconds
});

export default instance;

Here we have created an instance from axios so that next time we do not have to pass baseURL and headers in every request.
services/index.js

export { default as APIservice } from "./service";

components/Posts.js

import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { APIservice } from "../services";

import Card from "./Card";
const Posts = () => {
  const [posts, setPosts] = useState([]);

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

  async function getPosts() {
    try {
      const res = await APIservice.get("/posts");
      setPosts(res.data.posts);
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-4">
      {posts && posts.length > 0
        ? posts
            .sort((a, b) => b.createdAt - a.createdAt)
            .map((post) => (
              <Card key={post._id} title={post.title} content={post.content} />
            ))
        : null}
      <li className="hover:shadow-lg flex rounded-lg">
        <Link
          to="/new"
          className="hover:border-transparent hover:shadow-xs w-full flex items-center justify-center rounded-lg border-2 border-dashed border-gray-200 text-sm font-medium py-4"
        >
          New Post
        </Link>
      </li>
    </ul>
  );
};

export default Posts;

Here we are getting the posts from the server in useEffect, and we are populating that data to our state posts using setPosts.

Later in the return statement we are checking if there are posts and then sorting posts based on created time.

Finally the posts are rendered in the Card component which takes title and content as props.

Card.js

import parse from "html-react-parser";
import { Link } from "react-router-dom";

const Card = ({ title, content }) => {
  return (
    <li x-for="item in items">
      <div
        href="item.url"
        className="hover:bg-light-blue-500 hover:border-transparent hover:shadow-lg group block rounded-lg p-4 border border-gray-200"
      >
        <div className="grid sm:block lg:grid xl:block grid-cols-2 grid-rows-1 items-center">
          <div>
            <span className="leading-6 font-medium text-black">{title}</span>
          </div>
          <div>
            <span className="group-hover:text-light-blue-200 text-gray-500 text-sm font-medium sm:mb-4 lg:mb-0 xl:mb-4">
              {parse(content, {
                replace: (domNode) => {
                  if (domNode.name === "a") {
                    const node = domNode.children[0];
                    return (
                      <Link
                        to={domNode.attribs.href}
                        className={
                          node.data[0] === "#"
                            ? "text-green-400"
                            : "text-blue-400"
                        }
                      >
                        {node.data}
                      </Link>
                    );
                  }
                },
              })}
            </span>
          </div>
        </div>
      </div>
    </li>
  );
};

export default Card;

Important thing to note in this component is the parse which we have imported from html-react-parser. We are parsing our content so that if we get an anchor tag(a href), we replace it with Link (from react-router-dom) else the anchor tag will refresh the whole page on click.

By the way, these anchor tags(now Link) are the hashtags or mentions, now you can create dynamic routes for /tags/:tag_name or /user/:user_id to show relevant data.

/index.css

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.mentions {
  margin: 1em 0;
}

.mentions--singleLine .mentions__control {
  display: inline-block;
}
.mentions--singleLine .mentions__higlighter {
  padding: 1px;
  border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
  padding: 5px;
  border: 2px inset;
}

.mentions--multiLine .mentions__control {
  font-family: monospace;
  font-size: 11pt;
  border: 1px solid silver;
}
.mentions--multiLine .mentions__highlighter {
  padding: 9px;
}
.mentions--multiLine .mentions__input {
  padding: 9px;
  min-height: 63px;
  outline: 0;
  border: 0;
}

.mentions__suggestions__list {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 10pt;
}

.mentions__suggestions__item {
  padding: 5px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.mentions__suggestions__item--focused {
  background-color: #cee4e5;
}

.mentions__mention {
  background-color: #cee4e5;
}

/components/NewPost.js

import { useEffect, useState, useRef } from "react";
import { MentionsInput, Mention } from "react-mentions";
import { Link, useHistory } from "react-router-dom";

import { APIservice } from "../services";

const NewPost = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [users, setUsers] = useState([]);
  const [tagNames, setTagNames] = useState([]);
  const myInput = useRef();
  const history = useHistory();

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

  function addContent(input) {
    if (input.length <= 350) {
      setContent(input);
    }
  }

  async function getActors() {
    const res = await APIservice.get(`/users`);
    // Transform the users to what react-mentions expects
    const usersArr = [];
    res.data.users.map((item) =>
      usersArr.push({
        id: item._id,
        display: item.name,
      })
    );
    setUsers(usersArr);
  }

  async function asyncTags(query, callback) {
    if (?query) return;

    APIservice.get(`/tag/search?name=${query}`)
      .then((res) => {
        if (res.data.tags.length) {
          const suggestion = { id: query, display: query };
          const tagsArray = res.data.tags.map((tag) => ({
            id: tag._id,
            display: tag.name,
          }));
          return [...tagsArray, suggestion];
        } else {
          return [{ id: query, display: query }];
        }
      })
      .then(callback);
  }

  async function savePost(e) {
    e.preventDefault();

    let newContent = content;

    newContent = newContent.split("@@@__").join('<a href="/user/');
    newContent = newContent.split("^^^__").join(`">@`);
    newContent = newContent.split("@@@^^^").join("</a>");

    newContent = newContent.split("$$$__").join('<a href="/tag/');
    newContent = newContent.split("~~~__").join(`">#`);
    newContent = newContent.split("$$$~~~").join("</a>");
    if (newContent !== "") {
      let body = newContent.trim();
      //Call to your DataBase like backendModule.savePost(body,  along_with_other_params);
      tagNames.map(async (tag) => {
        try {
          await APIservice.post("/tag", {
            name: tag,
          });
        } catch (error) {
          console.log(error);
        }
      });
      console.log(body);
      try {
        await APIservice.post("/post", {
          title,
          content: body,
          createdAt: new Date().getTime(),
        });
        history.push("/");
      } catch (error) {
        console.error(error);
      }
    }
  }

  return (
    <>
      <div className="heading text-center font-bold text-2xl m-5 text-gray-800">
        New Post
      </div>
      <form
        onSubmit={savePost}
        className="editor mx-auto w-10/12 flex flex-col text-gray-800 border border-gray-300 p-4 shadow-lg max-w-2xl"
      >
        <input
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="title border border-gray-300 p-2 mb-4 outline-none"
          spellCheck="false"
          placeholder="Title"
          type="text"
        />
        <div className="description outline-none">
          <MentionsInput
            className="mentions"
            inputRef={myInput}
            spellCheck="false"
            placeholder="Describe everything about this post here"
            value={content}
            onChange={(event) => addContent(event.target.value)}
          >
            <Mention
              trigger="@"
              data={users}
              markup="@@@____id__^^^____display__@@@^^^"
              style=`{{
                backgroundColor: "#daf4fa",
              }}`
              // onAdd={(id) => setActorIds((actorIds) => [...actorIds, id])}
              appendSpaceOnAdd={true}
            />
            <Mention
              trigger="#"
              data={asyncTags}
              markup="$$$____id__~~~____display__$$$~~~"
              style=`{{
                backgroundColor: "#daf4fa",
              }}`
              onAdd={(display) =>
                setTagNames((tagNames) => [...tagNames, display])
              }
              appendSpaceOnAdd={true}
            />
          </MentionsInput>
        </div>

        <div className="icons flex text-gray-500 m-2">
          <div
            onClick={() => {
              myInput.current.focus();
              setContent((content) => content + "@");
            }}
            className="mr-2 cursor-pointer hover:text-gray-700 border rounded-full py-1 px-6"
          >
            @
          </div>
          <div
            onClick={() => {
              myInput.current.focus();
              setContent((content) => content + "#");
            }}
            className="mr-2 cursor-pointer hover:text-gray-700 border rounded-full py-1 px-6"
          >
            #
          </div>
          <div className="count ml-auto text-gray-400 text-xs font-semibold">
            {350 - content.length}/350
          </div>
        </div>
        <div className="buttons flex">
          <Link
            to="/"
            className="btn border border-gray-300 p-1 px-4 font-semibold cursor-pointer text-gray-500 ml-auto"
          >
            Cancel
          </Link>
          <button className="btn border border-indigo-500 p-1 px-4 font-semibold cursor-pointer text-gray-200 ml-2 bg-indigo-500">
            Post
          </button>
        </div>
      </form>
    </>
  );
};

export default NewPost;

Note: Please remove single backticks from style tags from both Mention, I had to put it as I was getting error(liquid) in publishing the post to dev.to, Sorry for inconvenience.

Pretty big component ha?
Actually, this is the component that is the essence for this article so bear with me some more time ;-)
Here we have states for title and content of post which are self explanatory.
Users and tagNames are the data which we will get from backend and render on @ and # trigger respectively.

There are two ways in which we can show data to user in React Mentions input
Load data initially (like we did for users ie in useEffect)
Load data asynchronously (asyncTags function which will get executed every time tag input changes)

Now have a look at MentionsInput in return statement

The first thing to note is that MentionsInput is a textarea, so we have given value and set onChange for content to it.
The second thing is there are two Mention components inside it which are nothing but the triggers for @ and # respectively.

For every Mention, there are two required things ie trigger(like @ # $..) and data(either static or async) and we are good to go.

Saving Post Data To DB

Before saving the data to DB, we will have to handle it so that we can render it correctly later. After extracting the mentions and tags from the content, we save it to DB.
Also, we have called add/tag API so that new tags added by users are saved to DBtoo.

At the last of code, we have two buttons for adding @ or # by clicking the UI(like linkedin), we have just made a ref of content input, and call
— myInput.current.focus() to focus cursor to content input box
— setContent((content) => content + "@") to append @/# after whatever the state of content is.

Github repo link for the above app https://github.com/gauravadhikari1997/hashtags-and-mentions-in-react

Thanks for reading. Hope you like the article and find it useful.

5 Techniques To Increase Page Load Speed

Gaurav Adhikari — Tue, 21 Jul 2020 08:33:22 +0000

The following are the five techniques that I used to achieve lesser page load time.

Minimize Use Of jQuery And JS
Minify Resources
Compress Assets Like Images, Videos, Gifs
Customize Your Font Icon Library
Use Lazy Loading

1. Minimize Use Of jQuery And JS

I am using the bootstrap framework to leverage the mobile-first front-end development of my website. The easiest & recommended way to use bootstrap in your project is to use its CDN, following are the CDN links:

Bootstrap uses jQuery and Popper.js for JavaScript components but if you just use the CSS part of Bootstrap, you don't need to import them. That’s what I did to reduce a lot of load time.

But the navbar stopped functioning, nothing happened on clicking it. This is because some components of bootstrap require JavaScript, like Buttons for toggling states, Alerts dismissing, Modals for displaying, positioning, and scroll behavior, Tooltips, and popovers, etc.

My main navigation menu was relying on bootstrap javascript, to handle that I alternatively created a custom nav bar using CSS only.
Here is code if you want to try:
https://codepen.io/gauravadhikari/pen/BajGPYd

2. Minify Resources

Always minify your resources ie. HTML, CSS, & JS before using them in the production version of your website. As recommended by https://developers.google.com/ following are good tools to minify your resources for free:

To minify HTML, try HTMLMinifier
To minify CSS, try csso
To minify JavaScript, try UglifyJS

Check how I achieved 43.85% saving by using HTML minifier and 37.79% saving using CSS minifier

3. Compress Assets Like Images, Videos, GIFs

Large images, videos, gifs take up a lot of space and decrease the page load time disastrously. You should always compress your assets without compromising with quality. I personally use kraken.io for image compression.

Check the screenshot before compression and after compression (savings 60.81 %, loss negligible)

4. Customize Your Font Icon Library

If you’re using just 5-6 font icons from font awesome library then why import full library of thousands of icons. Make your custom font library with just a handful of needed icons using IcoMoon.

Head over to icomoon.io/app
Select icons you require
Click Generate font and download

How to use:

Extract the zipped folder
Check demo.html file for your icon class
Upload style.css and font folder to your hosting

5. Use Lazy Loading

Lazy loading is a technique commonly used in websites, to not load an object until the point at which it is needed. It contributes to the efficiency of the website.

I use Craig Buckler’s progressive-image.js lazyloading as it gives a nice CSS blur effect when the image is loading (like Medium). Check documentation here:
https://codepen.io/craigbuckler/full/yPqLXW

How to use:

Add the CSS in <head> tag and JS just above ending <body> tag

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.css">
<script src="https://cdn.jsdelivr.net/npm/progressive-image.js/dist/progressive-image.js"&gt;&lt;/script>

add an <img> tag for the small image with a class of preview, surround it with <a> link to the large image and add progressive replace as classes
```
<a href="full.jpg" class="progressive replace">
<img src="tiny.jpg" class="preview" alt="image" />
</a>
```

Note: The preview and full-size images must have the same aspect ratio, e.g. 40x30 and 800x600.
Check the load time before and after optimization using lazyloading

Thanks for reading! I hope you learned something useful.
Resource Link For more such related articles

Blockchain development using Ethereum, Web3.js, Solidity Smart Contracts [Part 1]

Gaurav Adhikari — Sat, 20 Jun 2020 07:18:52 +0000

Blockchain:

“What the internet did for communications, blockchain will do for trusted transactions.” - Ginni Rometty, CEO of IBM

After hearing the word Blockchain, possible questions which come up in your mind maybe

Is Blockchain a technology, culture or process change?
How is BlockChain able to achieve things quite faster?
How is Cryptocurrency linked to BlockChain?
What is the role of BitCoin in BlockChain?

This article is going to make much of the things clear and simpler, so let's get started. 😉

Course Coverage

What is Blockchain and its significance?
Blockchain Types
Cryptographic Techniques
Types of Cryptocurrency
Details about Bitcoin
Blockchain Applications and trending information

Let's first understand the concept of intermediaries and their roles in-detail before we dive into BlockChain.

Example 1 - Electronic Money Transfer
In case of an electronic Money Transfer (by an individual or business), Banks track and record the transaction.

While sending money from one account to another account, Bank approves, tracks and records the transaction for each party in their private accounts before the amount actually reflects in the receiver's account.

Example 2 - Real Estate
Governments record the change of land rights/property ownership when a person buys a property or land into some legal documents.
If the records are not maintained, there would be complete disorder and confusion, and anyone could potentially claim ownership of anything.

Issues with the traditional system:

Centralized power
Private ledgers(or records)
Prone to hacking/corruption

Let's imagine direct business-to-business or peer-to-peer transactions without the involvement of any Government, Banks or any intermediary.
Welcome to the World of Blockchain! 😀

What is Blockchain?

Imagine Blockchain as a Google spreadsheet, where everyone makes changes/updates and shares with other users.
Also, it has a unique feature, where every update is final, and nobody can tamper with it.

Wikipedia defines Blockchain as “A blockchain, originally block chain, is a growing list of records, called blocks, that are linked using cryptography. Each block contains a cryptographic hash of the previous block, a timestamp, and transaction data.”

Here is an infographic from Zignuts.com explaining the working of Blockchain:

Blockchain addresses the intermediary issues by providing the following features:

Decentralized Power - Blockchain uses the P2P node networking system.
Public Ledgers - Each node in the network has its own public ledger with details of all transactions.
Immutable hacking - Since the same data is available in the distributed network, modification is impossible.
Cryptography - To maintain the blocks in Blockchain, Blockchain uses a complex mathematical algorithm.

Types of Blockchain

Public Blockchain
Private Blockchain

- Consortium/Federated Blockchain

Blockchain is split on the basis of the access to the blockchain data (or transaction). You can quickly understand the three blockchain types from the comparison picture given below.

Saved your time haan! 😎

Cryptography:

Cryptography is a technique that converts plain text into an encrypted text, thus making it difficult for some random person to manipulate the data.

In Symmetric cryptography, the same key is used for encrypting and decrypting data. This is fast but the problem comes in sharing the key. If it is compromised more damage is caused. So in blockchain, we use Asymmetric cryptography. ??.
A pair of keys is used in Asymmetric Cryptography (Public key & Private key).

Party A will encrypt the transaction using Public key of Party B, then Party B can simply decrypt the transaction using its Private key. Hence the need to share private key is not required.

Hashing

Hashing is an algorithm that encrypts data of any arbitrary length to a fixed length.

This output is a smaller representation of the original data and it is called Digest or HASH.

These HASHes can be used to validate the data that came from as each HASH is uniquely connected to the original message.

Few Online hash generators. You can run an MD5, SHA1, SHA-256 and other hashing functions on your data here:

onlinemd5.com
sha1-online.com

What is Cryptocurrency?
Now we understand blockchain technology uses cryptography to protect the network.

Cryptocurrency is a combination of Cryptography and Currency.
Cryptocurrency is the digital currency that uses encryption techniques to regulate the generation of money and verify the transfer of funds without depending upon any type of central authority.

Types of Cryptocurrencies
Some of the trending cryptocurrencies are Bitcoin, Litecoin, Ripple, Ethereum, Zcash, etc.

Bitcoin

Here, you will understand more about the famous Cryptocurrency Bitcoin.
Bitcoin was invented by a pseudonymous group of individuals under the name Satoshi Nakamoto as open-source software in 2009.
Read it here bitcoin.org/bitcoin.pdf

It is the first decentralized cryptocurrency
It used cryptography for controlling its creation and management
It is created and held electronically in a peer to peer open ledger (public blockchain)

How to procure Bitcoins?

Buying them on an exchange like Coinbase, Coinmama, Luno, etc.
As the exchange of products and services.
Through mining

Mining in Bitcoin

In simple words, mining is verification of bitcoin transactions.
Example:

Aastha wants to buy some products from Gaurav using bitcoin.
To make sure her bitcoin is genuine, miners start verifying the transaction.
The transaction gets approved only after Miners look into the transaction history of Aastha to verify if Aastha has enough valid bitcoins.
Once the transaction is approved, it is updated in the public ledger as a new block, and the message is propagated to all the users in that blockchain network.

The Miner who validates the transaction first gets to put a subsequent block into the blockchain. To incentivize mining, the miners are rewarded with newly released bitcoins.

Famous Blockchain Frameworks

Most popular Blockchain frameworks include the following:

Ethereum
Hyperledger
R3 Corda

A quick comparison between three is given below

Ethereum	Hyperledger	R3 Corda
Permissionless and generic Blockchain platform	Modular and permissioned platform	Specialized distributed and permissioned ledger platform
Governed by Ethereum developers	Governed by Linux foundation	Governed by R3
Mining based on Proof of Work (POW)	Multiple consensus approaches - at transaction level	Specific consensus at the transaction level
Consensus approached at Ledger level	-	-

We'll be coding in Solidity programming language in Ethereum framework to develop our dapps (decentralized apps). Excited? Mee too! 🤪

Blockchain use cases:

Banking and payments - Giving access to financial services to everyone around the world including those countries that don’t have access to traditional banking. ABRA: Bitcoin Based Remittance service Barclays
Cybersecurity - Data is verified and secured using Cryptographic Hashes
Supply Chain Management - Transactions are kept in a permanent decentralized record and monitored securely and transparently. Product authenticity or fair trade can be easily verified using a distributed ledger. Provenance, Fluent, Skuchain, and Blockverify
Forecasting - Research, consulting, analysis and forecasting AUGUR
Networking and IoT Autonomous Decentralized Peer-to-Peer Telemetry (ADEPT) by Samsung and IBM is a new concept that will create a decentralized network of IoT devices.
Insurance - This technology is useful for any type of insurance that relies on real-world data AETERNITY
Private Transport & Ride Sharing - Blockchain technology can be used to build a decentralized version of peer-to-peer ridesharing apps allowing both users and car owners to arrange terms and conditions in a secure way without third-party providers. ARCADE CITY LA`ZOOZ
Online Data Storage - Centrailzed servers are vulnerable to hacking, data loss, and human error. Using Blockchain technology allows cloud storage to be more secure, robust and attack proof. STORJ: DECENTRALIZED CLOUD STORAGE
Charity - Common complaints in the charity space include inefficiency and corruption which prevent money from reaching those who are meant to have it. Blockchain can help track donations to make sure your money is going in right hands. BITGIVE
Voting - Blockchain can be used for voter registeration, verification, and electronic vote counting to ensure that only legitimate votes are counted and no votes are changed or removed. Immutable, public-viewable ledgers of recorded votes would make elections more fair and democratic. DEMOCRACY EARTH FOLLOW MY VOTE
Governments - Government systems are often slow, opaque, and prone to corruption. Implementing Blockchain-based system can significantly reduce bureaucracy and increase security, efficiency, and transparency of governmental operations. DUBAI IS GETTING TO PUT ALL ITS GOVERNMENT DOCUMENTS ON THE BLOCKCHAIN BY 2020
Healthcare - Hospitals need a secure platform to store and share sensitive data. Blockchain can allow hospitals to safely store medical records and share them with authorized professionals or patients. It will improve data accuracy and can also fast the process of diagnosis. GEM TIERION
Energy Management - Energy producers and users cannot buy it directly from each other and have to go through the public grids or trusted private intermediary. TRANSACTIVEGRID
Online Music - Blockchain startups are arising with a way for musicians to get paid directly from their fans without giving up large percentages of sales to platforms or record companies. MYCELIA UJO
Retail - Sorry Amazon OPENBAZAAR OB1
Real Estate - Some of the problems in buying and selling property are bureaucracy, lack of transparency, fraud, and mistakes in public records. Blockchain solves this issue too. UBIQUITY

Thanks! Let me know if you are interested for next part in comment.. :P