Meanwhile, sharing snippets with teammates? Still a screenshot or a mess of copy-paste jobs.

Meet recode. Your always-on snippet HQ built for busy developers.

How I got the idea

A few weeks back, the idea hit us during yet another frantic search through terminal history:

Why are we still treating snippets like disposable notes?

What if we had a dedicated, beautiful space to save, search, tag, and reuse snippets instantly—without losing structure or syntax highlighting? That’s how recode was born. 🔥

How recode Works

Drop in a snippet, give it a home, and reuse it everywhere. 🚀

Here’s how it all comes together:

1. Add – Paste your snippet, name it, pick a language, drop in tags.

2. Save – recode stores it securely in Appwrite Databases with secure permissions.

3. Find – Use tag filters, instant search, or command palette to surface snippets in milliseconds.

4. Reuse – Copy, share, duplicate, or edit right from the dashboard.

Need to see it in action? In just one session we migrated our crustiest clipboard history into a polished snippet library—and never looked back.

Import / Export (JSON)

Export your snippet library as a single JSON file for backups, sharing, or migration. Importing validates and normalizes entries, lets you review changes, and preserves tags, languages, and timestamps. ❤️‍🩹

Quick UX

• Dashboard → Import/Export → Export JSON / Upload JSON → Done

Example JSON (array of snippets):

[
  {
    "title": "Readable snippet title",
    "code": "// raw code as a single string",
    "language": "typescript",
    "tags": ["ui", "hooks"]
  }
]

• title (string) – required.
• code (string) – required.
• language (string) – optional; when omitted we auto-detect the language during import.
• tags (string array) – optional; defaults to an empty list when missing.

Any invalid entries are skipped; you’ll get a toast with the number of imported snippets once processing completes.

Challenges Along the Way

• Real-time feel with server-first data.
  Appwrite’s Tables API is powerful, but keeping the UX snappy meant carefully batching calls and normalizing responses for React state.

• Securing user data without slowing them down.
  We leaned on Appwrite Auth for email flows but built custom guards to keep snippet access fast and private.

• Turning static content into an engaging workflow.
  Snippets needed to feel “alive.” Animations powered by Framer Motion add just enough delight without slowing down productivity.

Why Appwrite + Next.js?

We wanted a serverless stack with solid auth, a modern UI pipeline, and rapid iteration:

• Appwrite Cloud handles authentication, database (Tables), permissions, and storage.

• Next.js 15 App Router powers routing, streaming, and SEO.

• Appwrite SDK keeps client/server logic tightly integrated with typed responses.

The Tech Stack (+ Why We Love It)

• Next.js 15 – App Router, server components, route groups.

• TypeScript – End-to-end types, safer Appwrite SDK usage.

• Tailwind + shadcn/ui – Rapid iteration with polished, accessible components.

• Framer Motion – Page/page transitions, modals, subtle feedback.

• Appwrite – Auth, TablesDB, Realtime (coming soon for collaboration).

• Radix UI + Lucide – Accessible primitives and sharp iconography.

• Zod – Validation for snippet payloads and forms.

🚀 Coming Soon: recode API + CLI

We’re wrapping up a lightweight API so you can sync snippets directly from your editor or CI.

# prototype CLI flow
recode login
recode snippet add ./handlers/fetchData.ts --tags utils fetch nextjs
recode snippet search auth --copy

Watch the repo—API keys and SDK docs are on deck.

Quote I Live By

Ship small, ship often.
You don’t need a 10x feature—just make the next commit undeniable.

Try recode Yourself ⚡️

• recode Web App

• GitHub

Let recode handle the snippet chaos, so you can stay focused on building the future.

So without further wasting time, let's start diving into the content! 🐋

How Hashnode AI affected my blog

Hashnode AI can help in writing your article by providing SEO-friendly content/titles, it generates awesome introductions and outros since I started using Hashnode AI, I have noticed that the articles that I used Hashnode AI to write, got more views than other articles that have been written without using the Hashnode AI.

How Hashnode AI affected me

Hashnode AI has helped me to save time in writing articles, also I have been using Rix, it's an AI chatbot that can help me while coding JavaScript, TypeScript, and more!

Although it is still under development and it might provide misleading responses, sometimes it provides helpful responses, also Hashnode AI helped me to write articles, and it can write for me sections that Hashnode AI is capable of writing, for example, Hashnode AI might have written the section of Debugging Tools Based on AI in my article of The Future of Debugging with AI and Machine Learning, the Hashnode AI might have written it, but I might have to double-check if the provided tools are available and providing the debugging experience with AI and Machine Learning or not.

Is paying for Hashnode AI worth it?

Hashnode AI's pricing is pretty good for $7/month, although for students who just consider coding as a hobby and don't generate an income, it might be a barrier for some, if you write a lot and you care about your stats and your time, I recommend you really should subscribe, while Hashnode Pro doesn't provide access to Hashnode AI only, while it provides Priority Support from Hashnode and more!

Thanks for reading!

Thanks for reading my article, I hope you learned more about Hashnode AI, and have considered whether to subscribe or not, thanks for your time, and have a nice day!

Cheers! 🎉

Originally published on DevDojo

Authentication is the most thing that a user does on a website, logging in or out, and it's necessary to take your application's authentication to the next level with password-less authentication. 🚀

This article will be covering how to take your application's authentication to the next level using Prisma and building an API for authentication!

Creating the API

• Start by creating a new Next.js app:

    npx create-next-app passwordless-authentication
    cd passwordless-authentication
  

After creating your Next.js app, it's time to create a new database, in this article, you'll use the free MySQL database provided by PlanetScale! 🔥

After you have created your database on PlanetScale, click on Connect and choose Prisma in the dropdown menu, copy both your .env and schema.prisma files.

• Now, let's install Prisma in our Next.js app:

    yarn add prisma @prisma/client
  

• Once done, let's initialize Prisma:

    yarn prisma init
  

Now, replace the schema.prisma file located in prisma/schema.prisma with the schema you copied from PlanetScale, create a file called .env in the app's root and paste the .env file you copied too.

Finally, we have set up Prisma, we can start coding the actual API. 💙

First, let's create our model/table which defines what the things required for the user, add the following code to your schema.prisma:

model User {
  id        Int      @id @default(autoincrement())
  email     String   @unique
  code     Int
  status   String
}

After that, run:

yarn prisma db push

Once your User table is ready, it's time to code our API, first, we have to create pages/api/newAccount.js file which will handle our new account creation:

import { PrismaClient } from "@prisma/client";

export default function handler(req, res) {
  const prisma = new PrismaClient();
  const nodemailer = require("nodemailer");
  const { email } = req.body;
  // Check if the email is already in use
  prisma.User.findUnique({
    where: {
      email: email,
    },
  }).then((user) => {
    if (user) {
      res.status(400).json({ error: "Email already in use" });
    } else {
      // Create reusable transporter object using the default SMTP transport
      let transporter = nodemailer.createTransport({
        host: "smtp.gmail.com",
        port: 465,
        secure: true, // Use SSL
        auth: {
          user: "someone@gmail.com",
          pass: "xxxxxxxxxxxxxxxxxx",
        },
      });

      // Generate a random 6 digit code
      const code = Math.floor(100000 + Math.random() * 900000);
      // setup email data with unicode symbols
      let mailOptions = {
        from: "someone@gmail.com",
        to: email,
        subject: "Passless Auth Demo",
        text: `Your verification code is ${code}`,
        html: `<b>Your verification code is <strong>${code}</strong></b>`,
      };
      // Send the email
      transporter.sendMail(mailOptions, (error, info) => {
        if (error) {
          console.log(error);
          res.status(500).json({ error: "Internal server error" });
        } else {
          console.log("Message sent: %s", info.messageId);
          // Respond with a message code sent
          res.status(200).json({ message: "Code sent" });
        }
      });

      // Save the user to the database on model User
      prisma.user
        .create({
          data: {
            email: email,
            code: code,
            status: "UNVERIFIED",
          },
        })
        .then((user) => {
          // Respond with a message code sent
          res.status(200).json({ message: "Code sent" });
        })
        .catch((e) => {
          console.log(e);
          res.status(500).json({ error: "Internal server error" });
        });
    }
  });
}

First of all, we are importing the Prisma client and creating a new client and defining nodemailer which we will use with Gmail SMTP to send emails to our users with the verification codes.

After that, it will create a new random verification code and save the email and code into Prisma, we use the email provided in the POST request and check first if the email is already in use, if it is, we return an error to the user, if not, the code sends an email to the user, if sent, it responds with status 202 and if such error occurs, it logs the error in the console and responds with status 500 with Internal server error.

That's how the new account creation system works!

Now, we have to allow the user to login into their accounts, so we create a new file at pages/api/loginAccount.js:

import { PrismaClient } from "@prisma/client";

export default function handler(req, res) {
  const prisma = new PrismaClient();
  const nodemailer = require("nodemailer");
  const { email } = req.body;
  // Check if there is a user with the email
  prisma.user
    .findUnique({
      where: {
        email: email,
      },
    })
    .then(async (user) => {
      // If there is a user with the email
      if (user) {
        // Send the user a verification code
        // Create reusable transporter object using the default SMTP transport
        let transporter = nodemailer.createTransport({
          host: "smtp.gmail.com",
          port: 465,
          secure: true, // Use SSL
          auth: {
            user: "someone@gmail.com",
            pass: "xxxxxxxxxxxxxxxxxx",
          },
        });
        // Generate a random 6 digit code
        const code = Math.floor(100000 + Math.random() * 900000);
        // setup email data with unicode symbols
        let mailOptions = {
          from: "someone@gmail.com",
          to: email,
          subject: "Passless Auth Demo",
          text: `Your verification code is ${code}`,
          html: `<b>Your verification code is <strong>${code}</strong></b>`,
        };
        // Send the email
        transporter.sendMail(mailOptions, (error, info) => {
          if (error) {
            console.log(error);
            res.status(500).json({ error: "Internal server error" });
          } else {
            console.log("Message sent: %s", info.messageId);
            // Respond with a message code sent
            res.status(200).json({ message: "Code sent" });
          }
        });
        // Update the user code
        await prisma.user.update({
          where: {
            email: email,
          },
          data: {
            code: code,
            status: "UNVERIFIED",
          },
        });
        res.status(200).json({ message: "Code sent" });
      }
      // If there is no user with the email
      else {
        // Return an error
        res.status(400).json({ error: "Email not found" });
      }
    });
}

First, we define our Prisma client and nodemailer, after that, we check if there is such a user with the email, if there is, we send the user an email with the verification code and update the database, if not, we return Email not found.

Finally, we have to allow the users to verify their accounts either to login in or create new accounts, so create a file called verifyAccount.js:

import { PrismaClient } from "@prisma/client";

export default function handler(req, res) {
  const prisma = new PrismaClient();
  const { email, code } = req.body;
  // Check the code
  prisma.user
    .findUnique({
      where: {
        email: email,
      },
    })
    .then(async (user) => {
      if (user) {
        // If the user is already verified
        if (user.status === "VERIFIED") {
          res.status(400).json({ error: "Account already verified" });
        }
        // If the code is correct
        else if (user.code === code) {
          // Update the user status to verified
          await prisma.user.update({
            where: {
              email: email,
            },
            data: {
              status: "VERIFIED",
            },
          });
          res.status(200).json({ message: "Account verified" });
        }
        // If the code is incorrect
        else {
          res.status(400).json({ error: "Incorrect code" });
        }
      } else {
        res.status(400).json({ error: "No user found" });
      }
    });
}

Also, here we define only the Prisma client, and we check if the code is correct, so we get the user and check the code, if it is correct, we verify the account, if not we return Incorrect code, if there is no user, we return No user found.

Now, you are ready to run your API, but first, you have to install nodemailer:

yarn add nodemailer
yarn dev

Outro + Source Code

Finally, we are done with this project, we have used Next.js to create our API and used Prisma to interact with our MySQL database provided by PlanetScale.

GitHub Repo: Omar8345/passwordless-authentication/

Introduction

A time-consuming and difficult part of software development is debugging. The application of Machine Learning (ML) and Artificial Intelligence (AI) to debugging, on the other hand, is creating new opportunities for enhancing and speeding up the process. In this article, the current state, advantages, disadvantages, restrictions, and ethical issues of AI and ML in debugging are discussed.

Current Debugging Situation

The classic method of debugging entails checking code by hand for errors, identifying them, and fixing them. This can be time-consuming and difficult when working with large and complex codebases. Debugging frameworks and integrated development environments (IDEs) have recently made the process easier to manage, but they still have certain limits in terms of their capacity to quickly and precisely identify errors.

A study found that since debugging code consumes roughly 75% of engineers' time, software development is significantly hindered. Debugging may therefore be made more effective and efficient by integrating AI and ML into the process. As a result, less time and effort might be needed to find and fix problems.

The Use of Machine Learning and Artificial Intelligence to Debugging

By automating a number of tasks, AI and ML-based debugging can speed up and enhance productivity. By learning from vast datasets, AI systems, for instance, may find patterns in the code that could indicate flaws or issues. This helps to find issues that human developers might miss, improving the accuracy and dependability of debugging.

Automated debugging tools are one method that has potential for utilizing AI in debugging. These tools help developers solve issues more quickly and precisely by examining code and identifying potential weaknesses using machine learning approaches. Automated testing is another area where AI could be used for debugging. Developers may ensure their code works correctly and find any errors prior to release by utilizing ML algorithms to generate test scenarios.

Studies show that there are numerous ways that debugging can benefit from AI and ML. As an illustration, they could aid in accelerating and enhancing the precision, scope, and efficacy of debugging. Delegating the simpler debugging tasks to the machines while developers concentrate on the more challenging ones, such as developing new features and improving the user experience, allows developers to work more productively and effectively.

Machine learning and AI applications for debugging

Applications for AI and machine learning that require debugging include the following:

1. Better and faster debugging: AI and machine learning may hasten and improve the efficiency of debugging by automating the process of identifying and detecting flaws. Instead of wasting time debugging, developers can now concentrate on integrating new features and enhancing current ones.

2. Increased Precision: With machine learning approaches, it is possible to uncover bugs that human developers might miss, improving the accuracy and dependability of the debugging process. The overall quality of the software may rise if fewer issues are resolved before they enter the production stage.

3. Increased adaptability: Conventional debugging methods become less efficient as software development projects grow larger and more complex. By enabling the quick and precise discovery of errors in even the most complex codebases, AI and machine learning can help broaden the debugging process to meet the needs of larger projects.

4. More effective use of developer resources: AI and machine learning can increase developer productivity and efficiency by automating a number of troubleshooting activities. This lets the machines handle the more tedious aspects of debugging while people concentrate on higher-level tasks like creating new features and enhancing the user experience.

5. Continuous improvement: The debugging process can teach AI and machine learning by seeing trends and anomalies that can be used to improve upcoming software releases. This could result in a constructive feedback loop of ongoing improvement where the program gradually becomes more dependable and stable.

Debugging is often an appealing area of research and development for software development teams because to the advantages that AI and machine learning offer. These technologies allow developers to work more efficiently, write better code, and deliver better software to their clients.

Difficulties and Limitations

Despite the potential advantages of utilizing AI and ML in debugging, there are still a number of obstacles to be solved. The need for a huge volume of high-quality data to train ML systems is a big problem. This implies that vast datasets of bug reports, test cases, and other pertinent information from developers are required for AI systems to have access to when debugging.

Another disadvantage is that AI systems may make mistakes or fail to catch serious faults. Developers must be able to comprehend and interpret the data, even though AI algorithms might produce highly precise results.

Ethical Considerations

As more businesses and organizations adopt AI, it is imperative that ethical considerations be included in its development. AI has the ability to significantly improve efficiency and accuracy, but it also has the potential to have unanticipated side effects. For instance, AI has the ability to breach privacy regulations, exacerbate preexisting biases, and remove human decision-making from the equation.

Studies have demonstrated that facial recognition algorithms are less accurate at detecting people with darker skin tones, and when AI-driven assessments are used, there is a risk of bias in hiring and employment decisions. Automatic decision-making technologies may potentially make errors with grave consequences, such as incorrectly convicting someone or denying them access to essential resources.

It is essential to think about the potential drawbacks and take safety procedures to lessen any risks in order to allay these ethical concerns. Algorithms that have been trained on a variety of datasets should be inclusive and equal, according to developers. Companies must also make sure that the data used in AI systems is collected in a way that respects people's privacy and security and is open and honest.

To direct the creation and use of AI technologies, clear legal frameworks are also required. This means ensuring that ethical considerations are taken into account right from the beginning of the development process and that accountability structures are in place to handle any unintended consequences of AI decision-making.

Ultimately, as artificial intelligence continues to change our reality, designers and associations must take into account any potential moral issues. We can make sure that AI is used in a way that is advantageous to everyone by including justice, inclusion, transparency, and accountability into the construction of AI.

Concerns about safety and security

While using AI and computer-based intelligence for problem solving, developers must consider sane safety and security worries. Sensitive data, login credentials, and proprietary code are all commonly handled and stored using these technologies. Data leaks and breaches are more likely since hackers can take advantage of any system flaw.

Automating particular stages of the debugging process is one way to expand the attack surface when employing AI and machine learning. As a result, these systems might develop new weaknesses that hackers could use. These systems' algorithms can potentially be exploited or changed, especially if they were developed using a corrupted dataset.

Another major cause for concern is the potential for data breaches or leaks. Data is handled and stored by these systems, making it more susceptible to theft or unauthorized access. This might compromise the integrity of the debugged software or expose private information.

Strong security measures like encryption, access controls, and intrusion detection systems must be incorporated by developers to guarantee that the processed data is properly protected. Developers may also be required to anonymize sensitive data or limit the amount of data processed in order to lower the risk of data breaches or leaks. Developers can safeguard user privacy and foster trust in the system by being open and honest about how data is used during debugging.

When using AI and machine learning for debugging, developers must be aware of the risks and take the necessary procedures to address privacy and security concerns. Developers can protect important data and increase user confidence with this technique.

Debugging Tools Based on AI

Recently, the development of AI-based debugging tools has begun. These instruments make use of machine learning techniques to find and fix coding faults. Three such resources are available right now:

• Kodezi: A code intelligence platform powered by AI in the cloud. Code completion, syntax highlighting, and automatic formatting are just a few of the features the platform offers to help developers find and fix bugs in their code. Kodezi is currently available for beta testing, and developers are already using it for debugging.

• Snyk: Snyk is a cloud-based program that aids programmers in identifying and resolving security flaws in their code. The program utilizes artificial intelligence to find open-source library issues and then automatically releases fixes for them. Snyk can be used to find and fix security-related bugs in programs even though it wasn't designed with debugging in mind.

• Rookout: Rookout is an AI-based debugging tool that assists developers in finding and resolving production-related errors fast and without the need for code alterations or redeployment. Developers can collect data from running applications, analyze the data, and get deeper understanding of how the program is operating thanks to Rookout's real-time debugging features.

These are just a handful of the AI-based debugging tools that are currently accessible to developers. These tools can speed up the process of discovering and repairing errors, which results in better code overall, but they cannot totally replace human testing and analysis.

Conclusion

In conclusion, the development of faster, more precise, and more potent debugging tools is one of the possible benefits of artificial intelligence and machine learning. These technologies' advantages in debugging make them a promising area for research and development despite a number of issues and constraints that need to be addressed. AI and machine learning can aid developers in writing better code and providing better software to their consumers by analyzing large datasets, identifying trends and anomalies, and continuously improving the product.

But it's also important to understand the ethical issues that arise when AI and machine learning are used to software development. Protective measures and moral concerns must be incorporated throughout the design and development process as one way for developers to lessen potential risks.

We should anticipate much larger developments in software development's debugging and other areas as AI and machine learning continue to improve. We can fully exploit AI and machine learning in the development of the software of the future if we accept these technologies and appropriately use them. 🚀

In this article, we will explain how to use ChatGPT-3 in Python. We will cover the steps necessary to obtain an API key for OpenAI's GPT-3 and how to integrate the language model into a Python application.

Using ChatGPT with Python

To use ChatGPT, there are 2 ways:

• Using the OpenAI library

• Using the OpenAI's API

Using the OpenAI library

To get started, you will need to obtain an API key for OpenAI's GPT-3. This can be done by creating an account on the OpenAI website and applying for access to the GPT-3 API.

Once you have obtained an API key, you will need to install the openai library in Python. You can install this library using pip by running the following command in your terminal or command prompt:

pip install openai

After the openai library has been installed, you can use the following code to initialize the GPT-3 model and generate text:

import openai

# initialize the OpenAI API key
openai.api_key = "your_api_key_here"

# generate text using the GPT-3 model
model_engine = "text-davinci-002"
prompt = "What is the capital of France?"

completions = openai.Completion.create(
    engine=model_engine,
    prompt=prompt,
    max_tokens=1024,
    n=1,
    stop=None,
    temperature=0.5,
)

message = completions.choices[0].text
print(message)

This code will generate a text response to the prompt "What is the capital of France?" using the text-davinci-002 model engine. The response will be printed to the console.

Using the OpenAI's API

OpenAI's API is a cloud-based platform that allows developers to access GPT-3 and other AI models developed by OpenAI. It is a convenient way to incorporate state-of-the-art language processing capabilities into your applications without having to train the models yourself.

To use the OpenAI API, you'll need to sign up for an API key, which will give you access to a limited number of requests per month. With the API key, you can send a request to the API with some input text, and the API will respond with the generated text. You can control the length and content of the generated text by specifying various parameters in the API request.

1. Sign up for an OpenAI API key: Go to the OpenAI website and sign up for an API key. You'll need to provide some information and agree to the terms and conditions.

2. Install the requests library: The requests library is a popular Python library for making HTTP requests. You can install it using pip by running the following command in your terminal:

pip install requests

1. Send a request to the OpenAI API: Use the requests library to send an HTTP POST request to the OpenAI API endpoint. You'll need to specify the API key, the model to use (GPT-3), the input text, and any other parameters you want to control. Here's an example:

import requests

def generate_text(prompt):
    api_key = "your_api_key_here"
    model = "text-davinci-002"
    endpoint = f"https://api.openai.com/v1/engines/{model}/jobs"
    headers = {
        "Content-Type": "application/json",
        "Authorization": f"Bearer {api_key}"
    }
    data = {
        "prompt": prompt,
        "max_tokens": 100,
        "n": 1,
        "stop": None,
        "temperature": 0.5,
    }
    response = requests.post(endpoint, headers=headers, json=data)
    if response.status_code == 200:
        response_json = response.json()
        return response_json['choices'][0]['text']
    else:
        return None

generated_text = generate_text("Hello, how are you?")
print(generated_text)

1. Parse the response: The OpenAI API will respond with a JSON object that contains the generated text. You can parse the response and extract the text to use it in your application.

That's it! With these steps, you can use the OpenAI API to generate text using GPT-3 in Python. Of course, you can modify the parameters and customize the code to fit your specific needs.

Outro 🎉

In conclusion, OpenAI offers two ways for developers to leverage its cutting-edge technology: through the OpenAI API and the OpenAI Library. Both methods provide access to state-of-the-art AI models, allowing for a wide range of use cases, from natural language processing to computer vision. Whether you're a seasoned developer or just starting out, OpenAI has something to offer to bring your AI projects to life.

In this article, we will be exploring how to integrate Cockpit CMS, a headless CMS, with Gatsby to streamline the content management process.

Cockpit is a flexible and user-friendly headless CMS that can be used to manage your website's content. It offers a clean and intuitive interface that makes it easy to manage your website's content and data.

Setup

Before we dive into integrating Cockpit with Gatsby, we need to set up a Gatsby project. If you already have a Gatsby project, you can skip this section.

To create a new Gatsby project, run the following command in your terminal:

npx gatsby new my-gatsby-project

This command will create a new Gatsby project in a directory named my-gatsby-site.

Integrate Cockpit CMS:

To integrate Cockpit with Gatsby, we need to install the gatsby-source-cockpit plugin. This plugin will allow us to fetch data from Cockpit and use it in our Gatsby site.

To install the plugin, run the following command in your terminal:

cd my-gatsby-site
npm install gatsby-source-cockpit

Once the plugin is installed, we need to configure it to connect to our Cockpit instance (get an account from here). To do this, add the following code to your gatsby-config.js file:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-cockpit`,
      options: {
        cockpitConfig: {
          baseURL: `https://YOUR_COCKPIT_URL`,
          accessToken: `YOUR_ACCESS_TOKEN`,
        },
      },
    },
  ],
};

Replace YOUR_COCKPIT_URL with the URL of your Cockpit instance and YOUR_ACCESS_TOKEN with the access token you generated in Cockpit.

Next, we need to create a GraphQL query to fetch data from Cockpit. In your src/pages/index.js file, add the following code:

import React from "react";
import { graphql } from "gatsby";

const IndexPage = ({ data }) => {
  const { allCockpitPages } = data;
  return (
    <div>
      {allCockpitPages.edges.map(({ node }) => (
        <div key={node.id}>
          <h2>{node.title}</h2>
          <p>{node.content}</p>
        </div>
      ))}
    </div>
  );
};

export const query = graphql`
  query {
    allCockpitPages {
      edges {
        node {
          id
          title
          content
        }
      }
    }
  }
`;

This query will retrieve all the data from the Article collection in Cockpit. You can access the data in your components by using the data prop provided by Gatsby. In your src/pages/index.js file, you can use the following code to display the title and content of each article:

import React from "react"

export default ({ data }) => (
  <div>
    {data.allCockpitArticle.edges.map(({ node }, index) => (
      <div key={index}>
        <h2>{node.title}</h2>
        <p>{node.content}</p>
      </div>
    ))}
  </div>
)

This code loops through the edges array in the data.allCockpitArticle object and displays the title and content of each article using a React component.

Finally, you can run gatsby develop in your terminal to start the development server and see the data from Cockpit being displayed on your website.

Now, you have successfully integrated Cockpit CMS with Gatsby 🎉!

Outro

In conclusion, combining Gatsby with Cockpit CMS is a powerful way to streamline the process of managing your website's content. With Gatsby's fast performance and Cockpit's flexible and user-friendly content management system, you can easily create a dynamic website that can handle large amounts of traffic.

In this article, we'll go through the process of building a Telegram bot that allows users to purchase products from your Medusa-powered e-commerce store. We'll be using Python and Flask for the backend and the python-telegram-bot library to interact with the Telegram API.

Step 1: Setting up a Telegram bot

To get started, you'll need to create a Telegram bot. You can do this by talking to the BotFather on Telegram and following the instructions provided. Once you've set up your bot, make a note of the API key that you're given.

Step 2: Building the backend

The backend of the bot will handle all the interactions between the bot and your Medusa store. We'll be using Python and Flask for the backend. You'll need to make sure that the backend can handle requests from Telegram and make calls to the Medusa API to retrieve product information and process orders.

First, let's start by creating a new Flask project and installing the required libraries:

# create a new Flask project
$ mkdir medusa-telegram-bot && cd medusa-telegram-bot
$ python3 -m venv venv
$ source venv/bin/activate
(venv) $ pip install flask python-telegram-bot

Next, let's create a new file called app.py and set up a basic Flask application:

from flask import Flask, request
from telegram import Bot
app = Flask(__name__)

@app.route('/', methods=['POST'])
def handle_update():
    # handle the incoming update from Telegram
    pass

if __name__ == '__main__':
    app.run(debug=True)

Now we need to initialize the bot:

bot = Bot(token='YOUR_TELEGRAM_BOT_TOKEN')

Step 3: Connecting the backend to Telegram

Once the backend is set up, we'll need to connect it to Telegram. This is done by configuring a webhook that points to the URL of the backend. Once this is done, Telegram will send all incoming messages to the backend for processing.

To set up a webhook, we can use the setWebhook method provided by the python-telegram-bot library:

bot.setWebhook(url='https://your-server-url.com/' + bot.token)

Step 4: Connecting Medusa to the Telegram bot

In this step, we'll integrate Medusa into our Telegram bot by using the Medusa Python library. This library provides a simple interface for interacting with the Medusa API and allows us to easily fetch and update products, orders, and other data from our storefront.

Here's an example of how we can use the Medusa library to fetch a list of products from our storefront and send them to the user through Telegram:

from medusa import Medusa

medusa = Medusa(api_key='YOUR_MEDUSA_API_KEY')

@app.route('/handle_message', methods=['POST'])
def handle_message():
    # Get the incoming message from Telegram
    message = request.get_json()
    text = message['message']['text']

    # Determine the user's intent
    if '/products' in text:
        products = medusa.products.list()
        product_list = ''
        for product in products:
            product_list += product['title'] + '\n'
        reply_text = 'Here are a list of products in our store: \n' + product_list
    else:
        reply_text = 'I am sorry, I do not understand what you want me to do.'

    # Send the reply
    reply_to_message(reply_text, message['chat']['id'])

    return 'ok'

In this example, the function checks if the message contains '/products' and then fetch products from Medusa, and sends a list of products to the user through Telegram. You can customize this to fit your needs and you can also add other functionalities like creating a new order, or updating an existing order. Please note that this is just an example and may require further modification to work in your specific use case.

Step 5: Creating the Medusa Module for Telegram Bot Integration

Create a new file called medusa.py in your project directory. In this file, you can define the Medusa class and any other necessary functions or classes:

import requests

class Medusa:
    def __init__(self, base_url, api_key):
        self.base_url = base_url
        self.api_key = api_key

    def create_product(self, product_data):
        headers = {'Authorization': 'Bearer {}'.format(self.api_key)}
        response = requests.post(self.base_url + '/products', json=product_data, headers=headers)
        return response.json()

    def update_product(self, product_id, updates):
        headers = {'Authorization': 'Bearer {}'.format(self.api_key)}
        response = requests.patch(self.base_url + '/products/{}'.format(product_id), json=updates, headers=headers)
        return response.json()

    def get_products(self):
        headers = {'Authorization': 'Bearer {}'.format(self.api_key)}
        response = requests.get(self.base_url + '/products', headers=headers)
        return response.json()

This is an example of how you can define the Medusa class in medusa.py. The class has three methods: create_product, update_product, and get_products. Each method makes a request to the Medusa API using the requests library, passing in the necessary data and headers.

You will need to replace the base_url and api_key with the actual values for your Medusa instance. Additionally, you may need to modify the methods to match the specific API endpoint and request format for the Medusa API.

Once the medusa module is defined and imported in the telegram bot script, you can call the class methods to interact with the Medusa instance.

Please note that this is just an example and you should check the Medusa API documentation for the correct endpoints and request format.

Step 6: Running the Telegram Bot with Medusa Integration

Now that the Telegram bot and Medusa module have been set up, it's time to run the bot and test the integration.

1. Open a terminal or command prompt and navigate to the root directory of your bot project.

2. Start the bot by running the command python3 bot.py (assuming your main bot file is named bot.py).

3. Open Telegram and search for your bot's username.

4. Send a message to the bot and see if the Medusa integration is working as expected.

5. Stop the bot, simply close the terminal/command prompt or use the CTRL+C command.

Note: Make sure that all the required packages installed and the token is correct.

You can now continue to add more functionality and features to your Telegram bot and Medusa integration, and use it in your e-commerce website.

Congratulations 🎉, you have successfully created a Telegram bot that integrates with Medusa, an open-source alternative to Shopify. With this bot, you can now easily manage your e-commerce store and communicate with your customers through Telegram.

It's always a good idea to keep testing and improving your bot, and you can also add new features and functionality as per your requirement. With Medusa and Telegram, the possibilities are endless.

Don't forget to take a break, I went on vacation and that's why I discontinued writing articles. But now I'm back and ready to share more exciting projects and ideas with you. Thanks for reading!

Today we will build a Discord.py and use Flask to allow to integrate the Ethereum wallet addresses with the wallet, you use the Flask frontend to connect the wallet while it's logged in the Flask system and when you want to check if synced, the Discord.py bot sends a JSON POST request to read.

SO LET'S GOOOOO 🔥🔥🔥

Setup the Flask Page

Start by creating a new directory, and in that directory, create a folder for the Flask page:

mkdir metamask-flask-discord
cd metamask-flask-discord
mkdir flask
cd flask

Now, create an app.py file and a log.txt and paste this into the app.py:

from flask import Flask, render_template, Response, request
app = Flask(__name__)

@app.route('/<discord_id>')
def index(discord_id):
    return render_template('index.html', discordId = discord_id)

@app.route('/sync', methods=['POST'])
def sync():
    discord_id = request.json['discordId']
    wallet_address = request.json['walletAddress']
    with open('log.txt', 'r+') as f:
        file = f.read()
        if discord_id in file:
            if wallet_address in file:
                Pass
            else:
                f.write(' ' + wallet_address)
        else:
            f.write('\n' + discord_id + ' ' + wallet_address)
    f.close()

@app.route('/read', methods=['POST'])
def read():
    discord_id = request.json['discordId']
    with open('log.txt', 'r') as f:
        file = f.read()
        if discord_id in file:
            wallet_addresses = file.split(discord_id)[1].split(' ')
            wallet_addresses.pop(0)
            return Response(str(wallet_addresses), mimetype='application/json')
        else:
            return Response('No wallet address found', mimetype='application/json')

This is our main flask file, what we are doing here, we are setting 3 routes:

• / (main)
• sync (to sync with the logs which also syncs with the bot)
• read (provides wallet addresses for a specific user)

And for sync and read we will receive a JSON POST request, POST is more safer, that's why I personally prefer it.

Also, in both sync and read we open up the log.txt either to read wallet addresses for a specific user, or write new wallet addresses for a new user.

Now, let's create the landing page where you can connect your MetaMask wallet:

mkdir templates
touch index.html

Now in your index.html, paste this:

<!DOCTYPE html>
<html>
    <head>
        <title>MetaMask Connection</title>
    </head>
    <body>
        <center>
        <h1>Connect Your MetaMask Wallet Here To Connect With Discord!</h1>
        <button id="connectWallet" onclick="">Connect Wallet</button>
        <button id="syncDiscord" onclick="">Sync Discord</button>

        <p id="walletAddress"></p>

        <script type="text/javascript">
            var discordId = "{{ discordId }}";
            window.walletAddress = null
            const syncDiscord = document.getElementById('syncDiscord');
            const connectWallet = document.getElementById('connectWallet')
            const walletAddress = document.getElementById('walletAddress')


            function checkInstalled() {
                if (typeof window.ethereum == 'undefined') {
                    walletAddress.innerText = 'Please install MetaMask to continue.'
                    return false
                }
                connectWallet.addEventListener('click', connectWalletwithMetaMask)
            }

            async function connectWalletwithMetaMask() {
                const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' })
                .catch((e) => {
                    console.error(e.message)
                    return
                })
                if (!accounts) { return }

                window.walletAddress = accounts[0]
                walletAddress.innerText = window.walletAddress


                connectWallet.innerText = 'Sign Out'
                connectWallet.removeEventListener('click', connectWalletwithMetaMask)
                setTimeout(() => {
                    connectWallet.addEventListener('click', signOutOfMetaMask)
                    syncDiscord.addEventListener('click', syncDiscordWithWallet)
                }, 200 )
            }

            function signOutOfMetaMask() {
                window.walletAddress = null
                walletAddress.innerText = ''
                connectWallet.innerText = 'Connect Wallet'

                connectWallet.removeEventListener('click', signOutOfMetaMask)
                syncDiscord.removeEventListener('click', syncDiscordWithWallet)

                setTimeout(() => {
                    connectWallet.addEventListener('click', connectWalletwithMetaMask)
                }, 200 )
            }

            window.addEventListener('DOMContentLoaded', () => {
                checkInstalled()
            })

            async function syncDiscordWithWallet() {
                alert("If the wallet is already in the system, nothing would happen, if not, it would add it to the bot system.")
                const response = await fetch('/sync', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        walletAddress: window.walletAddress,
                        discordId: discordId
                    })
                })
            }

        </script>
        </center>   
    </body>
</html>

So here we make few buttons, and make a few event listeners which run certain functions, and for example, when the wallet is connected, we replace the event listener to listen to the sign out function, why would the user sign in again if he is already signed in, hahah!

And for syncing here, we send a JSON POST request with walletAddress and discordId to /sync to save it!

Working on our Discord.py bot

Start by creating a directory and creating a .env & bot.py:

mkdir discordbot
cd discordbot
touch .env
touch bot.py

Now, open up your .env file where you save your token just like this:

TOKEN=<your-discord-bot-token-here>

Let's work on the actual bot now:

import discord
from discord.ext import commands
import requests
import os
from dotenv import load_dotenv
load_dotenv()
token = os.getenv('TOKEN')


intents = discord.Intents.all()
bot = commands.Bot(command_prefix='$', intents=intents)

@bot.event
async def on_ready():
    print("Bot is ready")
    print("Username: {}".format(bot.user.name))
    print("ID: {}".format(bot.user.id))
    print("Discord.py Version: {}".format(discord.__version__))
    print("------")

@bot.command()
async def linkwallet(ctx):
    await ctx.author.send("Click on this link to connect your MetaMask Wallet")
    await ctx.author.send("Link your wallet here: http://127.0.0.1:5000/{}".format(ctx.author.id))

@bot.command()
async def readuser(ctx, userid: str):
    r = requests.post('http://127.0.0.1:5000/read', json={'discordId': userid})
    await ctx.send(r.text)




bot.run(token)

So what we are doing is simple, first linkwallet command which actually sending a DM with a link like this to connect: http://127.0.0.1:5000/<discord-id>

And readuser gets a userid and send a JSON request to read and returns the JSON response back to the user!

Try it out!

Let's run the flask app:

cd flask
flask run

And let's run the bot:

cd discordbot
python bot.py

Video Demo:

Important Links 🔗

• GitHub Repo

Thanks for reading!!!

Thanks for reading this article 🚀

Hope you learned something useful !!!

via GIPHY

Working on our Prisma/Next.js API

Start by creating a Next.js project:

npx create-next-app

Now, move into the directory and install Prisma into the project:

cd prisma-with-discord
yarn add prisma @prisma/client

Now, let's get Prisma ready, go to PlanetScale.com which is a free MySQL database provider, sign up and create a database, once the database is ready, click Connect and get the credentials:

Now run:

yarn prisma init

Now paste the .env file you copied from PlanetScale and the same for the prisma/schema.prisma.

So what we are doing that the Discord bot is able to manage records in a Prisma table/model like adding or deleting a record! Which means we need probably 3 API files, add_record, delete_record, view_records, and edit_record.

So now we will make a model in schema.prisma to use it for our testing:

model Sale {
  id Int @id @default(autoincrement())
  item String
  price Float
  currency String
  buyer String
}

Now this is an example of a store sale where we store the sale id, the item sold, the price, and currency of the price, and the buyer who bought the item.

Let's sync in our database:

yarn prisma db push

Here comes the fun part! We will work on the 4 API files, so first let's start with pages/api/add_record.js:

import { PrismaClient } from "@prisma/client"

export default function handler(req, res) {
    const prisma = new PrismaClient()

    const { item, price, currency, buyer } = req.body
    if (!item || !price || !currency || !buyer) {
        res.status(400).json({ message: 'Missing `item`, `price`, `currency` or `buyer`' })
        return
    }
    prisma.sale.create({
        data: {
            item: item,
            price: price,
            currency: currency,
            buyer: buyer
        }
    }).then((result) => {
        res.status(200).json({ message: 'Sale/record created successfully' })
    }
    ).catch((error) => {
        res.status(500).json({ message: 'Error occured while creating the sale record' })
    }
    ).finally(async () => {
        await prisma.$disconnect()
    }
    )
}

So what we are doing here is storing the item, price, currency, and buyer by getting their values from req.body, after that, if one of the 4 parameters are missing, we return an error and we won't proceed into the next step, if we got the 4 parameters, we create the sale record with the data provided and either return a success message or a error message.

Now, let's be able to edit records, so create a file pages/api/edit_record.js:

import { PrismaClient } from "@prisma/client"

export default function handler(req, res) {
    const prisma = new PrismaClient()

    const { sale_id, what_to_update, new_value } = req.body
    if (!sale_id || !what_to_update || !new_value) {
        res.status(400).json({ message: 'Missing `sale_id`, `what_to_update` or `new_value`' })
        return
    }
    prisma.sale.update({
        where: {
            id: sale_id
        },
        data: {
            [what_to_update]: new_value
        }
    }).then((result) => {
        res.status(200).json({ message: 'Sale/record updated successfully' })
    }
    ).catch((error) => {
      res.status(500).json({ message: 'Error occured while updating the sale record, what you can update is `item`, `price`, `currency` or `buyer`' })
    }
    ).finally(async () => {
        await prisma.$disconnect()
    }
    )
}

So what we are doing here as always we are looking for the id of the sale/record, what_to_update which can be for example currency or buyer, with new_value which is the new value for that thing to update.

Also, I might want to be able to delete a record, so create a file pages/api/delete_record.js and paste the following code below:

import { PrismaClient } from '@prisma/client'

export default function handler(req, res) {
    const prisma = new PrismaClient()

    const { sale_id } = req.body
    if (!sale_id) {
        res.status(400).json({ message: 'Missing `sale_id`' })
        return
    }
    prisma.sale.delete({
        where: {
            id: sale_id
        }
    }).then((result) => {
        res.status(200).json({ message: 'Sale/record deleted successfully' })
    }
    ).catch((error) => {
        res.status(500).json({ message: 'Error occured while deleting the sale record' })
    }
    ).finally(async () => {
        await prisma.$disconnect()
    }
    )
}

Now, simply here we are looking for the sale (record in the model/table) using the id because it's unique, so it's impossible to get 2 or more results for a query, and then if we found it, we delete it, if not, we return an error.

Last but not least, let's be able to view records/sales, create a file in pages/api called view_records.js:

import { PrismaClient } from "@prisma/client"

export default function handler(req, res) {
  const prisma = new PrismaClient()

  prisma.sale.findMany().then((result) => {
    res.status(200).json(result)
  }
  ).catch((error) => {
    res.status(500).json({ message: 'Error occured while listing all sales' })
  }
  ).finally(async () => {
    await prisma.$disconnect()
  }
  )
}

So it's very simple what we are doing here, we are just not waiting for any parameters, just listing all the sale records and sending in JSON!

Creating the Discord bot using Discord.py

First go to https://discord.com/developers/applications and create an application:

(the reason why I didn't write "Discord", but instead "Disc0rd" because it won't allow including "Discord" in the bot's name for security purposes, but this is just for educational purposes and we aren't trying to hack anyone)

Click on Bot and Build a bot:

Click reset token and carefully copy the token!

Now, let's run these 3 commands to get setup!

mkdir discord_bot
touch .env
touch main.py

Now open your .env file and put in your TOKEN just like this:

TOKEN=ABC123

After the TOKEN is ready to use, let's start working on the main code for the bot:

import discord
from discord.ext import commands
import requests
import os
import dotenv

dotenv.load_dotenv()
intents = discord.Intents.all()
bot = commands.Bot(command_prefix='!', description="A bot allows you to manage your Prisma records", intents=intents)


@bot.event
async def on_ready():
    print(f'Logged in as {bot.user} (ID: {bot.user.id})')
    print('------')


@bot.command()
async def add(ctx, item: str, price: float, currency: str, buyer: str):
    r = requests.post('http://localhost:3000/api/add_record', json={"item": item, "price": price, "currency": currency, "buyer": buyer})
    await ctx.send(r.json()["message"])

@bot.command()
async def delete(ctx, sale_id: int):
    r = requests.post('http://localhost:3000/api/delete_record', json={"sale_id": sale_id})
    await ctx.send(r.json()["message"])

@bot.command()
async def edit(ctx, sale_id: int, what_to_update: str, new_value: str):
    if what_to_update == "price":
        new_value = float(new_value)
    r = requests.post('http://localhost:3000/api/edit_record', json={"sale_id": sale_id, "what_to_update": what_to_update, "new_value": new_value})
    await ctx.send(r.json()["message"])

@bot.command()
async def view(ctx):
    r = requests.get('http://localhost:3000/api/view_records', json={})
    for item in r.json():
        await ctx.send(f"Sale ID: `{item['id']}` - Item: `{item['item']}` - Price: `{item['price']}` - Currency: `{item['currency']}` - Buyer: `{item['buyer']}`")

bot.run(os.getenv("TOKEN"))

So we are first making some imports for some libraries/modules at the top and then we are creating the Discord Bot Client with using all the intents, it's not recommended to always use all intents but just for testing in this case!

After that we set the bot description, intents, and command_prefix.

Now we start by on_ready to print in the console that the bot is ready to use, after that we start creating commands with @bot.command() and using:

async def <command>(ctx, <arguments ...>):

Here we use this way to create a command, for example I would make the edit command, so I will replace <command> with edit, and in the parentheses we would always start with ctx after that we will put our arguments we need in order with their value type, like this:

(ctx, sale_id: int, what_to_update: str, new_value: str)

And then we send a JSON GET/POST (one of them, both would work) and then return the response.

So let's test it together! Here is a quick 3-minute video for you!

The End!

Thanks for reading this article, I hope you learned new things because I also invested my time writing this :)

Hoping you are having a fruitful day, today we'll convert Figma components to React (Next.js) components! Which is a super time-saver ✨.

Let's go!

1 - Creating an Amplify project

Go to the AWS Amplify page and click on Build an app with AWS Amplify. If required, sign in/sign up for an AWS account, after that, set the app name to your preferred name and click Confirm Deployment.

2 - Creating our Figma

Open the Figma Community Site and search for AWS Amplify UI Kit and use the original one made by AWS Amplify, or use this direct link:

AWS Amplify UI Kit - On Figma

Click the Duplicate button and edit the sample components as your needs.

3 - Import Figma components to AWS Amplify Studio

On the sidebar in the studio, click UI Library and click on Get Started and paste the Figma file you duplicated and continue.

Then you will get all the components, where you can accept/reject every component alone, or only accept all.

4 - Setup Next.js with the Amplify dependencies

In your terminal, run:

npx create-next-app figma-to-next

Now, just to make sure the app is working, run:

npm run dev

And check localhost:3000, now, the app is working, let's install a few things before importing the components from Amplify:

npm i aws-amplify @aws-amplify/ui-react

Now, also a requirement, be sure that you got Amplify CLI installed on your system, to verify that, run:

amplify -v

5 - Import the components from Amplify to Next.js

Open the studio and click Local Setup Instructions and copy the command, and run it in your Next.js project's root folder, now let's check if the components have been imported by running the following simple command:

ls -la ui-components

Now, you're all done! You can now use your components which are made using Figma in React/Next.js!

Have a nice day ✨! See you!

Hold on, Omar? Why do we need Prisma/Next.js? The reason why buddy is because this application allows you to sync your tasks from anywhere in the world!

Without further time wasting, let's get started.

Creating our API

First of all, we need a database, so let's use PlanetScale for this! Head over to planetscale.com and click Get Started, create your database, and wait for it to get ready for work!

Now, launch your terminal and start a new Next.js project using npx after that change directory:

npx create-next-app
cd to-do-list-app

Now after we created our project, let's add Prisma and get it ready so run the following command in the terminal:

yarn add prisma @prisma/client
yarn prisma init

After that we will get a schema.prisma file in the prisma folder, replace the file with the following:

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

So, what we just most importantly changed the database provider to mysql because we are using a MySQL database.

Now on the PlanetScale dashboard, click on Connect and choose Prisma as the option to connect with, copy the .env file provided and create a .env file in your project and paste what you just copied.

Now we will make 2 models, a User and a Task, so add these 2 models to your Prisma schema file:

model User {
  id Int @id @default(autoincrement())
  username String @unique
  password String
  token String @unique
}

model Task {
  id Int @id @default(autoincrement())
  title String
  userToken String
}

Now, your schema file should look like this:

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

model User {
  id Int @id @default(autoincrement())
  username String @unique
  password String
  token String @unique
}

model Task {
  id Int @id @default(autoincrement())
  title String
  userToken String
}

Now run yarn prisma db push to sync your MySQL PlanetScale Database.

We have to now create our API files, first remove pages/api/hello.js file and create a file called register.js in pages/api folder and paste the following code:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { username, password, token } = req.body;
    if (!username || !password || !token) {
        res.status(400).json({
            message: 'Missing username, password or token'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            res.status(400).json({
                message: 'Username already taken'
            });
        } else {
            prisma.user.findUnique({
                where: {
                    token: token
                }
            }).then(user => {
                if (user) {
                    res.status(400).json({
                        message: 'Token already taken'
                    });
                } else {
                    prisma.user.create({
                        data: {
                            username: username,
                            password: password,
                            token: token
                        }
                    }).then(user => {
                        res.json({
                            message: "User created successfully",
                            user: user
                        });
                    });
                }
            }
            );
        }
    });

}

What we are doing here is defining a Prisma client and making variables for username, password, and token. If one of the parameters isn't provided, we return an error:

const prisma = new PrismaClient();
    const { username, password, token } = req.body;
    if (!username || !password || !token) {
        res.status(400).json({
            message: 'Missing username, password or token'
        });
        return;
    }

And for registration we first check if username is used, if yes, we return an error, if not, we check if the token is used, if yes, returns an error as usual, if not, we will proceed to registration:

    prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            res.status(400).json({
                message: 'Username already taken'
            });
        } else {
            prisma.user.findUnique({
                where: {
                    token: token
                }
            }).then(user => {
                if (user) {
                    res.status(400).json({
                        message: 'Token already taken'
                    });
                } else {
                    prisma.user.create({
                        data: {
                            username: username,
                            password: password,
                            token: token
                        }
                    }).then(user => {
                        res.json({
                            message: "User created successfully",
                            user: user
                        });
                    });
                }
            }
            );
        }
    });

Now, we have the user to be able to authenticate/login, create login.js file and paste the following:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { username, password } = req.body;
    if (!username || !password) {
        res.status(400).json({
            message: 'Missing username or password'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            if (user.password === password) {
                res.json({
                    message: 'User authenticated successfully',
                    userToken: user.token,
                    user: username
                });
            } else {
                res.status(400).json({
                    message: 'Incorrect password'
                });
            }
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

}

So as always we are defining the Prisma client and checking if one of the parameters (username or password) are missing, and if so, we will return an error:

    const prisma = new PrismaClient();
    const { username, password } = req.body;
    if (!username || !password) {
        res.status(400).json({
            message: 'Missing username or password'
        });
        return;
    }

Then we use the findUnique feature to use the username which is unique to find a record/user in the table, so if we haven't found a user, we return a error, if we found one with the matching username, we check if the password provided matches along with the username, if the password is correct, we return a token which is something like a random piece of characters & numbers which is hard to guess which allows you to do anything including with the API itself (when sending requests manually), if not, we return an error that the password is incorrect:

prisma.user.findUnique({
        where: {
            username: username
        }
    }).then(user => {
        if (user) {
            if (user.password === password) {
                res.json({
                    message: 'User authenticated successfully',
                    userToken: user.token,
                    user: username
                });
            } else {
                res.status(400).json({
                    message: 'Incorrect password'
                });
            }
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Now, let's make the fun..... start! Create a new file called create.js which will allow the user to create new tasks! Paste the following code into the file:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { token, taskTitle } = req.body;
    if (!token || !taskTitle) {
        res.status(400).json({
            message: 'Missing token or task title'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.create({
                data: {
                    title: taskTitle,
                    userToken: token
                }
            }).then(task => {
                res.json({
                    message: 'Task created successfully',
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );
}

Simply skipping defining the Prisma client, so we use findUnique to check the user token if valid or not, if it's not, we pass an error saying that there is no such user, if the user exists, we create a task with the title given and with that token, and then we return a success message:

    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.create({
                data: {
                    title: taskTitle,
                    userToken: token
                }
            }).then(task => {
                res.json({
                    message: 'Task created successfully',
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Now if we assume someone wants to delete a task? Create delete.js and paste the following:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { token, taskId } = req.body;
    if (!token || !taskId) {
        res.status(400).json({
            message: 'Missing token or task id'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findUnique({
                where: {
                    id: taskId
                }
            }).then(task => {
                if (task.userToken === token) {
                    prisma.task.delete({
                        where: {
                            id: taskId
                        }
                    }).then(task => {
                        res.json({
                            message: 'Task deleted successfully',
                        });
                    });
                } else {
                    res.status(400).json({
                        message: 'Task does not belong to the user'
                    });
                }
            }
            );
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );
}

So what we do is find the user using the token, if we didn't find the user, we return an error, if we found the user, we find the task using the ID, we check if the owner is matching, if so we delete it, if not, we return an error:

    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findUnique({
                where: {
                    id: taskId
                }
            }).then(task => {
                if (task.userToken === token) {
                    prisma.task.delete({
                        where: {
                            id: taskId
                        }
                    }).then(task => {
                        res.json({
                            message: 'Task deleted successfully',
                        });
                    });
                } else {
                    res.status(400).json({
                        message: 'Task does not belong to the user'
                    });
                }
            }
            );
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Last but not least the view.js file which allows the user to view the tasks:

import { PrismaClient } from '@prisma/client';

export default function handler(req, res) {
    const prisma = new PrismaClient();
    const { token } = req.body;
    if (!token) {
        res.status(400).json({
            message: 'Missing token'
        });
        return;
    }
    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findMany({
                where: {
                    userToken: token
                }
            }).then(tasks => {
                res.json({
                    message: 'Tasks retrieved successfully',
                    tasks: tasks
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );
}

So what we do here is find the user, if not found, we return an error, if we found the user, we return all the tasks corresponding to the user:

    prisma.user.findUnique({
        where: {
            token: token
        }
    }).then(user => {
        if (user) {
            prisma.task.findMany({
                where: {
                    userToken: token
                }
            }).then(tasks => {
                res.json({
                    message: 'Tasks retrieved successfully',
                    tasks: tasks
                });
            });
        } else {
            res.status(400).json({
                message: 'No user found'
            });
        }
    }
    );

Now, we got our API ready after hard work 🥳!

Creating our CLI

Run the following commands to get started:

mkdir todocli
cd todocli
npm init -y

Now create a index.js file and paste the following:

#!/usr/bin/env node

var args = process.argv.slice(2);
var fs = require('fs');
var request = require('request');
command = args[0];

if (command == 'login') {
    options = {
        url: 'http://localhost:3000/api/login',
        method: 'POST',
        json: {
            username: args[1],
            password: args[2]
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
            fs.writeFile('./token.txt', body.userToken, function (err) {
                if (err) {
                    return console.log(err);
                }
                console.log("Token saved successfully!");
            }
            );
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'register') {
    options = {
        url: 'http://localhost:3000/api/register',
        method: 'POST',
        json: {
            username: args[1],
            password: args[2],
            token: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
            // save token
            fs.writeFile('./token.txt', body.user.token, function (err) {
                if (err) {
                    return console.log(err);
                }
                console.log("Token saved successfully!");
            }
            );
        } else if (body.message=="Token already taken") {
            console.log("Please try registering again!")
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'create') {
    options = {
        url: 'http://localhost:3000/api/create',
        method: 'POST',
        json: {
            taskTitle: args.slice(1).join(' '),
            token: fs.readFileSync('./token.txt', 'utf8')
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'view') {
    options = {
        url: 'http://localhost:3000/api/view',
        method: 'POST',
        json: {
            token: fs.readFileSync('./token.txt', 'utf8')
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            // save the title and id of each task in an array
            var tasks = [];
            for (var i = 0; i < body.tasks.length; i++) {
                tasks.push({
                    id: body.tasks[i].id,
                    title: body.tasks[i].title
                });
            }
            // print the tasks along with their ids
            console.log("Your tasks are:");
            for (var i = 0; i < tasks.length; i++) {
                console.log(tasks[i].id + ": " + tasks[i].title);
            }

        } else {
            console.log(body.message);
        }
    });
} else if (command == 'delete') {
    options = {
        url: 'http://localhost:3000/api/delete',
        method: 'POST',
        json: {
            taskId: args[1],
            token: fs.readFileSync('./token.txt', 'utf8')
        }
    };
    request(options, function (error, response, body) {
        if (!error && response.statusCode == 200) {
            console.log(body.message);
        } else {
            console.log(body.message);
        }
    });
} else if (command == 'help') {
    console.log("Usage: todocli <command> <arguments>");
    console.log("Commands:");
    console.log("login <username> <password>");
    console.log("register <username> <password>");
    console.log("create <task title>");
    console.log("view");
    console.log("delete <task id>");
    console.log("help");
}

Simply what we are mainly doing is getting the parameters and depending on the API, and the token is saved into a txt file locally.

Now install a required package using npm install request

Now edit your package.json and replace your scripts, paste the following:

  "scripts": {
    "start": "node index.js"
  },
  "bin": {
    "todocli": "index.js"
  }

Your package.json should now look like this:

{
  "name": "todocli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "bin": {
    "todocli": "index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "request": "^2.88.2"
  }
}

Now we are done, do npm install . -g and start using the app!

Test it out - No setup needed

Just install to-do-cli-prisma with the command:

npm i to-do-cli-prisma

And check how to use it with the command: todocli help

Important links 🔗

• GitHub Repo - Omar8345/to-do-list-app-cli
• npm Package - to-do-cli-prisma

Thanks for reading this article and hope you learned something useful!

Originally published on DevDojo

Hello there! Today we will be integrating user authentication with your Node.js CLI, we will also cover how to create one, and we will make an API to authenticate user details! Without wasting much more time, let's go!

Creating our CLI

Start by creating a folder and initializing our project 🎉:

mkdir mycli
cd mycli
npm init -y

Now, let's make a test command like mycli-help, so to do that, create an index.js file and paste the following code:

#!/usr/bin/env node

console.log("Hello World!");

Simply, what we are doing here is adding the shebang which serves as a way for your operating system program loader to locate and use toe parse the correct interpreter for your executable file. This only works in Unix Systems though.

In computing, a shebang is the character sequence consisting of the character's number sign and exclamation mark (#!) at the beginning of a script.

From: Wikipedia: https://en.wikipedia.org/wiki/Shebang_(Unix)

And we are simply printing in the console Hello World!, so let's edit our package.json, so add this scripts JSON keypair:

  "scripts": {
    "start": "node index.js"
  }

And add this bin which tells the app which file should be run once this command is executed:

  "bin": {
    "mycli-help": "index.js"
  }

Now, let's install the CLI and give it a try:

npm i . -g
mycli-help

You should get Hello World!, now let's uninstall it and work on our API 🚀:

npm uninstall mycli -g

Setting up our API + Prisma

Start by creating a new Next.js app using npx:

npx create-next-app
cd my-auth-api

After that, let's set up our Prisma schema and our MySQL database, so first of all let's get the database, for this guide, we will use PlanetScale or generally a MySQL database, it should be the same process, just update your Schema configs.

So, head over to PlanetScale and create a new database if you don't have one yet, it will take a few minutes to get ready, just be patient, once done, click on Connect, choose Prisma from the dropdown menu and copy the .env file content:

Now, let's create a .env file and paste the environment variables you just copied from PlanetScale. Now, let's setup Prisma 🚀:

yarn add prisma @prisma/client

Now, let's check out our prisma/schema.prisma and update the configs, etc. to the following:

generator client {
  provider = "prisma-client-js"
  previewFeatures = ["referentialIntegrity"]
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  referentialIntegrity = "prisma"
}

Now, let's define our Account Model, like this:

model Account {
  id Int @default(autoincrement()) @id
  username String @unique
  password String
}

Now, let's sync our database 🚀:

npx prisma db push

Now, your database is in sync with your schema, now let's work on our API.

Now, remove the pages/api/hello.js file, and let's create a file in pages/api/ called auth.js, so it should be pages/api/auth.js

Now, place this code in the auth.js file:

import { PrismaClient } from '@prisma/client'

export default function handler(req, res) {
  if (!req.body.username || !req.body.password) {
    res.status(400).json({
      error: 'Please provide username and password'
    })
  }
  const prisma = new PrismaClient()
  const findAccount = async (username, password) => {
    const account = await prisma.account.findFirst({
      where: {
        username,
        password: password,
      },
    })
    if (!account) {
      return res.json({
        status: 'error authentication failed'
      })
    } else {
      return res.json({
        status: 'authorized',
        accountAuthorized: username
      })
    }
  }
  findAccount(req.body.username, req.body.password)
}

Simply, what we are doing here, first of all, we are importing the PrismaClient to use Prisma:

import { PrismaClient } from '@prisma/client'

And after that, we are making the API and defining the Prisma Client so that we can use Prisma in the API, also we are checking if the username and password are provided in JSON:

  if (!req.body.username || !req.body.password) {
    res.status(400).json({
      error: 'Please provide username and password'
    })
  }
  const prisma = new PrismaClient()

After creating the Prisma client, let's use it to check if a record in our model matches with the credentials sent in a JSON request which will be sent from our CLI, so we use findFirst to check for a matching record and don't worry, as long as the username is unique with the help of @unique, same passwords but for different accounts won't effect, so after checking for a matching record, we either get null for the value of account because there is no such record matching, so we use a condition to return a response in JSON telling that there is an error authenticating the user, and otherwise, we will get the record details including id, username, password in account, but we don't need all of this, so we return a response in JSON with a message telling that authentication was successful and we provide the username which has been successfully authorized for confirmation:

const findAccount = async (username, password) => {
    const account = await prisma.account.findFirst({
      where: {
        username,
        password: password,
      },
    })
    if (!account) {
      return res.json({
        status: 'error authentication failed'
      })
    } else {
      return res.json({
        status: 'authorized',
        accountAuthorized: username
      })
    }
  }

Now, we will run the function and provide username and password, which are in res.body:

  findAccount(req.body.username, req.body.password)

Now, the API is good to go! Just run:

yarn dev

Authenticating the user from CLI

Now, we got an API running and waiting for someone to call! We have to get 2 things from the user, a (username) and a (password), so let's code it inside our index.js:

#!/usr/bin/env node

var args = process.argv.slice(2);
var username = args[0];
var password = args[1];

if (!username || !password) {
    console.log('Please provide username and password');
    console.log('Usage: mycli-auth <username> <password>');
    process.exit(1);
}

var request = require('request');
var options = {
    url: 'http://localhost:3000/api/auth',
    method: 'POST',
    json: {
        username: username,
        password: password
    }
}
request(options, function (error, response, body) {
    if (!error && response.statusCode == 200) {
        console.log(body);
    }
}
);

So what we are doing is that we are checking if username and password are provided when executing the command, so if both or one of the credentials aren't provided, we will log an error with expected usage and exit.

If they are both provided, we import request and set options where the API is running accepting JSON requests, setting the method to POST, and in the JSON which we will send, we provide username and password, and then if we get a JSON back with status code 200 which means OK, we return the JSON to the user in the console, which is fine, as long as our JSON response is human readable and understandable, you may configure this if you wish 😉.

Now, before trying it, just install request:

npm install request

Now, just edit mycli-help to mycli-auth in bin in the package.json file, it should be like this:

  "bin": {
    "mycli-auth": "index.js"
  }

Now, test it out! But first, run npx prisma studio and go to http://localhost:5000 and check the Account model, add a user record which you will be using to authenticate, done? Now:

npm i . -g
mycli-auth <username> <password>

And.... congrats 🎉, you have successfully made your authentication feature!

Try it - No setup!

Just install from NPM:

npm i nodejs-cli-prisma-auth -g

And try authorizing with the sample admin user:

mycli-auth admin supersecret123

And kaboom 💥! Even here is the GitHub Repo: Omar8345/nodejs-prisma-auth!

Thanks for reading this article ✨, hope you learned something useful today!

In this guide, you will be integrating Matomo which allows you to get your website (store) analytics, such as average session time (how long a user stays on the page), etc.

You will be integrating Matomo with a Next.js app, where it’s the same if you use Next.js to build and create your Medusa store.

Prerequisites

To follow along with this guide, the following requirements are required:

• A Matomo account - Get an account from here
• Node V14.0 or higher - Download from here
• SQLite or PostgreSQL (SQLite is only for getting started; PostgreSQL is recommended)
• Redis server up and running

More information can be found here on How-to Set up your development environment.

Setting up your Medusa Store

This section is separated into 3 parts as follows:

• Setting up the Medusa Server
• Setting up the Medusa Store
• Setting up the Medusa Admin Dashboard

1. Setting up the Medusa Server

• Start by creating a new Medusa project and seeding it:

medusa new my-medusa-store --seed

• Move into the project’s directory and start the server:

cd my-medusa-store
medusa develop

Now, your Medusa server is running on port 9000.

To test it out, use your browser and go to localhost:9000/store/products and you should get a JSON response like this:

2. Setting up the Medusa Store

• Start by creating the Next.js Medusa Storefront and changing the directory:

npx create-next-app -e https://github.com/medusajs/nextjs-starter-medusa my-medusa-storefront
cd my-medusa-storefront

• Next, get your environment variables ready:

mv .env.template .env.local

• Finally, start your Next.js Medusa store:

npm run dev

Now, your Next.js Medusa Store is running 🎉 on port 8000

You can test it out by checking one of the sample products in /products/t-shirt and you can see the sample Medusa T-Shirt for €19.50.

3. Setting up the Medusa Admin Dashboard and making some things

• Start by cloning the Admin GitHub repository and changing the directory:

git clone https://github.com/medusajs/admin medusa-admin
cd medusa-admin

• Next, install the required packages:

npm install

• Finally, start the admin dashboard:

npm run start

Now the Medusa Admin Dashboard is running on port 7000, head over to localhost:7000 and log in with the user details:

email: admin@medusa-test.com
password: supersecret

Once you are logged in, get started by creating some products.

So head over to Products and create a new product:

After creating your products, let’s create some collections, go to Collections and click New Collection.

Now, head back over to Products and assign a collection to each product like this:

Now, your products can be viewed and filtered by your users.

You can test it out by going to localhost:8000/store and you can see the products you created and filter them.

Integrating Matomo to get Analytics

Open your Matomo Dashboard, if you haven’t used Matomo before, you would be given 4 options to setup Matomo, choose Tracking Code and copy the JS code inside the <script> tag like this:

Or, if you can’t find the setup instructions for Matomo on login, head over to Settings > Websites > Tracking Code and scroll a little down until you find the JS tracking code, copy the JS code inside the <script> tag.

Now, let’s integrate Matomo, open your Next.js Medusa Store using your favorite IDE (Visual Studio Code, Atom, etc.) and head over to src/pages, and start by editing the _app.tsx file.

First of all, you will use Script to run the JS code, so use this line of code to import Script:

import Script from "next/script";

And now, inside your return() include a <Script> tag with the strategy set as afterInteractive and optionally the id to matomoAnalytics so that you can refer to this later. Be sure to add 1 angle brackets (<>) and mention an </> at the end of return(), final code should be like this:

<>
    <Script strategy="afterInteractive" id="matomoAnalytics">
        {`
        // your code here
        `}
    </Script>
</>

Now, let’s test it out, so just refresh the app, and you can see that if you go to the Matomo dashboard you can see the analytics start showing!

Testing

Now, try visiting the Medusa Store, you will find active sessions with country, etc.

Try visiting / and then /store and then head over to the Matomo Dashboard, click on Visitors > Visits Log and you will find some information, including OS, browser, region, IP address, pages visited, etc.

Also, you can head over to Real-time and check visits in real-time, you can check Devices and Software to analyze user data, and you can do even more with Matomo!

Conclusion

Now, you have successfully integrated Matomo Analytics with your Medusa Store. Now you can get Analytics data such as average session time and more from the Matomo Dashboard! Where Next.js with TypeScript was used to build and create the storefront and the <Script> tag was used to run the Matomo tracking JS code to get analytics.

How does it work?

OnePass uses NextAuth.js to authenticate users like you. As soon as you add a password, it will be encrypted by a secret key, and once you try to view the password, it's decrypted.

For making sure who owns the email/password object, we link it to a user account on OnePass.

What is my tech-stack?

For this project, I used:

• Next.js - Building the website
• TypeScript - Used with Next.js to give functionality to the website
• TailwindCSS - Used to give styling
• Prisma - To interact with the database (PlanetScale)
• tRPC - For making the TypeScript API
• NextAuth - For authenticating users

How PlanetScale was helpful

PlanetScale provided me a free database where I can store 2 important things with the help of Prisma, which are the user object (credentials used to sign in to OnePass) and the external credentials object (where a username/email and password is saved for an external website like Google), where it's the first time using Prisma, I learned a lot about MySQL 💖.

Important Links 🔗

• GitHub - Omar8345/OnePass
• Live Demo - one-pass.vercel.app

Thanks for reading!

Special thanks to PlanetScale and Hashnode for organizing this awesome Hackathon!

• What is the NFT Ticketing System?
• How does the NFT Ticketing System work?
• My opinion:- Will NFT Ticketing will be the future of tickets?

What is the NFT Ticketing System?

NFTs, short for a non-fungible token which non-fungible means that thing is not exchangeable, and where token here means any digital asset, a video, a GIF/picture, whatever you can expect which says that an NFTs is a digital asset/file and it's non-exchangeable.

NFT tickets are digital assets that hold your access credentials to a particular event. They can also offer ticket holders some special perks such as exclusive merchandise and more. On top of helping establish a closer relationship with fans, NFT tickets can provide ongoing royalties for artists, event organizers, and stakeholders.

How Does NFT Ticketing work?

If you think about the way NFT works, it seems to fit well with event tickets. Physical tickets are usually a one-off piece of paper and only valid for one event admission or seat. In both ways, those tickets are non-fungible, if physical, digital, or even considered as an NFT.

However, the downside of traditional ticketing is that tickets go through a few distribution channels with limited regulation or control. For example, resellers in the secondary ticket market can inflate prices, and ticket scalpers can buy up most tickets online to resell at a higher price. With NFT tickets, anyone can track the transactions on a blockchain ledger, making it easier for everyone to see when and where the ticket was bought and sold – while event organizers are afforded more control over primary and secondary ticket sales.

An NFT ticketing system can also help limit resale value and fees with the help of a smart contract, a program that runs on the blockchain. A smart contract is a deterministic program that self-executes particular tasks when and if certain conditions are satisfied. Organizers can determine how royalties are split on secondary ticket sales by setting up a rule that can trigger a royalty payment whenever the ticket is sold to a new owner.

Additionally, event organizers can forgo third-party distribution by minting the amount of NFT tickets they need on their preferred blockchain network as part of the ticketing system. Once they set the sale or auction price, payment from a buyer will trigger a smart contract. The NFT ticket will then be sent to the buyer's digital wallet, allowing them to access it anytime via their phone. Because the NFT ticket is stored on a blockchain network, you can also choose to resell your ticket on the NFT marketplace designated by the event organizer. Once someone buys your ticket, a smart contract is triggered, and you'll receive payment while the buyer gets the ticket.

Artists can also use NFT tickets to reward long-time fans with exclusive airdrops or other perks to elevate their experience. A real-world example of NFT tickets in action was Binance's partnership with Southern Europe's largest music festival: Primavera Sound.

Ok Omar, but why NFTs?

NFT ticketing can potentially disrupt the traditional ticketing industry by solving the inefficiencies faced by the current ticketing system.

Preventing forgery

One of the major downsides of paper tickets and QR Codes is that they can be easily forged, creating a gap in security for event venues and disappointment for fans who unknowingly bought a fake ticket. But since NFT ticket transactions are recorded on a blockchain ledger, event organizers and attendees can validate the authenticity of every ticket on the chain and track the history of ownership. Making it near impossible for bad actors to falsify a ticket.

Reduce costs and faster production

The costs associated with selling and minting NFT tickets can be potentially lower than the cost needed to produce and distribute traditional tickets. NFT tickets can often require much less production lead time than physical tickets, allowing organizers to mint and distribute tickets within a few hours.

Ongoing revenue opportunities

The blockchain technology behind NFTs opens up the potential opportunity to generate tangible value for all involved. NFT tickets can provide ongoing royalties to the artist and event organizer via smart contract technology. If a ticket holder sells their ticket on a secondary marketplace, a percentage of the resale revenue may also be redirected to the artist. Ticket holders can also resell NFT airdrops they are gifted as a part of the ticket’s built-in rewards.

Lowers chances of loss or damage

Traditional paper-based tickets can be easily lost or damaged. Since NFT tickets are stored in a digital wallet that can be accessed via a mobile phone, the risk of losing or damaging your ticket is exponentially lower.

My Opinion: Are physical/digital ticketing systems going to stay?

Most probably we cannot still stop using digital tickets while who uses physical tickets now? No one! So maybe in the soon future NFT-powered tickets are going to start being used by many users and then more people will start using the NFT-powered ticketing system and then we can stop using the traditional digital ticketing system with traditional QR codes.

Outro (The quote of the day)

I am Omar. A certified software developer and a designer. I have taken many programming courses and I am experienced in many popular programming languages including Python, Java, and JavaScript.

Craft Conference 2022 was one of the conferences I enjoyed where I learned many things, one of my favourite talks was from Debbie O'Brien, who works [at] Microsoft as a Senior Program Manager where she talked about Testing Web Applications with Playwright and how to make automatic easy tests in no time without making it hard on you, taking a long time even to learn how and build, and so much on, so that's Playwright.

Testing Web Applications with Playwright - Debbie O'Brien, Microsoft

Debbie O'Brien from Microsoft spoke about Java, Dot Net and Python. Testing is hard, testing takes time to learn and to write, and time is money. As developers, we want to test. We know we should but we don't have time. So how can we get more developers to do testing? We can create better tools. Let me introduce you to Playwright - Reliable end-to-end cross-browser testing for modern web apps, by Microsoft and fully open source. Playwright's Codegen generates tests for you in JavaScript, TypeScript, Dot Net, Java or Python. Now you have no excuses. It's time to use Playwright.

I didn't know anything about Playwright. I learned that it's okay not to test your application because it's hard, takes time to build and learn, and takes a long time. So that's why Playwright is the solution to test the web applications. It's easy with Playwright to test web applications, it is an end-to-end testing tool and it runs on almost all browsers, Chromium, and more.

I learned Playwright it's better because it works with any browser, any platform, one API, fast execution and more.

How I can get started with Playwright is simple is just as follows:

# Run from your project's root directory
npm init playwright@latest
# Or create a new project
npm init playwright@latest new-project

Also, the thing that I liked is that there is a VS Code extension for Playwright which has a UI so it would be easy to use 😎.

I will be also writing a summary of how to make your first test. After the installation in your browser, just by clicking F1, you will get a package.json, playwright.config.ts, and Tests folder with an example test file. If you don't have an existing project, you can use the To-Do template!

What's also great is Codegen which generates tests by recording your actions. You can run it using npx playwright codegen which then will open 2 windows with a browser window and the tests, also the tests support multiple languages, including Java, JavaScript, Python, and C#.

What about running tests? You can run all tests, a set of tests, or a single test. Or you can even make tests run in parallel and it's super fast 🚀!

You can run tests in Headless or Headed:

# headless
npx playwright test
# headed
npx playwright test --headed

What about breaking tests? It's recommended to break tests to check if they are working. As an example, I was using a locator in a t-shirt online store, there is (Women, Men, and Children) if you try to locate Men, Playwright isn't sure what you want to exactly approach, because also the word Men is in Women because it's so strict, so we need to mention exactly Men, no any letter missing and no any letter is extra!

Locators are a way to find element(s) on the page at any moment with built-in auto-waiting and retry-ability, they are like the pins on a map. Here is how to make/use a locator:

Running debug mode:

npx playwright test --debug

If you would like to have better errors details, this is for the terminal, if you are using the extension in VS Code, it's as follows:

Just make a breakpoint where you want to stop your code and click on the green check mark and click Debug Test.

We can show reports using the command:

npx playwright show-report

This is an report example in Chromium:

Let's talk about tracing files, if you want to record a trace for each test, normally it's on if it's a broken test, but you can manually turn it on by mentioning the following:

trace: 'on'

What it does is if you go to your report, at the bottom you will get an image, a trace .zip file.

Or you can just click and it'll open it up.

My review's summary

To pack up, Playwright is an amazing way to test your applications in no time seamlessly as it supports many programming languages including Java, JavaScript, Python, and C#. Also, there is a Visual Studio Code extension for Playwright! You can make a breakpoint and run your test in debug mode.

I also tried to use it with CodeGuard which is my submission for the Hashnode X Linode Hackathon and I found some bugs, errors, etc. which I fixed in release version 1.1 which has been just released yesterday, and announced today on the submission article. Since then, my project CodeGuard for the Hashnode X Linode Hackathon got better because I used Playwright to test my application/project CodeGuard and find errors which sometimes are "behind the scenes" which is called the back-end!

I also benefited a lot from breaking my tests by making breakpoints and running in debug mode. And I had been using Playwright since then in all my projects, even if it's a personal one, but why not if it's all automated 🚀😎. You can use Playwright with any browser which is great and even get a trace in a .zip file!

I learned a lot and it was really useful I hope to continue using Playwright!

Special thanks 🚀

Special thanks to Craft Conf for providing me with this complimentary ticket to attend the conference, I learned a lot!

Also thanks to you Miki Szeles for providing me with this awesome opportunity!

Please note we NO LONGER support codeguard.tech domain - the current owner is unknown, we are not responsible for any damages.

Probably most of us know that copying and pasting from GitHub, Stack Overflow, etc. doesn't make you a programmer.

Also, it's not great for someone to steal your code and use it pretending that he made that code/script, right?

Here CodeGuard comes! The open-source tool to obfuscate your JavaScript or Python code in no time!

How I got this inspiration?

Once upon a time, I was creating an project which does really great thing including making meetings, etc. and this idea came in my mind:

Why would I allow someone steal my code pretending that he wrote that script/code?

So, I though why don't I make a code obfuscator to make my code hard to read and nearly impossible to understand? So, that's the beginning of CodeGuard.

How did I make it? (Project workflow)

Once a user provides a link to the file, we recommend using GitHub Gist because the project was made to be used with Gist, but it will work also if you give a direct link to the file like https://example.com/myproject/main.py

The user will be selecting either Python or JavaScript:

Upon the user selection, it will call the API (no longer available) providing 2 parameters, the code link in link and the programming language in lang, of course you would like to try to use the API yourself, we will leave a guide below!

As soon as the API has been called, it will start getting the file and obfuscating it, as soon as the obfuscated file is ready, it will be automatically downloaded at the user side.

Note: For Python code, change the obfuscated code extension to .pyo and use python -O <file-name>.pyo to run the file!

What problems did I experience

• Making the back-end

As I need to use JS/PY to obfuscate, although they run at the client side, I am unable to run the script to obfuscate from client-side

• How will I host and make the API

With the help of Flask, I can make a API with pretty good functionalities which can help me in the project, and with the existence of Linode, I can host my API on a Linux server in the cloud!

Use of Linode

Use of Linode... Linode provided us with one of the best tools to setup terminals / servers to host and deploy the core feature, our API. Apart from that in the development phase we used Linode to host the project and collaborate on it, until it was in build phase and we could use Vercel to deploy it.

The amount of storage and network bandwidth given is more than enough for an open-source and fully scalable project team to get started with!

The tech-stack I used + Why did I use it?

• Next.js - The entirety of the webpage!

• HTML/CSS - Touches of HTML and CSS were used to add extra detailed styling and div functionality (Forms)

• JavaScript - Was used to allow transitions and smooth navigation along the webpage and validation of user input on client side itself

• Linux Ubuntu (Linode) - Host the API

• Vercel - Host the website!

• Python (Flask) - Used to make the API

API

Use the API (hosted by us)

It's really simple to use our API, in JavaScript, it only requires one line of code!

window.location = "https://NO_LONGER_AVAILABLE/?link=<code link here>&lang=<js or py>"

For example:

window.location = "https://NO_LONGER_AVAILABLE/?link=https://gist.githubusercontent.com/Omar8345/1038a82e7db5f81d0722a4f2ab701924/raw/b213490f419b1d67de6a6a1647557934b97fc1ef/nicecode.js&lang=js"

Hosting the API on your machine

• Clone the repository on your local machine:

git clone https://github.com/Omar8345/CodeGuard

• Next, head into CodeGuard/API and open your favorite IDE, if you use Visual Studio Code, just enter:

code .

• And it will open up VSC in the folder, just run in the terminal the following command:

$env:FLASK_APP="__init__.py" && flask run

You should see a local link, head into it or http://127.0.0.1:5000/ and you should find some kind of error, just simply ignore it, now add the link and lang parameters value and you should be good to go!

Made using Vercel and Linode for the Hashnode X Linode Hackathon!

Live Demo!

My quote

Take your time - But don't mess up!

Take your time in studying, even study like 72 hours, but take the full mark!

Important Links 🔗 - Try CodeGuard!

• GitHub Repo

• Next.js

• CodeGuard

Special thanks to Vedant Singhal

Vedant a developer in high school from India! Vedant helped me a lot in this project, so I would like to thank him here!

Thank you Vedant!

Check out Vedant on Social Media:

• GitHub - Ved235

• Buymeacoffee - Ved235

• Vedant's Blog

We would like to hear your feedback and suggestions in the comments below!

Edit on 24/06/2022:

It's version 1.1 release!

Added some improvements and fixed some bugs in the website and API

Website:

• Error on wrong language selection

• Errors with better details

API:

• No need now to mention lang while using the API

• Landing page instead of error

• redirect has been made if you don't want to redirect to the API host domain if you are using this with your website especially using window.location

Extra: In __init__.py in API, if it's JS code, it runs the things which obfuscates Python code, the code has been updated with the correct code, sorry for that! (the code in the repo)

Did you find any bugs?

Tell us in the comments!

Edit on 30/06/2022 (few hours before the deadline time):

Hey everyone!!!

I just released (announced) the CodeGuard V1.2 release!!!

What's new? 🎉

FIRST OF ALL - You can now provide a GitHub Repo, all the JavaScript and Python code in the Repo will be obfuscated and renamed with the old (non-obfuscated) file name and any other files won't be effected, it's awesome!

What you will even love more 💌 - Here is dark mode! You can switch to dark mode by clicking the button in the footer! (now, it's in the bottom right)

Check out the GitHub Repo: Omar8345/CodeGuard

Stay tuned with the future updates

Also, we launched a Ko-fi page to support us! Check it out!

Let's support CodeGuard! ko-fi.com/CodeGuard

As you had stepped into here, you should be interested about what cloud platform to choose and why especially choose AWS! Doesn't matter you are a business owner, developer, or just a student, this article is guaranteed to help 😀.

So, without wasting my time and yours's too, let's start!

Cloud platform

What is a cloud platform

A cloud platform refers to "the operating system and hardware of a server in an Internet-based data center". They are like a large place which contains many computers used by personal and enterprise users.

Types of a cloud platform

There are several types of cloud platforms which fits for different purposes. Which includes:

• Public Cloud: Public cloud platforms are third-party service providers that provide computing resources and more over the internet. Examples are like Google Cloud, Amazon Web Services (AWS), Microsoft Azure, and DigitalOcean.

• Private Cloud: A private cloud platform is made exclusively for a single organization, or maybe a single person, which no one other uses it except you or your organization. It's usually hosted (on-site | at your org) or sometimes hosted by a third-party service provider.

• Hybrid Cloud: Hybrid Cloud is a combination between a Private and Public cloud platforms. Both data and applications seamlessly pass between the two (private and public), which gives the organization more flexibility.

Uses of cloud platforms

Here, we'll just pass an example, and you can seamlessly understand the rest. We are talking about that I have a company/shop website which I would like to host it on the internet. Let's say I own resources which are enough to host the website and make it fast and such on, and I don't want to use them, or you can also say that you don't have enough resources to host the website and need to buy the needed resources with someone who should maintain them and keep them up-to-date.

Here comes the work of a cloud platform, there are many cloud platforms, such as AWS, Azure, Google Cloud, and last but not least DigitalOcean, I recommend AWS, we'll know why later on. AWS has a data center, with many computers (large computers which can do things that a normal computer couldn't do), you can rent a resources from AWS or the cloud platform you prefer by using 2 common plans:

• 1. Pay-as-you-go is a common plan which you can pay as you use the resources, will never stop unless reaches the limit of money you set or when you manually set it.
• 1. And another way to pay is to buy limited use of the resources, which means you will buy a resources and use it like for example host a website, and your bandwidth will be let's say 10 GB, when your bandwidth reaches 0, the resources will stop.

Now we are done of cloud platforms story, let's get on why choose AWS.

Why choose AWS?

AWS is a cloud platform, and it is the best cloud platform in the market with the most highest growth.

AWS certifications are also well-trusted by big tech companies.

We will talk about the most best 7 reasons to choose AWS:

1. Location

One of the biggest AWS advantages is that it is available in 44 different zones in 16 geographical locations. You can access the servers from any country you want to. By hiring an AWS developer, you can access all the features from wherever you are.

2. Recovery System

Another of the most valuable AWS benefits is its disaster recovery system. Custom software development companies offer a solution to recover lost data so that your day-to-day-to-day operations aren't affected.

3. Better Security

AWS, as a cloud service, offers enchanted security to protect your virtual org. The data centers and servers have multiple layers of operational security. The Amazon detective makes security monitoring faster and more reliable.

4. Multi-region Backups

Since the AWS cloud management system is decentralized, you can backup your important data in multiple regions. The platform offers AMIs and EBS snapshots mode of backing up. So even when your primary operational environment goes offline, your backup will not have any impact. You can also schedule backups across different regions.

5. Scalability Factor

Auto Scaling and Elastic Load Balancing are two AWS tools that make scaling easier while delivering high performance. You can scale up or down based on your requirements. Amazon Web Services has a massive infrastructure that can provide computing resources as and when you need them.

6. Pricing Model

One of the top AWS advantages is its pricing model. AWS platform works on the pay-as-you-go pricing model. You don’t have to pay heavy subscription fees for resources that you won’t even use. The flexible pricing structure drastically improves the organizational bottom line, keeping cloud computing affordable for you.

7. Flexibility

Finally, one of the most important AWS benefits is its flexibility. It enables you to select your operating system, programming language, web application platform, database, and other services that you may need. AWS offers a virtual environment to load all the services that your application may require. It also simplifies the data migration process.

Amazon Cloud Business is the Future

All the big tech giants and software development companies use AWS services for their cloud computing needs. You can hire a professional for AWS cloud consulting to identify your computing requirements and how you can integrate your enterprise’s infrastructure with the cloud platform.

Thanks for reading!

Hope you enjoyed the article and I hope it didn't waste your time by either learning something new or choosing what cloud platform to choose.

Have a great day 😁

This is an Extra Ordinary Claim because it requires Extra Ordinary Evidence

"Supabase VS Firebase"

Supabase VS Firebase

1. Features

This isn't completely a fair comparison because Supabase is still new, but Firebase has been here for a long time!

There is one great fact which is about Supabase. What's it?

Supabase uses open-source technologies for it's platform, what does it mean?

It means that you can run Supabase with Docker, and you can host your own Firebase alternative on AWS (recommended) or any other cloud platform.

2. Policies

When you use Firebase, you are locked in with Google, as you are signing a contract with the Alphabet cooperation by giving them the power to destroy your business at any moment if they decide that's what should happen. Proof as in the following picture:

Source: Firebase Paid Services Terms of Service

Let's look now to Supabase features to see how they stack-up in front of Firebase...

User Authentication

Before we start, Supabase isn't a 1-to-1 mapping of Firebase. It just provides the tools which approximately do the same thing. I have made a demo using Supabase and I would like to tell you that the developer experience is similar to Firebase. The only thing Supabase is missing is phone authentication. Now, in the actual code, you can get a user logged in with one or two lines of code like Firebase, I do like that Supabase returns an error as an object, because in Firebase you should wrap it in a try catch block to catch errors.

Security

One thing cool that Supabase does but Firebase doesn't is that automatically create a database record for the user.

Database

We haven't talked about database yet. In Firebase we have 2 different database options but we'll be focusing on Firestore which is very similar to MongoDB and it is a NoSQL document database. It is very easy to work with scales automatically and it automatically handles relational data fairly well. However, it's not ideal for graphs and full-text search.

Supabase uses PostgreSQL as it's database, a relational SQL database that has been around forever. But SQL databases are expensive, hard to use, and difficult to scale. Supabase offers you handling the scaling for you automatically and also by providing a dashboard and SDK to make working with the database much easier.

Realtime

If you are building a realtime app, you can do so with one line of code with very little configuration with Firebase. The client-side SDKs are very sophisticated and do thing like optimistic updates where it updates the UI before the actual changes is committed to the back-end. It also supports offline mode.

In Supabase you can subscribe to real time updates that's pretty much it. Another issue that security policies will not work with real time data.

Pricing

Both products has a free tier:

The end 🎉

Hope the comparison was useful for you! Good bye!

We will be making that today!!! Stay with us!

We will be making the project from A to Z, the whole work will be covered!!!

The project is a simple website which you enter the long link then it converts it to a fancy short link!

Without further time wasted, let's start coding...

Coding

• Tech-stack which will be used:
  • Flask
  • Python
  • Heroku

Before we start, be sure to install Flask, use the command

pip3 install Flask Flask-SQLAlchemy

Be sure the A should be capital.

Start by making your project folder, we will start by coding app.py which is the main code for our app. Create in addition to a directory called templates which will be having HTML to view our Flask App.

Let's start creating the basic Flask App.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_world():
    return "HELLO WORLD"

@app.route('/omar')
def hello_omar():
    return "HI OMAR"

if __name__ == "__main__":
    app.run(port=5000, debug=True)

In the beginning, we are ending up importing Flask and initialize our Flask App. After initializing, we have a decorator function, if you don't know what is a decorator it is basically a super function which wraps around the functions inside it. For example @app.route('/') is a decorator, which tells us whenever we go to whatever website/URL is it it like https://example.com/ will return HELLO WORLD, but for example if we go to https://example.com/omar which decorator @app.route('/omar') is responsible for, it will be returning HI OMAR.

By default, Flask runs on port 5000 but we will just be specifying it anyways. It's better to set debug to on which will gives us extra information which will really help us when we experience issues.

Let's test the script by running it. The highlighted link is where the Flask app is running, go to it to test it, note it only works on your local pc.

As we are on the main page, it should return HELLO WORLD.

Let's try going to /omar.

Make a new file in templates called base.html and copy the following template:

<!doctype html>

<html lang="en">

<head>

    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <title>{% block title %}{% endblock %}</title>

</head>

<body>

    <div class="container-fluid">
        <h1>Linky</h1>
        <hr>
        {% block content%}
        {% endblock %}
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

  </body>
</body>
</html>

I added bootstrap which is basically it is a CSS library which has tons of pre-defined rules and a code written for us which we can instantly use. This is a basic HTML code except the <title> block, the <title> block won't be same for each page we go to, so instead of writing the <title> block every time inside of our new HTML page, we will just give a block title, which allows us being directly accessing the block and changing only the elements which goes in this block instead of writing everything.

As we are in a body, we put everything in div to make everything look more better. As we see the 2 lines in the body which as follows:

        <h1>Linky</h1>
        <hr>

will be same in all our web pages, so all of our web pages will have these 2 lines... The only difference will be what goes over here:

        {% block content%}
        {% endblock %}

instead of writing all bootstrap stuff again, we can directly write whatever goes in here. So how to extend the information we have from base.html, make a file home.html and copy the following template:

{% extends "base.html" %}
{% block title %}Shorten URL{% endblock %}

{% block content %}
<form action="#", method="post">
    <label for="url">Enter an https:// URL:</label>

    <input type="url" name="nm" id="url"
       placeholder="https://example.com"
       pattern="https://.*" size="50"
       required>
    <br>
    <input type="submit" value="submit" class="btn btn-primary">
</form>
{% endblock %}

This is the HTML page which will be displayed at our home page. Let's take a look:

First, we are going to extend base.html which actually means like the base.html is already in home.html. And here we have {% block title %} in home.html which refers to the block in base.html since it was called the name block title. As you can see, we are giving it a title of Shorten URL. So instead of writing all of this again, we just changed what is the title in base.html which whatever the title in base.html is, it will appear in ALL pages. As we have block content in base.html, everything in block content in home.html is as it is in base.html, imagine it as a variable.

Second, in home.html we have a form, which has 2 inputs, first we have a label which says "Enter an https:// URL:", next an input type which is set to type URL so it will only accept a URL and it's name is nm which we will be referring to it later on, the user will provide the long URL, and finally an input which is for submit the URL to get the short URL.

Let's link all the HTML we have to our app, return to app.py

One thing we have to import from Flask is render_template.

In decorator @app.route('/'), instead of returning HELLO WORLD, return render_template("home.html"), in this case we would like to display home.html.

New code:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template("home.html")

@app.route('/omar')
def hello_omar():
    return "HI OMAR"

if __name__ == "__main__":
    app.run(port=5000, debug=True)

Let's try running our Flask App. As we are on the main page, it should display home.html

Now, let's cleanup our code and make changes.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['POST', 'GET'])
def home():
    if request.method == "POST":
        url_received = request.form["nm"]
        return url_received
    else:
        return render_template('home.html')

if __name__ == "__main__":
    app.run(port=5000, debug=True)

As you notice, we imported request from Flask, and what will it help us is to get the information from the website. Before, we were only using by default GET methods, but now we will define the 2 methods, GET and POST. What does this actually mean?

POST and GET are 2 different methods to transfer data for using HTML inside a web browser, the only difference that POST is more secure method when compared to GET, why? Because in a POST method, you can't see the information in the URL, but for GET, the info can be found in the URL. For example when we where going to http://127.0.0.1:5000/omar, we can see the information in the URL, so it is a GET method, but for POST, for example when we put a link in main page and submit, the data is actually being transferred but they cannot be found in the URL, so it is a POST.

So if the request method is POST, it means we got a link from the form for further processing, the URL will be stored in url_received, as you see, I used return url_received for now to test if it does work or not... For example:

If it's not a POST method, we will stay on the same page until another thing is submitted which will be processed to see what's next.

We will be using Database, let me introduce you to the idea.

The database we are using is called SQL Alchemy, so SQL Alchemy is specific for Python. The reason using the database is that you can kind of treat each of our items as a Python object, which makes it a lot easier to interact with and another point to put into consideration that is by using SQL Alchemy is that we can do everything by Python code. So if you don't know how to code SQL queries, don't worry you can code most of them in Python and also the lines of code to make a query is a lot less so a lot easier.

Copy the following code and let's work on some configurations:

from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
import random
import string
import os

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = os.environ.get('DATABASE_URL')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

@app.before_first_request
def create_tables():
    db.create_all()

class Urls(db.Model):
    id_ = db.Column("id_", db.Integer, primary_key=True)
    long = db.Column("long", db.String())
    short = db.Column("short", db.String(10))

    def __init__(self, long, short):
        self.long = long
        self.short = short

def shorten_url():
    letters = string.ascii_lowercase + string.ascii_uppercase
    while True:
        rand_letters = random.choices(letters, k=3)
        rand_letters = "".join(rand_letters)
        short_url = Urls.query.filter_by(short=rand_letters).first()
        if not short_url:
            return rand_letters


@app.route('/', methods=['POST', 'GET'])
def home():
    if request.method == "POST":
        url_received = request.form["nm"]
        found_url = Urls.query.filter_by(long=url_received).first()

        if found_url:
            return redirect(url_for("display_short_url", url=found_url.short))
        else:
            short_url = shorten_url()
            print(short_url)
            new_url = Urls(url_received, short_url)
            db.session.add(new_url)
            db.session.commit()
            return redirect(url_for("display_short_url", url=short_url))
    else:
        return render_template('url_page.html')

@app.route('/<short_url>')
def redirection(short_url):
    long_url = Urls.query.filter_by(short=short_url).first()
    if long_url:
        return redirect(long_url.long)
    else:
        return f'<h1>Url doesnt exist</h1>'

@app.route('/display/<url>')
def display_short_url(url):
    return render_template('shorturl.html', short_url_display=url)

@app.route('/all_urls')
def display_all():
    return render_template('all_urls.html', vals=Urls.query.all())

if __name__ == '__main__':
    app.run(port=5000, debug=True)

Change os.environ.get('DATABASE_URL') to 'sqlite:///urls.db'. We are done, just go to the GitHub Repo, and get the HTML files inside templates, be sure to rename the files or change there names to your own unique name in the Python code.

The End!

Thanks for reading this blog, hope you like it and learnt something helpful!!!

• Live Demo: linky-web.herokuapp.com
• GitHub Repo: OmarDev100/linky