Locasaur is a relationship app just for local businesses and their regular customers

Locasaur

Building an Invoice PDF system with , , and can be a complex task, but I'm here to guide you through the process. React.js Redux Node.js Here's a step-by-step tutorial on how you can create such a system: You can find the Github Repository for this project here: https://github.com/idurar/idurar-erp-crm Content Overview Step 1: Setting up the environment Step 2: Setting up the server (Node.js/Express) Step 3: Building the React.js application Step 4: Integrating React.js with Node.js Step 5: Styling and enhancing the user interface Step 6: Testing and debugging Step 7: Deployment Step 1: Setting up the environment Make sure you have Node.js installed on your machine. Create a new directory for your project and navigate into it using the terminal. Initialize a new Node.js project by running . npm init Install required dependencies by running . npm install react redux react-redux Step 2: Setting up the server (Node.js/Express) Create a new file called and set up a basic Express server. server.js Import the necessary dependencies ( , ) in the server file. express html-pdf Define routes for generating and downloading invoices. const express = require('express');

const helmet = require('helmet');
const path = require('path');
const cors = require('cors');

const cookieParser = require('cookie-parser');
require('dotenv').config({ path: '.variables.env' });

const helpers = require('./helpers');

const erpApiRouter = require('./routes/erpRoutes/erpApi');
const erpAuthRouter = require('./routes/erpRoutes/erpAuth');
const erpDownloadRouter = require('./routes/erpRoutes/erpDownloadRouter');

const errorHandlers = require('./handlers/errorHandlers');

const { isValidAdminToken } = require('./controllers/erpControllers/authJwtController');

// create our Express app
const app = express();
// serves up static files from the public folder. Anything in public/ will just be served up as the file it is

// Takes the raw requests and turns them into usable properties on req.body

app.use(helmet());
app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));



// pass variables to our templates + all requests

app.use((req, res, next) => {
  res.locals.h = helpers;
  res.locals.admin = req.admin || null;
  res.locals.currentPath = req.path;
  const clientIP = req.socket.remoteAddress;
  let isLocalhost = false;
  if (clientIP === '127.0.0.1' || clientIP === '::1') {
    // Connection is from localhost
    isLocalhost = true;
  }
  res.locals.isLocalhost = isLocalhost;
  next();
});

// app.use(function (req, res, next) {
//   if (req.url.slice(-1) === "/" && req.path.length > 1) {
//     // req.path = req.path.slice(0, -1);
//     req.url = req.url.slice(0, -1);
//   }
//   next();
// });

// Here our API Routes

var corsOptionsDelegate = function (req, callback) {
  var corsOptions;
  const clientIP = req.socket.remoteAddress;
  let isLocalhost = false;
  if (clientIP === '127.0.0.1' || clientIP === '::1') {
    // Connection is from localhost
    isLocalhost = true;
  }
  if (isLocalhost) {
    corsOptions = {
      origin: '*',
      credentials: true,
    };
  } else {
    corsOptions = {
      origin: true,
      credentials: true,
    };
  }
  callback(null, corsOptions); // callback expects two parameters: error and options
};

app.use(
  '/api',
  cors({
    origin: true,
    credentials: true,
  }),
  erpAuthRouter
);

app.use(
  '/api',
  cors({
    origin: true,
    credentials: true,
  }),
  isValidAdminToken,
  erpApiRouter
);

app.use('/download', cors(), erpDownloadRouter);

// If that above routes didnt work, we 404 them and forward to error handler
app.use(errorHandlers.notFound);

// Otherwise this was a really bad error we didn't expect! Shoot eh
if (app.get('env') === 'development') {
  /* Development Error Handler - Prints stack trace */
  app.use(errorHandlers.developmentErrors);
}

// production error handler
app.use(errorHandlers.productionErrors);

// done! we export it so we can start the site in start.js
module.exports = app; Step 3: Building the React.js application In the root directory of your project, create a new folder called . client Navigate into the folder and run to generate a new React.js application. client npx create-react-app . Replace the contents of the generated folder with your own code. src Create components for the invoice form, invoice list, and invoice detail view. Use Redux to manage the state of your application, including the invoice data. import React from 'react';
import dayjs from 'dayjs';
import { Tag } from 'antd';
import InvoiceModule from '@/modules/InvoiceModule';
import { useMoney } from '@/settings';

export default function Invoice() {
  const { moneyRowFormatter } = useMoney();

  const entity = 'invoice';
  const searchConfig = {
    displayLabels: ['name', 'surname'],
    searchFields: 'name,surname,birthday',
  };
  const entityDisplayLabels = ['number', 'client.company'];
  const dataTableColumns = [
    {
      title: '#N',
      dataIndex: 'number',
    },
    {
      title: 'Client',
      dataIndex: ['client', 'company'],
    },
    {
      title: 'Date',
      dataIndex: 'date',
      render: (date) => {
        return dayjs(date).format('DD/MM/YYYY');
      },
    },
    {
      title: 'Due date',
      dataIndex: 'expiredDate',
      render: (date) => {
        return dayjs(date).format('DD/MM/YYYY');
      },
    },
    {
      title: 'Total',
      dataIndex: 'total',
      render: (amount) => moneyRowFormatter({ amount }),
    },
    {
      title: 'Balance',
      dataIndex: 'credit',
      render: (amount) => moneyRowFormatter({ amount }),
    },
    {
      title: 'status',
      dataIndex: 'status',
      render: (status) => {
        let color = status === 'draft' ? 'cyan' : status === 'sent' ? 'magenta' : 'gold';

        return <Tag color={color}>{status && status.toUpperCase()}</Tag>;
      },
    },
    {
      title: 'Payment',
      dataIndex: 'paymentStatus',
      render: (paymentStatus) => {
        let color =
          paymentStatus === 'unpaid'
            ? 'volcano'
            : paymentStatus === 'paid'
            ? 'green'
            : paymentStatus === 'overdue'
            ? 'red'
            : 'purple';

        return <Tag color={color}>{paymentStatus && paymentStatus.toUpperCase()}</Tag>;
      },
    },
  ];

  const PANEL_TITLE = 'invoice';
  const dataTableTitle = 'invoices Lists';
  const ADD_NEW_ENTITY = 'Add new invoice';
  const DATATABLE_TITLE = 'invoices List';
  const ENTITY_NAME = 'invoice';
  const CREATE_ENTITY = 'Save invoice';
  const UPDATE_ENTITY = 'Update invoice';

  const config = {
    entity,
    PANEL_TITLE,
    dataTableTitle,
    ENTITY_NAME,
    CREATE_ENTITY,
    ADD_NEW_ENTITY,
    UPDATE_ENTITY,
    DATATABLE_TITLE,
    dataTableColumns,
    searchConfig,
    entityDisplayLabels,
  };
  return <InvoiceModule config={config} />;
} Step 4: Integrating React.js with Node.js In your React.js application, make HTTP requests to the server endpoints created in Step 2 using libraries like or . axios fetch When submitting the invoice form, send the form data to the server and handle the creation of the PDF invoice on the server side. Retrieve the generated PDF from the server and display a link or button to let users download it. import React, { useState, useEffect } from 'react';
import { Form, Divider } from 'antd';

import { Button, PageHeader, Row, Statistic, Tag } from 'antd';

import { useSelector, useDispatch } from 'react-redux';
import { erp } from '@/redux/erp/actions';
import { selectCreatedItem } from '@/redux/erp/selectors';

import { useErpContext } from '@/context/erp';
import uniqueId from '@/utils/uinqueId';

import Loading from '@/components/Loading';
import { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';

function SaveForm({ form, config }) {
  let { CREATE_ENTITY } = config;
  const handelClick = () => {
    form.submit();
  };

  return (
    <Button onClick={handelClick} type="primary" icon={<PlusOutlined />}>
      {CREATE_ENTITY}
    </Button>
  );
}

export default function CreateItem({ config, CreateForm }) {
  let { entity, CREATE_ENTITY } = config;
  const { erpContextAction } = useErpContext();
  const { createPanel } = erpContextAction;
  const dispatch = useDispatch();
  const { isLoading, isSuccess } = useSelector(selectCreatedItem);
  const [form] = Form.useForm();
  const [subTotal, setSubTotal] = useState(0);
  const handelValuesChange = (changedValues, values) => {
    const items = values['items'];
    let subTotal = 0;

    if (items) {
      items.map((item) => {
        if (item) {
          if (item.quantity && item.price) {
            let total = item['quantity'] * item['price'];
            //sub total
            subTotal += total;
          }
        }
      });
      setSubTotal(subTotal);
    }
  };

  useEffect(() => {
    if (isSuccess) {
      form.resetFields();
      dispatch(erp.resetAction({ actionType: 'create' }));
      setSubTotal(0);
      createPanel.close();
      dispatch(erp.list({ entity }));
    }
  }, [isSuccess]);

  const onSubmit = (fieldsValue) => {
    if (fieldsValue) {
      // if (fieldsValue.expiredDate) {
      //   const newDate = fieldsValue["expiredDate"].format("DD/MM/YYYY");
      //   fieldsValue = {
      //     ...fieldsValue,
      //     expiredDate: newDate,
      //   };
      // }
      // if (fieldsValue.date) {
      //   const newDate = fieldsValue["date"].format("DD/MM/YYYY");
      //   fieldsValue = {
      //     ...fieldsValue,
      //     date: newDate,
      //   };
      // }
      if (fieldsValue.items) {
        let newList = [...fieldsValue.items];
        newList.map((item) => {
          item.total = item.quantity * item.price;
        });
        fieldsValue = {
          ...fieldsValue,
          items: newList,
        };
      }
    }
    dispatch(erp.create({ entity, jsonData: fieldsValue }));
  };

  return (
    <>
      <PageHeader
        onBack={() => createPanel.close()}
        title={CREATE_ENTITY}
        ghost={false}
        tags={<Tag color="volcano">Draft</Tag>}
        // subTitle="This is create page"
        extra={[
          <Button
            key={`${uniqueId()}`}
            onClick={() => createPanel.close()}
            icon={<CloseCircleOutlined />}
          >
            Cancel
          </Button>,
          <SaveForm form={form} config={config} key={`${uniqueId()}`} />,
        ]}
        style={{
          padding: '20px 0px',
        }}
      ></PageHeader>
      <Divider dashed />
      <Loading isLoading={isLoading}>
        <Form form={form} layout="vertical" onFinish={onSubmit} onValuesChange={handelValuesChange}>
          <CreateForm subTotal={subTotal} />
        </Form>
      </Loading>
    </>
  );
} Step 5: Styling and enhancing the user interface Utilize CSS and any CSS framework of your choice (e.g., Ant Design) to style your application. Enhance the user interface with features like pagination, sorting, searching, and filtering invoices. import React, { useState, useEffect, useRef } from 'react';
import dayjs from 'dayjs';
import { Form, Input, InputNumber, Button, Select, Divider, Row, Col } from 'antd';

import { PlusOutlined } from '@ant-design/icons';

import { DatePicker } from '@/components/CustomAntd';

import AutoCompleteAsync from '@/components/AutoCompleteAsync';
import ItemRow from '@/components/ErpPanel/ItemRow';

import MoneyInputFormItem from '@/components/MoneyInputFormItem';

export default function InvoiceForm({ subTotal = 0, current = null }) {
  const [total, setTotal] = useState(0);
  const [taxRate, setTaxRate] = useState(0);
  const [taxTotal, setTaxTotal] = useState(0);
  const [currentYear, setCurrentYear] = useState(() => new Date().getFullYear());
  const handelTaxChange = (value) => {
    setTaxRate(value);
  };

  useEffect(() => {
    if (current) {
      const { taxRate = 0, year } = current;
      setTaxRate(taxRate);
      setCurrentYear(year);
    }
  }, [current]);
  useEffect(() => {
    const currentTotal = subTotal * taxRate + subTotal;
    setTaxTotal((subTotal * taxRate).toFixed(2));
    setTotal(currentTotal.toFixed(2));
  }, [subTotal, taxRate]);

  const addField = useRef(false);

  useEffect(() => {
    addField.current.click();
  }, []);

  return (
    <>
      <Row gutter={[12, 0]}>
        <Col className="gutter-row" span={9}>
          <Form.Item
            name="client"
            label="Client"
            rules={[
              {
                required: true,
                message: 'Please input your client!',
              },
            ]}
          >
            <AutoCompleteAsync
              entity={'client'}
              displayLabels={['company']}
              searchFields={'company,managerSurname,managerName'}
              // onUpdateValue={autoCompleteUpdate}
            />
          </Form.Item>
        </Col>
        <Col className="gutter-row" span={5}>
          <Form.Item
            label="Number"
            name="number"
            initialValue={1}
            rules={[
              {
                required: true,
                message: 'Please input invoice number!',
              },
            ]}
          >
            <InputNumber style={{ width: '100%' }} />
          </Form.Item>
        </Col>
        <Col className="gutter-row" span={5}>
          <Form.Item
            label="year"
            name="year"
            initialValue={currentYear}
            rules={[
              {
                required: true,
                message: 'Please input invoice year!',
              },
            ]}
          >
            <InputNumber style={{ width: '100%' }} />
          </Form.Item>
        </Col>
        <Col className="gutter-row" span={5}>
          <Form.Item
            label="status"
            name="status"
            rules={[
              {
                required: false,
                message: 'Please input invoice status!',
              },
            ]}
            initialValue={'draft'}
          >
            <Select
              options={[
                { value: 'draft', label: 'Draft' },
                { value: 'pending', label: 'Pending' },
                { value: 'sent', label: 'Sent' },
              ]}
            ></Select>
          </Form.Item>
        </Col>
        <Col className="gutter-row" span={9}>
          <Form.Item label="Note" name="note">
            <Input />
          </Form.Item>
        </Col>
        <Col className="gutter-row" span={8}>
          <Form.Item
            name="date"
            label="Date"
            rules={[
              {
                required: true,
                type: 'object',
              },
            ]}
            initialValue={dayjs()}
          >
            <DatePicker style={{ width: '100%' }} format={'DD/MM/YYYY'} />
          </Form.Item>
        </Col>
        <Col className="gutter-row" span={7}>
          <Form.Item
            name="expiredDate"
            label="Expire Date"
            rules={[
              {
                required: true,
                type: 'object',
              },
            ]}
            initialValue={dayjs().add(30, 'days')}
          >
            <DatePicker style={{ width: '100%' }} format={'DD/MM/YYYY'} />
          </Form.Item>
        </Col>
      </Row>
      <Divider dashed />
      <Row gutter={[12, 12]} style={{ position: 'relative' }}>
        <Col className="gutter-row" span={5}>
          <p>Item</p>
        </Col>
        <Col className="gutter-row" span={7}>
          <p>Description</p>
        </Col>
        <Col className="gutter-row" span={3}>
          <p>Quantity</p>
        </Col>
        <Col className="gutter-row" span={4}>
          <p>Price</p>
        </Col>
        <Col className="gutter-row" span={5}>
          <p>Total</p>
        </Col>
      </Row>
      <Form.List name="items">
        {(fields, { add, remove }) => (
          <>
            {fields.map((field) => (
              <ItemRow key={field.key} remove={remove} field={field} current={current}></ItemRow>
            ))}
            <Form.Item>
              <Button
                type="dashed"
                onClick={() => add()}
                block
                icon={<PlusOutlined />}
                ref={addField}
              >
                Add field
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Divider dashed />
      <div style={{ position: 'relative', width: ' 100%', float: 'right' }}>
        <Row gutter={[12, -5]}>
          <Col className="gutter-row" span={5}>
            <Form.Item>
              <Button type="primary" htmlType="submit" icon={<PlusOutlined />} block>
                Save Invoice
              </Button>
            </Form.Item>
          </Col>
          <Col className="gutter-row" span={4} offset={10}>
            <p
              style={{
                paddingLeft: '12px',
                paddingTop: '5px',
              }}
            >
              Sub Total :
            </p>
          </Col>
          <Col className="gutter-row" span={5}>
            <MoneyInputFormItem readOnly value={subTotal} />
          </Col>
        </Row>
        <Row gutter={[12, -5]}>
          <Col className="gutter-row" span={4} offset={15}>
            <Form.Item
              name="taxRate"
              rules={[
                {
                  required: false,
                  message: 'Please input your taxRate!',
                },
              ]}
              initialValue="0"
            >
              <Select
                value={taxRate}
                onChange={handelTaxChange}
                bordered={false}
                options={[
                  { value: 0, label: 'Tax 0 %' },
                  { value: 0.19, label: 'Tax 19 %' },
                ]}
              ></Select>
            </Form.Item>
          </Col>
          <Col className="gutter-row" span={5}>
            <MoneyInputFormItem readOnly value={taxTotal} />
          </Col>
        </Row>
        <Row gutter={[12, -5]}>
          <Col className="gutter-row" span={4} offset={15}>
            <p
              style={{
                paddingLeft: '12px',
                paddingTop: '5px',
              }}
            >
              Total :
            </p>
          </Col>
          <Col className="gutter-row" span={5}>
            <MoneyInputFormItem readOnly value={total} />
          </Col>
        </Row>
      </div>
    </>
  );
} Step 6: Testing and debugging Use tools like React DevTools and Redux DevTools to debug your application. Write unit tests using libraries like Jest or Enzyme to ensure the stability of your codebase. Step 7: Deployment Deploy your Node.js server and React.js application to a hosting platform like Heroku, AWS, or Netlify. Configure the necessary environment variables and ensure that everything is working as expected in a production environment. You can find the Github Repository here: https://github.com/idurar/idurar-erp-crm This tutorial provides a high-level overview of building an Invoice PDF system using React.js, Redux, and Node.js. Good luck with your project! Also published . here

How to Build an Invoice PDF System Using React.js, Redux and Node.js

Off-chain games have been a standard in the gaming industry for many years. However, new opportunities and technologies emerge as time passes, and on-chain games provide a slightly different approach for developers and players. In creating , I discovered many of these nuances. my own game Nowadays, it is challenging to make an in-demand game based purely on blockchain because the speed and responsiveness of the game are often crucial for a pleasant experience, and the speed of blockchain networks is not enough to provide such an experience. Therefore, my game can be called a hybrid game: for things where speed is required, the classical approach is used, and for things related to economics and statistics (player parameters, their level, and so on), the on-chain component is used. gaming Author's Note: In this article, I want to compare the difference in the production of off-chain games and hybrid games with an on-chain component. Often in publications, hybrid games are called Web3 games for simplicity. My project can also be called a Web3 game in this sense, but I will still call it a hybrid game for accuracy. So, let's look at some of the critical differences between off-chain and on-chain game development. The difference in their production lies in both platforms' technological features and working principles. Architecture and Technology are traditionally based on closed code and data stored on the developers' servers and, as a rule, are not available to players in full. In developing off-chain games, the classic client-server architecture is used, where the game client is installed on the player's computer or mobile device (the client can be a browser if we are talking about web games). All data is stored and processed on the game servers, and the game process is controlled. The game process is mainly implemented on the client side (which is not always valid for : the server often plays a more significant role). Developers usually have complete control over the game and are responsible for the servers' operability. Off-chain games browser games Besides the classic (off-chain) component, on-chain is usually open code and data stored on a public network, the blockchain. Thus, an on-chain game does not have a game server in the usual sense. The entire blockchain network acts as the server, and the smart contracts stored in it act as the server code. Smart contracts are program code (in Solidity, Cadence, Rust, and so on) that processes data stored in the blockchain and is also stored in the blockchain. In a sense, blockchain is a distributed database, and smart contracts are stored procedures analogous to traditional databases (with the significant difference that blockchain does not have a single control center and its data is public). On-chain: For such a decentralized network to exist in the market economy, writing data into it is not free. Each transaction is paid for with so-called gas (tokens of this network), and the transaction price is balanced depending on the network load. On August 15, 2023, the transaction fee on the was approximately 0,000027 BTC or $0,798. This is an average, and the actual amount may vary. The higher the transaction fee, the more likely it will be included in the next block. Thus, interaction with the network is not free for the client and requires him to have tokens in the network on his wallet, which raises the threshold of entry both technically (you need to get a wallet and put the necessary tokens in it) and economically. Typically, a client connects to the blockchain network through its wallet and interacts with it through a standardized API, also called ABI (B stands for "binary"). Bitcoin network ABI files are generated during the compilation of smart contracts and then used by the client as an interface to access these smart contracts on the blockchain network. This approach is similar to classical interface generation using Swagger or gRPC tools. In the case of blockchain development, we get ABI files immediately when compilation simplifies the process. However, the specifics of the blockchain network add complexity. Requests (so-called transactions) in the network are processed in blocks, which, on the one hand, significantly increases the speed of response from the network (a request is processed from 1 sec to 12 sec, it all depends on a particular blockchain). However, it is crushingly inferior to off-chain games, not allowing you to create dynamic and responsive . games on-chain On the other hand, in most networks, due to their openness, the request data is visible in the newly formed transaction block to all participants even before it is stored in the network - this forces additional security issues to be addressed (classic example: sandwich bots and, as a tool to combat this, the slippage parameter). Another essential detail is the following: due to the decentralized and distributed nature of the blockchain network, there is no guarantee that a newly formed block will be preserved in the blockchain (newly formed blocks may roll back if the participating servers do not reach a consensus). Usually, we can say that a block is "anchored" in the network after generating 6–12 blocks after it. This last detail is essential to consider in hybrid games, where part of the information is stored and processed by the off-chain, and care must be taken to handle data mis-synchronization. If a block in the chain is rolled back, you should back the corresponding changes on your off-chain server.
These were difficulties. On the plus side, we can mention the already mentioned automatic generation of interfaces (ABI), no need to maintain your servers (in the case of a pure on-chain project). In addition, there is no need to worry about hacking or DDoS of servers - these issues are delegated to the blockchain network. Asset Ownership and Community Participation Off-chain: Asset ownership in off-chain games is through centralized systems and databases that the developers and publishers of the game control. Asset ownership is limited to the rights granted to players as part of the game platform or license agreement. What do off-chain players own? weapons, armor, clothing, jewelry, and other in-game items that can be purchased or earned. However, possession of these items is limited to the game world and has no real value outside the game. Virtual items: These currencies allow buying items, upgrades, or other in-game benefits. However, the developers control game resources, and their use and exchange are limited within the game ecosystem. Currencies and in-game resources earned or purchased. Players own their accounts containing information about their progress, achievements, and other statistics. Although players have control over their accounts, the data is stored on the game's servers and is accessible through the game platforms. Accounts and data. Ownership of is often subject to license agreements and restrictions developers and publishers impose. Game assets and data remain within the game platform and usually cannot be freely sold or transferred outside the game ecosystem without the developers' consent. assets in off-chain games On-chain games go further and seek to conceptualize NFT and asset management on a blockchain. Asset ownership in on-chain games is done through decentralized blockchain technology, allowing players complete control and ownership over their digital assets. Players can also trade them on open markets or through dedicated platforms. On-chain: It should be noted here that developers can precisely place restrictions on players' digital assets. These restrictions are represented in smart contracts and are visible to the community in advance. Why impose restrictions? It could be either a matter of maintaining the balance of the game and the in-game economy, or it could be a matter of malicious fraud. Thus, the player should read smart contract reviews from legitimate community members to weigh the pros and cons and, being informed, decide whether to accept the game rules. It is worth admitting that understanding trading in Steam is much easier than learning how to work with cryptocurrencies quickly, set up a specialized wallet, and exchange tokens. All these actions are complicated and confusing for beginners, preventing them from understanding and using many game functions. a year or two ago, I tried to help my nephews , but they got bored after a week of learning and did not desire to make one more attempt. That's why in my project, I focused on the tutorial and tried to hide obscure terminology behind game terms. A bit of personal history: enter crypto Game economy and rewards Off-chain: The in-game economy of off-chain games has a centralized model where developers and publishers control the game currency, resources, and economic systems of the game. In-game mechanisms offered by the developers reward achievements and progress in the game. On-chain: On-chain games present economic systems and rewards in a decentralized format. They are based on smart contracts that automatically fulfill conditions and provide real-time rewards to players. The distribution of rewards is usually based on activity level, contribution to the game, ownership share, and other parameters. Development Cost The total cost of creating an off-chain or on-chain game depends on many factors, including the scale of the project, its uniqueness, the number of game mechanics, the complexity of development, and other points. In general, it cannot be said that one type of game will necessarily be cheaper than another. BR Softech says the average cost of AAA game development is between 60 and 80 million dollars, including basic and mid-level features. However, with advanced and high-level functionality and graphics, the cost of these games can reach $100 million or even exceed that amount. Here are some examples: Grand Theft Auto V by Rockstar Games, released in 2013: $265 million (inflation-adjusted: $291 million). Star Wars: The Old Republic by Electronic Arts, LucasArts, released in 2011: $200+ million (inflation-adjusted: $227+ million). The Witcher 3: Wild Hunt by CD Projekt, released in 2015: $81 million (inflation-adjusted: $87 million). However, the cost of developing an on-chain game can easily be higher than an off-chain game because on-chain games require additional integration with blockchain technologies, creating and managing smart contracts, the presence of a proprietary cryptocurrency or token, etc. All this requires extra time and resources on the part of developers. Also, on-chain games often require a development team with experience with blockchain and cryptocurrencies, which can affect the project's cost, as experts in this field are usually in demand, and their services are expensive. As mentioned above, the cost of creating a game can vary significantly in each specific case, and exact figures can only be provided after a detailed discussion of the requirements and the project with the development team. What's The Bottom Line? The main difference between off-chain and on-chain games is data openness, ownership, and control. While off-chain games are centrally controlled, , opening up new gaming experiences and monetization opportunities. On-chain games tend towards a more decentralized and participatory model where players have more control and influence over the gaming ecosystem. They offer new opportunities for asset ownership, community participation, and economic interaction. on-chain products are fundamentally owned and operated by players Will they become more popular with the masses? This technology is still evolving and unfamiliar to most people. The high entry threshold, distrust, and fear of being cheated are severe barriers to the widespread adoption of on-chain games and limit the availability of gaming content to a mass audience. As on-chain products gain popularity, the traditional gaming industry will likely be affected, but there is still a long and challenging road ahead.

Technology and Dreams: How Are Off-Chain Games and On-Chain Games Created?

In this article I will show you how we integrated for and functionality with my Full Stack Whatsapp Clone Video on Youtube. Zegocloud’s services Video Call Voice Call Features of Whatsapp Clone Login with Google using Firebase: Seamlessly sign in with your Google account via Firebase integration. Switch between multiple databases using Prisma: Customize your database preferences to suit your needs effortlessly. Send and Receive Messages using Sockets: Real-time messaging capabilities using Socket.io for instant communication. Voice Call and Video Call Feature: Enjoy crystal clear voice and video calls within the app. This functionality is built using Zegocloud Voice Call and Video Call services. Voice Notes with Live Audio Waveforms: Send and receive voice notes accompanied by live audio waveforms for an enhanced messaging experience. Support for Emoji: Express yourself with a wide range of emojis to add fun and emotions to your conversations. Send Images: Share images with your friends and loved ones effortlessly. Online/Offline Functionality: Easily identify the online and offline status of your contacts. Search Messages: Quickly find specific messages using the search functionality. Capture Photo From Camera: Take instant photos using your device's camera and send them instantly. Message Read Status: Know when your messages have been read by your recipients. Message Time: Stay updated with the time stamps of messages for better organization. Tech Stack of Whatsapp Clone Next.js Sockets Tailwind CSS Node.js Express Firebase Prisma PostgreSQL Zegocloud Voice Call SDK Zegocloud Video Call SDK App Screenshots Introducing Zegocloud ZEGOCLOUD is a designed for facilitating video calls. By granting developers access to a comprehensive suite of and , ZEGOCLOUD empowers them to effortlessly construct their own video and voice calling applications. cloud-native solution UIKIt’s SDKs Creating Zegocloud Account Head over to and create an account. Zegocloud provides free 10,000 minutes of free trial to get you started. Zegocloud Create a new Zegocloud Project Now in your click on create your first project as shown in the image below. Zegocloud console Select a project use case Zegocloud provides various pre configured use cases for your apps; we are going to select the Video and Voice Call Option and click Next. Project Name and Scnearios Now in the next screen you need to give a unique project name. We are going to give the name as whastasppclone. Next, we will select the project Scenario. Zegocloud provides two scenarios: The UIKIT’s and the SDKS’s. Here we are going to select the Start with the Customs SDK’s option. With this Zegolcoud will start configuring your app. This process will take few minutes. Now all the things are configured for Zegocloud. Install the Zegocloud package for the Whatsapp Clone You can install the ZEGOCLOUD React SDK using the following command: npm i zego-express-engine-webrtc This will install the ZEGOCLOUD React SDK into your project. Import the ZEGOCLOUD SDK into your project and initialize it In your project's container.js file, import the ZEGOCLOUD SDK and initialize the zegocloud app by the function as follows: import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const zg = new ZegoExpressEngine(
      process.env.NEXT_PUBLIC_ZEGO_APP_ID,
      process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
    );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
}

export default App; In the above step, we have utilized the useEffect hook to initialize the ZegoClouds library by passing the app ID and server secret as parameters. Now you need the APP_ID and the SERVER_ID from your zegocloud project configuration screen. You need to paste those in the Next Config file in your Next.js App Join a Room import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now in this step, we have joined the passing of the token, userId, and userName, and the userUpdate status. Create a local audio and video stream. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} We have created the video elements here where we will be actually displaying the video streams of our local webcam. Start a video call. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Here we have started publishing our local stream to the specified room. Render the video streams. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );

      zg.on(
        "roomStreamUpdate",
        async (roomID, updateType, streamList, extendedData) => {
          if (updateType == "ADD") {
            const rmVideo = document.getElementById("remote-video");
            const vd = document.createElement("video");
            vd.id = streamList[0].streamID;
            vd.autoplay = true;
            vd.playsInline = true;
            vd.muted = false;
            if (rmVideo) {
              rmVideo.appendChild(vd);
            }
            zg.startPlayingStream(streamList[0].streamID, {
              audio: true,
              video: true,
            }).then((stream) => {
              vd.srcObject = stream;
            });

            // New stream added, start playing the stream.
          } else if (updateType == "DELETE" && zg && streamList[0].streamID) {
            zg.stopPublishingStream(streamList[0].streamID);
            zg.logoutRoom("123");
          }
        }
      );

      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now as soon as the other user joins the room, we want to display the upcoming video stream and render it to the DOM. Conclusion With this we have successfully integrated the Voice Call and Video Call in our Whatsapp Clone uisng Zegocloud’s Voice and Video Call SDK’s. We hope that this blog post has helped you to get started with building video call apps using Zegocloud and React. For more information, please refer to the Zegocloud . documentation You can follow along my Youtube Tutorial to create the entire Whatspp Clone using Zegocloud’s SDK’s. https://www.youtube.com/watch?v=keYFkLycaDg&embedable=true

How to add Video Call and Voice Call Functionality in a Full Stack Whatsapp Clone

Authentication is a critical aspect of building secure web applications that require user identification and access control. It ensures that users can securely access their accounts and protect sensitive information. There are many ways to achieve that. In this post, we’re going to go through a practical example using Javascript and the popular Express framework, using a simple username/password mechanism (aka Local Strategy). We’ll delve into practical examples and cover essential concepts, including user verification, session management, and authentication strategies. The examples use EJS, which is a templating package, but the same logic can be used in an API. What is Authentication? Authentication is the process of verifying the identity of a user, usually involving a few common steps: (1) the user provides their credentials; (2) the credentials are verified by comparing them against stored information; (3) if the credentials are valid, a session or token is created to allow access to protected resources; and (4) once authenticated, the application can determine the user’s access privileges and permissions. Using a username and a password is the most common mechanism of authentication. There are alternatives like , , and , which we won’t go into in this post. Single Sign-on (SSO) Multi-factor Authentication (MFA) OAuth Spinning Up An Application To better understand the concepts above, we’re going to be building a simple app using Express. We’ll begin by spinning up a project called “member-only” with using to create templates: express-generator EJS $ npm install -g express-generator
$ express members-only --view ejs Next, we can install the packages we’re going to use. We’re also installing apps that are not related to authentication but that are necessary for the app. I’ll explain what each one does as we use them. $ npm i bcrypt compression connect-mongo cookie-parser dotenv express-asyn-handler express-session express-validator helmet mongoose nodemon passport passport-local To run the app in dev mode and have it reload every time any changes are saved, add these scripts to package.json: "scripts": {
    "start": "node ./bin/www",
    "watch": "nodemon ./bin/www",
    "dev": "DEBUG=inventory-app:* npm run watch"
}, We’ll be using environment variables, so create a file in the root folder where you can save them in the format of . .env VARIABLE_NAME=value Database and Models We’ll use MongoDB to store app and session data. You can create one on the cloud for free on . Just follow the instructions they provide, as they’re pretty straightforward. Atlas Database Once you create the database, you can create a collection called “members_only.” On the main Database page, click on “Connect,” and you’ll be presented with a few options. Choose “Drivers” and select Node.js 5.5 or later. Copy the Connection String and paste it to your .env file on a variable called , adding the name of the collection after the domain: MONGO_DB MONGO_DB=mongodb+srv://<username>:<password>@top-test.yu3rgpr.mongodb.net/members_only?retryWrites=true&w=majority In your project, create a file called and add the following code: database.js // database.js

require("dotenv").config();
const mongoose = require("mongoose");

mongoose.set("strictQuery", false);
const mongoDB = process.env.MONGO_DB;

async function main() {
  await mongoose.connect(mongoDB);
}

module.exports = main; is required to use the environment variables using . The rest of the code is for connecting to the database. We export it so it can be called in : require(“dotenv”).config() process.env.[VARIABLE_NAME] app.js // app.js
    
const useDatabase = require("./database");
useDatabase().catch((err) => console.error(err)); We can then define our models like so: // models/users.js

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const UserSchema = new Schema({
  first_name: { type: String, required: true },
  last_name: { type: String, required: true },
  email: { type: String, required: true },
  hashed_password: { type: String, required: true },
  roles: [{ type: String, enum: ["admin", "member"] }],
  created_at: { type: Date, required: true },
});

UserSchema.virtual("full_name").get(function () {
  return this.first_name + " " + this.last_name;
});

module.exports = mongoose.model("User", UserSchema); Notice we’re not storing the user’s actual password but a hashed password. We’ll talk more about this in the next part. Routes and Controllers We'll define the routes in a separate file and then call controller functions that will handle the logic for each of them: // routes/index.js

const express = require("express");
const router = express.Router();

const controller = require("../controller");

router.get("/", controller.index_get); // controller.js

const asyncHandler = require("express-async-handler");
const { body, validationResult } = require("express-validator");
const bcrypt = require("bcrypt");
const passport = require("./auth");

const logger = require("./logger");
const MessageSchema = require("./models/messages");

exports.index_get = asyncHandler(async function (req, res, next) {
  logger.info(`${req.method} ${req.originalUrl} ${res.statusCode}}`);

  const messages = await MessageSchema.find({ deleted: false })
    .sort({ created_at: -1 })
    .populate("user")
    .exec();

  res.render("index", {
    title: "Members Only",
    user: res.locals.currentUser,
    isUserLoggedIn: !!res.locals.currentUser,
    messages,
  });
}); In short, we're defining a function that queries the database to get all the messages, then renders an EJS view with the data. We’re using because it simplifies error handling. index_get asyncHandler To see how the other endpoints are handled, see the . Github repo Authentication We’ll use to handle authentication and sessions and to handle password encryption. Passport bcrypt Creating a User We’ll create users when they submit a form with the appropriate information. In order to do that, we need to add the following middleware function in , as it will allow us to access the form data in : app.js req.body // app.js

app.use(express.urlencoded({ extended: false })); After that, we can define controller functions and that will be called by the appropriate routes. user_create_get user_create_post will render the form using EJS if the user is not already logged in: user_create_get exports.user_create_get = asyncHandler(function (req, res, next) {
  logger.info(`${req.method} ${req.originalUrl} ${res.statusCode}}`);

  if (res.locals.currentUser) {
    res.redirect("/");
    return;
  }

  logger.info("Rendering signup form");

  res.render("signup", {
    title: "Sign Up",
    user: null,
    isUserLoggedIn: false,
    newUser: {
      first_name: "",
      last_name: "",
      email: "",
    },
    errors: [],
  });
}); handle the data sent by the form, use this data to create a user with a hashed password, then redirect the user to the login page. You can do something similar with minor adjustments if you’re building an API. user_create_post will Let’s take a look at the code and then break it down: exports.user_create_post = [
  body("first_name", "First name must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("last_name", "Last name must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("email", "Email must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("email").custom(async (value) => {
    value = value.toLowerCase();
    const emailExists = await UserSchema.exists({ email: value });
    if (emailExists) {
      throw new Error("Email already in use.");
    }
    return true;
  }),
  body("password", "Password must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("confirmPassword", "Confirm password must not be empty.")
    .trim()
    .isLength({ min: 1 })
    .escape(),
  body("confirmPassword").custom((value, { req }) => {
    if (value !== req.body.password) {
      throw new Error("Password confirmation does not match password.");
    }
    return true;
  }),

  asyncHandler(async function (req, res, next) {
    logger.info(`${req.method} ${req.originalUrl} ${res.statusCode}}`);

    const errors = validationResult(req);

    const { first_name, last_name, email, password } = req.body;

    if (!errors.isEmpty()) {
      res.render("signup", {
        title: "Sign Up",
        user: null,
        isUserLoggedIn: false,
        newUser: {
          first_name,
          last_name,
          email,
        },
        errors: errors.array(),
      });
      return;
    }

    try {
      bcrypt.hash(password, 10, async (err, hashed_password) => {
        if (err) {
          return next(err);
        }

        const user = new UserSchema({
          first_name,
          last_name,
          email,
          hashed_password,
          roles: [],
          created_at: new Date(),
        });

        await user.save();
        res.redirect("/login?signup=success");
      });
    } catch (err) {
      next(err);
    }
  }),
]; We need to somehow validate the data we’re getting from the user. We can do that by using the package, which provides us with the functions and . express-validator body validationResult is used for field validation with requirements such as minimum length and options like trimming and escaping the input. It is a callback function itself, so we pass it in an array to the router, along with the endpoint controller (inside the ). body asyncHandler We can then get any errors inside the endpoint function using . If there are any errors, we’ll just render the sign-up page again. validationResult(req) When the inputs are valid, we can actually create the user. We’re using for that, as it allows us to create a hashed password with the user-inputted password. This ensures that we never need to store the actual password, increasing security. bcrpyt We need to call with a callback function that will take as arguments the actual password, a cost factor, and a callback function. bcrypt.hash The cost factor indicates the computational cost of the hashing algorithm (the higher the number, the slower the process is, but the safer the encryption becomes). This process also involves , making the hashes unique even if two users have the same password. salting The callback function takes a possible error and a , which we can then use to create the user in the database. hashed_password Authentication Strategies Passport uses modules called “strategies” that encapsulate the logic and configuration required to authenticate users. Each strategy corresponds to a different authentication method, such as a local username/password, OAuth, OIDC, or JWT. For this example, we’ll be using the . Local Strategy Setting it up is as simple as passing a callback function to passport. We’re doing this in a separate file : auth.js // auth.js

const passport = require("passport");
const LocalStrategy = require("passport-local").Strategy;
const bcrypt = require("bcrypt");

const UserSchema = require("./models/users");

passport.use(
  new LocalStrategy(
    {
      usernameField: "email",
      passwordField: "password",
    },
    async (username, password, done) => {
      try {
        const user = await UserSchema.findOne({ email: username });

        if (!user) {
          return done(null, false, { message: "Invalid email or password." });
        }

        const isMatch = await bcrypt.compare(password, user.hashed_password);

        if (!isMatch) {
          return done(null, false, { message: "Invalid email or password." });
        }

        return done(null, user);
      } catch (err) {
        return done(err);
      }
    }
  )
); We import and call the method, passing as its first argument an optional object with custom names for the and . If we don’t pass this object, the field names will default to as . passport use usernameField passwordField username password The second argument is a callback function with the logic for the strategy itself. In it, we’re passing the and , which are used to query the database, fetch a user and compare the stored password. username password We use for this last step, as we’re not actually storing the password itself but a hash value. The idea is will take the provided password, generate a hash using the same cost factor and salt as before, and compare this hash with the value we have stored in the database. If they’re the same, the authentication is successful. bcrypt bcrypt The callback function also takes a argument, which is a function we need to call once the authentication flow is complete, either with no error and the user object or with an error. done In this same file, we’re also setting up serialization and deserialization, so passport can manage sessions more efficiently by storing only the user id instead of the whole user object. // auth.js

passport.serializeUser((user, done) => done(null, user.id));

passport.deserializeUser(async (id, done) => {
  try {
    const user = await UserSchema.findById(id);
    done(null, user);
  } catch (err) {
    done(err);
  }
}); Finally, we export passport so it can be used in app.js // auth.js

module.exports = passport; // app.js

app.use(passport.initialize()); Once the user is authenticated, you can access it in the request object. To make your life easier, you can create a custom middleware function to store the user information in the response object, so you can access it in any other subsequent middleware or endpoint functions. // app.js

app.use(function (req, res, next) {
  res.locals.currentUser = req.user;
  next();
}); This must be called after initializing passport, but before using any routes. Sessions After the authentication process is completed, we need to persist this information so it isn't lost every time the page is refreshed. Storing it in the application itself isn't ideal. If, eventually, we need to distribute processing by running it in more than one server, there would be no way of sharing the session information. If the server crashes, the session data will be lost, and the users will be unexpectedly logged out. Lastly, it would consume server memory and disk space. Instead, we should either send the session data back to the client or store it in a database. We'll be using to store our sessions in a database. Create a file and add the necessary configuration: mongoSession mongoSession.js // mongoSession.js

const MongoStore = require("connect-mongo");

const sessionStore = MongoStore.create({
  mongoUrl: process.env.MONGO_DB,
  collectionName: "sessions",
  autoRemove: "interval",
  autoRemoveInterval: 60, // In minutes
});

exports.config = {
  secret: process.env.SESSION_SECRET,
  resave: false,
  saveUninitialized: false,
  store: sessionStore,
}; is the same Connection String we already have in our file. You may set an option like if you don’t want to persist session data indefinitely. mongoUrl .env autoRemove The secret is a string used to sign session information. It can be any string you want, but it’s recommended that it’s a long, randomly generated, unique string. Save it as an environment variable to avoid sharing it. Import the configuration and add it to : app.js // app.js

app.use(session(mongoSession.config));
// ...
app.use(passport.session()); Once that’s done, every time a user is logged in, the session information will be saved in your database, looking something like this: {
  _id: "8GcyUWw67tb44h9vdWQKSxIcPgypIeUx",
  expires: "2023-07-21T10:53:21.594+00:00",
  session: {
    cookie: { originalMaxAge: null, expires: null, httpOnly: true, path: "/" },
    passport: { user: "64a4a013cefdc295346ca0c3" },
  },
} Final Words Understanding authentication is vital for building secure applications with user identification and access control. In this post, we explored a practical example using JavaScript and Express, focusing on the Local Strategy for username/password authentication. Here’s a summary: Authentication involves verifying user identity, checking credentials, and granting access privileges. We built an Express app, used EJS templates, and implemented routes and controllers. and were used for authentication and password hashing. Passport bcrypt Sessions were managed using and stored in a MongoDB database. mongoSession The app followed a stateless approach, ensuring scalability and security. By grasping authentication concepts and implementing secure practices, you can create robust applications that protect user data and provide a seamless user experience. [Cover photo by ] FLY:D

A Practical Guide to Implementing User Authentication using JavaScript and Express

In this blog post, I will show you how to create a video call app using ZEGOCLOUD and React. For context, ZEGOCLOUD is a cloud-based that provides developers with a set of APIs and SDKs to easily build video calling applications. video call platform Prerequisites Before you start, you will need to: and project. Create a ZEGOCLOUD account Have a basic understanding of React. Creating a ZEGOLCOUD account and project Step 1: Head over to the website and create an account. ZEGOCLOUD Step 2: Now, create a new project and grab the appId and serversecret from the project dashboard. Creating a Video Call App The following steps show you how to create a video call app using ZEGOCLOUD and React: Create a new React project. Install the ZEGOCLOUD React SDK. Import the ZEGOCLOUD SDK into your project. Join a room. Create a local audio and video stream. Start a video call. Render the video streams. Step 1: Create a new React project You can create a new React project using the following command: npx create-react-app video-call-app This will create a new directory called video-call-app with a basic React project. Step 2: Install the ZEGOCLOUD React SDK You can install the ZEGOCLOUD React SDK using the following command: npm i zego-express-engine-webrtc This will install the ZEGOCLOUD React SDK into your project. Step 3: Import the ZEGOCLOUD SDK into your project and initialize it In your project's index.js file, import the ZEGOCLOUD SDK and initialize the zegocloud app by the function as follows: import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const zg = new ZegoExpressEngine(
      process.env.NEXT_PUBLIC_ZEGO_APP_ID,
      process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
    );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
}

export default App; In the above step, we have utilized the useEffect hook to initialize the ZegoClouds library by passing the app ID and server secret as parameters. Step 4: Join a Room import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now in this step, we have joined the passing of the token, userId, and userName, and the userUpdate status. Step 5: Create a local audio and video stream. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} We have created the video elements here where we will be actually displaying the video streams of our local webcam. Step 6: Start a video call. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );
      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Here we have started publishing our local stream to the specified room. Step 7: Render the video streams. import React from "react";
import { ZegoExpressEngine } from "zego-express-engine-webrtc";

function App() {
  useEffect(() => {
    const initializeApp = async () => {
      const zg = new ZegoExpressEngine(
        process.env.NEXT_PUBLIC_ZEGO_APP_ID,
        process.env.NEXT_PUBLIC_ZEGO_SERVER_ID
      );

      zg.on(
        "roomStreamUpdate",
        async (roomID, updateType, streamList, extendedData) => {
          if (updateType == "ADD") {
            const rmVideo = document.getElementById("remote-video");
            const vd = document.createElement("video");
            vd.id = streamList[0].streamID;
            vd.autoplay = true;
            vd.playsInline = true;
            vd.muted = false;
            if (rmVideo) {
              rmVideo.appendChild(vd);
            }
            zg.startPlayingStream(streamList[0].streamID, {
              audio: true,
              video: true,
            }).then((stream) => {
              vd.srcObject = stream;
            });

            // New stream added, start playing the stream.
          } else if (updateType == "DELETE" && zg && streamList[0].streamID) {
            zg.stopPublishingStream(streamList[0].streamID);
            zg.logoutRoom("123");
          }
        }
      );

      await zg.loginRoom(
        "zego-room",
        token,
        { userID: "123", userName: "kishan" },
        { userUpdate: true }
      );

      const localStream = await zg.createStream({
        camera: {
          audio: true,
          video: true,
        },
      });
      // Get the audio tag.
      const localAudio = document.getElementById("local-video");

      const videoElement = document.createElement("video");
      videoElement.id = "local-video";
      videoElement.className = "h-28 w-32";
      videoElement.autoplay = true;
      videoElement.muted = false;

      videoElement.playsInline = true;

      localAudio.appendChild(videoElement);

      const td = document.getElementById("audio-local");
      td.srcObject = localStream;
    };

    const streamID = "123" + Date.now();

    zg.startPublishingStream(streamID, localStream);
  }, []);
  return (
    <div>
      <div id="local-video"></div>
      <div id="remote-video"></div>
    </div>
  );
} Now as soon as the other user joins the room, we want to display the upcoming video stream and render it to the DOM. Conclusion In this blog post, we have shown you how to create a video call app with Zegocloud and React. We have covered the following topics: Setting up your development environment Integrating the Zegocloud video call web APIs Building a simple video call app We hope that this blog post has helped you to get started with building video call apps using Zegocloud and React. For more information, please refer to the Zegocloud . documentation

How to Build a Video Call App with ZEGOCLOUD and React

The emergence of blockchain games has flipped the gaming industry, putting players in charge of the decisions rather than developers. Their rise has been exponential, with over active blockchain games currently floating in the market. The industry's influence has risen to the point that it now accounts for __ __of all blockchain activity. 398 52% The new entertainment facilitates NFT creation, trading, and ownership capabilities. Blockchain games give players complete ownership of their in-game assets while also allowing them to use those assets outside the games. Axie Infinity, for example, is a blockchain game allowing players to own and trade in-game assets outside the Axie ecosystem for cryptocurrencies. Although hundreds of these games have emerged, there is a significant problem that many gamers are experiencing, i.e. good gameplay. Most blockchain games are barely playable and severely lack the quality traditional gamers expect. Crpytokitties and Axie Infinity are some examples of these. However, here are some games that can potentially be a solution to that problem: Delysium has the most popular game modes accepted by the largest group of gamers, like battle royale, MMORPG, open-world, UGC, etc., and allows players to collect loot boxes by participating in various game types, such as PVE and PVP. Compared to other games, Delysium is more inclusive with a lower barrier of entry and an open world for co-creation of game assets, game setting and ecosystem, which express a more profound spirit of web3 and able to attract more players and guilds. Delysium Delysium is backed by Galaxy Interactive, Republic Crypto and Alameda Research etc. Players may then sell their earned items on the Delysium marketplace, improve their character and equipment, or make user-generated content with them. The game's base on Polygon Network makes it fast, which is needed for its high-resolution . gameplay In addition to its play-and-earn mechanism, the game also features a bedrock of in-game NPCs powered by Deterrence, an Artificial Intelligence (AI) layer for NFT and virtual beings. Notably, these AI-driven NPCs can be purchased or rented by the player and set to work to complete tasks and earn passive income for the user character. It's not easy to develop a high-quality AAA open game on web3 and make it playable, but Delysium has done it. Only two months after the first round of funding for private sales, Delysium has already announced the launch of Pre-Alpha Test in the first week of May. The Pre-Alpha Test will last two months and invite nearly 5,000 players, which is the largest, fastest and furthest going Pre-Alpha Test in web3 AAA games ever, especially compared to Star Atlas, which is still in the trailer stage. In particular, from this Pre-Alpha Test to the following Alpha Test in July and Beta Test at the end of the year, Delysium will continuously host large-scale testing and go on live streaming with the web2 professional player teams directly, which is the first initiative of the blockchain industry. If the game is developed smoothly, it will be possible for AAA blockchain games that break the wall between web2 and web3. https://www.youtube.com/watch?v=OCUy81xMxr0 Illuvium is a truly playable metaverse AAA game project that includes a 3D setting with over 100 distinct Illuvials strewn across the virtual cosmos. A team of world-class artists designs the game. Illuvium The game was founded in 2020 and is still being developed by Kieran Warwick and seasoned game designer Aaron Warwick. Kieran Warwick and Aaron Warwick are also siblings of Kain Warwick, co-founder of the popular DeFi platform Synthetix. Moreover, the project is backed by IOSG Ventures, LD Capital, YBB Foundation, Delphi Digital, Stake Capital, Moonwhale Ventures, Lotus Capital, BlockSync, Yield Guild Games, and Bitscale. Beyond that, the game boasts a slew of notable collaborations, including ones with SandBox, 1Inch, Aave, and Bitcoin.com, to name a few. The game is set to launch with its already live. A public beta launch will follow this in the coming weeks. Illuvium's breathtaking graphics and gameplay have already attracted over 250,000 fans on social media. private beta version Blocklords is a blockchain strategy game that allows players to create heroes, build armies, and conquer a medieval land in the metaverse. The game also involves players making governments through commerce, conquest, and the collection of sales taxes. Blocklords The in-game characters are digital assets whose qualities are established by the experiences and actions of their players throughout the game. Players may play everything from a knight to a raider, a farmer to a merchant, and they can monetize their unique skills through a player-driven economy. Planet Mojo __ i__s a player vs player (PvP) cross-platform auto chess game reinvented for blockchain, allowing players to own their game characters (as NFTs) and play to earn in ongoing tournaments. Industry professionals develop the game with backgrounds at LucasArts, EA, Activision, and Happy Giant. Planet Mojo It is one of the few gaming projects with a vision to save the planet. And to align with this vision, the game has with the nonprofit to offset the environmental costs of its Moj-Seed NFTs. For every NFT purchased by players, the game will sponsor the planting of one tree in a forest loss area. partnered One Tree Planted The game has started an allow listing event for these NFTs, which is currently live. The allowlist winners will be revealed on May 5, 2022, who will be the first to receive the Moj-Seed NFTs. These tokens will offer holders early access to the game and various other valuable benefits. Final Thoughts While there are thousands of blockchain games available and in production, it's fair to say that only a handful of them provide high-quality gameplay that traditional gamers can resonate with. However, we hope this list may have introduced some gems not everyone is aware of. A combination of actual AAA gameplay designed on the Web3 and stunning graphics sets them apart from the rest. Facing the multiply doubts about Web 3 games from traditional gamers, high quality and rapid development to satisfy the player's expectation might be the only way to break the wall. Although it's challenging to produce and implement AAA games super quickly, projects such as Delysium have succeeded in doing so. Beyond the superiority of truly playable, Delysium designed accessible game entrances that fewer up-sells and reduce barriers to playing games, which could potentially be the key to bridging the gap between Web2 gamers and Web3! After all, if the traditional gaming industry can be worth without blockchain, imagine the potential it can have with blockchain and cryptocurrency? $200 billion

The Top 4 Truly Triple-A Blockchain Games to Play in 2022 

Los 4 mejores juegos de cadena de bloques verdaderamente Triple-A para jugar en 2022

Les 4 meilleurs jeux Blockchain véritablement Triple-A à jouer en 2022

2022 में खेलने के लिए शीर्ष 4 वास्तव में ट्रिपल-ए ब्लॉकचैन गेम्स

2022 年にプレイする真のトリプル A ブロックチェーン ゲーム トップ 4

Os 4 principais jogos Blockchain verdadeiramente triplos para jogar em 2022

4 trò chơi Blockchain thực sự ba-A hàng đầu để chơi vào năm 2022

2022 年最值得玩的 4 款真正 AAA 级区块链游戏

Don Norbury is the head of the studio at Shrapnel, a blockchain-enabled FPS game that is redefining how we play and own our games. Don has worked on many genre-defining video games including Bioshock and Sunset Overdrive. We had the pleasure of hosting a slogging AMA for Don and his community. Jack Boreham Apr 13, 2022, 2:53 PM Hey @channel, please join me in welcoming our next AMA guest, Don Norbury. Don Norbury is Head of Studio at , the first blockchain-enabled moddable FPS game. From the genre-defining franchises of Star Wars, Indiana Jones, Bioshock, Sunset Overdrive, and Crackdown, to the sports superstars Madden NFL and NASCAR, Don has redefined creative boundaries across platforms and player experience for over a decade. You can ask him anything about: http://www.shrapnel.com Shrapnel’s plans for the game Shrapnel’s development cycle True ownership in gaming Blurring the lines between developers and players Modding and creator tools Jack Boreham Apr 13, 2022, 2:55 PM Hi, Don Norbury, so great to have you with us! I would love to start by knowing more about your background and story! Don Norbury Apr 13, 2022, 3:42 PM Hey Jack Boreham - thanks for having me! Always a pleasure to share the story and vision for Shrapnel with curious minds. My story started back in the late 80's with a game called Think Quick that let you build your own maps and puzzles - but it wouldn't be until much later after studying computing in college that I would formalize that creative desire into a career and landed at EA Tiburon working on Madden NFL and starting my interest in gameplay and A.I. systems. I had been building my own game campaign using the Neverwinter Nights toolset at the time and they were apparently impressed enough to let me in the door. Over the following 17 years I moved across the industry from building teams and studios and into Publishing leadership. After sports games at EA I moved to film franchises at Lucasarts working on Indiana Jones and Star Wars primarily focused on A.I.... then built the team and architecture from the ground-up for Bioshock Infinite (I think I was team member #6 or so for that project) at Irrational Games in Boston. I spent the following 6 years in Global Publishing at Xbox within Microsoft - which was a fantastic way to gain business acumen and learn to juggle multiple titles. I was the lead for Sunset Overdrive and Crackdown 3 - but also assisted where necessary on titles like Ryse, Quantum Break, and Age of Empires. Finally - life somehow put me in front of some very talented people from HBO's Interactive and Immersive Experiences team - which is where I met and worked with the people who are now the founders of NEON. We did both publishing and R&D in that organization - and when AT&T acquired Warner Media we started planning our exit and what we were going to do next. We had the genius timing of founding NEON right before the pandemic - but as you can see: our amazing team held to that challenge. We did some virtual production work and had working products from HBO on the slate - and about a year ago was the inception of what is now the Shrapnel studio and project. matveyola Apr 13, 2022, 4:35 PM Do you have any specific plans for near future? Don Norbury Apr 13, 2022, 4:41 PM We have a ton going on right now - primarily focused on delivering the phases outlined in the Roadmap on the site and in the whitepaper. The team is operating in distinct swimlanes with crossovers that are: Game, Platform, Economy, Marcom, Experience, Creator Tools, and Partnerships. Don Norbury Apr 13, 2022, 4:43 PM Our desire is to get creator tools into the community hands as quickly as possible - so much of the prioritization (including team structure and hiring) has been focused on how we make that happen properly. You can see the roadmap phases here: https://www.shrapnel.com/roadmap LORDGUZLIK Apr 13, 2022, 4:45 PM When is the game expected to release? For the gameplay itself - we're preparing a playable experience for the community to engage with and give feedback on - which will include incentivization rewards for playing. Don Norbury Apr 13, 2022, 4:45 PM We're not announcing a specific release date yet. And really - we'll be releasing in incremental phases in a program called Shrapnel Operator Qualifier Don Norbury Apr 13, 2022, 4:50 PM Our game and platform is based on the ethos of community ownership, creation, and participation. The goal of Shrapnel is to eventually be entirely governed and operated in a decentralized manner. The development, iteration, release, and evolution of Shrapnel will adhere to that ethos as well, matveyola Apr 13, 2022, 4:53 PM As I understood, players will have an opportunity to create equipment for operators. That's why, I have a question - won't it be bad for balance in game? Maybe some guys can create enormous cool weapon. Don Norbury Apr 13, 2022, 4:54 PM A.I. systems primarily. I'm also a fan of all things Lucasfilm - so it was a walking dream to be surrounding by all the film memorabilia every day. Concept plates... original costumes... the compositing camera they used for Empire... it was kinda nutty. Internetdough Apr 13, 2022, 4:54 PM What progress have you guys made on the game and the back end LORDGUZLIK Apr 13, 2022, 4:56 PM Will you ever arrange a community call? Don Norbury Apr 13, 2022, 4:57 PM They will not be able to modify gameplay-affecting intrinsic attributes that would imbalance the game. Gameplay tuning is an extremely hairy space and we will be maintaining balance as an ongoing effort based on analyzing telemetry from session data and making calls about necessary changes in what we refer to as a "War Room" every day. 🔥 2 Don Norbury Apr 13, 2022, 4:59 PM We are in early development - ensuring elements like ballistics, traversal, TTK, session-loop, meta, etc. are in a fun place before we drop the client on the community and start gathering feedback on the game itself. We're also working on a gameplay trailer so the community can have a more tactile idea of the pace, style, etc. previous to that point. Don Norbury Apr 13, 2022, 5:00 PM - Sorry I don't follow - do you mean like a townhall in our discord? LORDGUZLIK Apr 13, 2022, 5:03 PM Something like meeting in voice chat, where founders talking about their progress Warbeast - Shrapnel Apr 13, 2022, 5:03 PM I have a question about modding and tools. Do we need a specific skillset or can anyone do it? And to what extent can we modd maps? Don Norbury Internetdough Apr 13, 2022, 5:04 PM I think what lordguzlik meant was that will you arrange an ama that is voice based? LORDGUZLIK Apr 13, 2022, 5:05 PM Yep, something like that. Fractal Apr 13, 2022, 5:09 PM On the idea of ownership, do we have IP rights on items and maps we make using the creation tool? And in addition, will there be IP rights associated with any characters? matveyola Apr 13, 2022, 5:09 PM Will enemy NPC be in a game or we will just PVP with other operators? Internetdough Apr 13, 2022, 5:10 PM Think they addressed that in the whitepapers Internetdough Apr 13, 2022, 5:12 PM My second question is, will you drop like a male collection first and after that a female collection? Or is it just like all the genders in one collection. Don Norbury Apr 13, 2022, 5:12 PM Yes! We'll be starting regular townhalls very shortly for the Discord community to get regular updates (and ask questions) Don Norbury Apr 13, 2022, 5:14 PM Fractal - You'll have IP rights to your own creations. "Characters" are a combination of a base avatar plus gear/vanity. The piece that's creator-tool-based is the vanity/adornment part - so not the "character" all up per say, but instead the individual components on them. Fractal Apr 13, 2022, 5:18 PM Don Norbury thanks, sounds good. Also, what can you tell me about the comic book series being made? Don Norbury Apr 13, 2022, 5:19 PM There are non-player enemies. We're currently playing with the scope of these. I spent about 6 years as an A.I. lead in gaming so I have... opinions. 😆  But ultimately the call on the initial form of these combatants and how they evolve over time will be determined by our game team and production. We're actually talking with a couple behavior capture companies that can essentially enable something like "drivatars" but for shooter NPCs so we can enable extremely believable A.I. combatants with player capabilities. But ultimately - IMO - most of the really interesting A.I. is crafted entirely for the player experience (as of the experience instead of just something like a player) with movement, abilities, etc. that are unique and interesting. part 👀 1 👍 1 Don Norbury Apr 13, 2022, 5:29 PM Fractal and  - I think I can answer both your lines of questioning at the same time (if I'm interpreting properly).  Our team comes from a transmedia background - so we're deeply involved in world, story, and character building across all available forms of media from the very beginning of the project. We've laid out the kernel of Shrapnel to the community on the site and in the whitepaper - but there is obviously much more story to tell (and the community will eventually become an enormous part of that story). The comics series tells the stories of 5 individual characters from different parts of the world around the time-frame of the actual Shrapnel lunar impact event from their perspectives and intertwined with their own personal drama. The Operators NFT series is  tied to the comics - with each character represented as a limited-run series to be released with a bundle of utility related to community, the game, and the comics themselves. The exact details around release timing and cadence will be revealed soon! Don Norbury Apr 13, 2022, 5:31 PM Warbeast - Shrapnel - Fantastic question. The tools will span a range from extremely accessible to more complex/professional grade - depending both on what type of content you're making and how deeply you want to get into the creation process. The tool capabilities are also tied to your Shrapnel Reputation - with tiers of unlocked capabilities provided to players/creators who have established themselves within the Shrapnel community. 👍 1 Don Norbury Apr 13, 2022, 5:34 PM You'll be able to easily create - for example - your own Patch with your own brand and set of material expressions in an easy-to-use interface that you can wear (or trade)... with extra tooling and materials unlocked as you progress with creation. Likewise with maps - you can build more chunky modular pieces until graduating to more granular control over placement and prefab options - with the highest tier of creator being able to import custom prefabs for the rest of the community to use/trade/etc. 👍 1 Warbeast - Shrapnel Apr 13, 2022, 5:35 PM Don Norbury what would you suggest for tools to learn so that we can be ready to be content creation in the future game? Also, how would you control that? Can I create, for example, cover for my operator or remove cover so it's more of an open map? Or is it not that specific ? Warbeast - Shrapnel Apr 13, 2022, 5:37 PM Can I add physical obstacles for example? Or is it more of a skin creation and more on the aesthetics of things and how they look ? Don Norbury Apr 13, 2022, 5:38 PM Warbeast - Shrapnel - Learning just typical map creation in Unreal is probably the most useful thing to do unless you're looking to get into art (in which case you'll want to pick up something like Blender and importing content into Unreal). For many of our asset classes you won't need any sort of professional skill... think Livery Editor from Forza. 👍 2 Don Norbury Apr 13, 2022, 5:39 PM Warbeast - Shrapnel - It's both. Maps need to be differentiable from a gameplay/flow/lanes/no-mans-land/etc. perspective. 👍 2 Warbeast - Shrapnel Apr 13, 2022, 5:41 PM Don Norbury Thank you for the answers. This is awesome Limarc Ambalina Apr 14, 2022, 3:05 AM This is super cool and I'm loving the art design. I'm very much into FPS games. I'm a fan of the bioshock series so I just have to ask: what was it like working on Bioshock Infinite? What lessons do you take from your time on such projects that have helped you with developing Shrapnel? Don Norbury Apr 14, 2022, 4:44 PM Limarc Ambalina Thanks for the kind words! My time on Bioshock was formative in every way imaginable - creative and production process, architectural challenges, team building, etc. I could probably dedicate an AMA itself to the journey through that project. I'll talk about one creative (and team) element and one technical element. I would say I learned that a successful creative process involves continuously questioning your own vision and quality bar, destroying what you made, and rebuilding it again. If you read anything about the Pixar process you'll see something similar there. We built that game 10 times over again - and as a result the tools and process had to be to accommodate rapid iteration. Also you learn to pivot quickly... identifying which ideas are precious and which are tertiary (that you maybe though were critical) and leave your ego out of it. I learned how to do this myself and then how to guide others through that journey. As an example: we had an entire PvE multiplayer mode that we had to cut to ensure single-player shipped. Going through that process personally (and quickly) and then supporting others through that same adventure was an enormous growing experience for me. From a technical perspective, I learned that you only get to make about one big technical bet per year. You make tons over the course of the project - but only one BIG one - so you better make sure it's an absolute PILLAR for the game. For Bioshock Infinite, the first big bet was the floating world's technology. On the generation of console hardware we were developing for - you couldn't have giant pieces of moving geometry with gameplay on them (i.e. - needing to be physics integrated, have gameplay logic, etc.). So we basically built a system where everything was actually static and the movement transforms handled separately. On the rendering side that transform was applied and then there were hooks into gameplay and A.I. logic that allowed the rest of the game to understand what was "happening" movement wise. We extended the coordinate/vector/etc. system in the game so instead of (X,Y,Z) you had (X,Y,Z,R) - where R was the "frame of reference" you were in (the floating island or attack ship/barge or whatever). It was technically clever - but took about 6 months to implement and then tons of fallout bugs afterwards. Obviously: this was a PILLAR for the game and in retrospect completely worth it and the right call for that year's big bet. very slick amazing Jack Boreham Apr 19, 2022, 7:31 AM Don Norbury, thanks so much for joining us on this AMA. Any final thoughts to wrap up this AMA? Don Norbury Apr 19, 2022, 6:01 PM Jack Boreham Thanks for having me and allowing me to share our vision and plans for Shrapnel as a game, platform, and blockchain protocol for creation, discovery, and performance. If anything in here interested, you then check out our site at or come join the community at and keep up-to-date with the latest on our Twitter at .  I'm always happy to chat and answer questions myself as well. I'm in Discord as Don | Shrapnel, and you can find me on Twitter at . Thanks all! https://shrapnel.com https://discord.gg/shrapnel https://twitter.com/playSHRAPNEL https://twitter.com/DonNorbury Don Norbury Apr 19, 2022, 6:01 PM Additionally, if you're looking to sink your teeth in a more detailed level, you can read our whitepaper here: https://www.shrapnel.com/Shrapnel-White-Paper.pdf

LOCASAUR

locasaur.com

-- employees

Since n.d.

COMPANY RANKING

LOCASAUR

EVERGREEN INDEX #7079

Representing this company? Click here to claim and customize this page!

Locasaur WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

LOCASAUR

locasaur.com

-- employees

Since n.d.

COMPANY RANKING

LOCASAUR

EVERGREEN INDEX #7079

RELATED COMPANIESRANK

STORIES ABOUT LOCASAUR

Representing this company? Click here to claim and customize this page!

Locasaur WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!