DEV Community: ADESANYA JOSHUA AYODEJI

Web3 and DAOs: Empowering Individuals and Disrupting Traditional Structures

ADESANYA JOSHUA AYODEJI — Tue, 13 Jun 2023 10:25:48 +0000

Traditional organizational structures have slowed down decision-making and killed innovation over the years. The world needs a system where individuals and communities can collaborate and make decisions in a decentralized way. DAOs and Web3 help us rethink governance, technology, and collaboration.

Web3 builds upon the internet as we know it but adds the concept of decentralization, and this gives the user ownership and control. The implication of this control can be felt in governance, social networks, finance, and more.

Decentralized autonomous organization (DAO)s present an alternative to traditional organizational structure and governance models, and it embodies the principle of decentralization and autonomy. It enables individuals to collaborate, coordinate and make decisions as an organization.

In this article, we will delve into the concepts of Web3 and DAOs, exploring how they work, their potential applications, the implications they have for various industries, the benefits, the challenges, and how they shape the future of technology and governance.

DAOs and Web3

DAOs (Decentralized Autonomous Organizations) are innovative entities that operate on the principles of blockchain technology and play a significant role in the context of Web3.

DAOs and Web3 have a symbiotic relationship. DAOs use the underlying technology of Web3, which makes use of a smart contract to program how the DAO will run in a decentralized and autonomous way and plays a crucial role in enabling the automation and transparency of DAO operations.

The combination opens up a lot of opportunities and enables collaboration and coordination among individuals from anywhere in the world, allowing the pooling of resources, talent, and ideas.

DAOs can be formed for various reasons, including funding, governance, decentralized applications, and investment management. Individuals can contribute their skills and expertise and be rewarded for their contributions. It thrives on community engagement as everyone has a stake in the organization and is involved in shaping its direction and future. The decentralized nature of DAOs promotes transparency, accountability, and collective ownership.

DAOs and Web3 enables the following:

Decentralized Governance: DAOs redistribute power and decision-making authority from centralized authorities to their members, fostering a decentralized governance model. Through collective voting mechanisms, participants actively contribute to the organization's operations, policies, and resource allocation. This inclusive approach promotes fairness, accountability, and empowers individuals to actively shape the organization's trajectory.

Transparency: DAOs utilize blockchain technology to establish an immutable and transparent ledger that records all transactions and governance activities. By leveraging the blockchain, DAOs ensure that every interaction and decision is securely documented, enabling audits and traceability. This transparency fosters trust among participants by making the actions of the DAO visible to all, reducing the risks of fraud and manipulation. Furthermore, stakeholders can assess the organization's performance and evaluate its impact through a transparent record of activities.

Autonomous Decision-Making: DAOs employ smart contracts, which are self-executing agreements coded on the blockchain. These smart contracts enforce predefined rules and conditions, allowing for the automation of certain decision-making processes. Once the conditions are met, the smart contracts autonomously execute the associated actions. This autonomous decision-making removes the need for intermediaries and ensures that decisions are implemented consistently and without bias.

Tokenized Ownership: DAOs often utilize tokens to represent ownership and participation rights within the organization. These tokens grant holders voting power and influence over the DAO's decisions. Tokenized ownership aligns incentives among participants, as their stake in the organization is directly tied to their influence and rewards. This ownership model fosters a sense of community and shared responsibility, as participants have a stake in the success and development of the DAO.

Meritocracy and Expertise: DAOs provide a platform where contributions and decision-making authority are based on merit and expertise rather than hierarchical positions. Participants can earn influence and reputation within the DAO by contributing valuable ideas, skills, or resources. This meritocratic approach allows DAOs to tap into a global talent pool, fostering innovation and ensuring that decisions are made by those with relevant knowledge and expertise.

Flexibility and Adaptability: DAOs can be flexible and adaptable, allowing for rapid decision-making and organizational changes. Through decentralized governance and autonomous decision-making, DAOs can respond quickly to evolving circumstances, emerging opportunities, and community feedback. This flexibility enables DAOs to adjust their strategies, resource allocation, and priorities promptly, ensuring they remain agile and aligned with the needs and aspirations of their community.

Benefits of DAOs and Web3

Security: DAOs and Web3 utilize blockchain technology which guarantees the security of the system and makes it more secure than traditional organizations.

Transparency: All information is recorded and accessible to every member of the DAO, it is also easy to track the DAO spending, voting, and all information stored in the organization.

User-Ownership: The DAO is owned by every member of the organization, what differs is the stake of the users in the DAO, most DAOs use tokens or NFTs to represent ownership, and the amount of the token or NFT determines the stake of the user in the DAO.

Collaboration and Innovation: It is easy for people to collaborate on projects in DAOs, as there are no unnecessary ranks and limitations. This leads to new ideas and innovation.

Application of DAOs and Web3

Investment and Venture Capital: DAOs enable decentralized investment and venture capital funds, where members pool their resources and collectively decide on investment opportunities. This democratizes access to funding, promotes diverse investment strategies, and eliminates the need for traditional intermediaries.

Decentralized Finance (DeFi): DAOs play a significant role in the rapidly growing field of decentralized finance. They are utilized to govern protocols, determine interest rates, manage lending and borrowing activities, and provide liquidity through decentralized exchanges and liquidity pools. DAOs in DeFi enhance transparency, trust, and community participation in financial operations.

Tokenized Communities: DAOs can be used to create tokenized communities where individuals hold tokens representing their membership and participation rights. These communities leverage DAOs to coordinate resources, make collective decisions, and incentivize active engagement. Tokenized communities can span various sectors, such as art, gaming, content creation, and social impact initiatives.

Decentralized Social Networks: DAOs can be employed to create decentralized social networks where users have control over their data, privacy, and platform governance. DAOs in social networks empower users to collectively decide on platform policies, content moderation, and revenue sharing, creating a more user-centric and transparent social media experience.

Non-Profit Organizations and Social Impact: DAOs have the potential to revolutionize the way non-profit organizations operate by providing transparent governance, traceability of funds, and increased community participation. DAOs enable stakeholders to collectively fund and govern social impact initiatives, improving transparency, accountability, and efficiency in the allocation of resources.

Challenges of DAOs and Web3

Regulatory Uncertainty: The regulatory landscape surrounding DAOs and Web3 is still evolving. Different jurisdictions have varying regulations and legal frameworks, which can pose challenges for DAOs operating across borders. Uncertainty in regulatory compliance and the potential for new regulations to impact DAOs' operations and tokenized assets present ongoing challenges.

Scalability and Performance: Scalability remains a significant challenge for blockchain networks, including those supporting DAOs. As DAOs grow in membership and activity, blockchain networks must handle increased transaction volumes without sacrificing speed, security, or cost efficiency. Scaling solutions such as layer 2 protocols and sharding are being developed to address these challenges.

Governance and Decision-Making Complexity: While DAOs aim to enable decentralized decision-making, effectively managing governance processes can be complex. Ensuring meaningful participation, preventing voter apathy, and reaching a consensus on contentious issues can be challenging in large and diverse communities. Developing effective governance models and decision-making mechanisms that balance inclusivity and efficiency is an ongoing challenge.

User Experience and Adoption: Improving user experience and onboarding processes is crucial for the wider adoption of Web3 applications and DAOs. Overcoming technical barriers, such as the complexity of wallet management and interacting with decentralized applications (dApps), is essential to attract mainstream users who may not be familiar with blockchain technology.

Token Economics and Governance Token Valuation: Designing token economics that aligns incentives, distributes rewards fairly, and encourages participation can be challenging. Determining the value of governance tokens and their impact on decision-making within DAOs is an ongoing consideration. Balancing the interests of token holders, participants, and the overall community is crucial for long-term sustainability.

Education and Awareness: Educating users, developers, and stakeholders about the benefits and potential risks of DAOs and Web3 is crucial for broader adoption. Raising awareness about the advantages, functionality, and best practices in decentralized governance helps address misconceptions and build trust in these emerging technologies.

Examples of DAOs

MakerDAO: MakerDAO is one of the most well-known DAOs in the cryptocurrency industry. It is responsible for governing the Maker Protocol, which enables the creation of the stablecoin Dai. MakerDAO's community members participate in voting and decision-making processes that determine the parameters and policies of the protocol, including collateral types and stability fees.

GnosisDAO: GnosisDAO is a decentralized autonomous organization that focuses on prediction markets and decentralized applications (dApps). It aims to create a community-driven ecosystem for forecasting and decision-making. GnosisDAO members participate in governance and decision-making processes related to the development and management of the Gnosis Protocol and other related projects.

Curve Finance: Curve Finance is a decentralized exchange (DEX) optimized for stablecoin trading. It operates as a DAO, allowing participants to provide liquidity, vote on governance proposals, and collectively manage the platform's parameters and operations. Curve Finance focuses on low-slippage and low-fee stablecoin swaps.

Gitcoin: Gitcoin is a platform that connects developers and contributors to open-source projects. It leverages a DAO model to govern funding and resource allocation for projects. Participants can contribute to the development of projects and receive rewards based on their contributions. Gitcoin aims to foster open-source collaboration and incentivize innovation.

Aavegotchi: Aavegotchi is a decentralized application that combines DeFi and non-fungible tokens (NFTs). It operates as a DAO and allows participants to stake tokens and participate in governance decisions related to the platform's development and features. Aavegotchi focuses on creating unique and tradable NFT-based virtual pets.

Conclusion

In conclusion, DAOs and Web3 are changing how organizations work by using blockchain technology and decentralization. DAOs enable transparent decision-making and inclusive governance.

DAOs give power to members, allowing them to make collective decisions on operations and resources. This decentralized governance promotes fairness and accountability.

Despite challenges, DAOs and Web3 can create sustainable and inclusive economies. They empower individuals, promote transparency, and encourage collaboration. As adoption grows, we can expect more advancements.

References

Hashing in Blockchain Technology: How it Ensures Data Integrity

ADESANYA JOSHUA AYODEJI — Sat, 11 Feb 2023 10:19:30 +0000

Hashing is a fundamental concept in cryptography widely used in various technologies, including password storage, data integrity, digital signatures, and blockchain. Hashing is used in blockchain to ensure the integrity and security of data stored in the chain.

This article will look at the concept of hashing and how it is used to ensure data integrity in blockchain technology.

Blockchain Technology

Blockchain technology is a distributed digital ledger that is decentralized and used to record transactions across multiple computers. It is a safe and transparent method of storing and sharing data across a network.

A blockchain is a chain of blocks, each of which has a list of transactions. These transactions can be anything from financial transactions to digital contracts to simple messages. The blocks in the chain are cryptographically linked to one another, resulting in a secure and unchangeable record of all transactions.

Decentralization is another important aspect of blockchain technology. In contrast to traditional centralized systems, where a single entity controls and manages the data, the data in a blockchain network is stored and maintained by multiple entities known as nodes. Because of this decentralized architecture, blockchain networks are extremely resistant to tampering, fraud, and hacking.

Blockchain technology is also highly transparent, as all network transactions are public, and every node has a full blockchain copy. This transparency ensures that all network transactions are traceable and auditable.

Many possible applications for blockchain technology exist, including financial transactions, supply chain management, digital identity, and many others. Blockchain technology is still in its early stages, and many organisations and businesses are looking for ways to use it to better their operations and services.

Hashing

Hashing converts a string of characters into a fixed-size output for security purposes. Although the phrases hashing and encryption are frequently used interchangeably, hashing is always used for one-way encryption, and hashed values are extremely difficult to decode.

It is difficult to reverse the hashing process and retrieve the original input from the hash because it is deterministic in nature.

Hashing algorithms are mathematical functions that take an input and produce a hash, which is a fixed-length output.

For instance, in password storage, the password is hashed before being saved in the database, preventing an attacker from discovering the original password even if they have access to the database.

Hashing in Blockchain Technology

In blockchain technology, hashing is used to ensure the integrity of data stored in the chain. Each block in the blockchain contains a unique hash that is generated from the contents of the block. The hash of a block is generated by applying a hash function to the contents of the block, which includes the list of transactions, the hash of the previous block, and a random number known as a 'nonce'.

Since the hash is generated from the contents of the block, any change to the data in the block will result in a different hash being generated. This means that if someone tries to tamper with the data in a block, the hash of the block will no longer match the one stored in the chain, and the network will reject the tampered block.

Linking each block's hash to the previous block's hash creates a chain of blocks that is extremely difficult to change. Because each block in the chain contains the previous block's hash, any change to a block in the chain will affect all subsequent blocks, and the network will reject the entire chain.

Furthermore, using a nonce in the hash function gives an extra layer of protection. A nonce is a random number that is used in the hash calculation. If a malicious actor attempts to change the contents of a block to generate a new valid hash, they must also find a new nonce that produces the same hash. This computationally demanding task would necessitate a substantial amount of computational power.

Data Integrity

Data integrity refers to the accuracy and completeness of data over its entire lifecycle. It ensures that data is not tampered with, altered, or corrupted and remains consistent and reliable.

In the context of blockchain technology, data integrity is achieved through the use of cryptographic hashing. Each block in the blockchain contains a unique hash that is generated from the contents of the block. The hash of a block is used to ensure that the data in the block has not been tampered with, and any change to the data will result in a different hash being generated.

In a blockchain network, every node has a copy of the entire blockchain, and all transactions are publicly visible. This transparency ensures that all transactions on the network are verifiable and auditable, further enhancing the data integrity of the blockchain network.

Data integrity is a crucial aspect of blockchain technology. Using cryptographic hashing and linking each block to the previous block ensures that data in the blockchain is accurate, consistent, and reliable and cannot be tampered with.

Conclusion

Hashing is a crucial component of blockchain technology that ensures the integrity and security of data stored in the chain. The use of hashing in blockchain technology ensures that data in the chain cannot be tampered with and that each modification to the data results in a different hash is created.

Furthermore, the use of a nonce in the hash function, as well as the linking of the hash of each block to the hash of the previous block, results in a chain of blocks that is extremely difficult to change. The notion of hashing is also applied in other emerging technologies, such as distributed file systems and distributed databases, demonstrating its adaptability in ensuring data integrity in a decentralized setting.

I hope you found this article useful.

Thank you for reading.

References

What Is a Hash? Hash Functions and Cryptocurrency Mining
What is hashing?
What Is Hashing? A Guide With Examples.

Building a FileStorage Application using Xata, Cloudinary, and NextJs.

ADESANYA JOSHUA AYODEJI — Wed, 23 Nov 2022 07:26:53 +0000

Storing files became necessary due to the ease with which pictures, videos, and other files can be generated; the smartphone era played a significant role in this; people want to save their memories so that they can always refer back to them in the future.

This article explains how to build a file storage application in Next.js, using Xata to provide the database service and Cloudinary to store the files.

Check out the Live demo of the application we will create.

Demo | Code

Prerequisite

You should have a basic understanding of Javascript
You should have a basic knowledge of React Js and Next Js.

Tech Stack

NextJs is a React framework that builds on the functionality of React Js, it simplifies the creation of pages and API endpoints.
Cloudinary is a cloud media platform that allows users to upload files easily.
Xata is a serverless data platform that allows users to store data, search for data and get insights into the data.

Project Setup and Installation
- Next Js pages setup
- Creating database and tables on Xata
- Cloudinary
Connecting Cloudinary to the application
Connecting Xata to the application
Conclusion

Project Setup and Installation

NEXT JS PAGES SETUP

To begin, we'll create a new Next.js app, launch our terminal, create a new empty directory and execute the following command:

    npx create-next-app@latest

Make sure you are in the correct directory and install the dependencies using a package manager like npm, yarn, or pnpm:

    npm i bcryptjs react-notifications

Create skeleton pages for the application

We will create the necessary pages needed for the application with the code below, we will create the following pages.

Index.js
all.js
files.js
photos.js
videos.js
login.js
signup.js

styles/global.css

Global css for all the pages.

styles/Home.module.css

components/Sidebar.module.css

CSS for the sidebar components.

pages/_document.js

We used the _document.js file to add font to our application.

components/Sidebar.js

The Sidebar component is used for switching between pages, and it is used on all the pages.

pages/index.js

The index page allows users to upload their files and view recently uploaded files.

pages/all.js

The all.js page is where users can view all their files.

pages/files.js

The files.js page is where users can view their documents such as pdf, word document, excel documents and others.

pages/photos.js

The photos page is where users can view all their pictures.

pages/videos.js

The videos page is where users can view all their videos.

pages/login.js

The login page is the access page to the application, and only authenticated users can access the application.

pages/signup.js

The signup page is where the users register to access the application.

CREATING DATABASE AND TABLES ON XATA

We need to log into xata.io to be able to create a database and add tables to the database.

Add a workspace; we can do this by entering the workspace name.

Add a Database, we can do this by entering the database name and selecting the preferred zone.

Next, let's add a table. We can do this by selecting the database and clicking Add a table. Select empty table and enter a table name. We can add users table first.

Let's also add fields to the table. The users table needs an id, email, and password field, while the files table needs an id, name, type, date, url, and userid field. The id field is created by default and autogenerated. Click on the highlighted icon and select the appropriate data type.

The datatypes for the Users fields are

Email - String
Password - String

The datatypes for the Files fields are

Name - String
Type - String
Date - date
Url - String
Userid -String.

Users table

Files table

Copy workspace base API URL.

To generate the API key, go to account settings, enter the name of the API key and click o save.

CLOUDINARY
Signup on cloudinary.com and login to your account.

Get the cloudname on the dashboard and the presetname on the settings page.

Connecting Cloudinary to the application

We added the Cloudinary script to our index.js page during the page setup. Now, let's add the necessary code to upload files to Cloudinary and get the url link to our file.

Connecting Xata to the application

This application will do 4 significant actions on Xata: signup, login, save and retrieve files.

Setup API Routes on NextJS.
Before we set up our API routes, we need to add our .env file.

.env

XATA=Bearer <Insert your API KEY>
salt=<Insert anything>
database=<workspace base API URL>

api/signup.js

The signup API route expects a request body from the client, it is a POST request, and the first thing it does is check if the email already exists; if it does, it returns an error message, but if it does not, it creates a new user in the database.

api/login.js

The login API route expects a request body, a POST request, and it gets the email needed to check if the user exists; if the user exists, the user object is sent to the client.

api/upload.js

The upload route API expects the request object, which contains the file name, file url, type, and other data; the upload API stores the file in the database. It is a POST request.

api/files

The files route API is a GET request. We need to retrieve the files we have stored in the database, which is what the files API route does. It uses the search query, which is the userid, to fetch all files associated with the user.

Integrate API routes with the pages

pages/signup.js

We have imported bcryptjs and react notifications to help with password hashing and the user experience. We made use of the useRef hook to get our input value.

The sign function is where the action is taking place; it checks if the email or password is empty and returns an error message if it is empty, then we use bcryptjs to hash the password, we send the credentials to our signup API route, and if the request is successful, we store the userid and email in the client using localStorage API, and redirect the user to the index page, if the user already exists, we display an error message.

pages/login.js

The log function checks if the email or password is empty and returns an error message If it is empty, we send the request to the login API route; then we use bcryptjs to compare the password; if the password is wrong, we display an error message, if the password is correct, we store the userid and email in the client using the localStorage API, and redirect the user to the index page.

pages/index.js

We set up our useState for the different types of files, and we also set up our useEffect to check if the user has been authenticated. We are doing this by checking the userid in the localStorage. We also get all the files when the page is refreshed, and we do this by calling the files API route inside the useEffect. We have also updated our showWidget function to store the url link and associated information we get when we upload our files to Cloudinary. We are using the upload API route for this inside the showWidget function. We are also getting the type of file by checking the extension of the files, which will help us classify the files into different categories. Finally, we use the different array categories for the file type to display the files on the page.

pages/all.js

The all page uses the api/files endpoint to get all the uploaded files and displays them on the page.

pages/files.js

The files page uses the api/files endpoint to get all the uploaded files, filters the result for documents like pdf and Microsoft word, and displays them on the page.

pages/photos.js

The photos page uses the api/files endpoint to get all the uploaded files, filters the result for the images, and displays them on the page.

pages/videos.js

The videos page uses the api/files endpoint to get all the uploaded files, and filters the results for videos, and displays them on the page.

For all the pages, we are checking if the user is authenticated inside the useEffect, we are also calling the files API route to get the files associated with the user. We use the useState to keep track of our files and display them on the page.

Conclusion

We built a fully functional file storage application using Xata, Cloudinary, and NextJs, where users can upload images, videos, documents, and other files.

Users can sign up and log in to the application to start using it; users' passwords are hashed for security, and only users can access the files they store in the application.

I hope you found this tutorial useful.

Thank you for reading.

Link to the demo - https://clouddrop.netlify.app/

Content created for the Hackmamba Jamstack Content Hackathon with Xata and Cloudinary.

Web2 vs Web3

ADESANYA JOSHUA AYODEJI — Wed, 09 Mar 2022 08:57:33 +0000

The Web is very common nowadays but it was not always like that in the early days, the web was invented by Tim Berners-Lee, a British scientist in 1989, the rest is history now.

The Web is fully known as the World Wide Web, it is a major part of the internet, which contains pages and information that can be accessed by a web browser.

It is easier for us to confuse the web for the internet, but the internet is a global network of servers. Servers are where pages and information are hosted, so they make it possible for us to share information.

Although, the focus of this article is on the comparison between Web2 and Web3. It makes sense for us to look into Web 1.0 as well.

Web 1.0

This is the first stage of the Web evolution, it is widely known for displaying static pages. The contents are served from the server's file system. Elements are positioned using tables and frames. The web was mostly used by researchers and people who want to display information.

Web 2.0

This is the second stage of the Web evolution, although no point signified the end of web 1 and beginning of web 2, so web 2 was built on web1. It is the web for the creators. There is a lot of emphasis on user experience, user content creation. Social media, blogging, vlogging are mainstream. It is the participatory social web.

Web 3.0

This is the permissionless web. It is the new phase of the web, anyone on the network can use the service without interference. It also has an inbuilt payment system. Web3 applications run on blockchains, these applications are often referred to as decentralized applications(dapps).

Some of the characteristics of Web3 are that, it is verifiable, trustless, self-governing, permissionless, distributed, stateful, and others.

Differences between Web2 and Web3

Applications owners can censor any account on Web2, this would not be possible on a fully decentralized Web3 application.

Payment services like PayPal have placed restrictions on some countries making it impossible to use their services, this would not be possible on a fully decentralized Web3 payment service.

Application on Web2 can go down any time, we have seen it happen with Facebook and other big social application, web3 applications run on multiple nodes and they cannot all be down at the same time, which means the web3 application will always be accessible.

Conclusion

In conclusion, Web2 is still a part of Web3, just like web2 is a part of web1, it is a continuum. Most web3 application frontends are still hosted on decentralized platforms, so web2 is not going anywhere.

I am part of a block games internship aimed at teaching people how to develop a decentralized application, which is sponsored by Block games (https://blockgames.gg/), Nestcoin (https://nestcoin.com/), and the Zuriteam (https://zuri.team/).

Thank you for reading

See You Next Time.

A Friendly Beginner's Guide to Solidity (Part Two)

ADESANYA JOSHUA AYODEJI — Sun, 13 Feb 2022 17:34:28 +0000

This is the continuation of A Friendly Beginner's guide to Solidity (Part One). We looked at the key topics such as Ethereum, Solidity, Ethereum Virtual Machine and Smart Contract, then we dived deep fully into Solidity.

We will be looking into more advanced concept in solidity in this article.

Functions

We looked at functions in the part one but we will take a deeper look into it.

There are various kinds of functions in solidity, they are

Public functions
Private functions
Internal functions
external functions

Public functions - These are functions that can be called by any contract, this is not advisable, it exposes your function, especially if values can be changed as a result of calling the function. it exposes your contract to attacks. The public keyword is added after the function parameters.

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

   function createCar(uint _amount, string memory _name) public pure returns (Car memory _car) {    
        Car memory newCar = Car(_amount,_name);
        return newCar;     
    }
}

In solidity, we must specify the return datatype of the data the function will return, as seen in the function above.

Private functions - These are functions that can only be called within your contract. It is not accessible to outside functions. A good rule of thumb is to make your contract private by default.
The private keyword is added after the function parameters.

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

   function createCar(uint _amount, string memory _name) private pure returns (Car memory _car) {   
        Car memory newCar = Car(_amount,_name);
        return newCar;     
    }
}

Internal functions - These are private functions but they are accessible to contracts that inherit from your contract.

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

   function createCar(uint _amount, string memory _name) internal pure returns (Car memory _car) {  
        Car memory newCar = Car(_amount,_name);
        return newCar;     
    }
}

External functions - These are functions that are only accessible outside your contract, if you need to expose a function to the public, an external function is a good idea.

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

   function createCar(uint _amount, string memory _name) external pure returns (Car memory _car) {  
        Car memory newCar = Car(_amount,_name);
        return newCar;     
    }
}

Returning Multiple Values

In most cases, functions return values and the values returned can be more than one, this depends on what the function is trying to achieve. We have seen in previous examples, how to return a single value, let's also see an example of how to return multiple values. The data type for all the return values must also be specified when we are returning one or more values

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

function createCar(uint _amount, string memory _name) external pure returns (uint amount, string memory name, Car memory _car) {   
        Car memory newCar = Car(_amount,_name);
        return (_amount, _name, newCar );   
    }
}

Conditional statements and Loops

If Statement

If statements are conditional statement used to check if a statement is true or false, its usage in solidity is similar to other languages i.e JavaScript

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

   uint newAmount = 1000;

   function createCar(uint _amount, string memory _name) external returns (Car memory _car) {  
         if (_amount > 1000){
             newAmount = _amount;
         }
        Car memory newCar = Car(newAmount,_name);
        return newCar;   
    }
}

The logic above checks if the _amount is greater than 1000, if it is true it changes the newAmount variable to the amount passed into the function, if it is false it uses the default value assigned to the newAmount Variable.

For Loops

For loops allows us to execute a statement multiple times based on a condition. For Loops in solidity are similar to other languages i.e javascript

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

contract HelloWorld {

    struct Car { 
        uint amout; 
        string name; 
    }    

    string[] carNamesList = ["BMW","Toyota","Honda"];
    uint[]  carAmountList = [1000,2000,2000];
    Car[] allCars;

    function loopCars() public {
        for (uint i = 0; i < carNamesList.length; i += 1) { 
        Car memory newCar = Car(carAmountList[i], carNamesList[i]);
        allCars.push(newCar);
        }
    }



}

We created a carNamesList and carAmountList array, which contains list of the car names and car amounts, then we used the for loop to go through the arrays and created new cars and added it to the allCars array.

Require

Require is similar to if statement, it evaluates if a statement is true or false, if the statement is true, the lines below the require statement is evaluated, if it is false, it throws an error.

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

   uint newAmount = 1000;

   function createCar(uint _amount, string memory _name) external view returns (Car memory _car) {  
        require(_amount > newAmount);
        Car memory newCar = Car(newAmount,_name);
        return newCar;   
    }
}

The logic above checks if the _amount is greater than the amount set in the newAmount variable, if it is true, the lines below executes, if it is false, it throws an error.

Generating random numbers

To generate a random number, we will need the ethereum hash function known as keccak256, it is a version of SHA3. This hash function returns a 256-bit hexadecimal number and the hash function is expecting a single parameter of type bytes.

In order to use it we need to encode the string we will pass to the function using abi.encodePacked, this function will convert the string to the type bytes.

Lets see it in action.

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

contract HelloWorld {

 bytes32 variable = keccak256(abi.encodePacked("aaaab"));
//6e91ec6b618bb462a4a6ee5aa2cb0e9cf30f7a052bb467b0ba58b8748c00d2e5

}

Imports

When we have our contracts in different files and we want to use them in another file, we use imports.

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

// NFT contract to inherit from.
import "@openzeppelin/contracts/token/ERC721/ERC721.sol";

contract MyNFT is ERC721 {

}

We imported a contract above that can be used to create an NFT token with less code.

OpenZeppelin offers open source OpenZeppelin Contracts, written in Solidity, for building secure smart contracts. OpenZeppelin Contracts uses ERC standards for Ethereum-based tokens that can be used in many types of projects. In an effort to minimize cyber risk associated with building secure smart contracts on Ethereum or other blockchains, OpenZeppelin Contracts are continually audited and tested.

Inheritance

This is a popular concept in object oriented programing, where a class inherits the properties of another class. In solidity Contract can inherit from other contracts.

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

contract Hello {
  function HelloWorld() public pure returns (string memory) {
    return "Hello World";
  }
}

contract HelloWord is Hello {
  function AnotherHelloWorld() public pure returns (string memory) {
    return "Another Hello World";
  }
}

The first contract has access to only the HelloWorld function, the second contract has access to both the HelloWorld function and the AnotherHelloWord function.

The is is the keyword for the inheritance.

Events

Events are a medium for us to communicate what is happening on the blockchain to the client-side or front end of our application. What makes it possible for the frontend to know when a change has occurred on the blockchain is called events.

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

contract HelloWorld {
    struct Car { 
        uint amout; 
        string name; 
    }

    event CarCreated(uint _amount, string  _name, Car _car); 

    function createCar(uint _amount, string memory _name) internal returns (Car memory) {  
         Car memory newCar = Car(_amount,_name);
         emit CarCreated(_amount,_name, newCar);
         return newCar;     
  }


}


}

we used the *event * keyword to create the CarCreated event.
In the createCar function, we emit the CarCreated event. The client-side gets the event and does something with it.

// The frontend implementation
YourContract.CarCreated(function(error, result) {
   // do something when car is created
})

Addresses

The Ethereum blockchain is made up of accounts, these accounts works similarly to bank accounts. An account has a balance of Ether (the currency used on the Ethereum blockchain), and you can send and receive Ether payments to other accounts.

Each account has an address, which you can think of like a bank account number. It's a unique identifier that points to that account, and it looks like this:
0x1443498Ef86df975D8A2b0B6a315fB9f49978998 (This is my address, you can send some ether). Thank you in advance.

The address is the user identity on the blockchain(Ethereum Blockchain).

Mappings

Addresses are one of the most important things we map our data to on the Ethereum blockchain, we can map things like account balance(Ether), NFTs, userIds, and other things which belong to us on the blockchain to our address.

For example, to match our address to our account balance, we can do this

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

contract HelloWorld {

    mapping(address => uint) public accountBalance;

}

The name of the mapping we created above is accountBalance. we are mapping address to uint using the mapping keyword, address is a datatype, just like uint.

Msg.sender

To get access to our address, we need access msg.sender, it is a global variable available to all functions, msg.sender outputs the user's address.

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

contract HelloWorld {
    uint amount = 5000;
    mapping(address => uint256) public accountBalance;


    accountBalance(msg.sender) = amount;
    // mapping is done, now we can access the account balance 
    // from the accountBalance mapping when we need it

}

We assigned the amount to our address, and we got our address from msg.sender.

Constructors

It is an optional special function that has the same name as the contract. it will get executed only one time when the contract is first created.

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

contract HelloWorld {
   constructor(
        string[] memory carList,
    )

  //Do other things

}

The carList array will only be created the first time the contract is created.

Function modifiers

They are kind of half functions that are used to modify other functions, it is used mostly to check some requirements before executing the function.

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

contract HelloWorld {
   address private  _owner;
   constructor(
         _owner = msg.sender;
    )

   // modifier function
   modifier onlyOwner() {
    require(msg.sender == _owner);
    _;
  }

  function doSomething() public onlyOwner {
      // This function only runs when the onlyOwner 
      //  modifier question evaluates as true
  }

}

We created a private variable called _owner which has an address datatype, we assigned our address to the variable in the constructor which only runs one, which means it is storing the address of the owner of the contract.

We created a modifier function called onlyOwner, using the modifier keyword. In the modifier function, we are checking if the address matches the address we initially stored which is the address of the owner of the contract.

We assigned the modifier function to the doSomething function, this means that the function will only run if the person trying to access it is the owner of the contract.

In the Part 3 of this article we will be using all these concept to build an NFT contract and front end application.

I hope you found this tutorial useful.

Thank you for reading.

# References

A Friendly Beginner's Guide to Solidity (Part One)

ADESANYA JOSHUA AYODEJI — Sun, 13 Feb 2022 17:27:09 +0000

Blockchain Technology and Web3 has become a buzz word and a lot of developers are switching or planning to switch to web3. One of the most popular blockchain technology is Ethereum and the programming language used to code its smart contract is solidity. Learning solidity is a step in the right direction in your journey to becoming a Web3 developer. To read more on blockchain checkout Blockchain for Beginners

In this tutorial, you will learn basic concepts in the solidity programming language and take a step to start building decentralized applications.

Prerequisites

Before we continue it is recommended to have the following.

A basic knowledge in any programming language

Introduction

What is Solidity?

Solidity is an object-oriented programming language for writing smart contracts on Ethereum. It is influenced by JavaScript, Python, and C++, and Solidity targets the Ethereum Virtual Machine (EVM). Solidity is the programming language of Ethereum.

What is Ethereum?

Ethereum is a decentralized opensource blockchain technology that lets you send cryptocurrency to anyone for a small fee. Ether is the native cryptocurrency of Ethereum. It also powers applications that everyone can use and no one can takedown.

What is an Ethereum Virtual Machine (EVM)?

The Ethereum Virtual Machine (EVM) is a powerful, sandboxed virtual stack embedded within each full Ethereum node, responsible for executing contract bytecode. Contracts are typically written in higher-level languages, like Solidity, then compiled to EVM bytecode.

What is a Smart Contract?

Smart contracts are simply programs stored on a blockchain that run when predetermined conditions are met. They typically are used to automate the execution of an agreement so that all participants can be immediately certain of the outcome, without any intermediary’s involvement or time loss. They can also automate a workflow, triggering the next action when conditions are met.

Let's get started!

After creating a solidity file that ends with .sol, the first requirement is to add a comment indicating the license of the code(open source or not).

// SPDX-License-Identifier: MIT

The next line to be added to the file is the pragma indication of the version of solidity that you are using. This will prevent problems during compilation.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.2;

Contracts

They are starting point of your solidity project. It is the building block of all Ethereum programs. It is similar to classes in object-oriented languages and will contain the variables, functions, and others.
An empty contract looks like this -

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

contract HelloWorld {

}

State Variables

They are a means of holding values in the smart contract. They are permanently stored in the contract storage, the implication of this is that they are written to the Ethereum blockchain, which is similar to writing to a database. Let's create a state variable named amount.

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

contract HelloWorld {
    uint amount = 100;
}

I added uint(unsigned integer) in front of the amount, that is the data type of the state variable

Data Types

Data types in Solidity represent the type of data the program is to use. The type can be numeric, alphanumeric, decimal, bool, etc.

These attributes tell the program compiler how the programmer intends to use the data by constraining the values that a variable or a function might use. Solidity is a statically typed language which means the type of each variable needs to be specified throughout your code.

Data types instruct the compiler to check the usage of the variables in your contract. Declared data types have default values referred to as zero state (0).

For example, a boolean’s default value is False and a uint’s default value is 0. The concept of undefined or null values does not exist in solidity. So a data type will have some value (for example – hi, 123, true, etc.) or 0 as a default value.

Examples of data types found in solidity
String, Integer(signed and unsigned), Address, Fixed Point Number(signed and unsigned), Byte, Structs, and others.

Structs

In some cases, a special data type is needed. Structs are created for this purpose. It allows us to create complicated data types that have properties. The properties inside the struct will also have their types, Let's add a Car Struct to our HelloWorld Contract.

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

contract HelloWorld {
    uint amount = 100;
    struct Car { 
        uint amout; 
        string name; 
    }

    // To create a new Car
    Car bmw = Car(10000, "BMW");
}

From the code above we declared our Car struct and created a new Car named bmw. We can also see that we used the Car Struct as a datatype when creating the new car.

Arrays

Arrays or lists are popular in various programming languages, anytime we need to store a collection of items, arrays come to mind. We have two types of array in solidity, fixed arrays, and dynamic arrays.

Fixed arrays have a fixed size.

Dynamic arrays have no fixed
size.

Let's create an array and store a few cars in it.

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

contract HelloWorld {

    uint amount = 100;
    struct Car { 
        uint amout; 
        string name; 
    }

    // To create new Cars
    Car bmw = Car(10000, "BMW");
    Car Toyota = Car(2000, "Toyota");
    Car Honda = Car(3000, "Honda");

    //Create a fixed array named fixedCars
    Car[2] fixedCars;

    //Create a dynamic array named dynamicCars
    Car[] public dynamicCars;

    function addCars(Car memory newCar) public{
         //The push method is used to add items to the array, 
        dynamicCars.push(newCar);
    }


}

we can also declare our arrays as public, this means that other contracts of the blockchain will be able to access it.

i.e lets create a publicCarList

Car[] public publicCarList;

Functions

Functions are very handy when writing code, it helps to break down our code into blocks. Solidity functions are not different. Let's add some functions to our HelloWorld Contract.

In solidity, arguments passed to functions can be done either by value or reference (memory). Passing by reference is compulsory for all reference types such as arrays, structs, mappings, and strings.

By value, which means that the Solidity compiler creates a new copy of the parameter's value and passes it to your function. This allows your function to modify the value without worrying that the value of the initial parameter gets changed.
By reference, which means that your function is called with a... reference to the original variable. Thus, if your function changes the value of the variable it receives, the value of the original variable gets changed.

We will create a createCar function, it will take two parameters, amount and name. Our function will also be public.

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

contract HelloWorld {
    uint amount = 100;
    struct Car { 
        uint amout; 
        string name; 
    }

    // createCar function
    // adding underscore to the arguments is a covention
    // removing it will have no effect on the code
    function createCar(uint _amount, string memory _name) public pure returns (Car memory _car) {   
       Car memory newCar = Car(_amount,_name);
       return newCar;     
    }

    // The above function will return the newCar variable

}

It is not advisable to make our functions public, this will give other contracts access to it, we should make our functions private by default.

 function createCar(uint _amount, string memory _name) private pure returns (Car memory _car) {   
       Car memory newCar = Car(_amount,_name);
       return newCar;     
    }

TypeCasting

This is the conversion of one datatype to another.

uint b = 10;
uint8 c = uint8(b);

Conclusion

The best way to understand the concepts is to practice and build projects.

Part 2 of this article will explain concepts such as events, mappings, data locations, returning multiple values, constructors, function modifiers, solidity time, and import

Link to Part Two - A friendly beginners guide to solidity (Part Two)

I hope you found this tutorial useful.

Thank you for reading.

# References

Nft For Beginners

ADESANYA JOSHUA AYODEJI — Sat, 29 Jan 2022 23:47:36 +0000

There is a high probability you have heard about NFT, which in full is called non fungible tokens. This simply means that it cannot be replaced or interchanged.

What brought about NFT?

NFT became popular due to blockchain technology becoming mainstream. NFT can be any digital assets, artworks, pictures, videos or music. What makes them interesting is that they have unique properties which make it easy to prove ownership.

For example, if you have a picture, let's assume your picture, to make it an NFT, you just have to store it with its attribute on the blockchain. You don't even need to be a programmer or technical person to do this. This can be easily done on Opensea .

NFTs are quite popular because people are buying and selling it. you may not be able to sell your NFT picture but if you are an artist or a creative, you can make a lot of money listing your creative asset on an NFT marketplace.

What makes NFT stand out in the blockchain world?

They can be traded across different ecosystems, this means you can view your NFT on different wallets and marketplaces. This is possible due to open standards adopted across the ecosystem.
It is easy to trade and respond to market forces, demand and supply determine the price in the long run. The ownership is verifiable without the need for any third party.

NFTs are been utilized in various industries.
Arts - Arts are being sold as NFTs on Opensea or other platforms
Music - Music are hosted on Opulous as NFTs
Videos - Videos are hosted on AirNFTs as NFTs
Gaming - NTs are a big part of the Axie infinity game.
Sports - NBA top shot is a big example of how the NBA is cashing out with NFTs.
Real Estate - Virtual lands are been sold as NFTs on Decentraland

NFT Marketplaces

The most popular one is Opensea

Others are SuperRare and
Rarible

Thank you for taking the time to read, you probably have no idea how blockchain works

You can check out my article - Blockchain for Beginners

Blockchain for Beginners

ADESANYA JOSHUA AYODEJI — Thu, 04 Nov 2021 15:33:35 +0000

What is Blockchain?

Blockchain is a digital chain of blocks where every block records information about a recent transaction. The chain simply refers to the fact that every new block is added to the current chain of blocks.
The data on the blocks is permanent and not reversible. It is a register or ledger of digital records. The most popular use case currently is for storing transaction data.

What is Cryptocurrency?

Cryptocurrencies are digital or virtual currency that is protected by cryptography, making counterfeiting and double-spending impossible.

The first and most popular cryptocurrency which uses blockchain technology is Bitcoin. Bitcoin's main use case is for transactions outside the traditional financial system. Things like borderless money transfers come to mind.

Another popular cryptocurrency is Ethereum which also uses blockchain technology. Unlike bitcoin, Ethereum was not created with a specific purpose in mind, and it allows developers to create decentralized applications known as Dapps.

Blockchains can be centralized or decentralized, decentralized blockchains are immutable, which means data entered can not be changed, no single person or group also has control. All these records on a decentralized blockchain are publicly available.

The blocks are a kind of database that stores the records. The chain simply refers to the fact that every new block is added to the current chain of blocks. The data on the blocks is permanent and not reversible.

How does Blockchain work?

We're used to banks keeping track of our money, which is why we can receive our bank statements at any time, but the blockchain is controlled and managed by a network of computers that anybody can join.

These computer networks are referred to as nodes. Their main job is to ensure that the transaction is genuine. As a result, all of these nodes or computer networks compete to authenticate the transaction's authenticity.

There is a reward for the node or machine that confirms the authenticity of the transaction. This is referred to as mining.

How does the nodes or network of computer confirm the validity of the transaction?

This is done through what is known as a consensus mechanism.

What is a consensus mechanism?

This is the way the blockchain system achieves the necessary agreement on a single value, in this case, the confirmation of a transaction. There are currently several consensus mechanisms but we would look at the most popular two.

Proof of Work
Proof of Stake

Proof of Work

This requires the network of computers to solve very difficult equations to confirm the validity of the transaction. It requires participants to prove that work is done and gives them the right to add a new transaction to the blockchain.
The first participant that can solve the equation correctly will be the one to get the reward for the mining. An example of a cryptocurrency using this is Bitcoin.

Proof of Stake

This requires participants to hold or stake coins for them to get the right to validate transactions, the more coins, the user holds or stakes, the more chances the participants have to be chosen to validate the transaction and get the reward for mining.
An example of a cryptocurrency using this is Ethereum.

What does the bitcoin transaction process look like?

1 - A new transaction is entered i.e sending bitcoin or buying bitcoin.
2 - The transaction is entered into a node or network of computers
3 - The participants compete on solving a difficult equation, and the first to solve the equation confirms the validity of the transaction and gets the mining reward.
4 - Once the transaction is confirmed, it is added to the block.
5 - The block is added to the chain.
6 - The transaction is complete.

This article is eye-opening and does not contain everything about blockchain, I hope to write more about it in the future. Thank you for taking the time to read.

Building a PhotoShare App Using Auth0, Cloudinary, React.JS and Supabase.

ADESANYA JOSHUA AYODEJI — Sat, 16 Oct 2021 10:34:29 +0000

Photoshare is an application where users can login using Auth0 and share picture that can be viewed by other users using Cloudinary.

Auth0 is an easy to use authentication and authorization platform, it takes away the stress of authentication and authorization during the building process.

Cloudinary is a service that makes life easy when it comes to working with images, you can upload images, resize images, crop images and other cool stuffs without installing any complex software or going through heavy documentation.

Supabase is a firebase alternative, it is very useful in setting up a backend service in few minutes.

Perequisites Knowledge

React Js
CSS

Lets Start Building

Setup React

I am assuming we can setup react on our own. In the case when you are unable to set up react.js on your own, check out this tutorial by freecodecamp - How to setup react js

We need to flesh up our application to make it usable for the demo, i will drop some snippet, all you have to do is replace then in the appropriate files, i will explain where i need to.

index.html

The index.html file is inside the public folder.

Create a component folder inside your src folder, we will be creating few components.

main-nav.js

nav-bar.js

footer.js

loading.js

index.js

We are done with our components, now we need to create pages that will make use of the components.

Create a views folder inside the src folder.

The following pages will be inside the views folder

home.js

profile.js

index.js

We are done with the views folder for now. The only files remaining for us to fill up are index.js, app.js and app.css.

index.js

app.js

app.css

Install Dependencies in react.
@auth0/auth0-react,
@material-ui/core,
@material-ui/icons,
@supabase/supabase-js,
react-router-dom,
date-fns

Add Auth0 to your React Application.

Sign up for a new account if you dont have one, once your signup is done Auth0 takes you to the dashboard, in the left side menu, click on applications.

On the applications page, click on the create application button.

You need to enter the name of the app and choose the application type.
You can use any name you want, we will select the single page web application, this is because we are using react.js.

When you are done, click on the Create button.

The next step is to add some urls on the application settings page.

Make sure you are on the settings page for the application, you just created.
The following fields needs to filled

Allowed Callback URLs
Allowed Logout URLs
Allowed Web Origins

The base url of the application shoud be entered into the fields above i.e localhost:300 or appzone.com. Make sure you save the changes at the bottom of the page.

Add the Auth0 configuration variables to React

Create a .env inside the the src folder, populate the following fields

REACT_APP_AUTH0_DOMAIN=
REACT_APP_AUTH0_CLIENT_ID=

The values can be found on your Auth0 application settings page.

The first one is the domain value from the settings.
The second one is the client value from the settings.

The react application can now be able to interact with the Auth0 authorization server.

Set up the Auth0 React SDK

The Auth0 react dependency has been installed - @auth0/auth0-react

We need to create a auth folder, where we would have all our authentication files.

We need to create a Auth0Provider file inside the auth folder to setup Auth0 for react.

src/auth/auth0-provider.js

We need to integrate the Auth0 provider in the index.js, for that to happen, we need to edit out index.js inside the src folder.

src/index.js

At this point, we can run npm start to start up the application to be sure everything is running fine.

Up next, we will start adding our Login, Signup and Logout button from Auth0.

We will create our login-button.js, signup-button.js and logout-button.js in the components folder.

We made use of the useAuth0 hook, we got the loginWithRedirect from it, which is useful for our login button.

signup-button.js

logout-button.js

We made use of the useAuth0 hook, we got the logout from it, which is useful for our logout button.

Up next, lets integrate our login and logout button, so that when we are logged in we see the logout button and when we are logged out, we see the login button.

authentication-button.js

Here we got the isAuthenticated from our useAuth0 hook, this is needed to track when we are logged in or logged out.

Now, we need to create auth-nav.js which will contain our AuthenticationButton.

auth-nav.js

To bring everything together, lets update the nav-bar.js

nav-bar.js

At this point, we can test our application, you should be able to signup, login and logout using Auth0.

Upnext, we need to secure our routes and access some information from Auth0

We will create protected-route.js in the auth folder.

protected-route.js

We can now protect all our routes in the app.js file.

app.js

At this point, we can test our application, you should not be able to access the home page and login page. it will redirect you to the an Auth0 login modal when you are not logged in.

Setup Cloudinary

If you dont have a cloudinary account, signup on cloudinary.com

First step, we need to add this script to the index.html in the public folder

We need to create two function in the home.js file, we would make use of it inside the file.

The cloudname can be gotten on cloudinary dashboard while the presetname can be gotten settings page, upload tab.

SetUp Supabase

To create a supabase account, go to supabase

After signup is complete, click on new project

Chose the existing organisation.

Fill the create new project form.

Click on the create new project button to complete the form.

The setup process runs for a few minutes.

Once it is done, It will show you the project dashboard, you will see a card which is titled Database, click on the table editor in the card.

Click on create a new table.

Enter the table name and description.

You will also need to add columns to the table, two default columns are already added.

For the columns, you need to enter the name, type(i.e int) and the default value, you can also specify if you want the column to be the Primary Key.

What i choose for the Demo

Table name - Image
Columns (type)

userId (varchar)
image (text)
likes (int)
dislikes(int)
desc(text)

Supabase is good to go and ready to be used.

Intergrate Supabase with React

We will create a client.js file in our src folder.

client.js

To get these detail go the settings page of your supabase dashboard.

For the config_url, you will get it on the config card, the name of the card is config and the name of the detail you need is URL.

For the token, the name of the card is Project API keys and the name of the anon public.

Finish Up App

Home.js

A couple of things is going on in this file but it basically brings together everything we have been working on.

Three important things to note.

we imported supabase from the client.js, this is what we would use to create post and get all the posts.
We are making use of formatDistanceToNow from fns date package to get relative date.
We are import useAuth0 form Auth0 package. This is where we get the user information such as name, unique id and picture.

We also added our two cloudinary powered functions, this is what is triggered when the image button is clicked and it pops up the cloudinary widget which we willl use to upload our image.

We also have two other functions powered by supabase, the first one is the create post, which is called when we submit our post, we also have the getAllImages function which triggers when the page reloads or when a post is created.

We also make use of useState to keep track of our states, useEffect to run functions when a page is reloaded and useRef to get data from elements.

We also obviously added some html and css to make it look a little bit nice.

I hope you have been able to learn a few things from the tutorial and the code snippets, in order to solidify your knowledge, you can complete the profile page, by displaying the user data and only the user’s posts on the page.

Thank You.

Link to the demo - https://jbwym.csb.app/

Content created for the Hackmamba Jamstack Content Hackathon with Auth0 and Cloudinary.

How to create a Todo CLI App with Node JS.

ADESANYA JOSHUA AYODEJI — Tue, 24 Nov 2020 13:34:53 +0000

Node JS is very versatile and can be used to develop application on the web, mobile and even on the command line interface.

This tutorial will be focusing on building a Todo App on the command line interface.

In order for us to us develop CLI Application, we need to be able to collect input from the CLI, we can collect inputs in nodejs by using the process.argv.

Step 1.
Open your preferred code terminal and navigate to the folder that will contain your application.

Run npm init -y to initiate your node app and get your started.

Your folder should now contain a package.json.

Lets test how process.argv works

Create a file, name the file app.js, inside the file, write console.log(process.argv).

Run the node app by typing node app.js Your Name on the terminal.

The result we got is an array that contains 3 things

Path to the node executable file
Path to the file, we are trying to run
The argument we added (Your Name)

This means that our first argument from the command line can be gotten by typing process.arg[2], subsequent argument will be 3, 4 and so on.

We would not be using process.argv to build our CLI App, i just showed you so you can know what happens behind the scene in the package we are about to use.

We would make use of the yargs package - https://www.npmjs.com/package/yargs

Step 2:

Install Yargs -run npm install yargs

Yargs is now up, lets set it up.

We can delete the console.log(process.argv).

Add yargs to app.js

const yargs = require("yargs");

The yargs object has a method command which takes in an object, the object has properties such as command, describe, builder, and handler.

The command property is the argument that triggers the handler function.
The describe property explains what our command is trying to do. The builder property helps us to describe our other argument, from the image above, we have two additional argument, title and todo, and lastly the handler contains the function we want to run, in this case it is the add a new todo.

The next question is how do we run it.

To run a command in our CLI APP, we type node app.js add --title="coding" --todo="code a new app".

For this to run successfully, we need to add a yargs.parse(); at the end of the our file app.js.

We were able to trigger the handler function using the command in the image below and inside the handler function, we have a console.log(argv), which logs out the title and body, now that we have access to them we can start implementing our logic.

We need to create another file which will contain all the business logic needed for this application to work. lets name it utils.js

What do we need

Create todo
List todos
Display one todo
Delete todo

We also need to store the todos somewhere, we would store them in a json file, this will make it possible for us to save and retrieve all the todos. We would also need the node fs module in order to write and read from the json file.

we can actually abstract the code above to make it more clean but i am trying to limit the number of functions i will write for the purpose of this tutorial.

Up next, we need to create another function to List all the available todos.

Up next, we need to create a function to display a specific todo.

Up, next, we need to create a function to delete a todo.

We have all of our four function ready, it is time to integrate them into our CLI Application.

Step 3

In order for us to have access to our functions in app.js, we need to export our functions.

Setup Yargs for create todo

The createTodo function has been added to the handler.

To test this - run node app.js add --title="code" --todo="code by night"

Setup Yargs to get all todos

The listTodo function has been added to the handler.

To test this - run node app.js list

Setup Yargs to get one todo

The getOneTodo function has been added to the handler.

To test this - run node app.js read --title="code"

Setup Yargs to delete todo

The deleteTodo function has been added to the handler.

To test this - run node app.js delete --title="code"

How to improve the app.

Abstract the code, their is a lot of code repetition, extrat them and make it a function.
Make the console better by decorating it, instead of consoling objects, you can just console the todos.
Be creative.

Link to full code on github
https://github.com/Josh4324/Todo-CLI-APP-NodeJs

Understanding Javascript array methods Time complexity (BIG O Notation).

ADESANYA JOSHUA AYODEJI — Sat, 15 Aug 2020 14:56:53 +0000

This is my first post, i hope you learn something.

To explain big o notation, let me use an example, lets say we have to solve a problem or build something, we need an algorithm, algorithm is just a step by step instruction telling the computer what to do.

Most of the time if not all the time, there are more than one way for getting the desired result, wont it be nice if there is a way of comparing two or more algorithm to know which one is better.

This is exactly what BIG O Notation does. it basically compares using the time complexity or space complexity.

It is not perfect but it gives us a simplified view of the worst case scenario when comparing two algorithm or knowing how good your current solution or algorithm is doing.

I will list and discuss some of them briefly

Constant Time O(1) - When you code an algorithm and it runs in the same time or space regardless of the inputs you used. We can say that the algorithm runs at constant time.

What javascript array methods runs at constant time?

PUSH
POP

Push adds an item to the end of an array
Pop removes an item at the end of an array

Since both actions do not affect the index of the array in anyway they are done at constant time which means that, it does not matter how large an array, the time it takes to remove and add an item will always be the same.

Linear time O(N) - When you code an algorithm and the time or space it takes to run is directly proportional to the inputs used. This means that increasing the inputs of the algorithm will increase the time or space it takes to run. For illustration purposes, if using an array with 10 items will take 1 minute to run, using an array wit 20 items will take 2 minutes to run.

What javascript array methods runs at Linear time?

Shift
Unshift
Concat
Slice
Splice
Foreach
Map
Filter
Reduce

But shift and unshift does almost the same thing as push and pop, why are they not using constant time. Well shift and unshift affects the index of the array. shift removes the first element of an array while unshift add an element to the beginning of an array. This leads to extra work to change the index for all the items in the array. i just heard someone say loops. Yes you are right, that sounds like the work for a loop and anytime a single loop is involved, you are probably using a linear time because the length of the input matters. The higher the inputs, the more time it takes. Foreach, reduce, filter, splice, slice all makes use of loops under the hood.

Quadratic Time O(N^2) - When you code an algorithm and the time or space it takes to run is directly proportional to the square the size of the inputs used. i dont think it is clear enough so lets say you have a loop then you have another loop inside the first loop, this will lead to you having an algorithm with a quadratic time complexity.I always try to avoid using nested loops.

What javascript array methods runs at Quadratic time?

None ? well if you know one let me know in the comments

There are other types like O(Log N). I dont really know how to explain that well enough, maybe next time.

THANK YOU FOR READING

DEV Community: ADESANYA JOSHUA AYODEJI

Web3 and DAOs: Empowering Individuals and Disrupting Traditional Structures

DAOs and Web3

Benefits of DAOs and Web3

Application of DAOs and Web3

Challenges of DAOs and Web3

Examples of DAOs

Conclusion

References

Hashing in Blockchain Technology: How it Ensures Data Integrity

Blockchain Technology

Hashing

Hashing in Blockchain Technology

Data Integrity

Conclusion

References

Building a FileStorage Application using Xata, Cloudinary, and NextJs.

Check out the Live demo of the application we will create.

Prerequisite

Tech Stack

Table of Contents

Project Setup and Installation

Connecting Cloudinary to the application

Connecting Xata to the application

Conclusion

Web2 vs Web3

A Friendly Beginner's Guide to Solidity (Part Two)

Functions

Returning Multiple Values

Conditional statements and Loops

Generating random numbers

Imports

Inheritance

Events

Addresses

Mappings

Msg.sender

Constructors

Function modifiers

A Friendly Beginner's Guide to Solidity (Part One)

Prerequisites

Introduction

What is Solidity?

What is Ethereum?

What is an Ethereum Virtual Machine (EVM)?

What is a Smart Contract?

Let's get started!

Contracts

State Variables

Data Types

Structs

Arrays

Functions

TypeCasting

Conclusion

Nft For Beginners

Blockchain for Beginners

What is Blockchain?

What is Cryptocurrency?

How does Blockchain work?

How does the nodes or network of computer confirm the validity of the transaction?

What is a consensus mechanism?

Proof of Work

Proof of Stake

What does the bitcoin transaction process look like?

Building a PhotoShare App Using Auth0, Cloudinary, React.JS and Supabase.

Setup React

Add Auth0 to your React Application.

Setup Cloudinary

SetUp Supabase

Finish Up App

How to create a Todo CLI App with Node JS.

Understanding Javascript array methods Time complexity (BIG O Notation).