Forem: Majid Kareem

A Beginner-Friendly Roadmap to Learning AI: From Zero to Expert

Majid Kareem — Thu, 26 Feb 2026 10:10:21 +0000

Artificial Intelligence can feel overwhelming when you’re just getting started. There are countless courses, tools, and buzzwords: LLMs, agents, MLOps, RAG and it’s not always clear what to learn first or how everything fits together.

If you’re looking for a clear, structured learning path, Ed Donner’s Udemy courses form a practical roadmap that takes you from AI beginner to advanced practitioner, with a strong focus on real-world applications.

Below is a simple, progressive guide, starting with non-technical foundations and ending with production-ready AI systems.

Note: All recommendations are paid courses.

1. AI Strategy & Foundations (Beginner / Non-Technical)

Executive Briefing: Generative AI & Large Language Models

This course is ideal if you’re completely new to AI or coming from a business, product, or leadership background. It explains what Generative AI and LLMs are, why they matter, and how organizations can use them without requiring any coding.

You’ll learn:

What Generative AI and LLMs actually do
Real-world business use cases
The difference between hype and practical value
How AI is changing workflows and decision-making

Best for:

Beginners, founders, managers, consultants, and anyone who wants context before diving into code.

2. Core LLM Engineering (Beginner → Intermediate)

LLM Engineering: Master AI, Large Language Models & Agents

This is the core technical foundation of Ed Donner’s AI curriculum. Even if you’re relatively new to programming, the course walks you step-by-step through building real applications with Large Language Models.

You’ll learn:

How LLMs work in practice
Prompt engineering and structured outputs
Retrieval-Augmented Generation (RAG)
Building chatbots and AI assistants
Using modern AI frameworks and tools

Why this course matters:

It bridges the gap between “I understand AI conceptually” and “I can actually build something with it.”

3. Agentic AI Systems (Intermediate)

The Complete Agentic AI & MCP Course

Once you understand LLM fundamentals, the next step is agentic AI systems that can reason, plan, and take actions autonomously.

This course focuses on building AI agents that go beyond simple chat interfaces and start behaving like intelligent collaborators.

You’ll learn:

What agentic AI is and why it matters
Designing multi-step reasoning systems
Tool-calling and action-taking agents
Coordinating multiple agents together
Real-world agent use cases

Best for:

Developers and builders who want to create more autonomous, powerful AI applications.

4. Production-Ready AI & MLOps (Advanced / Expert)

AI Engineering & MLOps: Deploy AI Systems to Production

This is the expert-level stage of the journey. Many people can build AI demos, but far fewer know how to deploy, scale, and maintain AI systems in real environments.

This course focuses on taking AI from prototype to production.

You’ll learn:

Deploying AI systems in the cloud
Scaling LLM applications reliably
Monitoring, logging, and performance optimization
MLOps best practices for Generative AI
Building production-grade AI pipelines

Why this matters:

If you want to work professionally with AI or deploy AI products for users , this is the missing piece most courses never cover.

How to Follow This Learning Path

A simple way to approach these courses:

Start with AI strategy if you’re new or non-technical
Build strong LLM fundamentals with hands-on projects
Advance into agentic systems for more intelligent applications
Finish with MLOps to deploy and scale AI in the real world

You don’t need to rush, each step builds naturally on the previous one.

Final Thoughts

Ed Donner’s Udemy courses stand out because they focus on practical, modern AI, not outdated theory. Whether your goal is to:

Transition into AI engineering
Build AI-powered products
Understand AI as a business leader
Or deploy real systems at scale

This roadmap gives you a clear, beginner-friendly path from first concepts to expert-level execution.

Feel free to comment and I'll add your recommendations to the list.

What is EIP2612 and How to Implement EIP2612 in NextJS?

Majid Kareem — Wed, 09 Oct 2024 09:58:33 +0000

To implement EIP-2612 in a Next.js application, you need to handle both the off-chain signature creation and the on-chain execution of the permit function followed by the transferFrom. Below is a detailed step-by-step guide on how to achieve this using ethers.js in your Next.js app.

Step 1: Set Up the Next.js Project

Ensure your Next.js project is set up. If not, you can create one using:

npx create-next-app my-eip2612-app
cd my-eip2612-app

Step 2: Install Required Dependencies

Install ethers.js to interact with Ethereum blockchain:

npm install ethers

Step 3: Create a Permit Component

Create a Next.js component that will handle both the off-chain signing of the permit and the on-chain execution of permit and transferFrom.

Component Structure

Sign the Permit: This part is done off-chain by the token owner using their private key via a connected wallet like MetaMask.
Execute Permit and Transfer: This is done on-chain by the spender, which involves calling the permit function followed by the transferFrom function.

PermitComponent.js

Create a file named PermitComponent.js inside your components folder:

// components/PermitComponent.js
import { ethers } from "ethers";
import { useEffect, useState } from "react";

// Replace with the ABI of your ERC20 token with permit functionality
const ERC20_ABI = [
  "function permit(address owner, address spender, uint256 value, uint256 deadline, uint8 v, bytes32 r, bytes32 s) external",
  "function transferFrom(address sender, address recipient, uint256 amount) external returns (bool)",
  "function nonces(address owner) external view returns (uint256)",
  "function DOMAIN_SEPARATOR() external view returns (bytes32)"
];

export default function PermitComponent() {
  const [provider, setProvider] = useState(null);
  const [signer, setSigner] = useState(null);
  const [owner, setOwner] = useState("");
  const [spender, setSpender] = useState("");
  const [value, setValue] = useState(0);
  const [deadline, setDeadline] = useState(Math.floor(Date.now() / 1000) + 3600); // 1 hour from now
  const [tokenAddress, setTokenAddress] = useState("0xYourTokenAddressHere"); // Replace with your token address

  useEffect(() => {
    // Initialize provider and signer when the component mounts
    const initializeProvider = async () => {
      if (window.ethereum) {
        const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
        await web3Provider.send("eth_requestAccounts", []); // Request access to user accounts
        setProvider(web3Provider);
        const web3Signer = web3Provider.getSigner();
        setSigner(web3Signer);
        const accounts = await web3Provider.listAccounts();
        setOwner(accounts[0]);
      } else {
        console.error("Please install MetaMask!");
      }
    };

    initializeProvider();
  }, []);

  const handlePermitAndTransfer = async () => {
    try {
      if (!provider || !signer || !tokenAddress) {
        console.error("Provider, signer, or token address not set");
        return;
      }

      const tokenContract = new ethers.Contract(tokenAddress, ERC20_ABI, signer);
      const nonce = await tokenContract.nonces(owner);
      const domainSeparator = await tokenContract.DOMAIN_SEPARATOR();

      // EIP712 Domain and Permit Type Definitions
      const domain = {
        name: "My Token", // Replace with your token's name
        version: "1",
        chainId: (await provider.getNetwork()).chainId,
        verifyingContract: tokenAddress
      };

      const types = {
        Permit: [
          { name: "owner", type: "address" },
          { name: "spender", type: "address" },
          { name: "value", type: "uint256" },
          { name: "nonce", type: "uint256" },
          { name: "deadline", type: "uint256" }
        ]
      };

      const message = {
        owner,
        spender,
        value: ethers.utils.parseUnits(value.toString(), 18),
        nonce: nonce.toNumber(),
        deadline
      };

      // Sign the typed data
      const signature = await signer._signTypedData(domain, types, message);
      const { v, r, s } = ethers.utils.splitSignature(signature);

      // 1. Call permit function with the signed data
      const permitTx = await tokenContract.permit(owner, spender, message.value, deadline, v, r, s);
      await permitTx.wait(); // Wait for the permit transaction to be mined
      console.log("Permit transaction confirmed:", permitTx);

      // 2. Now call transferFrom to move the tokens
      const transferTx = await tokenContract.transferFrom(owner, spender, message.value);
      await transferTx.wait(); // Wait for the transfer transaction to be mined
      console.log("Transfer transaction confirmed:", transferTx);

      alert("Tokens successfully transferred!");
    } catch (error) {
      console.error("Error executing permit and transfer:", error);
    }
  };

  return (
    <div>
      <h1>EIP-2612 Permit and Transfer</h1>
      <input
        type="text"
        placeholder="Spender Address"
        value={spender}
        onChange={(e) => setSpender(e.target.value)}
      />
      <input
        type="number"
        placeholder="Amount"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button onClick={handlePermitAndTransfer}>Execute Permit and Transfer</button>
    </div>
  );
}

Step 4: Use the Permit Component in Your Application

You can now import and use the PermitComponent in your Next.js pages.

Example Usage in a Next.js Page

Create a file named index.js inside your pages folder:

// pages/index.js
import PermitComponent from "../components/PermitComponent";

export default function Home() {
  return (
    <div>
      <h1>Next.js EIP-2612 Implementation</h1>
      <PermitComponent />
    </div>
  );
}

Step 5: Run the Application

Run your Next.js application:

npm run dev

Explanation of Key Steps

Provider and Signer Initialization:
- A Web3 provider and signer are set up to interact with the blockchain using MetaMask.
Signature Creation (Off-Chain):
- The signer._signTypedData() method creates an EIP-712 compliant signature without spending gas, allowing the token owner to authorize the transfer off-chain.
Execution of permit and transferFrom (On-Chain):
- The permit transaction is submitted to the blockchain, granting approval.
- The transferFrom function is called immediately after, using the permit to transfer the tokens.

Considerations

Gas Costs: The spender (or anyone calling permit) will pay gas for the on-chain transactions.
Error Handling: Ensure proper error handling to manage failed transactions or signature errors.
Security: Ensure the signer correctly signs the permit and that domain data is accurate to avoid replay attacks.

This setup provides a practical way to leverage EIP-2612 in a Next.js application, enhancing user experience by reducing redundant on-chain transactions.

10 Youtube channels to enhance your skills as a frontend developer

Majid Kareem — Mon, 11 Dec 2023 06:08:44 +0000

If you are a frontend developer or aspiring to become one, you might be looking for some resources to improve your skills and learn new techniques. YouTube is a great platform to find tutorials, tips, and inspiration from experts and peers in the field. Here are 10 YouTube channels that can help you enhance your frontend development skills.

Traversy Media: This channel offers a variety of web development and programming tutorials, ranging from beginner to advanced levels. You can learn about HTML, CSS, JavaScript, React, Angular, Vue, Bootstrap, and more. The videos are clear, concise, and engaging.
Dev Ed: Dev Ed is a fun and creative channel that teaches web development and design with humor and personality. You can learn how to create websites, apps, games, animations, and more using HTML, CSS, JavaScript, React, Node.js, etc. The channel also features some challenges and reviews of other developers' projects.
The Net Ninja: The Net Ninja is a channel that provides high-quality tutorials on web development and other related topics. You can learn about HTML, CSS, JavaScript, React, Vue, Firebase, MongoDB, and more. The channel also has some playlists on web design, UI/UX, and accessibility.
Web Dev Simplified: Web Dev Simplified is a channel that aims to simplify web development concepts and make them easy to understand. You can learn about HTML, CSS, JavaScript, React, TypeScript, algorithms, data structures, and more. The channel also has some videos on web development best practices and common mistakes.
DesignCourse: DesignCourse is a channel that focuses on web design and UI/UX. You can learn how to design beautiful and user-friendly websites and apps using tools like Adobe XD, Figma, Photoshop, etc. The channel also has some videos on web development using HTML, CSS, JavaScript, etc.
Coding Tech: Coding Tech is a channel that curates the best talks from tech conferences and events around the world. You can watch presentations from experts and leaders in the web development industry on topics like HTML, CSS, JavaScript, React, Vue, Angular, GraphQL, etc.
Academind: Academind is a channel that offers in-depth and comprehensive tutorials on web development and programming. You can learn about HTML, CSS, JavaScript, React, Angular, Vue, Node.js, MongoDB, Flutter, etc. The channel also has some courses on web development fundamentals and advanced topics.
freeCodeCamp.org: freeCodeCamp.org is a channel that provides free courses and certifications on web development and other programming topics. You can learn about HTML, CSS, JavaScript, React, D3.js, Python, etc. The channel also has some videos on web development projects and interviews.
Kevin Powell: Kevin Powell is a channel that teaches web development and design with a focus on CSS. You can learn how to style websites and apps using CSS grid, flexbox, animations, transitions, variables, etc. The channel also has some videos on HTML, JavaScript, Sass, etc.
Codevolution: Codevolution is a channel that teaches web development with a focus on React. You can learn how to use React hooks, custom hooks, context API, Redux, Next.js, Gatsby, etc. The channel also has some videos on JavaScript, TypeScript, GraphQL, etc.

If you have more suggestions, please drop them in the comment section

Additional channels as suggested in the comments

Programmingwithmosh: Programming with Mosh provides comprehensive tutorials on various programming topics, with a specialization in web development. The channel covers in-depth lessons on React, including topics such as React hooks, custom hooks, context API, Redux, Next.js, Gatsby, and more. Additionally, you'll find valuable content on JavaScript, TypeScript, GraphQL, and other essential programming concepts.

Coding and testing as related to Blockchain security

Majid Kareem — Mon, 11 Dec 2023 05:46:58 +0000

Introduction

Coding and testing are essential aspects of blockchain security, as they ensure the reliability and robustness of smart contracts and decentralized applications. In this blog post, we will explore some of the challenges and best practices of coding and testing for blockchain security, and introduce some of the tools that can help developers achieve this goal.

Blockchain security is a complex and multidimensional topic, as it involves not only the technical aspects of cryptography, consensus algorithms, and network protocols, but also the economic and social aspects of incentives, governance, and user behavior. Moreover, blockchain security is not static, but dynamic and evolving, as new threats and vulnerabilities emerge over time.

Challenges of coding and testing

One of the main challenges of coding and testing for blockchain security is the high cost of failure. Unlike traditional software development, where bugs can be fixed with patches and updates, blockchain code is often immutable and irreversible, meaning that any mistake or flaw can have permanent and catastrophic consequences. For example, in 2016, a hacker exploited a vulnerability in the DAO smart contract, a decentralized autonomous organization built on Ethereum, and drained more than $50 million worth of ether from its funds. The incident led to a controversial hard fork of Ethereum to restore the stolen funds, which resulted in a split of the community and the creation of Ethereum Classic.

Another challenge of coding and testing for blockchain security is the diversity and complexity of the attack vectors. Blockchain code can be vulnerable to various types of attacks, such as reentrancy, front-running, overflow/underflow, denial-of-service, phishing, Sybil, eclipse, and more. Some of these attacks are specific to blockchain technology, while others are common to any software system. Moreover, some of these attacks can be executed by malicious actors within the system, such as miners, validators, or users, while others can be executed by external adversaries, such as hackers or regulators.

To address these challenges, developers need to adopt a rigorous and systematic approach to coding and testing for blockchain security. This involves following some of the best practices of secure software development, such as:

Applying the principle of least privilege, which means granting the minimum amount of access and permissions necessary for each function or user.
Applying the principle of defense in depth, which means implementing multiple layers of security measures to protect against different types of threats.
Applying the principle of simplicity, which means avoiding unnecessary complexity and keeping the code as clear and concise as possible.
Applying the principle of transparency, which means making the code open-source and verifiable by anyone.
Applying the principle of auditability, which means subjecting the code to regular and independent reviews by experts.

In addition to these general principles, developers can also leverage some of the tools that are designed specifically for coding and testing for blockchain security. These tools can help developers detect and prevent common vulnerabilities, optimize performance and gas efficiency, and verify the correctness and compliance of their code. Some examples of these tools are:

MythX: MythX is a security analysis platform for Ethereum smart contracts. It integrates with various development frameworks and tools, such as Truffle, Remix, Hardhat, Brownie, and VS Code. It performs static analysis, dynamic analysis, symbolic execution, fuzzing, and property-based testing to identify potential security issues in smart contract code. It also provides detailed reports with severity levels, descriptions, locations, and remediation suggestions for each issue.
Slither: Slither is a static analysis framework for Solidity smart contracts. It detects vulnerabilities such as reentrancy, uninitialized storage pointers, shadowing state variables, incorrect inheritance order, dangerous delegate calls, and more. It also provides metrics such as cyclomatic complexity, number of variables per function, number of dependencies per contract, etc. Slither can be used as a command-line tool or as a library for custom analysis.

if you have other useful tools that can be used to ensure the security of blockchain codes, feel free to drop them in the comment section.

Intro to Blockchain Security

Majid Kareem — Mon, 11 Dec 2023 05:41:06 +0000

Introduction

Blockchain security is a crucial aspect of ensuring the reliability, trustworthiness, and resilience of blockchain networks and transactions. Blockchain security involves applying various risk management techniques, cybersecurity frameworks, assurance services, and best practices to protect the blockchain system from attacks and fraud.

Blockchain networks are based on distributed ledger technology (DLT), which allows multiple nodes to share and validate data without relying on a central authority. This decentralized and transparent nature of blockchain offers many benefits, such as:

Enhanced data integrity: Blockchain data is immutable, meaning that once it is recorded, it cannot be altered or deleted without leaving a trace. This ensures the authenticity and verifiability of the data and prevents tampering or corruption.
Improved efficiency: Blockchain transactions are faster, cheaper and more scalable than traditional transactions, as they eliminate intermediaries and reduce transaction costs and delays.
Increased trust: Blockchain transactions are secured by cryptographic mechanisms, such as digital signatures and hash functions, which ensure that only authorized parties can access and modify the data. Moreover, blockchain transactions are visible to all nodes in the network, creating a high level of transparency and accountability.

However, blockchain security is not without challenges. Blockchain networks are vulnerable to various types of attacks and threats, such as:

51% attack: This occurs when a malicious actor gains control of more than 50% of the network's computing power, allowing them to manipulate the consensus mechanism and reverse or double-spend transactions.
Sybil attack: This occurs when a malicious actor creates multiple fake identities or nodes in the network, allowing them to influence the network's behavior or disrupt its functionality.
Smart contract vulnerabilities: Smart contracts are self-executing agreements that run on blockchain platforms, such as Ethereum. However, smart contracts may contain coding errors or bugs that can be exploited by hackers or malicious users to manipulate or steal funds or data.
Data breaches: Blockchain data is encrypted and distributed across multiple nodes, making it difficult to access or compromise. However, blockchain data may still be exposed or leaked if the nodes or endpoints are not properly secured or the encryption keys are stolen or lost.

To address these challenges, blockchain security requires a holistic and proactive approach that covers various aspects of the blockchain system, such as:

Network governance: This involves establishing clear rules and protocols for the operation and maintenance of the blockchain network, such as node selection, consensus mechanism, transaction validation, and dispute resolution.
Coding and testing: This involves ensuring that the blockchain code and smart contracts are well-designed, error-free, and secure, using tools such as code analysis, debugging, and auditing.
Data security: This involves protecting the blockchain data from unauthorized access or modification, using techniques such as encryption, authentication, authorization, and backup.
Monitoring and detection: This involves tracking and analyzing the blockchain network's performance and activity, using tools such as metrics, logs, and alerts.
Response and recovery: This involves responding to and mitigating potential incidents or attacks on the blockchain network, using tools such as incident management, forensics, and backup.

Blockchain security is an evolving and dynamic field that requires constant research and innovation. Blockchain security experts need to keep up with the latest developments and trends in blockchain technology and cybersecurity, as well as collaborate with other stakeholders in the blockchain ecosystem. By doing so, they can ensure that blockchain networks are secure, reliable, and trustworthy for various applications and use cases.

References:

[1] What is Blockchain Security? | IBM
[2] What is Blockchain Security? - GeeksforGeeks
[3] How Effective Is Blockchain in Cybersecurity? - ISACA

Essential AI Tools to Boost Your Productivity as a Frontend developer

Majid Kareem — Sun, 12 Nov 2023 11:15:46 +0000

Introduction

As a front-end developer, you know how challenging and time-consuming it can be to create engaging and responsive web applications. You have to deal with complex layouts, animations, user interactions, accessibility, performance, and more. But what if you could use some AI tools to make your life easier and boost your productivity? In this blog post, we will introduce you to some essential AI tools that can help you with various aspects of frontend development, such as design, testing, optimization, and deployment. Let's get started!

Design

One of the most important and creative parts of frontend development is design. You want to create a beautiful and intuitive user interface that matches your client's vision and user's needs. But sometimes, you may struggle with finding the right colors, fonts, icons, images, or layouts for your web pages. That's where AI tools can come in handy. Here are some examples of AI tools that can help you with design:

Wix ADI: This is an AI-powered website builder that can create a stunning and personalized website for you in minutes. You just have to answer a few questions about your business or project, and Wix ADI will generate a website that suits your style and needs. You can then customize it further with your own content and features.
Adobe Sensei: This is a collection of AI and machine learning features that are integrated into various Adobe products, such as Photoshop, Illustrator, XD, and Spark. Adobe Sensei can help you with tasks such as image editing, vector graphics, prototyping, animation, and more. For example, you can use Photoshop's Content-Aware Fill to remove unwanted objects from your images, or use Illustrator's Image Trace to convert raster images into vector graphics.
Tailor Brands: This is an AI-powered logo maker that can create a unique and professional logo for your brand in minutes. You just have to enter your brand name and industry, and Tailor Brands will generate a logo that reflects your identity and personality. You can then customize it further with different fonts, colors, icons, and shapes.

Testing

Another crucial part of frontend development is testing. You want to make sure that your web application works well on different browsers, devices, screen sizes, and network conditions. You also want to ensure that your web application is bug-free, secure, and user-friendly. But testing can be tedious and time-consuming, especially if you have to do it manually. That's why AI tools can be very helpful for testing. Here are some examples of AI tools that can help you with testing:

Applitools: This is an AI-powered visual testing platform that can help you detect and fix UI bugs across browsers and devices. Applitools uses computer vision to compare screenshots of your web pages and identify any visual differences or anomalies. You can then review the results and approve or reject the changes.
Testim: This is an AI-powered end-to-end testing platform that can help you create and execute automated tests for your web applications. Testim uses machine learning to learn from your actions and generate stable and reusable test cases. You can then run the tests on different browsers and devices using Testim's cloud infrastructure.
Mabl: This is an AI-powered testing service that can help you test the functionality and performance of your web applications. Mabl uses natural language processing to understand your user journeys and generate automated tests based on them. You can then run the tests on different browsers and devices using Mabl's cloud infrastructure.

Optimization

One more important aspect of frontend development is optimization. You want to make sure that your web application loads fast, consumes less bandwidth, and delivers a smooth user experience. But optimization can be tricky and complex, especially if you have to deal with large files, images, videos, or animations. That's why AI tools can be very useful for optimization. Here are some examples of AI tools that can help you with optimization:

Cloudinary: This is an AI-powered media management platform that can help you optimize the delivery of your images and videos on the web. Cloudinary uses machine learning to analyze your media files and apply the best compression, format, quality, resolution, and cropping for each device and browser. You can also use Cloudinary's transformations to apply effects, filters, overlays, watermarks, and more to your media files.
Lighthouse: This is an AI-powered performance analysis tool that can help you measure and improve the quality of your web pages. Lighthouse uses machine learning to audit your web pages based on various metrics, such as performance, accessibility, best practices, SEO, and PWA. You can then use Lighthouse's recommendations to optimize your web pages for speed, usability, and user satisfaction.
Unscreen: This is an AI-powered background removal tool that can help you create transparent videos for your web applications. Unscreen uses machine learning to detect the foreground and background of your videos and remove the background automatically. You can then download the transparent videos or use Unscreen's integrations to add them to your web pages.

Deployment

The final step of frontend development is deployment. You want to make sure that your web application is accessible and available to your users on the web. But deployment can be challenging and costly, especially if you have to deal with hosting, servers, domains, SSL, CDN, and more. That's why AI tools can be very beneficial for deployment. Here are some examples of AI tools that can help you with deployment:

Netlify: This is an AI-powered web development platform that can help you deploy your web applications with ease. Netlify uses machine learning to automate the deployment process and provide you with features such as continuous integration, continuous delivery, serverless functions, forms, identity, analytics, and more. You can also use Netlify's integrations to connect your web applications with various services and tools.
Vercel: This is an AI-powered web development platform that can help you deploy your web applications with speed. Vercel uses machine learning to optimize the deployment process and provide you with features such as edge network, serverless functions, preview deployments, custom domains, SSL, CDN, and more. You can also use Vercel's integrations to connect your web applications with various frameworks and technologies.
Firebase: This is an AI-powered web development platform that can help you deploy your web applications with scale. Firebase uses machine learning to enhance the deployment process and provide you with features such as hosting, authentication, database, storage, functions, analytics, messaging, and more. You can also use Firebase's integrations to connect your web applications with various services and tools.

Conclusion

As you can see, there are many AI tools that can help you boost your productivity as a frontend developer. These tools can help you with various aspects of frontend development, such as design, testing, optimization, and deployment. By using these tools, you can save time, money, and effort, and focus on creating amazing web applications for your users. So why not give them a try and see for yourself how they can improve your frontend development workflow?

Your insights are invaluable! Share your suggestions and any new tools you've discovered in the comments section.

Common mistakes to avoid when using React Hooks

Majid Kareem — Sun, 12 Nov 2023 10:46:38 +0000

Introduction

React Hooks are a powerful feature of React that allow you to use state and other React features without writing a class component. They can simplify your code, make it more reusable, and enable better performance. However, they also come with some challenges and pitfalls that you need to be aware of. In this blog post, I will show you how to use React Hooks effectively and avoid some common mistakes.

What are React Hooks?

React Hooks are functions that let you "hook into" React state and lifecycle features from function components. They also let you create your own custom hooks to share reusable stateful logic between components.

There are two main types of hooks: built-in hooks and custom hooks. Built-in hooks are provided by React and include useState, useEffect, useRef, useContext, useReducer, useMemo, useCallback, and useImperativeHandle. Custom hooks are user-defined functions that start with "use" and can call other hooks inside them.

Why use React Hooks?

React Hooks have several benefits over class components:

They reduce the amount of boilerplate code you need to write, such as constructors, binding methods, and lifecycle methods.
They make it easier to reuse stateful logic between components, without relying on higher-order components or render props.
They allow you to split your code into smaller functions based on related functionality, rather than forcing a split based on lifecycle methods.
They enable better performance optimizations, such as memoizing values and avoiding unnecessary re-renders.

How to use React Hooks effectively?

To use React Hooks effectively, you need to follow some rules and best practices. Here are some of them:

Only call hooks at the top level of your function component. Don't call them inside loops, conditions, or nested functions. This ensures that the hooks are called in the same order every time your component renders.
Only call hooks from React function components or custom hooks. Don't call them from regular JavaScript functions or class methods. This ensures that the hooks have access to the correct React context and state.
Use the array argument of useEffect to specify the dependencies of your effect. This tells React when to run your effect and when to skip it. If you omit the array argument, your effect will run after every render. If you pass an empty array, your effect will run only once after the initial render.
Use custom hooks to extract and reuse stateful logic between components. A custom hook should start with "use" and return a value or an object with values. You can call other hooks inside your custom hook, but don't call your custom hook inside another hook.
Use useCallback to memoize functions that depend on props or state. This prevents unnecessary re-creations of the same function on every render, which can cause performance issues and bugs.
Use useMemo to memoize expensive calculations that depend on props or state. This prevents unnecessary re-computations of the same value on every render, which can also cause performance issues and bugs.

How to avoid common pitfalls with React Hooks?

React Hooks can also introduce some pitfalls and challenges that you need to be careful about. Here are some of them:

Don't use setState inside useEffect without a dependency array. This can create an infinite loop of updates and re-renders, which can crash your app or cause memory leaks.
Don't use stale props or state inside useEffect or useCallback. This can lead to inconsistent or incorrect behavior of your component. To avoid this, use useRef to store the latest props or state values, or use functional updates to access the current state value.
Don't forget to clean up your effects. If your effect creates any subscriptions, listeners, timers, or other resources that need to be disposed of when the component unmounts, you need to return a cleanup function from your effect that does that. Otherwise, you may cause memory leaks or errors in your app.
Don't mutate state directly. Always use setState or useReducer to update your state in a functional way. Mutating state directly can cause bugs and unexpected behavior in your component.

Conclusion

React Hooks are a great way to use state and other React features in function components. They can make your code simpler, more reusable, and more performant. However, they also require some discipline and attention to avoid common pitfalls and mistakes. By following the rules and best practices outlined in this blog post, you can use React Hooks effectively and confidently in your React projects.

Promises, Async/await in JavaScript

Majid Kareem — Sat, 19 Aug 2023 11:31:45 +0000

Promises and async/await are important concepts in JavaScript for managing asynchronous operations.

What are Promises?
Promises are a way to handle asynchronous operations in a more organized manner. They represent a value that might be available now, or in the future, or never. A Promise has three states: pending, fulfilled, or rejected. It's a container for an operation that may complete in the future and can be used to handle both successful and failed outcomes.

What is Async/await?

Async/await is a more modern and readable way to work with asynchronous code. The async keyword is used to define a function that returns a Promise. Inside an async function, you can use the await keyword to pause execution until the Promise is fulfilled or rejected. This allows you to write asynchronous code in a more synchronous style, making it easier to understand and maintain.

Here's a simple example of using Promises and async/await in JavaScript:

// Using Promises
function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, username: 'example' };
      // Simulating a successful fetch
      resolve(data);
      // Simulating an error
      // reject(new Error('Failed to fetch'));
    }, 1000);
  });
}

fetchUserData()
  .then(data => console.log('User data:', data))
  .catch(error => console.error('Error:', error));

// Using async/await
async function getUserData() {
  try {
    const data = await fetchUserData();
    console.log('User data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
}

getUserData();

In the above example, both fetchUserData and getUserData deal with asynchronous operations. The Promises version uses then and catch to handle results and errors, while the async/await version makes the code flow more naturally, similar to synchronous code.Overall, Promises and async/await are powerful tools in JavaScript that make managing asynchronous code more intuitive and maintainable.

Pros of using Async/await?
Async/await offers several advantages when it comes to writing asynchronous code in JavaScript:

Readability and Maintainability: Async/await makes asynchronous code look and feel more like synchronous code. This makes the code easier to read, understand, and maintain, as it follows a linear flow of execution.
Error Handling: Error handling with async/await is more straightforward. You can use try-catch blocks to handle both synchronous and asynchronous errors in a single location, which improves code organization and makes it easier to manage errors.
Sequencing: Async/await allows you to write code that executes in a sequential manner, even when dealing with asynchronous operations. This can help avoid the "callback hell" problem that can arise when nesting multiple callbacks.
Variable Scope: With async/await, variables declared within the function scope are accessible within the asynchronous code block. This eliminates the need for closures or additional context management that might be required with Promises.
Error Stacks: Async/await maintains better error stacks. When an error occurs, the stack trace provides more accurate information about where the error originated, making debugging easier.
Parallelism: You can use async/await to run multiple asynchronous operations in parallel and then wait for all of them to complete using Promise.all.
Native Support: Async/await is now natively supported by modern JavaScript environments and widely adopted, making it a standard and reliable way to handle asynchronous operations.
Compatibility with Other Constructs: Async/await can be used alongside other modern JavaScript constructs like destructuring, spread/rest operators, and template literals, improving the overall coding experience.

While async/await offers many benefits, it's important to note that it might not be suitable for every situation. For example, if you need to perform complex control flow or manipulate multiple asynchronous operations at once, you might still need to work with Promises or other asynchronous patterns.

Cons of using Async/await
While async/await is a powerful and widely-used feature in JavaScript, there are a few potential drawbacks and considerations to keep in mind:

Loss of Parallelism in Loops: If you use async/await within loops, the asynchronous operations will run sequentially due to the nature of the event loop. This can impact performance when you actually want to run them in parallel.
Unhandled Promise Rejections: If you forget to use try-catch or .catch() with an async function, unhandled Promise rejections might occur, causing your application to terminate unexpectedly.
Async-Only Functions: While async/await can simplify most asynchronous scenarios, it might not be suitable for functions that need to return multiple values or perform complex control flow, which are better handled using traditional callback patterns or Promises.
Limited Granularity: Async/await operates at the function level, so if you need to await multiple asynchronous operations within a single function, you can't fine-tune the order of their execution as you can with individual Promises.

Overall, while async/await offers significant benefits, it's important to carefully consider its usage within the context of your project and be aware of its potential limitations. Depending on the specific requirements of your application, other asynchronous patterns might be more appropriate.

Understanding Asynchronous programming in JavaScript.

Majid Kareem — Thu, 27 Jul 2023 10:35:14 +0000

What is Asynchronous programming?

According to MDN official docs,

Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result.

Various functions provided by browsers can potentially take a long time, and therefore, are asynchronous. For example:

Making HTTP requests using fetch() API
Accessing a user's camera or microphone using getUserMedia()
Asking a user to select files using _showOpenFilePicker() _

So even though you may not need to implement your own asynchronous functions very often, you are very likely to need to use other asynchronous functions correctly.

Why are asynchronous functions important?

Lets have a scenario where a function generates large number if prime numbers (generatePrime()).

Even if the generatePrime() is written to be very efficient, it will still take a bit of time to complete (long-running function). During this period when the function is running, the program/app will become totally unresponsive: you won't be able to click anything, type anything, or do anything else.

This is the basic problem with long-running synchronous functions. What we need is a way for our program to:

Start a long-running operation by calling a function.
Have that function start the operation and return immediately, so our program can still respond to other events.
Notify us of the result of the operation when it eventually completes.

These are precisely what asynchronous functions can do and that is why they are so important.

Typical Examples of Asynchronous programming

An example of asynchronous programming is Event handlers: you provide a function (the event handler) that will be called, not right away, but whenever the event happens.

An Event handler is a type of callback function.
A callback is just a function that's passed into another function, with the expectation that the callback will be called at the appropriate time.

Callbacks used to be the main way asynchronous functions were implemented in Javascript.
However, Callbacks have been seen to have a bunch of downsides, for instance :

Callback-based code can become hard to understand when the callback itself has to call functions that accept a callback.
The code becomes harder to read as the nesting increase. This is sometimes called "callback hell" or the "pyramid of doom".
it can also get very hard to handle errors as you often have to handle errors at each level of the "pyramid"/ nesting, instead of having error handling only once at the top level.

For these reasons, most modern asynchronous APIs don't use callbacks anymore. Instead, the foundation of asynchronous programming in JavaScript is the Promise,

In the next post, I'll be discussing Promises, the popular async/await, and how to work with them.

References:
MDN official Documentation

Introduction to Smart Contracts (Solidity) Part 1

Majid Kareem — Sat, 02 Jul 2022 05:07:44 +0000

Introduction

This is the first in a possibly long list of web3 tutorials to come. It was written to serve as an entry point for beginners to Solidity programming.

Expectations

It assumes no previous knowledge of solidity although some knowledge of other programming languages like python or JavaScript will make the journey a lot easier.

What are smart contracts

A smart contract is a program that runs at an address on Ethereum. They're made up of data and functions that can execute upon receiving a transaction.

What makes up a smart contract

Smart contracts comprise different parts:

Data
Environment variables
Functions
Events and Logs

we will be having a brief explanation of each part below.

Data

Any contract data must be assigned to a location: either to storage or memory. It's costly to modify storage in a smart contract so you need to consider where your data should live.

Storage
Persistent data is referred to as storage and is represented by state variables. These values get stored permanently on the blockchain. You need to declare the type of a variable so that the contract can keep track of how much storage it needs when it compiles.

It is comparatively costly to read, and even more to initialize and modify storage. Because of this cost, you should minimize what you store in persistent storage to what the contract needs to run. Store data like derived calculations, caching, and aggregates outside of the contract. A contract can neither read nor write to any storage apart from its own.

// Solidity example
contract Storage {
    uint savedData; // State variable
}

You'll likely be familiar with most types if you've already programmed in object-oriented languages. However, the address type should be new to you if you're new to Ethereum development.

An address type can hold an Ethereum address which equates to 20 bytes or 160 bits. It returns a hexadecimal notation with a leading 0x.

Other types include:

boolean
integer
fixed point numbers
fixed-size byte arrays
dynamically-sized byte arrays
Rational and integer literals
String literals
Hexadecimal literals
Enums

For detailed explanations on each type, visit the official documentation for Solidity types

Memory
Values that are only stored for the lifetime of a contract function's execution are called memory variables. Since these are not stored permanently on the blockchain, they are much cheaper to use.

To learn more about the EVM stores data, check out the docs on Solidity

Environment variables

In addition to the variables you define in your contract, there are some special global variables. They are primarily used to provide information about the blockchain, the current transaction, or are general-use utility functions.

Examples include:

block.chainid (uint): the current chain id
block.timestamp (uint): the current block timestamp as seconds since unix epoch
msg.value (uint): number of wei/Ether sent with the message
msg.sender (address): sender of the message (current call)
blockhash(uint blockNumber) returns (bytes32): hash of the given block when blocknumber is one of the 256 most recent blocks; otherwise returns zero

Functions

Functions are the executable units of code. In the most simplistic terms, functions can get or set information in response to incoming transactions on the blockchain.

Function Calls can happen internally or externally and have different levels of visibility towards other contracts. Functions accept parameters and return variables to pass parameters and values between them.

Function visibility
Solidity knows two kinds of function calls: external ones that do create an actual EVM message call and internal ones that do not. Furthermore, internal functions can be made inaccessible to derived contracts. This gives rise to four types of visibility for functions.

external
public
internal
private

For detailed explanations on each visibility type, visit the solidity docs on function visibility

// Solidity example to show different parts of a function
function setUsername(string memory value) public {
    userName = value;
}

The parameter value of type string is passed into the function: setUsername.
It's declared public, meaning anyone can access it.

Events and Logs

Events let you communicate with your smart contract from other subscribing applications. When a transaction is mined, smart contracts can emit events and write logs to the blockchain that other applications can then process.

Solidity events give an abstraction on top of the EVM’s logging functionality. Applications can subscribe and listen to these events through the RPC interface of an Ethereum client.

For more explanations check out Solidity Events

So far we've learned the basic parts of a smart contract written in Solidity. These various parts are what when put together form a group of code that executes certain commands on the blockchain.

I know this is a pretty long (and possibly boring) tutorial, but since it's a tutorial on smart contracts, it won't be complete if we don't write any smart contracts.
Below is an example of a very simple smart contract written in solidity. It was lifted directly (with a little update to use the latest version of solidity) from the Ethereum documentation

//SPDX-License-Identifier: Unlicense
// Specifies the version of Solidity, using semantic versioning.
// Learn more: https://solidity.readthedocs.io/en/v0.5.10/layout-of-source-files.html#pragma
pragma solidity ^0.8.4;

// Defines a contract named `HelloWorld`.
// A contract is a collection of functions and data (its state).
// Once deployed, a contract resides at a specific address on the Ethereum blockchain.
// Learn more: https://solidity.readthedocs.io/en/v0.5.10/structure-of-a-contract.html
contract HelloWorld {

    // Declares a state variable `message` of type `string`.
    // State variables are variables whose values are permanently stored in contract storage.
    // The keyword `public` makes variables accessible from outside a contract
    // and creates a function that other contracts or clients can call to access the value.
    string public message;

    // Similar to many class-based object-oriented languages, a constructor is
    // a special function that is only executed upon contract creation.
    // Constructors are used to initialize the contract's data.
    // Learn more: https://solidity.readthedocs.io/en/v0.5.10/contracts.html#constructors
    constructor(string memory initMessage) {
        // Accepts a string argument `initMessage` and sets the value
        // into the contract's `message` storage variable).
        message = initMessage;
    }

    // A public function that accepts a string argument
    // and updates the `message` storage variable.
    function update(string memory newMessage) public {
        message = newMessage;
    }
}

Here is a list of references and useful links for further reading

Ethereum official doc on smart contracts
Official Solidity docs
Remix an IDE for writing smart contracts

Here is a link to My Public profile if you feel the tutorial is not enough and you need a 1 on 1 session 😉.

Create a Charity/Donation Platform on the Blockchain (part 1)

Majid Kareem — Fri, 27 May 2022 19:21:47 +0000

Introduction

We will be creating the smart contract for a charity donation platform in this post. Yes, something like Gofundme but on the blockchain.
and users can donate to individual campaigns with Ether.

Expectations

This post assumes you are already familiar with the structure of a smart contract and basic types in solidity.

Required tools

Remix (a browser-based IDE)
Any browser (preferably Chrome)

Overview

Our platform will allow anyone to create a charity/donation campaign and set a time limit or deadline for it, After creating the campaign, a user can donate to any campaign they choose to support and the creator of the campaign can withdraw all the funds donated to the campaign after the deadline is exceeded.

Enough talk, let's get started with the code

First, we'll create our contract file and name it Charity.sol. The we populate it with the code below;

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

import "@openzeppelin/contracts/utils/Counters.sol";

contract Charity {

}

The first and second line in the code above defines the license and the solidity version for compiling the code. Then we import a library from openzeppelin called Counters.sol which provides us with counters that can only be incremented or decremented.
Next, we define a new contract called Charity

To give us a sense of direction, we will create all the functions skeleton we need before implementing them one by one.


contract Charity {
    using Counters for Counters.Counter;

// These are events to be emitted when specific actions are completed
    event CampaignStarted(bytes32 campaignId, address initiator);
    event WithdrawFunds(bytes32 campaignId, address initiator, uint256 amount);
    event FundsDonated(bytes32 campaignId, address donor, uint256 amount);

    // defines a variable to keep track of total number of campaigns created
    Counters.Counter public _campaignCount;

   // Campaign details to be saved
    struct Campaign {
        string title;
        string imgUrl;
        string description;
        uint256 fundsRaised;
        bool isLive;
        address initiator;
        uint256 deadline;
        uint256 balance;
    }

    // allows us to keep track of the campaigns created and it's details using a unique ID
    mapping(bytes32=>Campaign) public _campaigns;

    // allows us to keep track of the who donates to a campaign and the amount they donated
    mapping(address=>mapping(bytes32=>uint256)) public userCampaignDonations;

    // this function generated a unique ID for a campaign
//from it's title, descrition and creator address
    function generateCampaignId(address initiator, string calldata title, string calldata description) public pure returns(bytes32) { }

    // this function will be called by a user to create a new campaign
    function startCampaign( string calldata title, string calldata description, string calldata imgUrl, uint256 deadline ) public { }

    // calling this function allows users to donate to a charity campaign of their choice
    function donateToCampaign(bytes32 campaignId) public payable { }

    // returns the details of a campaign given the campaignId
    function getCampaign(bytes32 campaignId) public view returns(Campaign memory) { }

    // this function allows the creator of the campaign to withdraw all the funds donated to the campaign 
    // after the campaign has ended
    function withdrawCampaignFunds(bytes32 campaignId) public { }

}

Now let's take the functions one after the other and flesh them out. First is the generateCampaignId function, this function will create a unique hash from the campaign title, description, and initiator address


    function generateCampaignId(address initiator, string calldata title, string calldata description) public pure returns(bytes32) {
       bytes32 campaignId = keccak256(abi.encodePacked(title, description, initiator));
       return campaignId;
    }

Next, we create the function startCampaign which allows a user to actually create a campaign,


    function startCampaign( string calldata title, string calldata description, string calldata imgUrl, uint256 deadline ) public {
        // first, we generate a campaignID 
        // using the title, description and the address of the initiator
        bytes32 campaignId = generateCampaignId(msg.sender, title, description);

        // get a reference to the campaign with the generated Id
        Campaign storage campaign = _campaigns[campaignId];
        // require that the campaign is not live yet.
        require(!campaign.isLive, "Campaign exists");
        // require the current time to be less than the campaign deadline
        require(block.timestamp < deadline, "Campaign ended");

        campaign.title = title;
        campaign.description = description;
        campaign.initiator = msg.sender;
        campaign.imgUrl = imgUrl;
        campaign.deadline = deadline;
        campaign.isLive = true;

        // increment the total number of charity campaigns created
        _campaignCount.increment();

        // emit an event to the blockchain
        emit CampaignStarted(campaignId, msg.sender);
    }

After creating the campaign, we need a way to allow users donate to a live campaign. So let's create the donateToCampaign function.

// allows users to donate to a charity campaign of their choice
    function donateToCampaign(bytes32 campaignId) public payable {
        // get campaign details with the given campaign
        Campaign storage campaign = _campaigns[campaignId];

        // end the campaign if the deadline is exceeded
        if(block.timestamp > campaign.deadline){
            campaign.isLive = false;
        }
        // require the campaign has not ended
        require(block.timestamp < campaign.deadline, "Campaign has ended");

        uint256 amountToDonate = msg.value;
        require(amountToDonate > 0, "Wrong ETH value");

        // increase the campaign balance by the amount donated;
        campaign.fundsRaised += amountToDonate;
        campaign.balance += amountToDonate;

        // keep track of users donation history
        userCampaignDonations[msg.sender][campaignId] = amountToDonate;

        // emit FundsDonated event
        emit FundsDonated(campaignId, msg.sender, amountToDonate);
    }

Okay, users can now donate to our cause via the above function. But we still need a way for the creator of the campaign to withdraw the Ether donated to them. So let's complete the withdrawCampaignFunds function.

function withdrawCampaignFunds(bytes32 campaignId) public {
        Campaign storage campaign = _campaigns[campaignId];

        // require the msg.sender is the creator of the campaign
        require(msg.sender == campaign.initiator, "Not campaign initiator");
        // require the campaign has ended
        require(!campaign.isLive, "campaign is still active");
        require(block.timestamp > campaign.deadline, "Campaign is still active");
        // require the campaign has funds to be withdrawn
        require(campaign.balance > 0, "No funds to withdraw");

        uint256 amountToWithdraw = campaign.balance;

        // zero the campaign balance
        campaign.balance = 0;

        // transfer the balance to the initiator address;
        payable(campaign.initiator).transfer(amountToWithdraw);

        // emit an event to the blockchain
        emit WithdrawFunds(campaignId, campaign.initiator, amountToWithdraw);
    }

Cool, we now have complete flow for the donation process.
Below is the full code for this tutorial.

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


import "@openzeppelin/contracts/utils/Counters.sol";

contract Charity {
    using Counters for Counters.Counter;

    event CampaignStarted(bytes32 campaignId, address initiator);
    event WithdrawFunds(bytes32 campaignId, address initiator, uint256 amount);
    event FundsDonated(bytes32 campaignId, address donor, uint256 amount);

    Counters.Counter public _campaignCount;

    struct Campaign {
        string title;
        string imgUrl;
        string description;
        uint256 fundsRaised;
        bool isLive;
        address initiator;
        uint256 deadline;
        uint256 balance;
    }

    mapping(bytes32=>Campaign) public _campaigns;
    mapping(address=>mapping(bytes32=>uint256)) public userCampaignDonations;

    constructor(){

    }

    function generateCampaignId(address initiator, string calldata title, string calldata description) public pure returns(bytes32) {
       bytes32 campaignId = keccak256(abi.encodePacked(title, description, initiator));
       return campaignId;
    }

    function startCampaign( string calldata title, string calldata description, string calldata imgUrl, uint256 deadline ) public {
        // generate a campaignID 
        // using the title, description and the address of the initiator
        bytes32 campaignId = generateCampaignId(msg.sender, title, description);

        // get a reference to the campaign with the generated Id
        Campaign storage campaign = _campaigns[campaignId];
        // require that the campaign is not live yet.
        require(!campaign.isLive, "Campaign exists");
        // require the current time to be less than the campaign deadline
        require(block.timestamp < deadline, "Campaign ended");

        campaign.title = title;
        campaign.description = description;
        campaign.initiator = msg.sender;
        campaign.imgUrl = imgUrl;
        campaign.deadline = deadline;
        campaign.isLive = true;

        // increment the total number of charity campaigns created
        _campaignCount.increment();

        // emit an event to the blockchain
        emit CampaignStarted(campaignId, msg.sender);
    }

    function endCampaign() public {

    }

    // allows users to donate to a charity campaign of their choice
    function donateToCampaign(bytes32 campaignId) public payable {
        // get campaign details with the given campaign
        Campaign storage campaign = _campaigns[campaignId];

        // end the campaign if the deadline is exceeded
        if(block.timestamp > campaign.deadline){
            campaign.isLive = false;
        }
        // require the campaign has not ended
        require(block.timestamp < campaign.deadline, "Campaign has ended");

        uint256 amountToDonate = msg.value;
        require(amountToDonate > 0, "Wrong ETH value");

        // increase the campaign balance by the amount donated;
        campaign.fundsRaised += amountToDonate;
        campaign.balance += amountToDonate;

        // keep track of users donation history
        userCampaignDonations[msg.sender][campaignId] = amountToDonate;

        // emit FundsDonated event
        emit FundsDonated(campaignId, msg.sender, amountToDonate);
    }

    // returns the details of a campaign given the campaignId
    function getCampaign(bytes32 campaignId) public view returns(Campaign memory) {
        return _campaigns[campaignId];
    }

    function withdrawCampaignFunds(bytes32 campaignId) public {
        Campaign storage campaign = _campaigns[campaignId];

        // require the msg.sender is the creator of the campaign
        require(msg.sender == campaign.initiator, "Not campaign initiator");
        // require the campaign has ended
        require(!campaign.isLive, "campaign is still active");
        require(block.timestamp > campaign.deadline, "Campaign is still active");
        // require the campaign has funds to be withdrawn
        require(campaign.balance > 0, "No funds to withdraw");

        uint256 amountToWithdraw = campaign.balance;

        // zero the campaign balance
        campaign.balance = 0;

        // transfer the balance to the initiator address;
        payable(campaign.initiator).transfer(amountToWithdraw);

        // emit an event to the blockchain
        emit WithdrawFunds(campaignId, campaign.initiator, amountToWithdraw);
    }

}

Well done!!! 🎉🎉🎉
If you have been able to get here, I hope you have been able to learn more about creating smart contracts.
In the next part of this series, I'll be creating a UI for our smart contract using React or Next.js

Feel free to reach out to me on codementor If you have any suggestions or questions or if you just wanna say hi.

Create a decentralized exchange (DEX) for ERC-20 token

Majid Kareem — Wed, 09 Mar 2022 00:06:18 +0000

This is the first part in a probably very long series of posts.
In this post, I'll be explaining how to create a decentralized exchange for an ERC-20 token.

Expectations

This post assumes basic knowledge of solidity, the ERC standard, and creating a basic ERC20 token

Creating the ERC20 token

We'll create a basic ERC20 token by importing the ERC20.sol from Openzeppelin. Our token will be named TSTtoken and it's gonna have a total supply of 1 million.

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

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol";

contract TSTtoken is ERC20 {

uint256 initialSupply = 1000000e18;
    constructor() ERC20("Test", "TST") {
        _mint(msg.sender, initialSupply);
    }
}

Next we will create the smart contract for our DEX in DEX.sol.

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

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/IERC20.sol";
import './TSTtoken.sol';

contract DEX {

    IERC20 public token;

    event Bought(uint256 amount);
    event Sold(uint256 amount);

    constructor(){
        token = new TSTtoken();
    }

    function buy() payable public {
        // TODO
    }

    function sell(uint256 amount) public {
        // TODO
    }

}

Our DEX contract has two functions

buy: The user can send ether and receive TSTtoken in exchange
sell: The user can send TSTtoken and get back ether

The Buy Function

To code the buy function, we'll have to check the amount ether being sent to the contract in the message (i.e msg.value) and verify that the contract owns enough TSTtoken. If the contract has enough TSTtoken, it sends it to the user and emits the Bought event.

Note:

For simplicity, we'll exchange 1 TSTtoken for 1 Wei

function buy() payable public {
    uint256 amountTobuy = msg.value;
    uint256 dexBalance = token.balanceOf(address(this));
    require(amountTobuy > 0, "You need to send some ether");
    require(amountTobuy <= dexBalance, "Not enough tokens in the reserve");
    token.transfer(msg.sender, amountTobuy);
    emit Bought(amountTobuy);
}

I guess the buy function is pretty easy

The Sell Function

This function will require the user to have approved the sell amount by calling the ERC-20 approve function.

When the sell function is called, we'll call the ERC-20 transferFrom function to transfer the tokens from the caller address to the contract address. If the transfer is successful, we'll send the equivalent amount of Eth back to the caller address.

  function sell(uint256 amount) public {
        require(amount > 0, "You need to sell at least some tokens");
        uint256 allowance = token.allowance(msg.sender, address(this));
        require(allowance >= amount, "Check the token allowance");
        token.transferFrom(msg.sender, address(this), amount);
        payable(msg.sender).transfer(amount);
        emit Sold(amount);
    }

Cool, we've just written a smart contract for a very basic DEX. Now anyone can buy and sell our token with Eth. Here is the complete code for the DEX.sol file.

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

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/IERC20.sol";
import './TSTtoken.sol';

contract DEX {

    IERC20 public token;

    event Bought(uint256 amount);
    event Sold(uint256 amount);

    constructor() {
        token = new TSTtoken();
    }
    function buy() payable public {
        uint256 amountTobuy = msg.value;
        uint256 dexBalance = token.balanceOf(address(this));
        require(amountTobuy > 0, "You need to send some ether");
        require(amountTobuy <= dexBalance, "Not enough tokens in the reserve");
        token.transfer(msg.sender, amountTobuy);
        emit Bought(amountTobuy);
}

    function sell(uint256 amount) public {
        require(amount > 0, "You need to sell at least some tokens");
        uint256 allowance = token.allowance(msg.sender, address(this));
        require(allowance >= amount, "Check the token allowance");
        token.transferFrom(msg.sender, address(this), amount);
        payable(msg.sender).transfer(amount);
        emit Sold(amount);
    }

}

Ways to improve the DEX

Implement an exchange of TSTtoken to another ERC20 token e.g DAI, UNI etc
Add a fee on Buy and Sell of the token
Add the liquidity for TSTtoken with transaction fees generated to uniswap by implementing the addLiquidity/addLiquidityETH function

Forem: Majid Kareem

A Beginner-Friendly Roadmap to Learning AI: From Zero to Expert

1. AI Strategy & Foundations (Beginner / Non-Technical)

Executive Briefing: Generative AI & Large Language Models

2. Core LLM Engineering (Beginner → Intermediate)

LLM Engineering: Master AI, Large Language Models & Agents

3. Agentic AI Systems (Intermediate)

The Complete Agentic AI & MCP Course

4. Production-Ready AI & MLOps (Advanced / Expert)

AI Engineering & MLOps: Deploy AI Systems to Production

How to Follow This Learning Path

Final Thoughts

What is EIP2612 and How to Implement EIP2612 in NextJS?

Step 1: Set Up the Next.js Project

Step 2: Install Required Dependencies

Step 3: Create a Permit Component

Component Structure

PermitComponent.js

Step 4: Use the Permit Component in Your Application

Example Usage in a Next.js Page

Step 5: Run the Application

Explanation of Key Steps

Considerations

10 Youtube channels to enhance your skills as a frontend developer

Coding and testing as related to Blockchain security

Introduction

Challenges of coding and testing

Intro to Blockchain Security

Introduction

More on Blockchain security

References:

Essential AI Tools to Boost Your Productivity as a Frontend developer

Introduction

Design

Testing

Optimization

Deployment

Conclusion

Common mistakes to avoid when using React Hooks

Introduction

What are React Hooks?

Why use React Hooks?

How to use React Hooks effectively?

How to avoid common pitfalls with React Hooks?

Conclusion

Promises, Async/await in JavaScript

Understanding Asynchronous programming in JavaScript.

What is Asynchronous programming?

Why are asynchronous functions important?

Typical Examples of Asynchronous programming

Introduction to Smart Contracts (Solidity) Part 1

Introduction

Expectations

What are smart contracts

What makes up a smart contract

Data

Environment variables

Functions

Events and Logs

Create a Charity/Donation Platform on the Blockchain (part 1)

Introduction

Expectations

Required tools

Overview

Create a decentralized exchange (DEX) for ERC-20 token

Expectations

Creating the ERC20 token

The Buy Function

Note:

The Sell Function

Ways to improve the DEX