DEV Community: Joel Adewole

Understanding Mend Renovate's Pull Request Workflow

Joel Adewole — Tue, 21 May 2024 17:22:28 +0000

Modern software development leans heavily on collaboration and external dependencies, crucial for functionality like user authentication and database management. With the integration of open-source software, it's estimated that 70-90% of modern applications are built using free and open-source components. This surge in dependencies underscores the importance of efficient dependency management, as applications grow more complex. Efficient management ensures software stability and security, particularly vital as outdated dependencies can compromise an entire application, and new updates may introduce compatibility issues.

Mend Renovate is a free powerful open-source tool that automates dependency updates, enhancing the security and efficiency of software maintenance. This article aims to guide readers through the intricacies of understanding and leveraging Mend Renovate's pull request workflow for optimal software maintenance and bulletproof security.

Understanding Mend Renovate

Software development projects rely on external components like libraries and frameworks, known as dependencies. Outdated dependencies can introduce compatibility issues and security vulnerabilities, which must be resolved.

Mend Renovate integrates seamlessly with version control systems like GitHub, GitLab, and Bitbucket. It scans project code to identify all dependencies and then checks for available updates. The tool automatically creates pull requests (PRs) for these updates, which developers can review and merge based on predefined criteria.

Mend Renovate's advanced features include the "Merge Confidence" score, which provides a data-driven assessment of the safety of updating a dependency. This score is calculated based on crowdsourced data, offering an empirical measure of whether an upgrade is likely to introduce problems into an application.

The tool's flexibility extends to scheduling, allowing developers to set specific times for the tool to run or create PRs, ensuring that updates occur in a controlled and predictable manner. Mend Renovate can be installed as a GitHub App, via CLI tool through an NPM package or Docker image, or even self-hosted.

Workflow automation is a key feature of Mend Renovate. Based on predefined rules, the tool can automate specific actions within the PR workflow, freeing up developer time for more critical tasks.

Setting Up Mend Renovate

Mend Renovate offers a powerful yet flexible solution for automated dependency updates. But how do you integrate it into your development workflow?

Setting up Mend Renovate is a pivotal step in automating the process of dependency management across software projects.

With a variety of setup methods available, developers can choose the approach that best fits their workflow and project requirements. Mend Renovate caters to diverse needs by offering several deployment options:

Mend Renovate App (Recommended): One of the convenient ways to set up Mend Renovate is through the installation of its app from the GitHub Marketplace. This option simplifies the setup process and presents easy-to-use configuration options that are directly accessible from the GitHub interface.
Self-Hosted Instance: Mend Renovate offers the option of self-hosting its server instance for advanced users or those with specific security requirements. This approach grants complete control over the deployment and configuration, but it demands more technical expertise.
Third-Party Hosting: In case Mend Renovate is hosted by a third party, like within your organization, you will receive instructions for installation and configuration. It is advisable to refer to your host documentation for detailed steps.

Step-by-Step Installation (Using Mend Renovate App)

Navigate to the Mend Renovate App on the GitHub Marketplace: https://github.com/apps/renovate.
Click "Install" or “Configure” if you’ve installed Mend Renovate before and grant necessary permissions. Mend Renovate will require access to your repositories to scan dependencies and create pull requests.
Choose the repositories you want Mend Renovate to manage. You can either select specific repositories or opt for "All repositories" (by default excluding forks or repositories that don't have known package files).
Double-check the selected repositories and click "Install" to finalize the setup and Renovate will begin onboarding.

Initial Configuration and Best Practices

Once installed, Mend Renovate automatically generates a configuration file (renovate.json) within your project's root directory. Here are some best practices for initial configuration:

Token Permissions: Ensure the Mend Renovate App has appropriate permissions to create pull requests and comment on issues. These permissions can be adjusted within your GitHub settings for the app.

Private Repositories: To manage dependencies in private repositories, you'll need a Personal Access Token (PAT) with sufficient permissions. Generate a PAT from your GitHub account settings and add it to the renovate.json file securely using environment variables.

After granting Mend Renovate permission to your repository, you will be redirected to the https://developer.mend.io site where you have a dashboard for managing your organizations.

Customizing Mend Renovate Behavior

After installing Mend Renovate in your repository, a new branch(renovate/configure) will be created. This branch adds a JSON file with the default configuration for Mend Renovate to your repository.

The renovate.json file provides developers with the ability to customize Mend Renovate's behavior to meet their specific requirements. This configuration file allows you to define how Mend Renovate functions within your project. You can find out more about the configuration options from the official Mend Renovate documentation.

Activate Mend Renovate

To activate Mend Renovate in your project repository, merge the pull request created by the RenovateBot by clicking the “Merge Pull Request” button.

In a case where you want to disable Mend Renovate, simply close the pull request unmerged.

Understanding the Mend Renovate Pull Request Workflow

Mend Renovate provides a streamlined and secure software update process by implementing a robust workflow that ensures all dependencies are up-to-date. For developers looking to maintain and improve their projects, understanding this workflow is crucial.

Mend Renovate streamlines dependency updates by automating the creation and management of pull requests (PRs). To do this, the tool first scans your project's codebase using platform-specific managers such as GitLab CI manager for GitLab to locate dependency declaration files like package.json for npm. Once the dependency files are found, Mend Renovate extracts the dependency information, including names and current versions.

Using data sources such as the npm registry for npm packages, Mend Renovate checks for available updates for each identified dependency. It can group updates based on predefined rules set in the renovate.json configuration file. The versioning module then analyzes the retrieved versions, ensuring compatibility, and choosing the most suitable update based on your configuration. Because Mend Renovate must support a lot of dependency naming and versioning conventions, it has modules for each known convention. You can contribute your modules if you want.

When updates are identified, Mend Renovate creates corresponding PRs that include a branch name (following a clear naming convention), a PR title that clearly states the update proposal, the modified dependency files reflecting the proposed update, and release notes (optional) that incorporate relevant information about the dependency update.

The Mend Renovate pull request workflow comprises several steps, including:

Accessing the repository
Scan base branches
Scanning package files to extract dependencies
Looking up registries to check for updates
Applying any grouping rules defined
Pushing branches and raising Pull Requests

Step 1: Initialization

The illustration you sent shows a flowchart outlining the steps for initializing Mend Renovate. Here's a breakdown of the process:

Merge configurations: The first step involves merging configurations. This means that Mend Renovate will combine configurations from multiple sources (if available) to create a single, unified configuration file. Here's the order of precedence, from most important to least important:
- CLI (Command Line Interface): When executing a command, any configurations provided directly through the command line take the highest precedence over all other settings. These configurations usually consist of specific options or overrides that a user wants to apply for a particular execution, and they can be used to modify the behavior of a command in a variety of ways. By using command line configurations, users have greater control over how their commands execute and can tailor the output to their specific needs.
- ENV (Environment Variables): Renovate takes into account environment variables which are frequently utilized to configure access tokens or other settings that are environment-dependent, and should not be hardcoded into files.
- File: Configuration files, like renovate.json or other configuration files within the repository, are then merged. These configuration files contain rules, schedules, and settings that define Renovate's behavior when updating the dependencies. The tool merges these configuration files to create a comprehensive set of instructions for managing dependencies.
- Default: Renovate implements its default settings to apply built-in configurations. These pre-defined configurations are used as a fallback option by Renovate when no other custom configurations are specified.
Initialize platform: During this step, Mend Renovate establishes communication with the version control platform (VCS) such as GitHub, GitLab, or Bitbucket. It merges configurations to facilitate further actions and initializes the platform. This involves setting up the connection to the version control platform and preparing it for the subsequent steps. It may include authenticating API requests and configuring the necessary access permissions.
Query platform for repositories: Mend Renovate retrieves a list of repositories from the VCS platform to manage, which could involve all or specific organizations based on predefined criteria. Renovate queries the platform for repositories, looking up the list of repositories that it has access to and will potentially run against to check for dependency updates.
Filter repository list: Renovate utilizes filters to narrow down the list of repositories obtained from the platform. These filters are based on the configurations set earlier and can include criteria like only including certain repositories, ignoring others, considering only those with a specific file, etc. This ensures that Renovate works efficiently on relevant repositories, optimizing the process and resources.

By following these steps, Mend Renovate establishes the groundwork for its core functionality: automating dependency updates and managing them through pull requests within your VCS workflow.

Step 2: For Each Repository

The illustration depicts the process that Renovate follows to extract dependencies from a repository.

Renovate can proficiently manage multiple repositories that are hosted on diverse platforms, such as GitHub, GitLab, and more. Here are the steps Renovate follow to extract dependencies from a repository:

Initialize repository: During its initialization process, Renovate sets up communication and configuration settings for each repository it intends to manage, on an individual basis. This is done to ensure that each repository is properly integrated with Renovate's automated updates system.
Extract dependencies: Renovate goes through a three-pronged approach to extract dependencies:
- Extract base branches: Renovate obtains data regarding the base branches of the repository, which are generally the primary development branches where updates to dependencies are made, such as the default or master branch.
- Check for vulnerabilities: Renovate performs a scan on the identified branches to detect and report any known vulnerabilities in the project's dependencies. This step is considered essential for ensuring the security of the project.
- Check for Managers: Renovate identifies dependency managers that are specific to different programming languages or ecosystems, such as pip for Python, npm for JavaScript, Maven for Java, or cargo for Rust. The tool uses built-in modules to recognize these managers based on file patterns or conventions used in the repository.
Check each manager: It goes through each manager that is relevant to the repository in question.
- Manager A, Manager B, ...: The following list showcases various package managers and programming languages that Renovate supports. For instance, one of the package managers could be npm for JavaScript while another could be pip for Python.
- Match files: Different package managers use specific files to identify the dependencies declared in a project. For instance, npm relies on package.json and package-lock.json, whereas Composer uses composer.json and composer.lock.
After identifying the dependency manager, Renovate proceeds to search for files linked to that manager. Some common examples of such files are package.json for npm or pom.xml for Maven (Java). These files typically contain declarations of dependencies, which specify the names and versions of external libraries that the project relies on.
Check each file (Manager): Renovate operates within the boundaries of every package manager by scanning through each file that has the potential to include dependency declarations.
- File 1, File 2, ...: The following files were identified by the managers as possibly containing dependency declarations. For example, File 1 may refer to a requirement.txt file in a Python project.
- Extract dependency: Renovate extracts the list of dependencies defined within each file. It identifies the relevant dependency files and parses them to extract the necessary dependency information. The extracted information includes the dependency name (e.g., lodash), its current version (e.g., 3.10.1), and potentially other details like version ranges or sources.

Step 3: Look Up Updates

The above illustration depicts the procedure that Renovate follows to search for updates of the dependencies found in a repository. The process can be divided into the following steps:

Use data source to fetch versions: Renovate uses a data source to obtain information about available versions for the identified dependency. The data source acts as an intermediary between Renovate and the relevant package repository (such as the npm registry for npm packages). Renovate selects the appropriate data source to query based on the manager and file information.
Use versioning to find the next valid update: Renovate retrieves a list of available versions from the data source and employs a "versioning" module to analyze and filter the versions. This module considers various factors, such as:
- Dependency naming conventions: Various software ecosystems utilize distinct conventions for naming and organizing versions, such as semantic versioning that uses major, minor, or patch numbers. The versioning module guarantees coherence with the current dependencies and configuration settings.
- Version ranges (Optional): The dependency declaration file may contain a version range (e.g., ^3.10.0) rather than a specific version. The versioning module uses this range to determine appropriate updates within the specified limits.
- Blacklisting/Whitelisting (Optional): Renovate configuration files can contain specifications for particular versions or patterns that should be excluded (blacklisted) or included (whitelisted) from update suggestions. The versioning module is designed to filter and retrieve versions based on these specifications.
Look up updates: Renovate applies the versioning rules to determine the appropriate update version based on the criteria mentioned above. This update version can be the latest patch version within the allowed range, a minor version update if configured to allow them, or potentially a major update depending on the configuration.

The lookup process is an important component of Renovate's workflow. It assists in keeping dependencies up-to-date with the latest versions. This is important for incorporating functional improvements and security patches, which are essential for maintaining the overall performance and security of the system.

Step 4: Write Updates

The above illustration outlines a simplified flowchart of how Renovate creates pull requests (PRs) to suggest updates for dependencies. The following is a breakdown of each step involved in the process:

For each update: During the renovation process, Renovate examines the list of dependencies that require updates. Every update pertains to a single dependency that needs to be upgraded to a newer version.
Check if a branch is needed: Renovate performs a series of checks to ensure certain conditions are met before creating a new branch for the update.
- Existing: The process involves checking for the presence of an existing branch related to the update. In case such a branch already exists, it may be utilized instead of creating a new one.
- Rebase: Renovate evaluates whether the current branch requires rebasing. This may be necessary due to modifications made to the base branch that must be incorporated into the updated branch to maintain its current state.
- Concurrent Amount: Renovate performs a check against the maximum number of concurrent branches that have been configured. This is done to avoid overloading the repository with a large number of simultaneous updates, which could pose a challenge during the review and merge process.
Create branch (if necessary): After the decision-making process is complete, Renovate will create a new branch if necessary. Typically, the branch name will follow a specific convention that indicates the update required. For example, renovate/lodash-4.x may be used to update lodash to a potential version within the 4.x range.
Apply update: When Renovate applies an update to a dependency on a newly created branch, it changes the version number to the latest one that it previously identified as appropriate for the update. The relevant dependency files, such as package.json, are modified by Renovate within the newly created or reused branch. The identified update version is used to update the dependency version.
Create pull request: Renovate generates a Pull Request (PR) from the branch once the update is complete. This PR comprises the changes made by the update and is then available for review by the development team. The PR includes all the necessary information to inform the team about the changes, such as release notes, the reason for the update, and the implications of the changes. Renovate generates a PR in your version control system (VCS) like GitHub or GitLab.

Step 5: Finalize

The illustration provided above presents the conclusive stages of the Mend Renovate process, emphasizing the finalization tasks that follow the update processing. Below is a step-by-step explanation of the finalization:

Check for config migration: This step is a part of the verification process performed by Renovate to check if any configuration changes are required for the project. When Renovate is initially set up or if there are any updates made to the configuration file (renovate.json), certain housekeeping tasks may need to be carried out by Renovate to comply with the latest configuration settings. The following is a more detailed explanation of what this step could entail:
- Configuration parsing: The renovate.json file is re-read and analyzed by Renovate to understand any changes made to the configuration options.
- Migration logic (if necessary): Renovate has a feature that allows it to detect any changes made to the configuration format or the addition of new features. In such cases, Renovate may use its pre-set logic to migrate the current configuration to the new format or settings. This ensures that Renovate operates correctly based on the updated configuration.
- Error handling: Renovate has a mechanism to detect errors or inconsistencies present in the configuration. If such issues arise, Renovate will generate warnings or errors to prevent any incorrect functioning.
Clean stale branches: The final step of the Mend Renovate process involves cleaning up branches that are no longer needed or relevant. These branches could be a result of dependency updates that have since been merged or superseded by other updates. Cleaning them up helps keep the repository organized and manageable, as it avoids clutter from old or unnecessary branches that may create confusion or clutter the project's branch list.

The final step is necessary for Renovate to operate based on the most up-to-date configuration settings. It ensures that Renovate remains in sync with the specific dependency update requirements and workflows defined within the renovate.json file for your project.

Preconditions for Automatic Dependency Updates

Now, you likely have a good understanding of how Mend Renovate Pull Request functions and how it can aid you in automatically updating dependencies. However, to guarantee that the automatic updates contribute positively to the development process, it is important to adhere to a set of well-established preconditions. Here are some crucial preconditions that you should consider:

Clear dependency management strategy:
- Inventory management: It is imperative to maintain an up-to-date and comprehensive inventory of all dependencies, outlining their specific intended uses. This inventory should not only account for the dependencies but also identify any outdated or redundant dependencies, which should be removed.
- Version Control: It is highly recommended to use a standardized versioning system, such as semantic versioning, to maintain consistency and provide clarity on the type of updates being made (whether it's a patch, minor, or major update). This makes it easier to identify the nature of the changes, and whether or not they require a manual review, particularly in the case of major updates.
When updating dependencies, it's important to keep in mind that vulnerabilities aren't the only concern. APIs can change over time, which means that there is a possibility of encountering compatibility issues, license alterations, and even end-of-life scenarios. Therefore, it's crucial to consider these factors while updating dependencies as they can have a significant impact on the overall performance and stability of the system.
Robust testing and CI/CD practices:
- Automated test suites: It is crucial to create and maintain a comprehensive suite of automated tests that cover various levels of testing such as unit, integration, and system-wide integration tests. These tests should be capable of verifying the correct functioning of the system after any modifications to its dependencies.
- Staging environments: Using staging environments that closely replicate the production environment to thoroughly test software updates and patches. This practice ensures that any technical issues are promptly identified and resolved before the changes are deployed to the live system, minimizing the risk of downtime or other disruptions to critical business operations.
- Canary releases: One effective update deployment strategy is the canary release approach, which involves gradually pushing updates to a small, carefully selected group of users. This method enables monitoring and easy rollback in case of any issues, minimizing the impact on the overall system.
Security considerations:
- Proactive Security Scans: It is crucial to incorporate tools that can proactively scan and identify vulnerabilities in the dependencies you use, preferably before they are merged into your codebase. Such tools can aid in preventing potential security breaches and ensure a robust and secure codebase.
- Update Policies: Establish unambiguous protocols that outline the process for dealing with security updates, particularly those that pertain to critical or high-risk vulnerabilities. These procedures should be designed to ensure that such updates are swiftly prioritized and addressed.
- Source Integrity: It is crucial to ensure that the sources from which dependencies are obtained are secure and free from any tampering. It is recommended to use dependencies that are digitally signed by the maintainers to guarantee their integrity. This practice provides a reliable way to verify that the dependencies are authentic and have not been altered in any way. By doing so, we can mitigate the risk of introducing vulnerabilities or malicious code into our systems through third-party dependencies.
Team skills and knowledge:
- Expertise development: It's crucial to provide your team with frequent training and professional development opportunities to ensure they possess an in-depth knowledge of dependency management tools and strategies. This will help them stay up-to-date with the latest advancements in the field and enable them to effectively manage dependencies, reducing conflicts, and streamlining the development process.
- Impact assessment: Enable your team to evaluate the probable consequences of dependency updates on your project, encompassing the secondary effects on system functionality and user interaction.
Human oversight:
- Manual Review Process: Create a framework that facilitates a meticulous evaluation of important modifications or updates to essential systems, integrating specialized knowledge and a thorough risk analysis.
- Major Updates Analysis: Please conduct a comprehensive analysis of significant updates, considering the long-term objectives of the project, potential architectural impacts, and any refactoring that may be necessary. Kindly provide detailed technical insights along with your analysis.

Automatically updating dependencies can be a great benefit to your software development process, but it's important to take a comprehensive approach to ensure reliability and security. By implementing measures such as regular testing and version control, you can make use of tools like Mend Renovate's Pull Request workflow to seamlessly and effectively handle dependency updates.

Conclusion

Mend Renovate's automated pull request workflow offers numerous benefits to development teams, including increased efficiency in dependency updates. This allows developers to focus on core functionalities while Mend Renovate manages the tedious task of identifying, suggesting, and managing updates.

To get started with Mend Renovate, the comprehensive official documentation provides detailed instructions on installation, configuration, and best practices. Additionally, the Mend Renovate community forum offers a platform for users to connect, share experiences, and access the collective knowledge base.

By adopting this automated workflow, development teams can take a proactive approach to improving their project's dependencies, leading to more secure, efficient, and manageable development practices. With Mend Renovate, development teams can take control of their projects and embark on a more efficient and secure development journey.

Build a dApp Using Waku (Decentralized Communication) and Vue.js

Joel Adewole — Mon, 29 Jan 2024 13:27:50 +0000

Hi, frens 👋!

TL;DR

Did you know that far beyond being a mere industry buzzword, decentralized communication represents a strategic response to the vulnerabilities inherent in centralized systems? It prioritizes privacy, security, and censorship resistance, making it an indispensable component in web developers' toolkits.

Traditional centralized communication systems have long struggled with censorship, single points of failure, and privacy concerns. With the rise of Web 3 and blockchain technology, decentralized communication solutions like Waku are emerging as a promising alternative. Waku offers a peer-to-peer (P2P) messaging system that is resilient to censorship, scalable, and secure, making it an ideal choice for dApp developers looking to build next-generation applications.

This article will guide you on how to build a decentralized application (dApp) using Waku, an uncompromising decentralized communication protocol, and Vue.js, a popular JavaScript framework for building user interfaces. Before diving into the hands-on development aspects of this article, it is recommended that you have a basic understanding of Vue.js, familiarity with Tailwind CSS for UI styling, and a grasp of web3.js for seamless wallet integration.

If these technologies are new to you, no problem – this guide is meticulously created for all levels of expertise, providing step-by-step guidance at every level.

And don't forget to drop a "💖🦄🔥🙌🤯".

Understanding Waku

Waku is a collection of decentralized peer-to-peer messaging protocols that enable secure and censorship-resistant communication over a decentralized network. Its features include end-to-end encryption, persistent/ephemeral messaging, and efficient peer discovery, providing a foundation for secure and reliable communication.

Waku operates within a peer-to-peer topology, creating a decentralized network that thwarts censorship and provides surveillance resistance. Its design supports scalability, with the ability to accommodate millions of users. It is designed to be the successor of Whisper, the messaging layer of the Ethereum blockchain P2P protocol suite, and outperforms it in scalability and resource efficiency.

Waku's architecture is underpinned by three distinct network interaction domains: gossip, discovery, and request/response. Although Waku is a cohesive whole in terms of capabilities, it encompasses three primary clients designed for different environments and several SDKs, including Rust, React Native, Kotlin, and Swift.

nwaku: The reference implementation in Nim.
go-waku: Tailored for native integration with Golang applications.
js-waku: A JavaScript implementation optimized for browser environments.

Waku consists of multiple protocols, each serving a specific function within the network. They include, but are not limited to:

Waku Relay: The backbone of the Waku network, employing a pub/sub approach to peer-to-peer messaging. Emphasizes privacy, censorship resistance, and security, extending the libp2p GossipSub protocol.
Waku Filter: A lightweight version of the relay protocol designed for resource-restricted devices. Allows light nodes to receive specific messages of interest from full nodes.
Waku Store: Facilitates message retrieval for devices unable to participate in the Waku Relay network while offline.
Waku Light Push: A request/response protocol enabling nodes with short connection windows or limited bandwidth to publish messages to the Waku network.

Understanding Waku's architecture and protocols lays the groundwork for proceeding into practical implementations.

Use Cases of Waku

Waku's versatile architecture and capabilities find relevance in a myriad of real-world scenarios where secure and decentralized communication is paramount. Whether it's facilitating private conversations between users, enabling data exchange between devices, or supporting communication among nodes within a network, Waku emerges as a robust solution.

Privacy-focused Communication

Waku's emphasis on privacy makes it an ideal choice for scenarios where safeguarding user information is of utmost importance. In applications dealing with sensitive data or confidential conversations, Waku's end-to-end encryption and decentralized architecture provide a secure environment, mitigating the risks associated with centralized communication platforms.

Censorship-resistant Messaging

Waku offers a beacon of hope for unrestricted communication in regions where internet censorship is prevalent. Its peer-to-peer topology prevents centralized authorities from controlling or monitoring messaging traffic, ensuring that users can communicate freely without fear of censorship. This makes Waku particularly valuable in promoting freedom of expression and supporting open communication channels.

Use in dApps for Decentralized Communication

Decentralized Applications (dApps) form a burgeoning ecosystem where Waku can play a pivotal role. Waku's integration into dApps enhances communication functionalities, enabling real-time interactions among users while maintaining the decentralized ethos. This proves particularly valuable in scenarios such as collaborative platforms, social networks, or any application where user engagement and communication are central components.

By exploring the features and capabilities of Waku, it becomes evident that Waku's applicability extends beyond theoretical advantages, finding practical application in diverse areas.

Building a dApp with Waku and Vue.js

Polling systems often face challenges related to centralization, privacy concerns, and susceptibility to manipulation. By integrating Waku and Vue.js, we can tackle these challenges, creating a decentralized voting poll application that leverages the power of peer-to-peer communication.

Here is the entire source code of my voting poll app on GitHub: https://github.com/wolz-CODElife/waku-vue-poll.git and the live application is hosted on Vercel.

Dev Tools I Used?

Vite: To bootstrap the Vue3 application with the Tailwind template.
Vue 3: To build the user interface.
TypeScript: For type safety and potential for catching errors during compiling.
Tailwind CSS: For styling the user interface.
Web3.js: For implementing wallet connect.
Node Polyfill Webpack Plugin: For providing polyfills necessary for emitting Web3.js events in the browser. Since Vue3 uses webpack v5, where polyfill Node core modules were removed.
Crypto Hash: For hashing user address, where wallet is not available.
Protobufjs: For serializing message data sent through Waku.
@waku/sdk: For accessing Waku node methods in JavaScript.

Setting Up the Development Environment

To set up your development environment, ensure you have Node v18+ then open a new terminal in your working directory and run the following command:

npm create vite@latest

Which will begin a dialog in the terminal, you can choose options that work for you, or use the same options as I used:

Need to install the following packages:
  create-vite@5.1.0
Ok to proceed? (y) y
✔ Project name: … waku-poll-app
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

This should create a new Vue application in your working directory, navigate to the app, install the default dependencies and start the app using the following command:

cd waku-poll-app
npm install
npm run dev

Next, we want to create a file structure that allows us to componentize the various parts of the app. Your src path should have a file structure like this:

As we proceed we will update files with the necessary code, as for assets/3dpoll.jpg feel free to replace it with any image you see fit for your landing page.

Setting up Tailwind in Vue.js

To build our UI, we need to first install and configure Tailwind CSS in Vue 3. You can follow the official guide on Setting up Tailwind CSS.

Configuring Routes

To create multiple pages/routes in the app, we have to install Vue Router by running the following command in the terminal:

npm install --save vue-router@next 
# Install the latest version

In this app, we just need two routes: “Home” and “Polls” which we have inside the src/views folder. These routes will contain the Layout of each page, and then we can define the routes in the src/router/index.ts file by using the following code:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '@/views/Home.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/polls',
    name: 'Polls',

    component: () => import('../views/Polls.vue'),
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

In the code snippet above, a Vue.js router configuration is defined. We import the necessary functions and types from 'vue-router' and the Home component from @/views/Home.vue.

The routes array contains route definitions for the Home and Polls components. The router is created using createRouter and createWebHistory functions, and the routes we defined earlier.

The component: () => import('../views/Polls.vue') is used to dynamically import the 'Polls.vue' component. This is a feature provided by Vue.js to asynchronously load the component when it's needed, which can help improve initial page load performance by splitting the code into smaller chunks.

Finally, the router is exported so we can access it in “main.ts”.

Next, we register router to the Vue app by including it in the “main.ts” file like this:

// main.ts or main.js
import { createApp } from 'vue';
import App from './App.vue';
import './css/index.css'

import router from './router'

createApp(App).use(router).mount('#app')

Next, we will create a Layout for our application with the following inside “App.vue”:

<script lang="ts">
</script>


<template>
  <div class="flex flex-col h-screen justify-between">
    <router-view class="container max-w-8xl mx-auto mb-auto px-4" />
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>

In the code above, we use router-view to dynamically load the components of the current route into the DOM.

Installing the Waku and Its Dependencies

To get started with Waku in our Vue 3 application, we need to install @waku/sdk which is a TypeScript implementation of the Waku protocol designed for web browser environments.

To install @waku.sdk run the following command in the terminal:

npm install @waku/sdk

It is also recommended to create a message structure for your app, typically Waku developers use Protocol Buffers for consistency, interoperability, compatibility and payload size. To install protobufjs, run the following command in the terminal:

npm install protobufjs

Implementing Waku Logic

The application runs on two fundamental logic, which are the wallet connect and Waku communication integrations. We will create two composables “waku.ts” and “client.ts” inside src/composables.

“waku.ts” contains all the methods our Vue app needs to interact with the Waku protocol and transmit messages(polls) across users on the app. Inside this file, you should have the following code:

import { ref } from 'vue';
import protobuf, { Message } from 'protobufjs';
import {
    createLightNode,
    waitForRemotePeer,
    createDecoder,
    createEncoder,
    Protocols,
    IFilterSubscription,
} from '@waku/sdk';

interface PollOption {
    value: string;
    votes: number;
}

interface PollMessage {
    question: string;
    options: { [key: string]: PollOption };
}

interface Poll {
    msgid: string;
    timestamp: string;
    sender: string;
    message: PollMessage;
    // other properties...
}


export const status = ref<string>('connecting...');
export const sender = ref(localStorage.getItem('senderWalletAddress') ?? '');
export const polls = ref<Poll[]>(JSON.parse(localStorage.getItem('polls') ?? '[]'));


export const wakuNode = await createLightNode({
    defaultBootstrap: true,
});

export const waitForRemotePeers = async () => {
    // Wait for a successful peer connection
    await waitForRemotePeer(wakuNode, [
        Protocols.LightPush,
        Protocols.Filter,
    ]);
}

// Choose a content topic
export const contentTopic = '/waku-vue-poll/1/polls/proto';

// message encoder and decoder
export const encoder = createEncoder({ contentTopic, ephemeral: true });
export const decoder = createDecoder(contentTopic);

// Message structure with Protobuf
export const PollQuestionWakuMessage = new protobuf.Type('PollQuestion')
    .add(new protobuf.Field('timestamp', 1, 'string'))
    .add(new protobuf.Field('msgid', 2, 'string'))
    .add(new protobuf.Field('sender', 3, 'string'))
    .add(new protobuf.Field('message', 4, 'string'));

export const serializeMessage = (protoMessage: Message) => {
    return PollQuestionWakuMessage.encode(protoMessage).finish()
}

export function useWaku() {

    async function start() {
        status.value = 'connecting'     
        try {
            await wakuNode?.start().then(() => {
                if (wakuNode.isStarted()) return waitForRemotePeers()
            }).then(() => {
                return wakuNode.connectionManager.getPeersByDiscovery()
            }).then((data:any) => {
                if (
                    wakuNode.libp2p.getConnections().length ||
                    data.CONNECTED.bootstrap.length ||
                    data.CONNECTED['peer-exchange'].length
                ) {
                    subscribe()
                    status.value = "connected"
                }
            })
        }
        catch (error) {
            console.error('Error initializing Waku Light Node:', error);
            status.value = 'not connected';
        }
    }

    async function stop() {
        unsubscribe();
        wakuNode.stop()
        status.value = 'not conencted';
    }
    let subscription = {} as IFilterSubscription

    async function subscribe() {
        if (!wakuNode || status.value !== 'connected') await start();
        try {
          subscription = await wakuNode?.filter?.createSubscription();
          await subscription.subscribe([decoder], (wakuMessage) => {
            const messageObj = PollQuestionWakuMessage.decode(wakuMessage.payload).toJSON();
            const result: Poll = {
                timestamp: messageObj.timestamp,
                msgid: messageObj.msgid,
                sender: messageObj.sender,
                message: JSON.parse(messageObj.message ?? '{}')
            };
            handleSubscriptionResult(result);
          });
        } catch (error) {
          console.error('Error subscribing to Content Topic:', error);
        }
      }

      function handleSubscriptionResult(result:Poll) {
        const msgid = result.msgid;
        const existingPollIndex = polls.value.findIndex(poll => poll.msgid === msgid);

        if (existingPollIndex !== -1) {
          // Update the existing poll
          polls.value.splice(existingPollIndex, 1, result);
        } else {
          // Add the new poll to the array
          polls.value.unshift(result);
        }

        if (polls.value.length > 0) {
            localStorage.setItem('polls', JSON.stringify(polls.value));
        }
      }

    async function unsubscribe() {
        subscription.unsubscribe([contentTopic])
    }

    async function publish(sender: string, message: string, timestamp: string = new Date().toUTCString(), msgid: string = Date.now() + Math.floor(Math.random() * 90000).toString()) {  
        if (!wakuNode || status.value !== 'connected') await start()

        try {
            const protoData = PollQuestionWakuMessage.create({
                timestamp: timestamp,
                msgid: msgid,
                sender: sender,
                message: message
            })

            return wakuNode.lightPush.send(encoder, { payload: serializeMessage(protoData) })
        }
        catch (error) {
            console.error('Error publishing to Content Topic:', error);
        }
    }

    return {
        wakuNode,
        status,
        sender,
        polls,
        start,
        stop,
        subscribe,
        unsubscribe,
        publish,
    };
}

The above code enables interaction with the Waku network, enabling the creation and participation in polls within a Vue application.

Firstly, we import necessary functions and define data structure using TypeScript interfaces to set a standard for PollOption, PollMessage and Poll. These structures represent the questions and options available in a poll and the overall structure of a poll, respectively.

Reactive variables (status, sender, and polls) are defined to keep track of the connection status, the sender's information, and the list of polls. These variables will be necessary for updating the Vue application in response to changes in the Waku network.

Notice that we didn’t make WakuNode or any variable interacting with the Waku network directly reactive. As this will trigger issue #1746 due to Waku nodes being too complex for Vue mechanisms to handle, so we have to keep the WakuNode instance outside Vue’s reactive scope.

BTW, this took me almost 3 months to figure out 😭

The WakuNode connection is established using the createLightNode function, optimizing resource usage by creating a Waku light node. This node connects to the Waku network and waits for peers to join using the LightPush and Filter Protocols. We defined a specific Content Topic for this app to categorize messages and should have this format, /{application-name}/{version}/{content-topic-name}/{encoding}, make sure to replace WAKU_CONTENT_TOPIC with your actual Content Topic. and Protobuf is utilized for encoding and decoding messages efficiently to suit the PollQuestionWakuMessage message structure.

After connecting to the Waku network, interaction follows. We created a function called useWaku() that encapsulates and returns all the variables and methods needed to interact with Waku across the entire application.

First, we have the start() function that initiates the WakuNode connection, waits for peers to connect and subscribes to the chosen content topic, before updating the user’s status to status.value = "connected".

Next, we have stop() function that unsubscribes from the Content Topic and stops the WakuNode, before updating the user’s status to status.value = 'not conencted'.

Next, we have the subscribe() function that creates a subscription to the Content Topic using the Waku Filter, receives incoming poll messages, decodes them and updates the polls list. The handleSubscriptionResult function decodes incoming poll messages, checks for duplicates, and updates the list of polls accordingly.

Next, we have the unsubscribe() function that disconnects the app from the Content Topic.

Finally, the publish() function accepts the necessary parameters to create a new poll message and send the encoded poll message to the Waku network using the LightPush protocol.

Implement Wallet Connect Logic

The sender variable in the “waku.ts” composable stores the wallet address of the connected wallet. For us to implement wallet connect, we need to first install “Web3.js” by running the following command in the terminal:

npm install web3

Since Vue 3 uses webpack v5, we need to install Node Polyfill Webpack Plugin to provide the polyfills necessary for emitting Web3.js events in the browser. Run the following command in the terminal to install the Node Polyfill Webpack Plugin:

npm i node-polyfill-webpack-plugin

Then include it in the “vite.config.ts” so that your “vite.config.ts” looks like this:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  optimizeDeps: {
    include: ['node-polyfill-webpack-plugin'],
  },
  esbuild: {
    supported: {
      'top-level-await': true
    }
  }
});

You will notice we are also supporting top-level-await, this is because we are instantiating WakuNode at a top-level and the Vite build doesn’t support this.

Inside the “client.ts” we will have the following code:

import Web3 from 'web3';
import { useWaku } from './waku';
import { sha256 } from 'crypto-hash';

declare global {
    interface Window {
        ethereum: any;
        web3: any
    }
}

const waku = useWaku()
export const generateUniqueID = () => {
    const userAgentHash = sha256(navigator.userAgent + Math.floor(Math.random() * 90000));
  return userAgentHash;
};

// Validate Ethereum Address
export const validateEthereumAddress = (address:any) => {
    return /^(0x)?[0-9a-fA-F]{40}$/.test(address);
}

export function useWalletConnect() {
    // Improved connectWallet Function
    async function connectWallet() {
        if (window.ethereum) {
            try {
                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
                window.web3 = new Web3(window.ethereum);

                if (accounts.length > 0 && validateEthereumAddress(accounts[0])) {
                    const walletAddress = accounts[0];
                    waku.sender.value = walletAddress;
                    localStorage.setItem('senderWalletAddress', walletAddress);
                } else {
                    console.error('Invalid Ethereum address detected. Generating fallback ID.');
                    generateUniqueID().then((hashID) => {
                        const newHash = 'abcdef012345'[Math.floor(Math.random() * 12)] + "x" + hashID.slice(-20);
                        waku.sender.value = newHash;
                        localStorage.setItem('senderWalletAddress', newHash);
                    });
                }

                await waku.start();
            } catch (error) {
                console.error('Error connecting wallet:', error);
            }
        } else {
            console.log('No Ethereum wallet detected.');
        }
    }


    async function disconnectWallet() {
        localStorage.removeItem('senderWalletAddress');
        localStorage.removeItem('polls');
        // stop waku's light node
        await waku.wakuNode.stop();
        waku.stop()
        waku.sender.value = ""
        waku.status.value = "connecting..."
        waku.polls.value = []
    }
    async function signMessage(msgid: string, stringifiedMessage:string) {
        const messageToSign = `Message ID: ${msgid}, Content: ${stringifiedMessage}`;
        let signature;
        try {
            signature = await window.ethereum.request({
                method: 'personal_sign',
                params: [messageToSign, waku.sender.value],
            });
            return signature
        } catch (signError) {
            console.error('Error signing the message:', signError);
            return;
        }
    }

    return {
        connectWallet,
        disconnectWallet,
        signMessage
    };
}

The above code enables users to connect their crypto wallet to the app as a means of identification. In this scenario, we used the wallet address as the sender of the poll.

However, some users may not have wallets and we don’t want to limit the application to only users that have crypto wallets. To tackle this, we created the generateUniqueID() function to form a random hash from the navigator.userAgent address of the user’s browser. Then we store the sender’s address in localStorage as “'senderWalletAddress'”.

We also created a disconnectWallet() function to remove the wallet address from localStorage and stop the WakuNode running.

To claim ownership of the polls, users have to sign each poll message using their wallet, for this the signMessage function is executed.

The useWalletConnect composable encapsulates and returns the connectWallet, disconnectWallet and signMessage functions so that they are accessible across the application.

Building the UI Components

Now that we have our logic, we can build the UI to utilize the data and methods in our composables.

We have 3 major components in this app, the NavBar, Home and Polls. Feel free to create your user interface or use mine:

NavBar: src/components/NavBar.vue
Home: src/views/Home.vue
Polls: src/views/.vue

Creating Polls

If you go through my NavBar component code, you will find that we have a ref called poll:

const poll = ref<Poll>({
  question: "",
  options: {
    a: { value: "", votes: 0},
    b: { value: "", votes: 0},
    c: { value: "", votes: 0},
    d: { value: "", votes: 0},
    e: { value: "", votes: 0}
  }
})

This ref is updated by the modal form, and on submit, we trigger the sendMessage function:

const sendMessage = () => {
  const stringifiedMessage = JSON.stringify(poll.value)
  const msgid = Date.now() + Math.floor(Math.random() * 90000).toString();
  const timestamp = new Date().toUTCString()

  // sign message
  signMessage(msgid, stringifiedMessage).then((signature) => {
    // send a message
    waku.publish(signature, stringifiedMessage, timestamp, msgid)

    // reset question state
    poll.value = {
      question: "",
      options: {
        a: { value: "", votes: 0},
        b: { value: "", votes: 0},
        c: { value: "", votes: 0},
        d: { value: "", votes: 0},
        e: { value: "", votes: 0}
      }
    }
    }
    onToggle()
    // redirect user to where the new poll is populated
    if (router.currentRoute.value.path !== "/polls") {
      router.push("/polls")
    }
  }).catch((error) => {
    console.error("Error sending message", error);
  })
}

In the above code, we stringify the poll data which includes the question, and options so that we can publish the poll as a message to Waku. Then we create a msgid and timestamp for the message, before using the user's wallet to sign the message. Once the message is signed, we call the waku.publish(waku.sender.value, stringifiedMessage) function to register the update for other users subscribing to the Content Topic.

Real-Time Voting and Result Polling

In the “Poll.vue” component, we have a handleVote() function:

const handleVote = async (msgid: string, selectedOption: string | number) => {
  loading.value = true
  try {
    // Find the selected poll in the polls array
    let selectedPollIndex = waku.polls.value.findIndex((poll) => poll.msgid === msgid);

    if (selectedPollIndex !== -1) {
      // Update the vote count before publishing
      waku.polls.value[selectedPollIndex].message.options[selectedOption].votes += 1;

      // Create a reactive copy to trigger reactivity
      const reactiveCopy = reactive({ ...waku.polls.value[selectedPollIndex] });

      // Publish the updated poll

      const stringifiedMessage = JSON.stringify(reactiveCopy.message);

      await waku.publish(reactiveCopy.sender , stringifiedMessage, reactiveCopy.timestamp, msgid);

      // Store the msgid in local storage
      votedPolls.value.push(msgid);
      localStorage.setItem('votedPolls', JSON.stringify(votedPolls.value));
    }
    loading.value = false
  } catch (error) {
    console.error('Error in handleVote:', error);
  }
};

This function is triggered when the radio input of any option is clicked. This function collected the msgid and the selectedOption as parameters. Then call the subscribe() function to fetch the latest version of the polls, before updating the vote counts of an option in the poll that has the msgid.

We created a reactive copy of the poll so that the vote count update will be reflected even if the state changes. Then we publish the reactive copy, which will send the updated poll results to all the users that are subscribed to the Content Topic of this app.

To track the polls a user has voted for, we store a “votePolls” array in the localStorage.

Feel free to play around with the functionality and optimize the performance to meet your application requirements.

Summary of the Article

In this comprehensive guide, we embarked on a journey to integrate Waku, a decentralized communication protocol, into a Vue.js application, creating a real-time voting poll dApp. Let's recap the key takeaways from the guide:

Understanding Waku
- Explored Waku as a family of protocols facilitating private, censorship-resistant communications over a decentralized network.
- Examined Waku's features, architecture, and its focus on privacy, decentralization, and adaptability to various platforms.
- Discussed the different components of Waku, such as Waku Relay, Waku Filter, Waku Store, and Waku Light Push.
Use Cases of Waku
- Discussed real-world scenarios where Waku proves invaluable, emphasizing its role in privacy-focused communication, censorship-resistant messaging, and decentralized communication within dApps.
Building a dApp with Waku and Vue.js
- Set up a Vue.js application using Vite and Tailwind CSS.
- Established a connection to the Waku network, implemented wallet authentication using Web3.js, and integrated the @waku/sdk for decentralized communication.
- Demonstrated the step-by-step process of building a real-time voting poll, connecting to the Waku network.

As you conclude this guide, consider taking the following actions to further explore and experiment with Waku:

Waku Documentation:: Visit the Waku documentation to delve deeper into the functionalities, protocols, and use cases of Waku.
Experiment with Additional Functionalities:: Extend the capabilities of your dApp by experimenting with additional functionalities provided by Waku. Explore features like ephemeral messaging, decentralized storage, and more to enhance your decentralized applications.
Join the Waku Community:: Engage with the Waku community on forums, social media, or developer channels. Connect with like-minded developers, share your experiences, and stay updated on the latest developments within the Waku ecosystem.
Contribute to Waku:: Consider contributing to the Waku project on platforms like GitHub. Whether it's reporting issues, submitting pull requests, or suggesting improvements, your contributions can play a vital role in the growth of this decentralized communication protocol.

Top VSCode AI Extension Tools for Senior Devs

Joel Adewole — Mon, 30 Oct 2023 03:24:54 +0000

In software development, engineers make use of an endless list of tools to bring their ideas and innovations to life. There are tools like browsers, Command Line Interfaces(CLI), databases and more. Then there is the Integrated Development Environment(IDE) that helps developers build other software code and tools.

Code can be written in any text editor, but IDEs provide an environment specifically for software development processes like writing the code, testing, building and deploying. Some IDEs have inbuilt browsers, CLIs, databases, version control etc. while some allow you to install extensions of these tools into your IDE.

Among the popular IDEs are IntelliJ IDEA for Java programming, RubyMine which primarily supports Ruby, PyCharm for Python programming, PhpStrom for PHP programming, Eclipse which supports multiple languages, Android Studio for Andriod app development and supports Kotlin and Java, Xcode for IOS app development and supports Object-C, C++ and Swift, AWS Cloud9 IDE which is cloud-based and support multiple languages, Arduino which is mostly used for hardware programming, NetBeans which is one of the best IDE that support multiple languages and finally the IDE we will focus on in the article, although the list continues, Visual Studio Code(VSCode) which is Microsoft-powered IDE and supports the multiple languages.

Each IDE caters to distinct developer preferences, and understanding their capabilities is crucial for selecting the right environment.

Emphasizing the Need for Extensions

Senior developers recognize that while IDEs are robust on their own, they must enhance their capabilities through extensions. This is not just a preference; it's a necessity in today's dynamic coding landscape. AI extensions, in particular, are vital for more efficient and optimized development processes.

This doesn’t mean junior developers should not explore these tools, but you do not want to fully depend on them, as you need to learn some basic processes and understand how these things work before handing them over to AI to do them for you.

Traditionally, for a developer to implement version control in a new environment he/she might need to install a couple of software, set up configuration/authentication/authorization, and then run a series of commands in an external CLI tool. IDEs like VSCode have made these processes seamless by providing extensions that can automate some of these processes with just a single click or shortcut combination.

For instance, in VSCode, there is a GitHub extension that allows developers to quickly search, edit and commit to any remote repository they have access to directly from the VSCode environment.

Life is not hard, you don't just have the right amount of information to make your life easier than it is. 😝

Top VSCode AI Extensions

Now, let's explore the AI extensions that can truly supercharge your coding experience in VSCode. These are the top AI extensions designed to make your development process smoother, more efficient, and more enjoyable:

GitHub Copilot:

Look at Copilot as an assistant developer, developed by GitHub and OpenAI that helps you generate code from simple prompts that describe what you want to implement.

Here is an example of GitHub Copilot in use:

Blackbox:

Blackbox is an AI coding assistant that helps you provide code completion on the go, documentation and debugging suggestions. It also offers features like code chat, auto-completion, AI commit, code and comments suggestions and difference tracking.

Here is an example of Blackbox in use:

Tabnine:

Tabnine, another remarkable coding assistant, offers code chat, unit tests, documentation, legacy code explanation and code completion suggestions based on your code’s structure.

Here is an example of Tabnine in use:

Intellicode:

Intellicode by Microsoft provides easy access to API usage example codes. With just a single click, you can access examples of 100k+ APIs and let you simulate how other developers will use APIs/functions given.

Here is an example of Intellicode in use:

GitLens AI:

GitLens provides rich code authorship visualization via Git blame annotations and CodeLens, allowing you to seamlessly navigate and explore Git repositories and gain valuable insights on repositories using powerful comparison commands.

Here is an example of GitLens AI in use:

Bito:

Bito, powered by ChatGPT and OpenAI, allows you to interact with a chatbot that supports GPT-4 and GPT Turbo 3.5 models in your VSCode. The chatbot provides complex code explanation, text creation, code editing, documentation and more.

Here is an example of Bito in use:

Mintlify Doc Writer:

Mintlify Doc Writer is your savior when it comes to code documentation. It supports multiple documentation formats and programming languages and helps you create documentation once you highlight a code.

Here is an example of Mintlify Doc Writer in use:

Denigma:

Denigma reads and explains code blocks in natural language. Simply highlight a section of code, right-click, and select to explain with Denigma. This tool comes in handy for technical writers.

Here is an example of Denigma in use:

CodiumAI:

CodiumAI powered by GPT-3.5&4 & TestGPT-1, analyzes code and generates tests to catch bugs before you ship. It detects functions and blocks that need testing and creates test cases for each of them.

Here is an example of CodiumAI in use:

What’s Next?

I shouldn’t tell you what’s next, but I will do you the favour.

As we conclude our exploration of these remarkable VSCode AI extensions, it's your turn to take action. Experiment with these tools, elevate your development game and embrace the power they bring to your coding experience.

Using Tatum Key Management System(KMS) to sign transactions

Joel Adewole — Thu, 12 Oct 2023 09:45:22 +0000

Although there are many views on the various consensus techniques used in blockchain, companies have been working tirelessly to invent solutions to guarantee that digital signatures are secure when authenticating transactions.

To authorize transactions, DApps produce cryptographic signatures using users' private keys or mnemonics. Although this method is quite effective, it has significant downsides. When users' private keys or mnemonics are hacked, their security is jeopardized, and unauthorized users may be able to sign transactions that the owner did not approve. You don’t want that to happen right? Tatum doesn’t either.

To combat this vulnerability, Tatum developed the Key Management System (KMS), a secure tool that enables DApps to sign transactions without using users' private keys or mnemonics.

I will discuss Tatum and Key Management Systems in this article. I will also use sample codes to demonstrate how to sign transactions using Tatum KMS. To follow along, you will need basic knowledge of JavaScript and blockchain.

Let’s take a deeper look at the topic! 👀

What is Tatum

Tatum is a blockchain framework designed to help developers simplify the complexity of blockchain development processes by unifying more than 40 different blockchain protocols and thousands of digital assets.

Tatum facilitates faster and easier development by offering the following frameworks for blockchain operations:

Tatum JS: A unified JavaScript SDK comprising more than 40 blockchain protocols.
Tatum KMS: An open-source key management tool used to store private keys, mnemonics, and sign on-site transactions.
RPC nodes REST API: A REST API which provides commands for all supported blockchains.
Tatum CLI: A blockchain interaction tool accessible via a command line.

What is a Key Management System

The users' private keys are the most essential data in the blockchain ecosystem. The private key and wallet address are generated from the mnemonics used for authenticating wallet owners. The private key should be kept safe to prevent losing the wallet's content, while the wallet address can be shared as it is often referred to as a public key.

Additionally, private keys and mnemonics should be protected because they are the only credentials used to authenticate a wallet. The owner won't be able to access or reclaim the contents of the wallet if they are lost.

How does Tatum KMS work?

Managing and storing private keys and mnemonics calls for a lot of concern and security measures. Tatum provides a better and more secure way to manage these credentials and allow developers to sign transaction easily using its KMS.

Tatum KMS is a comprehensive solution that can be extended to blockchain applications. This solution allows transactions to be signed locally without the need to transfer private keys or mnemonics over the internet.

As a developer, you can use Tatum KMS in your server to generate wallets. For every wallet created by the KMS, a unique identifier signatureId is generated for the private key and mnemonics. Such that when requests are sent to the Tatum API, mnemonics and private keys are replaced with their respective signatureId.

For example, the code below shows an example of how to mint an NFT using fromPrivateKey in the Tatum API endpoint.

const resp = await fetch(
  `https://api-eu1.tatum.io/v3/nft/mint`,
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': 'YOUR_TATUM_DASHBOARD_API_KEY'
    },
    body: JSON.stringify({
      chain: 'CHAIN_SYMBOL',
      tokenId: '100000',
      to: 'RECEIVING_ADDRESS',      
      contractAddress: 'CONTRACT_ADDRESS',
      url: 'URL_OF_THE_FILE',
      fromPrivateKey: 'PRIVATE_KEY_OF_SENDER'
    })
  }
);

const data = await resp.json();
console.log(data);

In the case where KMS is used, you will have to replace fromPrivateKey with the signatureId, as shown below.

const resp = await fetch(
  `https://api-eu1.tatum.io/v3/nft/mint`,
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'x-api-key': 'YOUR_TATUM_DASHBOARD_API_KEY'
    },
    body: JSON.stringify({
      chain: 'CHAIN_SYMBOL',
      tokenId: '100000',
      to: 'RECEIVING_ADDRESS',
      contractAddress: 'CONTRACT_ADDRESS',
      url: 'URL_OF_THE_FILE',
      signatureId: 'PRIVATE_KEY_SIGNATURE_ID_OF_SENDER'
    })
  }
);

const data = await resp.json();
console.log(data);

Signing Transactions using Tatum KMS

To use Tatum API in your application, you need authorization in form of an API key. Tatum provides various plans for their customers which include an unlimited free plan for developers and some paid plans with added functionalities.

You can check the official website to start a plan. Login to your Tatum dashboard using either email and password or social authentication.

At the top-right corner of your Tatum dashboard, click “Create API key” to generate a new API key.

You can use Testnet in development. Make sure you use Mainnet in production You are allowed to create up to two free API keys which can be Mainnet or Testnet.

Next, to set Tatum KMS up in your development environment, visit the GitHub README to install Tatum KMS on your operating system natively or in Docker.

If you’re having issues installing Tatum-KMS, you might be using an NPM version that Tatum-KMS do not support. Currently, the Tatum-KMS works with NPM version 6 and NodeJS>=14.

Tatum KMS is currently available on macOS, Unix and MS Windows. Contact Tatum support or use a virtual machine if your operating system is not supported.

Once you have Tatum configured in your development environment, you can call the Tatum KMS API endpoint in your application.

Getting Pending Transactions

In your application, you can use the Tatum API endpoint below to get pending transactions yet to be signed.

const chain = 'CHAIN_SYMBOL';
const resp = await fetch(
  `https://api-eu1.tatum.io/v3/kms/pending/${chain}?signatures=${SIGNATURE_ID(s)_FROM_KMS}`,
  {
    method: 'GET',
    headers: {
      'x-api-key': 'YOUR_TATUM_DASHBOARD_API_KEY'
    }
  }
);

const data = await resp.text();
console.log(data);

In the code sample above, we called the /kms/pending/${chain} endpoint where the signature query parameter can be multiple signatureIDs separated by spaces(%20) in the URL. The data response is going to be as shown below.

[
  {
    "id": "5e6645712b55823de7ea82f1",
    "chain": "ETH",
    "hashes": [
      "1234987askdjfb1o2873ryskajfb1234987askdjfb1o2873ryskajfb1234987askdjfb1o2873ryskajfb"
    ],
    "serializedTransaction": "alskdjfq8o27fbkasljfbq8o7b4fqo83f7bqejhafbo8q4f",
    "withdrawalId": "5e6645712b55823de7ea82f1",
    "index": 1,
    "txId": "c83f8818db43d9ba4accfe454aa44fc33123d47a4f89d47b314d6748eb0e9bc9",
    "withdrawalResponses": [
      {
        "address": {
          "address": "7c21ed165e294db78b95f0f181086d6f",
          "currency": "BTC",
          "derivationKey": 2147483647,
          "xpub": "xpub6FB4LJzdKNkkpsjggFAGS2p34G48pqjtmSktmK2Ke3k1LKqm9ULsg8bGfDakYUrdhe2EHw5uGKX9DrMbrgYnVfDwrksT4ZVQ3vmgEruo3Ka",
          "destinationTag": 5,
          "memo": "5",
          "message": "5"
        },
        "amount": 0,
        "vIn": "string",
        "vInIndex": 0,
        "scriptPubKey": "string"
      }
    ]
  }
]

Complete Pending Transaction

After getting the pending transactions using the API endpoint in the previous section, you can complete the transaction by calling the API endpoint.

const id = 'TATUM_TRANSACTION_ID';
const txId = 'BLOCKCHAIN_TRANSACTION_ID';
const resp = await fetch(
  `https://api-eu1.tatum.io/v3/kms/${id}/${txId}`,
  {
    method: 'PUT',
    headers: {
      'x-api-key': 'YOUR_TATUM_DASHBOARD_API_KEY'
    }
  }
);

if (resp.status === 204) {
  console.log('success');
} else {
  const data = await resp.text();
  console.log(data);
}

In the code sample above, we called the /kms/${id}/${txId} endpoint, where id is the ID of the pending transaction and txId is the transaction ID of the blockchain transaction.

You will have also noticed we included the API key generated from the Tatum dashboard as x-api-key when calling the API endpoint.

To confirm if the transaction is successful, check the transaction details on Etherscan by browsing https://ropsten.etherscan.io/tx/${txId} where txId is the transaction ID from the blockchain or use the Tatum API endpoint below.

const id = 'TATUM_TRANSACTION_ID';
const resp = await fetch(
  `https://api-eu1.tatum.io/v3/kms/${id}`,
  {
    method: 'GET',
    headers: {
      'x-api-key': 'YOUR_TATUM_DASHBOARD_API_KEY'
    }
  }
);

const data = await resp.text();
console.log(data);

In the above code sample, we called the /kms/${id} endpoint, where id is the transaction ID gotten from Tatum.

Conclusion

Although there are many other key management systems that can be used to manage cryptographic keys, Tatum is a preferred option as it provides other resources that can be used alongside the KMS in the development of blockchain applications.

You can explore more use cases of Tatum KMS. Visit the official documentation to learn how to use other Tatum features.

How to Mint Fungible Tokens in JavaScript Using Agoric

Joel Adewole — Fri, 29 Sep 2023 12:34:20 +0000

Gone are the days of grappling with rigid, one-size-fits-all blockchain tokens. Traditional tokens often fall short of meeting specific project requirements, stifling innovation. However, custom fungible tokens are poised to transform your development efforts.

By learning how to create custom fungible tokens, you'll have the ability to fine-tune your digital assets to meet specific needs, unlocking a world of limitless opportunities. Whether you're thinking of building a dynamic loyalty program, a decentralized marketplace, or your own digital currency, knowing how to mint fungible tokens is your gateway to success.

Are you ready to dive into blockchain and tokenization in JavaScript? This guide is your pathway to understanding how to mint fungible tokens using Agoric, a state-of-the-art platform for building decentralized applications(dApps).

In this article, we'll not only demystify Agoric as a powerful development tool but also highlight the profound importance of fungible tokens in various scenarios. By the end of this article, you'll be well-equipped with the knowledge to effortlessly create fungible tokens using JavaScript and Agoric.

Introduction to Agoric

Agoric is a powerful blockchain platform that offers developers a wide range of tools and features to build decentralized applications(dApps) with ease using Hardened JavaScript. By leveraging Agoric, developers can create, deploy, and manage smart contracts on their private blockchain or the Agoric Mainnet.

Agoric provides a secure and scalable environment for developing blockchain-based solutions. It combines the strengths of JavaScript and secure smart contract design principles to offer a seamless development experience. Developers opt for Agoric because it simplifies the process of building dApps. With its user-friendly interface and ever-improving documentation, Agoric empowers developers to create sophisticated blockchain applications without extensive knowledge of complex blockchain protocols.

Agoric allows developers to choose between using their private blockchain(on local/virtual machines) or deploying their application on the public Agoric Mainnet. The private blockchain option gives developers full control over their networks, while the Mainnet provides access to a wider network of users and potential collaborators.

Understanding Fungible Tokens

Fungible tokens are a type of digital asset that holds relative value and can be exchanged on a one-to-one basis. These tokens are built on blockchain technology, making them secure, transparent, and easily transferable. Understanding fungible tokens is essential for developers and businesses looking to create their own custom tokens for various purposes.

Some common examples of fungible tokens are digital currencies like Bitcoin (BTC), Ethereum (ETH), Litecoin, Cardano, Ripple, DOGE, USD Coin, and Tether USD among the endless list.

Each unit of these cryptocurrencies holds the same value and can be used interchangeably for transactions. This interchangeability is what makes fungible tokens ideal for use in financial systems, supply chain management, and other applications where uniformity and exchangeability are crucial.

Other Types of Token Standards

Apart from fungible tokens, there are also non-fungible tokens (NFTs), Semi-Fungible Tokens, Wrapped Tokens and Security Tokens. Let's take a closer look at these various token standards and understand how they differ:

Non-Fungible Tokens (NFTs): Unlike fungible tokens, NFTs are one-of-a-kind and cannot be exchanged on a like-for-like basis. Each NFT possesses unique attributes and characteristics, making it an excellent choice for representing ownership of digital assets such as art, collectables, or virtual real estate.
Semi-Fungible Tokens: Combining elements of both fungible and non-fungible tokens, semi-fungible tokens can be divided into smaller units like fungible tokens. However, each unit may have its own distinct properties or attributes, providing versatility in token design.
Wrapped Tokens: These blockchain assets represent assets from a different blockchain. For example, wrapped Bitcoin (WBTC) represents Bitcoin on the Ethereum blockchain. Wrapped tokens facilitate cross-chain compatibility and enhance liquidity across different blockchain ecosystems.
Security Tokens: Security tokens represent ownership in underlying assets, such as company shares or real estate properties. These tokens are subject to securities regulations and offer investors specific rights and benefits.

Each token standard serves unique purposes in the blockchain space, offering innovative possibilities for diverse use cases and applications.

Use Cases of Fungible Tokens

Creating your own fungible token offers a versatile toolkit for businesses and developers, opening doors to a wide array of applications. Here are some common and impactful use cases:

Cryptocurrencies: Fungible tokens serve as the foundation for creating digital currencies tailored to specific ecosystems or platforms, facilitating seamless transactions.
Loyalty Programs: Fungible tokens can be employed to construct loyalty points or reward systems, allowing customers to earn and redeem tokens within designated programs.
Supply Chain Management: Fungible tokens can represent physical assets or products within a supply chain, enhancing traceability, transparency, and operational efficiency.
Tokenized Assets: Through the tokenization of real-world assets such as real estate, commodities, or securities, fungible tokens enable fractional ownership and heightened liquidity.
Digital Assets: Fungible tokens have found extensive use as digital assets, encompassing cryptocurrencies, stablecoins, and utility tokens, serving as a medium of exchange or trade within specific ecosystems or exchanges.
Rewards and Loyalty Programs: Businesses can leverage fungible tokens to design reward systems and loyalty programs, offering users incentives like discounts or exclusive products.
Tokenizing Real-World Assets: Fungible tokens are instrumental in the digitization of real-world assets, simplifying fractional ownership and enabling smoother transferability and liquidity.
Governance and Voting: Fungible tokens play a role in decentralized governance, allowing token holders to participate in decision-making processes by voting on proposals.
Crowdfunding and Fundraising: Startups and projects can raise capital through Initial Coin Offerings (ICOs) or Security Token Offerings (STOs) by creating fungible tokens for investors.

These diverse applications of fungible tokens empower developers to craft tailored solutions that address specific use cases and industries.

Minting Fungible Tokens in JavaScript Using Agoric

Now that we've explored the concept and applications of fungible tokens, let's roll up our sleeves and dive into the exciting process of creating them. Thankfully, Agoric provides the perfect toolkit for this endeavor, making the creation of your fungible tokens a seamless experience within a JavaScript environment. Let's kickstart this journey by setting up your Agoric environment on your local machine.

Step 1: Setting up Your Agoric Environment

If you're new to Agoric, the first step is to install the Agoric SDK on your system. You can easily do this by following the official Agoric Getting Started Guide, which provides a step-by-step walkthrough for setting up your Agoric environment.

Please note that the Agoric SDK is compatible with MacOS, Linux, and Windows Subsystem for Linux (WSL). However, it's important to be aware that there is no native support for Windows 10 or Windows 11.

Once you’ve followed the guide, you should have the Agoric CLI tools installed and you'll be able to run Agoric commands from your terminal.
To ensure everything is set up correctly, you can check the versions of the installed tools with agoric --version.

Step 2: Initialize a New Project

In a new project directory, open a terminal and run the following code:

agoric init <project name>
cd <project name>
agoric install
agoric start

This will initialize a new Agoric project in your current working directory, which sets up the basic file structure, installs the necessary dependencies and starts running Agoric Swingset(Agoric VM).

This command will scaffold a new project directory with subdirectories for /contract, /api/, and /ui. Your project directory should have a structure similar to:

/<project name>
|-- contract/
|-- api/
|-- ui/
|-- ...

Now that your environment is ready, let's create a new smart contract for minting fungible tokens.

Step 3: Creating a New Smart Contract

Creating a smart contract in Agoric involves writing the contract's logic and then deploying it to the Zoe platform. Navigate to /contract/src/, you’ll find the contract.js file. In this file, you'll write the logic for the fungible token contract.

Here is our logic for minting a fungible token:

// @ts-check
/* global harden */
import '@agoric/zoe/exported.js';
import { AmountMath } from '@agoric/ertp';
import { Far } from '@endo/marshal';

const start = async (zcf) => {
  // Create the internal token mint for our fungible digital asset.
  const zcfMint = await zcf.makeZCFMint('FungibleToken');

  // Extract the issuer and brand for our token.
  const { issuer, brand } = zcfMint.getIssuerRecord();

  /** @type {OfferHandler} */
  const mintTokens = (seat) => {
    const amount = AmountMath.make(brand, 1000n); // Mint 1000 tokens.
    zcfMint.mintGains(harden({ FungibleToken: amount }), seat);
    seat.exit();
    return 'Minted 1000 tokens successfully';
  };

  const creatorFacet = Far('creatorFacet', {
    makeInvitation: () => zcf.makeInvitation(mintTokens, 'mint tokens'),
    getFungibleTokenIssuer: () => issuer,
  });

  const publicFacet = Far('publicFacet', {
    getFungibleTokenIssuer: () => issuer,
  });

  return harden({ creatorFacet, publicFacet });
};

harden(start);
export { start };

Next we have to update our deploy script in /contract/deploy.js to bundle our contract to Zoe.

Here is the logic of the deploy script:

// @ts-check

import * as fs from 'fs/promises';
import '@agoric/zoe/exported.js';
import { makeHelpers } from '@agoric/deploy-script-support';

// This script takes our contract code, installs it on Zoe, and makes
// the installation publicly available. Our backend API script will
// use this installation in a later step.

/**
 * @template T
 * @typedef {import('@endo/eventual-send').ERef<T>} ERef
 */

/**
 * @typedef {object} DeployPowers The special powers that agoric deploy gives us
 * @property {(path: string) => string} pathResolve
 * @property {(bundle: unknown) => any} publishBundle
 * @typedef {object} Board
 * @property {(id: string) => unknown} getValue
 * @property {(value: unknown) => string} getId
 * @property {(value: unknown) => boolean} has
 * @property {() => [string]} ids
 */

/**
 * @param {Promise<{zoe: ERef<ZoeService>, board: ERef<Board>, agoricNames:
 * object, wallet: ERef<object>, faucet: ERef<object>}>} homePromise
 * @param {DeployPowers} endowments
 */
const deployContract = async (homePromise, endowments) => {
  // Your off-chain machine (what we call an ag-solo) starts off with
  // a number of references, some of which are shared objects on chain, and
  // some of which are objects that only exist on your machine.

  const { pathResolve } = endowments;

  const { install } = await makeHelpers(homePromise, endowments);

  const CONTRACT_NAME = 'fungibleToken';
  const { id: INSTALLATION_BOARD_ID } = await install(
    './src/contract.js',
    CONTRACT_NAME,
  );

  // Save the constants somewhere where the UI and api can find it.
  const dappConstants = {
    CONTRACT_NAME,
    INSTALLATION_BOARD_ID,
  };
  const defaultsFolder = pathResolve(`../ui/public/conf`);
  const defaultsFile = pathResolve(
    `../ui/public/conf/installationConstants.js`,
  );
  console.log('writing', defaultsFile);
  const defaultsContents = `\
// GENERATED FROM ${pathResolve('./deploy.js')}
export default ${JSON.stringify(dappConstants, undefined, 2)};
`;
  await fs.mkdir(defaultsFolder, { recursive: true });
  await fs.writeFile(defaultsFile, defaultsContents);
};

export default deployContract;

Step 4: Test and Deploy

After writing your contract, you can also write test cases. To do this, find the /test directory in /contract/src/test and update the files in the folder to satisfy the test case(s) you want.

In the case of successful tests, you can proceed to deploy your contract using the following command:

agoric deploy ./contract/deploy.js

You can learn more about deploying contracts from the official Deployment Guide.

Step 5: Consuming Your Smart Contract

After writing and deploying your smart contract, it's crucial to test its functionality. You can use either of the following ways to test the contract:

Using the REPL: Agoric provides a REPL(Read-Eval-Print-Loop) which can be accessed in the browser, run the following command in the working directory of your Agoric project:

   agoric open —repl

This should launch a REPL in your browser at localhost:8000 and you’d see a UI similar to this:

Using a mini dApp client: For a more user-friendly testing experience, you can build a mini dApp frontend. This dApp can be a simple web application that interacts with the Agoric wallet and allows users to mint tokens, make offers, and interact with the contract. The /ui directory in your project is where you can build this frontend.

To interact with a smart contract in a dApp client, you need to deploy an API that connects the smart contract to the dApp via HTTP. You can use the provided /api/src/handler.js as a starting point and extend it to handle requests related to your fungible token contract. You can learn more about building an Agoric dApp.

Conclusion

In this article, we explored how to mint fungible tokens in JavaScript using Agoric. We discussed the step-by-step guide on minting tokens and provided a detailed explanation of the development process.

As developers, it is crucial to carefully consider our choices based on our specific needs and goals. Minting fungible tokens using Agoric can offer numerous advantages such as customization, scalability, and security. However, it is essential to evaluate whether Agoric aligns with the requirements of your project and explore alternative solutions if necessary.

Remember, the process of minting fungible tokens is just one aspect of blockchain development. There are countless other opportunities and challenges in this space, visit the Agoric documentation and explore more things you can potentially do with this great tool.
You can also join the Agoric community on Discord and connect with other like-minded developers like yourself - feel free to shoot questions there.

10 SEO Tips for Ecommerce Websites

Joel Adewole — Fri, 09 Dec 2022 14:34:05 +0000

Ecommerce websites are a brilliant way to promote and sell your products to potential customers all around the world. However, with so many websites out there, it can be challenging to get noticed and attract traffic to your site. That's where search engine optimization (SEO) comes in. You can increase your website's visibility and ranking on search engines, bringing in more visitors and sales as a result of using effective SEO strategies

Even if you are familiar with SEO, you may not be getting the best results.

Whether you have an ecommerce website or any other site, you might need to optimize it for search engine ranking.

In this article, we will discuss how to optimize your ecommerce website for higher search engine rankings. This will help increase traffic and sales for your business. You will also learn about link building, content marketing, and keyword research. You can then create an effective SEO strategy for your ecommerce website using the tips provided in this article.

Let’s dive in!

What does SEO mean?

Search engine optimization (SEO) involves creating relevant content based on the keywords that people use in search queries to help search engines algorithms understand the content of a website. It also involves adding links and other elements to make the site easy to access and navigate. SEO can help a website rank higher at the top of the search engine results pages (SERPs), increasing its visibility to people searching for specific information.

Additionally, SEO entails improving the website to make it user-friendly and better crawling and indexing by search engines. SEO in ecommerce is specifically intended to boost a product's visibility in search engine results pages to increase sales and conversion rates.

Below is an image of a Google search engine result page showing the result of a search with “Laptop for sale amazon” as the search query.

Why is SEO important in ecommerce?

SEO is important in ecommerce and shouldn't be taken for granted. You can effectively target customers who are looking for goods or services available in your online store.

SEO raises your search engine ranking, which increases organic traffic to your website, creating chances of generating more inquiries and sales rise as a result. Since it provides potential clients with relevant, accurate, and current information, SEO also aids in establishing credibility and trust with them. In the end, SEO aids in boosting revenue and sales for your ecommerce store.

Best SEO practices for ecommerce websites.

Here are some tips for effectively implementing SEO on your website now that you know why it's important for ecommerce websites.

Use relevant keywords properly across your website to improve search engine optimization. You may boost your website's rating by researching keywords and adding relevant keywords to content, title tags, and meta descriptions.

The intentions of your keywords are important. The purpose a user has in mind when searching for a specific keyword is known as keyword intent. There are four different types of keyword intent:
- Directional Intent: users use these keywords to search for a specific website or place. For example, "How far is", "where is", and "Direction".
- Educational Intent: users use these keywords to find information on a specific subject. Examples include "What is" and "How to".
- Transactional Intent: users use these keywords to look for products or services to make a purchase. Examples are "How much" and "Payment".
- Lateral Intent: users use these keywords to look for products or topics related to one another. Say, "An alternative for". It is also recommended to use keyword research tools like Google Keyword Planner, SEMrush, Ahrefs, Moz, Wordtracker, Ubersuggest, AnswerThePublic, Keywords Everywhere and KWFinder
Improve your product pages: since product pages have the most impact on conversions, they are undoubtedly the most crucial ones on an ecommerce website. You can improve the content of your product pages by using relevant keywords in product titles, meta descriptions and product descriptions. You should also use a product-tagging system to ensure that products are precisely classified and effectively optimized for relevant keywords.
Use image alt text: since search engines cannot read images, providing alt text to your product images enables them to know what the image is about. It becomes easier for search engines to crawl your website and raises its position in search results.
Web performance optimization: a slow website might result in a high bounce rate and a low search engine rating. Ensure that you use content delivery networks(CDN), image compression, and code minification to increase the speed at which your website loads.
Utilize structured data: using structured data will help your ecommerce website perform better in search engine results. Structured data allows you to provide details about products and services, such as customer reviews, ratings, and discounts. Structured data can also assist search engines in better understanding the context of your website and index your content.
Create unique content: for ecommerce SEO, developing unique content about your products and services is essential. You can increase the organic traffic to your website by creating educational and helpful content. Additionally, you can boost traffic and conversions by including links to product pages within your content.
Optimize your URLs: users may find it simpler to understand what is on each product or category page if URLs are simplified. URLs should be brief and descriptive, contain relevant keywords, and use hyphens to separate words. As a result, the URL will be easier to read, and indexing the page will be simpler for search engine crawlers.
Monitor your site performance: to ensure the success of your SEO efforts and achieve your desired results, it is essential to regularly monitor the performance of your website. This will help you identify any areas that may need improvement. This can help you make necessary adjustments and improvements to your website in order to increase its visibility and improve its performance in search engine results pages.

You may track your page load times, server response times, and other metrics by using tools like Google Analytics, webpagetest.org, and Pingdom to keep an eye on the performance of your website.

To evaluate the effectiveness of your page and pinpoint areas for development, you can also employ browser development tools. You may also set up alerts or notifications to be informed if the performance of your website drops below a predetermined level. Monitoring your site's performance on a regular basis will help you find and fix any performance problems and make sure that your site is operating effectively.
Monitor your backlinks: by keeping track of your backlinks, you can find any broken links or spam links that can affect your search engine rankings. You can watch and monitor backlinks using tools like Ahrefs or Moz and then utilize the information to improve your ecommerce SEO strategy. This can assist you in determining which websites add value and which might harm the reputation of your website.

A backlink tracking tool allows you to track and evaluate the backlinks to your ecommerce website. It provides data on the quantity, quality, relevancy, and the domains of the backlinks. This information can help you improve your website's search engine rankings.

To monitor your backlinks, you can follow these steps:
- Join a backlink tracking service and add your website to the service.
- Create a list of your backlinks with the tool. A list of the websites and pages that are linked to your website will normally be provided by the program.
- Examine the list of backlinks and judge the value and significance of each. Avoid links from spammy or low-quality websites and seek out backlinks from pertinent websites.
- Follow any alterations or additions to the backlinks throughout time. Usually, the program will send messages or alerts whenever new backlinks are added or old backlinks are deleted.
- Increase the number of high-quality backlinks to your website by optimizing your link-building strategies using the data from the backlink monitoring tool. By doing this, you can raise your website's search engine rankings and increase traffic.
Utilize internal linking: internal linking is a fantastic technique to enhance user experience on your website and facilitate easy content crawling for search engines. Be careful to connect from each page to the appropriate product pages and categories.

An ecommerce website can use internal linking in the following ways:
- Links to comparable or related products should be added to product pages so that customers can simply find related things and browse your whole catalog.
- Link to category pages from the main navigation: To make it easier for users to reach the various product categories on your website, provide links to your category pages in the main menu.
- Link to product pages from category pages: On each category page, include links to specific product pages so visitors may quickly access this information and add things to their cart.
- Link to popular or featured products: To draw attention to your best-selling or most popular things, include links to popular or featured products on your homepage and other prominent pages.
Utilizing internal linking can make it easier for consumers to explore your website and find new products, which will increase the likelihood that they will make a purchase.

With these tips, you should see a significant change in your ecommerce search engine ranking, and also a noticeable improvement in sales and engagements.

Building SEO-enabled ecommerce websites with Medusa

Medusa is a powerful open-source platform for building ecommerce websites that allows you to quickly and easily create highly optimized online stores. The platform is designed to assist business owners and entrepreneurs in setting up profitable online shops that are search engine optimized.

With Medusa, it's simple to manage customer orders, keep track of inventory, and develop aesthetically pleasing user-friendly websites. Advanced capabilities like real-time analytics and automated inventory management are also available on the platform.

To further help you build a unique website experience, Medusa gives you access to a variety of configurable themes and plugins. Medusa is a great choice for organizations that want to quickly create an ecommerce website with SEO capabilities. This is because Medusa has a user-friendly design that is easy to use.

Conclusion

In conclusion, SEO plays a crucial role in the success of any ecommerce website. You can make sure that your website is optimized for search engines by using the advice provided in this article. This will help you rank higher, attract more visitors, and eventually boost sales. Your ecommerce website will also stand out from the crowd and realizes its full potential with a little effort and commitment.

You can reach out to the Medusa team via Discord if you have any inquiries about Medusa or you run into any problems using it. You can get personalized assistance and get your questions answered in real-time by contacting the Medusa team on Discord.

Improving Developer Experience With Dev Portals

Joel Adewole — Thu, 20 Oct 2022 11:19:15 +0000

It is essential to take developers into consideration when designing products, just as user experience influences business decisions. Even if you have the best product in the world, if your developers are having trouble using it or onboarding, it's time to revisit your product designs.

Many people are talking about how important developer experience is to the success of most enterprises. And with time, a lot more businesses will become aware of the impacts and realize their significance.

In this article, we will have a closer look at developer experience and how it differs from user experience, the importance of a successful developer experience, what are dev portals, how to develop a working dev portal and the importance of dev portals.

Let’s jump right in!🚀

What is Developer Experience?

The term "developer experience," often referred to as "DevEx" or "DX," is a new user persona/perception that many companies have embraced to evaluate how developers engage with the tools and systems that support their products.

A great developer experience should enhance the workflows, environments, and procedures that developers use on a daily basis. Although user experience and developer experience are closely related, they are not the same. They should be taken into account while creating a product, but individually.

For instance, let's say that while developing an API, user experience requires taking into consideration factors like request speed to ensure that consumers do not have to wait long for the API to respond. The developer experience, on the other hand, will require taking into consideration factors like speed but also more technical ones like error handling, modularity, documentation, and so on.

Below is an illustration showing the relationship between developer experience and user experience:

Difference Between DevEx and UX

The simplest approach to understanding developer experience is to see it through the perspective of the common idea of user experience, but not to assume them as interchangeable.

Yes! The concepts of developer experience and user experience are distinct due to significant differences.

The approach used to create each experience differs significantly. User experience is more concerned with end consumers using the product, as opposed to developer experience, which focuses more on enabling developers to use the product to build solutions for other end users.

User experience strives to provide equal support to all users, regardless of technical capabilities, unlike developer experience, which aims to provide varying levels of support based on various users' technical capabilities.

PayPal is an excellent real-world example; the user experience makes it simple for customers to make purchases with a few clicks, and the developer experience clarifies which API endpoints or methods to use and how to use API keys to make requests.

Now that you can distinguish between user experience and developer experience, you might want to answer the question of why developer experience is important.

Importance of Developer Experience

The growth of a company is greatly influenced by the experience of its developers. If you are unfamiliar with the term "ramp-up", it generally refers to the capacity to expand a team fast by bringing on a new developer when a project requires scaling. This term introduces us to the ramp-up problem, which arises when a team tries to scale a project by adding new developers. The organization has a ramp-up problem if it takes a long time for new developers to become comfortable with the new environment before they can contribute usefully.

Companies need to improve their developer experience when ramp-up problems are noticed. To onboard new engineers more quickly, they might need to pay closer attention to internal tooling, documentation, and developer support.

Additionally, when developers feel comfortable and secure in their working environment, their work will be of a high quality, which results in timely releases, improved end-user experience, and a boost in the company's revenue.

Finally, developer experience provides stability(reliability, consistency), clarity(intuitive visuals, clear displays), ease of use(quick access, shortcuts, speed), and function for your software development ecosystem(expected behavior, feature-rich).

What are Developer Portals?

Developer portals are single sources of truth or centralized repositories where resources and tools are maintained for developers who use the software of a specific company. Developer portals can be internal or external, and they can regulate who has access to which external or internal resources.

Developers frequently encounter challenges when integrating SDKs, consuming APIs, or contributing to legacy codebases. The developer portal, which we can refer to as the central repository for all relevant documentation and support, can be used to address these challenges.

An ideal developer portal can create an ecosystem around the developer experience of a product, as depicted in the image above.

Most developer portals' primary objective is to provide a sufficient knowledge base free of SME assistance by offering functional and technical documentation.

How to Create a Developer Portal

The idea of developer portals sounds great right?🤩

Since developer portals are designed to hold extensive information about a company, setting one up might take a long time, followed by regular maintenance.

Port is a developer-focused platform that provides organizations with a single source of truth for all operational and infrastructure resources. Blueprints, Entities, and Relations are the three main building blocks of Port, which can be used to establish a complete software catalog, unified standards, or governance over processes in your organization.

To start creating your portal, you might want to check the pricing and plans Port offers. There is a free unlimited plan you can use, and there are paid plans with additional features. To subscribe to any plan of your choice you need to sign up on Port first by navigating to the screen below:

You can sign up with Google or manually fill in the necessary credentials; you will be required to sign up with a work email. Verify your email and setup your organization, and you should see a screen like the image below:

If you reach this point, your authentication is successful, and you can now begin building your self-service developer portal.

Next, we want to design a new blueprint for services. When you click the "Add Blueprint" button in the top-right corner of the blueprint page, a JSON template listing the microservices we can connect to will come up. A service blueprint will appear on the blueprint page after you click "Save".

To examine all of the services included in this blueprint, expand the services pane and customize the ones you need. When the pane is expanded, a pop-up appears that looks like this:

As in the image above, you can adjust each service's properties in the pop-up window. Make sure to click save after editing.

To define an environment blueprint, simply follow the steps above but set the identifier to "environment" instead of "microservice". If you require more details, please see the related documentation.

We want to create entities after creating service or environment blueprints. An entity is a module of software (microservice) that follows a specific blueprint. To create a new Entity, select "Service" from the list of options under "Software Catalog" in the left sidebar. You should then see a screen similar to this one:

At the top-right corner, click “+ Service” to create a new Entity under this blueprint. You should see a form like below, or use the JSON template to create the new Entity.

Click “Create” after filling in the appropriate information, and the new Entity will be added to the list of Entities under the parent blueprint.

We are nearly done. The final building block is Relations, which comes after defining our data model using Blueprints and storing data objects using Entities.

A Relation is a connection between two blueprints and their entities. Relations are only required when multiple Blueprints depend on one another. You can have your entities without creating Relations in a case where the blueprints are independent.

In our case, there is only one service and one blueprint, but if you have more than one and need to synchronize your blueprints, you can use the official documentation as a guide to set up a Relation.

Having successfully created your blueprint, entities and relations for your software infrastructure, feel free to explore the Port environment, you can also define self-service actions and check out the Port complete use case to fully set up your software catalog.

Congrats!🥳 You have successfully created your developer portal using Port.
Developer portals can be created using other tools like Backstage, Apigee, Pronovix, or 3Scale.

Importance of Developer Portals

A functional developer portal shares almost the same significance as a good developer experience. We can highlight some other importance of developer portals like:

Easy onboarding: Developer portals contain tools for easy navigation, search, code samples, or tutorials on how to get started using a specific asset.
Awareness: Developer portals make it easy for developers to comprehend specific workflows and encourage service exploration.
Increased productivity: Instead of spending time looking for information, developer portals enable developers to concentrate on executing their work.
Easy collaboration: Developer portals promote a culture of documentation that ensures all the information a developer needs to access a particular resource is properly documented.

Next Steps

Improving developer experience can have a significant beneficial impact on a company's success. The quality of developers will increase internally and externally, resulting in a ramp-up for the company.

Visit the Port blog for relevant articles if you still have questions regarding developer experience or how developer portals improve developers' experience.

Automating Dependency Management Using Renovate

Joel Adewole — Mon, 19 Sep 2022 05:48:33 +0000

Software development is a process that entails various stages that birth a successful product. From ideation, to design, then development, testing, and production. During this magical process, developers integrate third-party libraries known as Software development kits (SDKs) to help the application meet its intended goal. Since these third-party libraries are created and updated frequently by other developers, consumers must be alert for upgrades and adapt to them.

Maintaining updates may be demanding for developers because they have to reinstall several packages and libraries and even replace ones that become deprecated. Different solutions have been developed by some businesses to address this issue.

In this article, we will discuss how developers can use Renovate to manage dependencies. To follow through with this article, you will need a basic knowledge of libraries, modules, and version control.

What are Dependencies?

Dependencies are a collection of tools, typically modular fragments of code that other applications rely on to carry out specific tasks. Dependencies are mostly supported in object-oriented programming (OOP), where classes extend functionalities to other applications.

Dependencies in JavaScript are referred to as libraries or packages, and they are distributed to consumers using package managers like NPM and Yarn. These package managers provide CLI(Command Line Interface) for managing dependencies in your development environment. For instance, NPM installs packages using the following command:

npm install PACKAGE_NAME

While Yarn uses install to install all the dependencies in a Yarn project.

yarn install

And uses add to install a single dependency in a Yarn project.

yarn add PACKAGE_NAME

After a package has been installed using the CLI, the package name and version are added to the list of dependencies in the "package.json" file in the application folder.

The "dependencies" object in the "package.json" file contains the list of dependencies, where the package names are the keys, and the versions of each package are the values. Here is an example of a list of dependencies:

 "dependencies": {
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
 }

What is Renovate?

Renovate is an open-source software approved by GitHub and other version control solutions to detect changes to dependencies and automatically create PRs(Pull Requests) to resolve these changes.
Renovate can be used on various platforms, like GitHub, GitLab, Azure DevOps, Bitbucket Cloud, Bitbucket Server and Gitea.

Customers including Prisma, Mozilla, Yarn, Netlify, Envoy, Telus, Red Hat, Uber, Cypress, eBay, Algolia, Hashcorp, Atlassian, Microsoft, Sourcegraph, and Buildkite also use Renovate.

Let's now look at how Renovate can be set up in your workflow to automate dependencies management.

Configuring Renovate in Your Workflow

Renovate can be installed on the version control system of your choosing. In this article, for example, we will use GitHub.

On the GitHub Marketplace, search for the Renovate app and click install. Select the organization or account where you wish to install Renovate. Next, choose whether to install Renovate across all of your repositories or just one particular one. We will only select one repository in this article.

Proceed to install Renovate and complete the necessary authentication.

You can sign in using GitHub or GitLab, then you will be redirected to the Renovate Dashboard. Complete the following forms, then submit your registration. If everything goes correctly, you'll be able to access the Renovate Dashboard.

Navigate to the project where Renovate was installed. You should see a screen like this:

Renovate hasn't found any dependency modifications yet, hence the result is "null."

When you visit the GitHub repository for the project where Renovate was installed, you will see a new PR titled "Configure Renovate."

From this PR, you may learn everything you need to know about Renovate in your workflow. The PR also contains a list of detected packages, a list of what to expect(dependencies that need update) and a commit that adds the “renovate.json” file to your project.

Settings for customising Renovate in your project are defined in the "renovate.json" file. However, merge the PR to add the file in the repo.

After merging the onboarding PR, you may determine how frequently Renovate creates PRs of updates by changing the value of the variable "prhourlylimit".

{
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": [
    "config:base"
  ],
  "prhourlylimit": 3,
}

Having set all the necessary configurations, commit the changes. Renovate will create PRs for the dependencies that need updates after a few minutes.

The update PRs target a single dependency and sets the version in the “package.json” file to the latest version available for that dependency. In this case, the previous version of “@testing-library/jest-dom” was version “^5.16.2”, Renovate updated the version to “5.16.5”.
Ensure to check the change logs of the dependencies to learn of any breaking changes, before merging the PR.

Congratulations!🥳 You have successfully configured Renovate in your workflow.

Conclusion

Dependency management can be painstaking sometimes, as developers might need to refactor their implementation due to breaking changes in the dependencies. But the major issue is knowing when these updates are available.
Thanks to Renovate, your application wouldn’t have to break before you notice a change in dependencies.

Check out the official documentation to learn more about how to use Renovate to manage dependencies automatically.

Creating and customizing an HTML5 video player with CSS

Joel Adewole — Mon, 05 Sep 2022 04:08:39 +0000

HTML5 provides a default video player for rendering video assets. However, with CSS we can tweak and customize the styling of the video player to suit our taste or match our website theme or style.

In this article, I will show you how to customize an HTML5 video player with CSS so that you can create a video player that blends seamlessly into the design of your next app.

In order to follow along in this article, you should have a working knowledge of HTML, CSS, and JavaScript, in addition to a working understanding of DOM manipulation and event listening.

I also recommend you use the latest version of your browser or a Chrome browser for the best performance.

What is an HTML5 video player?

An HTML5 video player is an HTML5 streaming technology that was created as a more compatible alternative to Adobe Flash Player. It allows a broadcaster to stream video assets over web platforms via an HLS (HTTPS Live Streaming) protocol to fetch content from CDNs (Content Delivery Networks).

All major browsers and operating systems support HTML5 video players.

What does it mean to customize an HTML5 video player?

Customizing an HTML5 video player means changing the default look or styling to your taste. This is done by writing a new style sheet for the DOM element that renders a selected video player.

Use cases and real-life examples of customized HTML5 video players

You can find real-life examples of customized HTML5 video players on YouTube, the Cloudinary Video Player, JWPlayer, and Video JS. Each of these websites or frameworks utilizes the power of CSS to customize their videos or allow their users to do the same.

As you can see, there are many use cases for custom video players, especially in apps where the video is the primary function (like YouTube, for example). With the following tutorial, you will learn how to create your own HTML5 video player and customize it to look like a native part of your app.

How to create a new HTML5 video player

To create a new HTML5 video player, we will need to create a new project folder. Inside the folder create an HTML file called index.html.

Type the following code in the index.html file:

<!DOCTYPE html>
<html lang="en">
  <body>
  <video src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4"></video>
  </body>
</html>

In the code above, we have an HTML document with a video tag in the body. We also passed in a video URL as the source.

If you preview this webpage in a browser, you should see the following:

In the image above, the HTML5 video player renders a video that we can't interact with because we have not set the necessary parameters to make the video player functional.

To fix this, let’s go ahead to add more attributes to the video tag. Replace the video tag in the HTML document with the following:

<video src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4" controls autoplay loop muted width="400px" height="300px" ></video>

In the code above, we added controls to display the default controls for the video player. By default it is set to true (which means controls is the same as controls="true"). It only accepts true or false as its value.

autoplay is used to decide whether the video should start playing immediately after it is loaded or not. Every new video element has a default autoplay value of false until you include autoplay as an attribute.

loop is used to decide if a video should start again when it ends. Every new video element has a default loop value of false.

muted is used to decide if the video should play with audio or not. Every new video element has a default muted value of false .

Finally, width and height set the horizontal and vertical size of the video.

If you preview the new code in a browser, you should see the following:

Customizing the HTML5 video player

To customize the player we will need to create two additional files: script.js and style.css.

Script.js is where will write the functionality for the video’s controls, while the style.css is where we will write our stylesheet for the video. We could write the contents of the two files inside index.html but that would make our code lengthy and untidy

Replace the content of the index.html with the following code. This will be the structure of the video before customization:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  </head>
  <body>
    <div class="container">
      <video onclick="play(event)" src="https://res.cloudinary.com/codelife/video/upload/v1637805738/intro_l5ul1k.mp4" id="video"></video>
      <div class="controls">
        <button onclick="play(event)"><i class="fa fa-play"></i><i class="fa fa-pause"></i></button>
        <button onclick="rewind(event)"><i class="fa fa-fast-backward"></i></button>
        <div class="timeline">
          <div class="bar">
            <div class="inner"></div>
          </div>
        </div>
        <button onclick="forward(event)"><i class="fa fa-fast-forward"></i></button>
        <button onclick="fullScreen(event)"><i class="fa fa-expand"></i></button>
        <button onclick="download(event)"><i class="fa fa-cloud-download"></i></button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

In the above code, we included our custom stylesheet (style.css) and a Font Awesome CDN link. Then we created a container div, where we included the video and all the controls we added previously.

In the controls div, we have a button that toggles the video playing state, as well as a button to reverse and forward the current time of the video, a button to preview the video in full screen, a button to open the video as a downloadable file, and a div to show the current position of the video timeline.

Next, we write our stylesheet. With the stylesheet, we can alter the default styling of the video player by referencing certain objects with the use of selectors, and then assign a new attribute to each property we want to customize.

To do that, type the following code inside the style.css file:

.container {
  position: relative;
  display: flex;
  width: max-content;
  height: max-content;
  justify-content: center;
  align-items: center;
}  
.container #video {
  width: 600px;
  height: 400px;
  border-radius: 20px;
}
.container .controls {
  position: absolute;
  bottom: 40px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  opacity: 0.2;
  transition: opacity 0.4s;
}
.container:hover .controls {
  opacity: 1;
}
.container .controls button {
  background: transparent;
  color: #fff;
  font-weight: bolder;
  text-shadow: 2px 1px 2px #000;
  border: none;
  cursor: pointer;
}
.container .controls .timeline {
  flex: 1;
  display: flex;
  align-items: center;
  border: none;
  border-right: 3px solid #ccc;
  border-left: 3px solid #ccc;
}
.container .controls .timeline .bar{
  background: rgb(1, 1, 65);
  height: 4px;
  flex: 1;
}
.container .controls .timeline .bar .inner{
  background: #ccc;
  width: 0%;
  height: 100%;
}
.fa {
  font-size: 20px !important;
}

In this file, you will notice that the container has a position of relative. This is to control the position of the other elements inside it.

We set the position of the div with the controls class as position: absolute and bottom: 40px. This will place the controls div 40px from the bottom of the video container. We also specified an !important font size for our icons.

Next, our video player needs functionality, like a play, pause, and fullscreen button, plus the ability for our users to download, rewind, and forward. These functionalities will make our video player interactive.

Input the following code into script.js:

// Select the HTML5 video
const video = document.querySelector("#video")
// set the pause button to display:none by default
document.querySelector(".fa-pause").style.display = "none"
// update the progress bar
video.addEventListener("timeupdate", () => {
  let curr = (video.currentTime / video.duration) * 100
  if(video.ended){
    document.querySelector(".fa-play").style.display = "block"
    document.querySelector(".fa-pause").style.display = "none"
  }
  document.querySelector('.inner').style.width = `${curr}%`
})
// pause or play the video
const play = (e) => {
  // Condition when to play a video
  if(video.paused){
    document.querySelector(".fa-play").style.display = "none"
    document.querySelector(".fa-pause").style.display = "block"
    video.play()
  } else{
    document.querySelector(".fa-play").style.display = "block"
    document.querySelector(".fa-pause").style.display = "none"
    video.pause()
  }
}
// trigger fullscreen
const fullScreen = (e) => {
  e.preventDefault()
  video.requestFullscreen()
}
// download the video
const download = (e) => {
  e.preventDefault()
  let a = document.createElement('a')
  a.href = video.src 
  a.target = "_blank"
  a.download = ""
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}
// rewind the current time
const rewind = (e) => {
  video.currentTime = video.currentTime - ((video.duration/100) * 5)
}
// forward the current time
const forward = (e) => {
  video.currentTime = video.currentTime + ((video.duration/100) * 5)
}

In the code snippet above, we created a constant video which is used to identify the video in the various functions of the script file.

The pause icon is set to display: none by default. We then ran an event listener on the video, to check timeupdate. For every time update, we update the width of the inner progress bar to the percent current time of the total duration of the video using this formula:

let curr = (video.currentTime / video.duration) * 100

Then we created a function called play that we use to toggle the playing state of the video and decide which buttons to display. For this, we wrote some logic, where if the play button is clicked when the video.paused is true we hide the pause button, display the play button, and play the video, else we do the opposite for each item.

For the fullscreen function, we just trigger a requestFullscreen() function on the video element. In the download function, we created a new a tag and assign the video URL as the href attribute.

Next, we set the target as _blank to open the downloadable video in a new tab. Then we programmatically clicked the new link we created using the click() function.

We also need to create functions to rewind or forward the video. We can do this by using the following logic:

For rewind:

video.currentTime = video.currentTime - ((video.duration/100) * 5)

For forward:

video.currentTime = video.currentTime + ((video.duration/100) * 5)

If we did everything right, we should have the following result:

Conclusion

In this article, we have learned what it means to customize an HTML5 video player and how to do it ourselves using CSS. However, you can always challenge yourself to add more features to make your video blend in even better with your own UI.

If you have any questions, feel free to drop them in the comment section below.

How to Mint NFTs Using Tatum NFT Express in JavaScript

Joel Adewole — Fri, 22 Jul 2022 13:08:00 +0000

To implement NFT minting, blockchain developers typically use tools like Cadence and Moralis. Thanks to these libraries and modules, by utilizing pre-written smart contracts, these tools allow programmers to interact with the blockchain with fewer lines of code than would otherwise be necessary.

Tatum offers a relatively simple way to interact with the blockchain without requiring developers to create new smart contracts and have any knowledge in Solidity or Truffle.
Although, it requires subscribing to different paid plans from which gas fees will be covered, there is a free plan for small scale applications.

In this article, I'll discuss Tatum and demonstrate how to mint NFTs in javascript using Tatum NFT Express. You'll need a basic understanding of the blockchain and JavaScript to follow along. You may not need to become proficient in any blockchain programming language like Solidity to create smart contracts.

With this, let's jump right in 🚀.

What is Tatum?

Tatum offers a unifying framework for thousands of digital assets and more than 40 different blockchain protocols(🤯). It is a versatile platform that aids programmers in minimizing the complexity of most blockchain development processes.

To assist in the reduction of complexity and the faster and simpler scaling of blockchain applications, Tatum offers features like:

NFT Express: This feature enables users instantly mint NFTs on various blockchains with just one API call.
Virtual Account: With this feature, you can access multi-currency wallets, make fee-free transactions, and receive alerts via webhook notifications.
Notification Station: This feature is the simplest and most effective way to be notified about blockchain events.

Minting NFTs with Tatum NFT Express in JavaScript

Tatum is designed to make minting NFTs easier than any other platform that assists developers with this functionality. Since the monthly credit allocation of your paid plan covers gas costs, you can successfully mint any NFT with just one API request and as many as you wish.

You must register on the Tatum dashboard to mint your first NFT using Tatum. As demonstrated below, you can register using either social authentication or an email address and password:

After signing up, you will be redirected to your dashboard, where you can choose between using the Mainnet or Testnet and have access to two free API keys.

📌 NOTE: When deploying your application to real users, you should use the Mainnet rather than the Testnet.

API keys should be kept secret or limited to authorized people, such as the program's developers. If they fall into the wrong hands, they could compromise the security of the application and its users.

In the top-right corner of the dashboard, there is a button labelled "Create API key". By subscribing to a new billing plan, you can create new API keys with extra functionalities, as displayed below:

You can integrate Tatum into your application once you have an API key. You need to configure Tatum first in your IDE or development environment.

Firstly, install the Tatum NFT Express JavaScript SDK by running the command given below in a terminal of your project directory:

npm install @tatumio/tatum

After installing the SDK, we must configure the required environment variables; for the sake of this tutorial, we only need to set the TATUM_API_KEY environment variable. Run the following command in the terminal of your application directory to do this:

export TATUM_API_KEY="YOUR_TATUM_API_KEY"

You should now be able to retrieve the value of your API key from your terminal by executing the following in your application:

console.log(process.env.TATUM_API_KEY);

If everything is well done, we want to use Tatum's mintNFTWithUri() method to implement the functionality for minting NFT. For now, we need to import Tatum into a file called "index.js". Next, call the method with the necessary parameter as shown below:

const Tatum = require('@tatumio/tatum');
Tatum.mintNFTWithUri(false, {
    chain: Tatum.Currency.CHAIN_SYMBOL,
    to: 'ADDRESS_OF_RECEIVER',
    url: 'URL_OF_NFT_METADATA'
}).then(transactionHash => {
    console.log(transactionHash);
});

You will notice no private key or signature ID in the code snippet above. That is because NFT Express uses a default private key, token ID, and built-in smart contracts offered by Tatum to make blockchain requests.

We then logged the 'transactionHash' as the output of the mintNFTWithUri() method, which took the following arguments:

chain: This is the blockchain protocol you want to use to mint NFTs. Tatum permits minting for chains including ETH, MATIC, BSC, CELO, ONE, and KLAY on both the Mainnet and Testnet.
to: The NFT is sent to this blockchain address after it has been minted.
url: this is the metadata of the NFT.

This is my actual code:

const Tatum = require('@tatumio/tatum');
Tatum.mintNFTWithUri(false, {
    chain: Tatum.Currency.ETH,
    to: '0xC34bCC0Be78C84EB94e9544982C5027861ec0D6b',
    url: 'https://i.postimg.cc/Wp0GZFK4/image.png'
}).then(transactionHash => {
        console.log(transactionHash);
});

I want the NFT to be sent to this address: 0xC34bCC0Be78C84EB94e9544982C5027861ec0D6b.
Open the terminal in the program's root directory and enter the following command to execute the application and mint the NFT:

node index.js

You should get something similar to this:

I looked up the transaction hash on EtherScan to see if the mint had been successful, and this is what I found👀:

🥳 TADA! We successfully minted an NFT seamlessly.

Final Thoughts🤔

You will work with the blockchain seamlessly now that you are aware of Tatum, especially if you are a front-end developer.
Tatum contains practically everything you may need while working with blockchains. You can also learn more about:

How to Build a Music Playlist with React, Spotify, and Fauna

Joel Adewole — Thu, 23 Sep 2021 22:55:00 +0000

Written in connection with the Write with Fauna Program.

Using React, Spotify API, and Fauna Database, we can build a personalized music playlist.

In this article, I will show the step-by-step procedures the average developer will follow to build this application. We will learn how to use Spotify Web API to authenticate users and search for music while using Fauna for data management.

What is Spotify?

Spotify is a music streaming service provider. It provides a developer tool(Spotify Web API) that gives developers access to user and music-related data. In this article, we will be using Spotify for user Authentication and as a music catalog.

Getting started with Spotify Web API

To use Spotify Web API in an application:

Create a Spotify account by signing up at www.spotify.com.
Log in and go to the developer dashboard at https://developer.spotify.com/dashboard.
Register your application by following the steps here: https://developer.spotify.com/documentation/general/guides/authorization/app-settings/.
Take note of/save the CLIENT ID Spotify generated for the application.
Make sure to set the redirect URI of the application to http://localhost:3000/. It would be best if you changed this when you are hosting the application in the public domain.

What is Fauna?

Fauna is a cloud API that provides flexible, serverless, and friendly database instances. In this article, we will be using Fauna to store user and music-related data that we will use in the application.

Getting started with Fauna DB

To use fauna DB:

Create an account by signing up at: https://dashboard.fauna.com/accounts/register

Creating a database for our application

After registering, sign in to the dashboard and click CREATE DASHBOARD.
In the form that comes up, enter the database name and select the Classic region.
Click the CREATE button.

Creating collections

A collection is a group of related data stored in JSON objects.
For this application, we will need two collections: users and playlists.
To create these collections:

Click on NEW COLLECTION.
Enter the collection name.
Click the SAVE button.

Repeat the steps above for the users and playlists collections.

Creating Indexes

Indexes are references to documents other than the default references, used to enhance retrieval or finding of documents.
For this application, we will need two indexes:

playlist_for_user to retrieve all playlists created by a particular user.
user_by_user_id to retrieve the document containing a specific user’s data.

To create these indexes:

Click on NEW INDEX.
For the playlist_for_user index, enter the following details where applicable:
1. Source Collection - playlist
2. Index Name - playlist_for_user
3. Terms - data.user_id
4. Unique - unchecked
For the user_by_user_id index, enter the following details where applicable:
1. Source Collection - users
2. Index Name - user_by_user_id
3. Terms - data.user_id
4. Unique - checked

Generating your Fauna Secret Key

This secret key is what connects our application to the database.
To generate your secret key:

On the left-hand navigation menu, click on security.
Click NEW KEY.
Enter your key name.
Click SAVE and a new key will be generated for you.

Make sure to save the secret somewhere safe.

Building the application

Setting up the application

To start with, I have created a starter application to bootstrap our building process.
You will need to clone it from this GitHub repository by running the following command in your terminal:

git clone https://github.com/wolz-CODElife/Spotify-Playlist-Manager-With-FaunaDB.git

In the folder downloaded, the following directories and files are present:

The folders and files we will be working with are the ones inside src and they are:

app.js : this file will contain the views(routes).
/utils/models.js : this file is where we communicate with the Fauna database.
/utils/Spotify.js : this file is where we communicate with Spotify web API.
The files inside components are react components that we use to build the user interface of the application.

Installing the project’s dependencies

The application uses several node packages, which you will need to install to function well. To install these packages, run the following code in your terminal:

cd Spotify-Playlist-Manager-With-FaunaDB
npm install

Installing FaunaDB node package

For our application to communicate with the database we created earlier, we will need to install the node package provided by fauna. To do this, open your terminal and type:

npm install faunadb

Starting the application

For our application to run, open your terminal and type:

npm start

This should compile the react application and host it on http://localhost:3000/, the terminal should show this result:

Now, open your browser and search http://localhost:3000, this should show the image below on your browser.

Creating our routes

Our application will have four routes: Index, Create, MyCollections and Error.

Index: The home page that users will first see when they launch the application before authentication.
Create: The page where users search for music and create a playlist of their desired music after authentication.
MyCollections: The page where users browse and manage their saved playlists.
Error: The page that comes up if the user goes to an undefined route.

We will define our routes by putting the following codes inside the App.js.

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Index from './components/Index';
import Create from './components/Create';
import Error from './components/Error'
import MyCollections from './components/MyCollections';
const App = () => {
    return (
    <Router>
        <Switch>
        <Route exact path="/" children={<Index />} />
        <Route path="/create" children={<Create />} /> 
        <Route path="/mycollections" children={<MyCollections /> } /> 
        <Route path="*" children={Error} />
        </Switch>
    </Router>
    )
}
export default App;

What we are doing here is checking the particular path a user is on then render the associated component as children props of Route .

Fetching Spotify data

We need three functions: getAccessToken , getUserId and search .

getAccessToken : this function sends a request to Spotify authorization API, if the user is accepts or authorizes Spotify to share his/her data with our application, Spotify will return a accesstoken which our application can later use to makes requests to the other Spotify API routes securely.
getUserId : this function sends a request to Spotify, and if the accessToken is authenticated, Spotify returns the users data to our application.
search : this function sends a requests with an argument term , Spotify will return music tracks that fit the term of the user’s search.

const clientId = "YOUR-SPOTIFY-CLIENT-ID"
const redirectUri = encodeURIComponent("http://localhost:3000/")
const scopes = encodeURIComponent("user-read-private user-read-email playlist-modify-public")
let accessToken
const Spotify = {
    getAccessToken : () => {
        if(localStorage.getItem('accessToken')){
            return JSON.parse(localStorage.getItem('accessToken'))
        }
        accessToken = window.location.hash
        .substring(1)
        .split('&')
        .reduce((initial, item) => {
            let parts = item.split('=')
            initial[parts[0]] = decodeURIComponent(parts[1])
            return initial
        }, {}).access_token
        if (accessToken) {            
            localStorage.setItem('accessToken', JSON.stringify(accessToken))
            return accessToken
        }
        else {
            const accessUrl = `https://accounts.spotify.com/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes}&response_type=token`
            window.location = accessUrl
        }
    },
    getUserId: () => {
        accessToken = Spotify.getAccessToken()
        if (accessToken) {
            const headers = { Authorization: `Bearer ${accessToken}` }
            return fetch("https://api.spotify.com/v1/me", { headers: headers })
            .then(response => response.json())
            .then(jsonResponse => {            
                if (jsonResponse) {
                    const { id, display_name, email, external_urls, images } = jsonResponse
                    const profile = {
                        user_id: id,
                        email: email,
                        name: display_name,
                        image: images[0].url,
                        url: external_urls.spotify
                    }
                    return profile
                }
            })
        }
    },
    search : (term) => {
        accessToken = Spotify.getAccessToken()
        if (accessToken) {
            const headers = {Authorization: `Bearer ${accessToken}`}
            return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, {headers: headers})
            .then(response => { return response.json() })
            .then(jsonResponse => {
                if (!jsonResponse.tracks) {
                    return []
                }
                return jsonResponse.tracks.items.map(track => ({
                    id: track.id,
                    name: track.name,
                    artist: track.artists[0].name,
                    album: track.album.name,
                    image: track.album.images[1].url,
                    uri: track.uri
                }))
            })
        }
    }
}

export default Spotify

Creating the models

Our application has six model functions: createUser , getUser , savePlaylist , getPlaylists , getPlaylist and deletePlaylist .

createUser : takes the user’s data and creates a new document in our Fauna database. If the there was a user registered with the same Spotify ID, the application will throw an error because, we set the user_by_user_id index to accept only unique user_id else, store the user data on the database and create a localstorage item which will contain the user’s details till the user logs out.
getUser : accepts an argument user_id and queries the database using the user_by_user_id index.
savePlaylist : takes the user_id , and a list of music that the user has selected.
getPlaylists ; takes the user_id and returns all the collections of playlists created by that user.
getPlaylist : takes the id of a playlist and returns the list of music in that playlist.
deletePlaylist : takes the id of a playlist and delete the collection.

To create our model, /utils/models.js will contain the following code:

import faunadb, { query as q } from 'faunadb'
const client = new faunadb.Client({ secret: "YOUR-FAUNA-SECRET-KEY" })
export const createUser = async ({user_id, email, name, image, url}) => {
    try {
        const user = await client.query(
            q.Create(
                q.Collection('users'),
                {
                    data: {user_id, email, name, image, url}
                }
            )
        )
        localStorage.setItem('user', JSON.stringify(user.data))
        return user.data
    } catch (error) {
        return
    }
}
export const getUser = async (user_id) => {
    try {
        const user = await client.query(
            q.Get(
                q.Match(q.Index('user_by_user_id'), user_id)
            )
            )
        localStorage.setItem('user', JSON.stringify(user.data))
        return user.data
    }
    catch (error) {
        return
    }
}
export const savePlaylist = async (user_id, name, tracks) => {
    if(!name || !tracks.length){
        return 
    }
    try {
        const playlists = await client.query(
            q.Create(
                q.Collection('playlists'),
                {
                    data: {user_id, name, tracks}
                }
            )
        )
        return playlists.data
    } catch (error) {
        return
    }
}
export const getPlaylists = async (user_id) => {
    let playlistList = []
    try {
        const playlists = await client.query(
            q.Paginate(
                q.Match(q.Index('playlist_for_user'), user_id)
            )
        )
        for (let playlistID of playlists.data) {
            let playlist = await getPlaylist(playlistID.value.id)
            playlistList.push(playlist)
        }
        return playlistList
    } catch (error) {
        return
    }
}
export const getPlaylist = async (id) => {
    try {

        const playlist = await client.query(
            q.Get(q.Ref(q.Collection('playlists'), id))
        )
        playlist.data.id = playlist.ref.value.id
        return playlist.data
    } catch (error) {
        return
    }
}

export const deletePlaylist = async (id) => {
    try {   
        const playlist = await client.query(
            q.Delete(
                q.Ref(q.Collection('playlists'), id)
            )
        )
        playlist.data.id = playlist.ref.value.id
        return playlist.data
    } catch (error) {
        return
    }
}

Creating the Index Page

When the application is initially run, or a user goes to the / route, we expect the application to render an authentication page.

When the Index component loads: if the user has logged in, we redirect the user to ‘/create’ using the useHistory hook else, we want to display the content of the Index component.

The login and signup buttons have an onClick event listener, which calls their appropriate functions when clicked.

The Signup function gets the user’s Spotify ID from Spotify.getUserId function, then tries to create a new user on our Fauna database with the Spotify ID that was gotten. If the ID has been registered before an error message is displayed else, we redirect the user to ‘/create’ route.

The Login function also gets the user’s Spotify ID from Spotify.getUserId function, then query the Fauna database for a user with that ID. If the ID is not found as a user, display an error message else, redirect to ‘/create’ route.

/components/Index.js will contain the following code:

import React from 'react'
import { useHistory } from 'react-router-dom'
import { createUser, getUser } from '../utils/model'
import Spotify from '../utils/Spotify'
const Index = () => {
    const history = useHistory()

    if (localStorage.getItem('user')) {            
        history.push('/create')
    }
    const Signup = () => {
        Spotify.getUserId().then((newUserData) => {
            createUser(newUserData)
            .then(req => {
                if (req)
                    history.push('/create')
                else
                    alert("Spotify account already registered!")
            })
            .catch((err) => console.log(err.message))
        })
    }

    const Login = () => {
        Spotify.getUserId().then((newUserData) => {
            getUser(newUserData.user_id)
            .then(req => {
                if (req)
                    history.push('/create')
                else
                    alert('Spotify account not found! Signup first')
            })
            .catch((err) => console.log(err.message))
        })
    }
    return (
        <>
            <div className="container">
                <br /><br /><br />
                <h1>MusicBuddy</h1>
                <br /><br />
                <span className="btn" onClick={() => Login()}>Login</span>
                <br /><br />
                <p>OR</p>
                <span className="btn" onClick={() => Signup()}>SignUp</span>
            </div>
        </>
    )
}
export default Index

Creating the NavBar component

The NavBar component is where we will have user profile, navigation links and a logout button.

The NavBar accepts a props called userData . We also have a state used to check if the user’s profile dropdown is visible or not. The div with atrribute className="dropDown" has a onMouseEnter and onMouseLeave which changes the userProfile state to true or false. When userProfile is true, the <ul> tag containing the user’s profile is rendered else, it is hidden.

The logout button has an onClick event listener, which clears the localstorage.

components/NavBar.js will contain the following code:

import React, { useState} from 'react'
import { Link } from 'react-router-dom'
import userImg from '../assets/justin.PNG'
const NavBar = ({ userData }) => {
    const [userProfile, setUserProfile] = useState(false)
    return (
        <>
            <div >
                <div className="dropDown" onMouseEnter={() => setUserProfile(!userProfile)} onMouseLeave={() => setUserProfile(false)}>
                    <img src={userData?.image || userImg} alt="user" />
                    {userProfile && <ul>
                        <li><h3>{ userData?.name || 'John Doe' }</h3></li>
                        <li>
                            <p >
                                <a href={userData?.url || '/'} target="_blank" rel="noopener noreferrer">{'Profile >>'}</a>
                            </p>
                        </li>
                    </ul>}
                </div>
                <div>
                    <Link to="/" className="btn">Home</Link>
                    <Link to="/mycollections" className="btn">Collections</Link>
                    <Link to="/" className="btn" onClick={() => localStorage.clear()}>Logout</Link>
                </div>
            </div>
        </>
    )
}
export default NavBar

Creating the create new playlist page

This component contains three other components: NavBar , PlayList and SearchResults .

SearchResults allows users to search for music in our application and fetch a result from Spotify API.
PlayList allows users create a playlist of some selected music and store them in the database.

/components/create.js will contain the following code:

import React, { useState, useEffect } from 'react'
import PlayList from './PlayList'
import SearchResults from './SearchResults'
import Spotify from '../utils/Spotify'
import NavBar from './NavBar'
import { useHistory } from 'react-router-dom'
import { savePlaylist } from '../utils/model'
const Create = () => {
    const history = useHistory()
    const [userData, setUserData] = useState(JSON.parse(localStorage.getItem("user")))
    useEffect(() => {
        if (!localStorage.getItem('user')) {
            history.push('/')       
        }
        setUserData(JSON.parse(localStorage.getItem("user")))
    }, [history])
    const [searchResults, setSearchResults] = useState([])
    const [playListName, setPlayListName] = useState("")
    const [playListTracks, setPlayListTracks] = useState([])
    const search = (term) => {
        if (term !== "") {
            Spotify.search(term).then((searchResults) => setSearchResults(searchResults))
        }
        else {
        document.querySelector("#searchBar").focus()
        }
    }
    const addTrack = (track) => {
        if (playListTracks.find((savedTrack) => savedTrack.id === track.id)) {
        return
        }
        const newPlayListTracks = [...playListTracks, track]
        setPlayListTracks(newPlayListTracks)
    }
    const removeTrack = (track) => {
        const newPlayListTracks = playListTracks.filter((currentTrack) => currentTrack.id !== track.id)
        searchResults.unshift(track)
        setPlayListTracks(newPlayListTracks)
    }
    const removeTrackSearch = (track) => {
        const newSearchResults = searchResults.filter((currentTrack) => currentTrack.id !== track.id)
        setSearchResults(newSearchResults)
    }
    const doThese = (track) => {
        addTrack(track)
        removeTrackSearch(track)
    }
    const updatePlayListname = (name) => {
        setPlayListName(name)
    }
    const savePlayList = (e) => {
        e.preventDefault()
        if (playListName !== "") {
            alert('Playlist added successfully...')
            savePlaylist(userData.user_id, playListName, playListTracks)
            .then(req => {
                if (req) {
                    setPlayListName("")
                    setPlayListTracks([])
                }
            })
        }
        else {
        document.querySelector('#playListName').focus()
        }
    }
    return (
        <>
            <NavBar userData={userData}/>
            <div className="container">
                <h1 >MusicBuddy</h1>
                <article className="section">
                    <SearchResults search={search} searchResults={searchResults} onAdd={doThese} />
                    <PlayList playListTracks={playListTracks} playListName={playListName} onNameChange={updatePlayListname} onRemove={removeTrack} onSave={savePlayList} />
                </article>
            </div>
        </>
    )
}
export default Create

Creating the search results component

This component contains a SearchBar and TrackList component.

SearchBar component contains a form for users to search for random songs from Spotify.
TrackList component displays the search results.

/components/SearchResults.js should contain the following code:

import React, { useState } from 'react'
import TrackList from './TrackList'
const SearchResults = ({ search, searchResults, onAdd }) => {
    return (
        <>
            <div className="trackList">
                <SearchBar onSearch={search} />
                <TrackList tracks={searchResults} onAdd={onAdd} />
            </div>
        </>
    )
}
const SearchBar = ({ onSearch }) => {
    const [term, setTerm] = useState("");
    const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(term);
    };
    return (
    <>
        <form className="form" onSubmit={handleSubmit}>
        <input
            id="searchBar"
            type="text"
            placeholder="Song, album or artist name"
            onChange={(e) => setTerm(e.target.value)}
        />
        <button className="btn" onClick={handleSubmit}>
            SEARCH
        </button>
        </form>
    </>
    );
};

export default SearchResults

Creating the playlist components

This component contains a form and TrackList component.

The form is used to set a name for the playlist the user is creating.
TrackList displays a list of music to be included in the playlist, that the user will create.

/components/PlayList.js will contain the following code:

import React from "react";
import TrackList from "./TrackList";
const PlayList = ({ onNameChange, playListTracks, playListName, onRemove, onSave }) => {
    return (
    <>
        <div className="trackList">
        <form className="form" onSubmit={onSave}>
            <input id="playListName" type="text" onChange={(e) => onNameChange(e.target.value)} defaultValue={playListName} placeholder="Playlist Name" />
            {(playListTracks.length > 0) &&        
            <button className="btn" onClick={onSave}>
                Save to Collections
            </button>}
        </form>
        <TrackList tracks={playListTracks} isRemoval={true} onRemove={onRemove} />
        </div>
    </>
    );
};
export default PlayList;

So far, you should have observed that the SearchResults and the PlayList components imported TrackList .

Creating track list component

This component contains Track component which is mapped to each item of the list of tracks.
/components/TrackList.js will contain the following code:

import React from 'react'
import Track from './Track'
import Img from '../assets/omo.png'
const TrackList = ({ tracks, onAdd, isRemoval, onRemove }) => {
    return (
        <>
            {(tracks.length > 0) &&
                <div className="playList">
                    {tracks.map((track) => {
                        return (
                            <Track key={track.id} track={track} onAdd={onAdd} isRemoval={isRemoval} onRemove={onRemove} />
                        )
                    })}
                </div >
            }
            {(tracks.length === 0) &&
                <div className="playList">
                <img src={Img} alt="Oops!" />
                    <h3>Oops! No Tracks founds</h3>
                    <p>Search and add for a track</p>
                </div>
            }
        </>
    )
}
export default TrackList

Creating the track component

This component accepts a track’s data as an object and renders a Spotify player in <iframe>. It also contains a TrackAction that allows users to add or remove a track from the tracklist.
/components/Track.js will contain the following code:

import React, { useState, useEffect } from 'react'
import bgImg from '../assets/justin.PNG'
const Track = ({ track, onAdd, onRemove, isRemoval }) => {
    const [trackBg, setTrackBg] = useState('')
    useEffect(() => {
        track.image? setTrackBg(track.image) : setTrackBg(bgImg)
    }, [track.image])
    const addTrack = () => onAdd(track)
    const removeTrack = () => onRemove(track)
    return (
        <ul className="track">
            <li>
                <div>
                    <div className="item" >                        
                        <div>
                            <h3>{track.name}</h3>
                            {track.artist} | {track.album}
                        </div>
                        {
                            onAdd || onRemove ?
                                <TrackAction isRemoval={isRemoval} removeTrack={removeTrack} addTrack={addTrack} />
                            :
                                ""
                        }
                    </div>
                </div>
            </li>
            <li>
                <iframe src={"https://open.spotify.com/embed/track/" + track.id} width="100%" height="80" frameBorder="0" allowtransparency="True" allow="encrypted-media" title="preview" />
            </li>
        </ul>
    )
}
const TrackAction = ({ isRemoval, removeTrack, addTrack }) => {
    return (
        <>
            {
                isRemoval ?
                    <button className="btn" onClick={removeTrack}> - </button>
                :
                    <button className="btn" onClick={addTrack}> + </button>
            }
        </>
    )
}

export default Track

Creating the user’s playlist collection page

This component contains a list of all the playlists a user has saved to the Fauna database.

The getPlaylists function gets all the playlists that the authenticated user creates.

The playlists tracks are hidden by default until the user clicks on a particular playlist, then the togglePlaylist function sets the clicked playlist to active, then the tracks that belong to the active playlist are rendered.

The removePlaylist function takes a playlist’s id and deletes it from the database.
/components/MyCollections.js will contain the following code:

import React, { useState, useEffect } from "react";
import NavBar from "./NavBar";
import { useHistory } from "react-router-dom";
import { deletePlaylist, getPlaylists } from "../utils/model";
import bgImg from '../assets/justin.PNG'
import Track from './Track'
const MyCollections = () => {
    const history = useHistory();
    const [userData, setUserData] = useState(JSON.parse(localStorage.getItem("user")));
    const [playlists, setPlaylists] = useState([])
    const [activePlaylist, setactivePlaylist] = useState()
    useEffect(() => {
    if (!localStorage.getItem("user")) {
        history.push("/");
    }
    getPlaylists(userData?.user_id)
    .then(req => {
        return setPlaylists(req)
    })
    .catch((err) => console.log(err.message))
    if (!userData) {
        setUserData(JSON.parse(localStorage.getItem("user")))
    }
    }, [userData, history]);

    const togglePlaylist = (id) => {
        if (activePlaylist === id) {
            setactivePlaylist()
        }
        else {
            setactivePlaylist(id)
        }
    }
    const removePlaylist = (playlist) => {
        deletePlaylist(playlist.id)
        .then(req => {
            const newPlaylist = playlists.filter((list) => list.id !== playlist.id)
            playlists.unshift(playlist)
            return setPlaylists(newPlaylist)
        })
        .catch((err) => console.log(err.message))
    } 
    return (
    <>
        <NavBar userData={userData} />
        <div className="container">
        <h1 >
            My Collections
        </h1>
        <article className="section">            
            <div className="trackList">
                <div className="playList">
                    {playlists.length ?
                        playlists?.map((playlist) => { return (
                            <ul className="track" key={playlist.id}>
                                <li onClick={() => togglePlaylist(playlist.id)}>
                                    <div >
                                        <div className="item" >                        
                                            <div>
                                                <h3>{playlist.name}</h3>
                                            </div>
                                            <button className="btn" onClick={(e) => {
                                                e.preventDefault()
                                                removePlaylist(playlist)
                                            }}> Delete </button>
                                        </div>
                                    </div>
                                </li>
                                {activePlaylist === playlist.id &&
                                    <div >
                                        {playlist.tracks.map((track) => {
                                            return (
                                                <Track
                                                    key={track.id}
                                                    track={track}
                                                />
                                        )})}
                                    </div>
                                }
                            </ul>
                        )
                        })
                    :
                        <h2 >No Playlist saved . . .</h2>
                    }
                </div>
            </div>
        </article>
        </div>
    </>
    );
};
export default MyCollections;

With the components set up this way, our application should run correctly.
We won’t stop there. Notice: there is an error if we go to a route that we did not define. That is because we have to create an error-handling component.

Error handling

We will create a component that will be rendered when user goes to any route we did not define.
/components/Error.js will contain the following code:

import React from 'react'
import { Link } from 'react-router-dom' 
const Error = () => {
    return (
        <div >
            <h1> Oops! Page Not found. </h1>
            <h3><Link to="/create">Go back to safety</Link></h3>
        </div>
    )
}
export default Error

Conclusion

Having created this application successfully integrating Fauna and Spotify in React, we have learned how to authenticate users without emails and passwords by using the Spotify Web API and storing user’s data using Fauna database. We also explored the Spotify Web API search endpoint and how to handle requests and responses from the API while using the Fauna database as a storage medium.

You can download the source code of the working application from my GitHub repository or visit a demo here. You can also contact me via Twitter.

Written in connection with the Write with Fauna Program.

GitHub Repo - {Faster, Easier, Smarter Social Coding}

Joel Adewole — Thu, 17 Jun 2021 11:58:07 +0000

A Repo might sound small or insignificant, however, it can do a great deal in helping every developer's work.

What is all this about???

What is all the Repo, Repo, Repo?

REPO is short-form of REPOSITORY.

A Repository is a kind of a shelter or bank for storing and housing codes, where the owner of the code or permitted visitors can always look-up, edit, or make use of the code.

Surfing the internet, I came across a tool - GitHub which helps maintain projects in the open source community.

GitHub allows developers to manage some kind of cloud/online servers that house their codes in repositories.

How to create a repository:

Sign up for a GitHub account https://github.com
After log-in, in the upper-right corner of any page, find the "+" drop-down menu and select "New Repository".
Give your repository a short, memorable and descriptive name.
Optionally, add a description of your repository.
Choose the visibility option for you repository, this will determine who has access to whatever is stored in the repository.
Optionally, you can choose to initialize the repository with a README file. This file contains summary or guide on how the content of the repository work.
Create the repository.

Meet me : joeladewole3@gmail.com