Can AI test Nepal’s biggest fintech platform using plain English? I tried.

Modern web applications move fast, but testing often struggles to keep up. A small UI update, renamed button, or layout change can break traditional automation and create unnecessary maintenance work.

That’s where things get interesting.
What if testing didn’t require writing complex scripts at all? What if we could just describe what we want to test… in plain English?

That’s exactly what Passmark enables.

For this experiment, I chose eSewa, one of Nepal’s most widely used digital wallet platforms trusted for payments, transfers, and everyday transactions. To make it happen, I used Passmark for plain-English AI testing flows and Playwright for browser automation.

In case you want to view the demo video directly. 👉 Demo Video

Before passmark vs After Passmark :

Traditional browser automation usually requires writing detailed selectors and maintaining fragile UI scripts. Even a small UI change can break the test flow.

For example, in a traditional Playwright test, interactions often look like this:

await page.locator('#login-btn').click();
await expect(page.locator('.login-modal')).toBeVisible();

This works, but it tightly depends on selectors, element structure, and implementation details.

Passmark changes this approach by allowing tests to be written in plain English using AI driven execution.

For example, while testing eSewa, I could simply write:

steps: [
  { description: "Navigate to https://esewa.com.np" },
  { description: "Click on the Login button" },
],

assertions: [
  { assertion: "Login modal is visible" },
  { assertion: "Phone number and password fields are present" },
]

Instead of manually targeting selectors, Passmark interprets the intent of the test case, while Playwright handles the browser automation .

Why I Chose eSewa ?

When selecting a target for this hackathon, I wanted to work on something practical and meaningful.

The hackathon suggested testing any web app, including demo applications, which is great for experimentation. However, I decided to apply Passmark to a real-world use case instead.

That’s why I chose eSewa, one of Nepal’s most widely used digital wallet platforms. Since it handles real payments, transfers, and daily transactions, it represents a more realistic testing environment.

This made the experiment more interesting: How well can AI-powered regression testing handle a real production fintech system?

That question became the motivation for this project.

Project Overview

This project is a regression testing suite built using Passmark + Playwright to test real user flows of eSewa.

Instead of writing traditional automation scripts with selectors or page objects, I used Passmark to describe test steps in plain English, and Playwright to execute them in a real browser environment. The goal was to validate whether AI-driven testing can reliably handle real-world application flows such as navigation, UI interactions, and basic user journeys.

The test suite focuses on core user facing flows, including:

1. Landing page accessibility and navigation

2. Key UI interactions and button behavior

3. Basic user flow validation across pages

4. Regression checks to ensure stability across updates

Tech Stack

This project was built using a modern testing stack centered around Passmark.

1. Passmark : This is AI driven testing framework that interprets natural language test steps and manages execution workflows.

2. Playwright : This is used under the hood for browser automation, navigation, and UI interactions.

3. OpenRouter API : This provides the AI model gateway for Passmark during test execution

4. TypeScript : This is used for writing structured and maintainable test files.

5. Node.js : Provide a runtime environment for running the test suite.

6. GitHub : This is used for version control.

In simple terms, Passmark handled the test intent, Playwright handled the browser actions, and the AI layer helped to bridge these two. This made the stack powerful while still keeping the developer experience simple.

What I Tested ?

To make this project practical, I focused on real user facing flows across eSewa’s public website. I built regression scenarios around those pages that involves a lot of user interaction and heavy navigation.

1. Homepage & First Impression Checks

I started with the landing experience by validating:

• homepage load state

• visible eSewa branding and logo

• hero section visibility

• page title correctness

• navigation menu presence

2. Hero Section

I tested the hero section to ensure that key first-screen elements like the headline, CTA button, and banner were visible and correctly rendered.

• headline or tagline visibility

• call-to-action button presence

• hero banner / image rendering

3. Download App Section

Since mobile adoption is critical for wallet platforms, I verified:

• App Store download visibility

• Google Play download visibility

4. Featured Services Interaction

To check how easily services can be found, I tested:

• navigating to service detail pages or modals

• service title visibility

• description visibility

• back / close interaction availability

5. Footer Integrity

I also checked important footer content such as:

• contact information

• social media links

• copyright text

6. Login Validation Flow

For authentication UX, I tested empty field submission scenarios to verify:

• login modal presence

• phone number field visibility

• password field visibility

• sign-in button rendering

• validation or error feedback for empty inputs

7. Navigation Regression Checks

I tested movement between major sections including:

• Services

• Merchant / Business

• Help / FAQ

• About Us

• returning back to homepage via logo navigation

Test Architecture & Code Snapshot

Rather than placing every scenario into a single large file, I structured the suite into smaller focused test groups. This made the project easier to maintain and easier to expand later.

Example structure:

• esewa-landing.spec.ts → This file includes all the test related to landing page, hero section, footer, download area.

• esewa-login.spec.ts → This contains all the checks and teste cases related to empty field validation and authentication UI checks.

• esewa-navigation.spec.ts → This covered tests related to Services, Merchant, Help, About, and navigation back to the homepage flows.

Example :

test("Homepage loads correctly", async ({ page }) => {
  test.setTimeout(60_000);
  await runSteps({
    page,
    userFlow:
      "Validate eSewa homepage loads with key elements and basic interactions",
    steps: [
      { description: "Navigate to https://esewa.com.np" },
      { description: "Click on the eSewa logo" },
    ],
    assertions: [
      { assertion: "eSewa logo is visible in the header" },
      { assertion: "User remains on or is redirected to homepage" },
      { assertion: "Top navigation menu with multiple items is visible" },
      { assertion: "Page title contains the word eSewa" },
      { assertion: "Hero section displays a headline or key message" },

      {
        assertion:
          "Clicking the eSewa logo keeps or brings the user to the homepage",
      },
      { assertion: "Navigation menu items appear clickable or interactive" },
    ],
    test,
    expect,
  });
});

All the test suites are available here (I felt it wouldn’t be a good idea to include all the code directly in the blog).

1. esewa-landing.spec.ts

2. esewa-login.spec.ts

3. esewa-navigation.spec.ts

Note: The goal was not to maximize number of tests, but to ensure coverage of meaningful user journeys.

Challenges I Faced

One unexpected issue I faced was related to the OpenRouter API key setup.

As mentioned in the hackathon instructions, the API key is sent automatically to the registered email after signing up for the Passmark hackathon. I ended up registering twice and received two separate emails with different keys.Without realizing it, I used the older API key in my project, which caused authentication errors such as “no user found” during execution.

After some debugging, I revisited my email, identified the correct key, updated the configuration, and the issue was resolved immediately.

This was a simple mistake, but it highlighted how small configuration issues can completely block a working test suite.

Running the Tests: What Worked, What Broke, and What Surprised Me

After running the test suite on eSewa, the results were not perfectly clean , and that’s where the real insights came from.

1. What Worked ?

Some tests passed fluently without any modification. This was the great motivation to work on this project.

The homepage validation and app download section tests completed successfully, confirming that Passmark handled basic visibility checks and straightforward flows reliably.

These tests involved minimal navigation and fewer steps, which made execution faster and more predictable.

2. What Broke ?

The more interesting behavior appeared in slightly more complex flows.

Several tests failed due to timeouts, including:

• hero section content validation

• featured service interaction

• footer validation

• navigation flows like Services, Merchant, and About section.

These weren’t hard failures, they exceeded the default 60 second limit.

This showed that combining multiple steps like scrolling, clicking, and validating content increases execution time significantly in AI driven tests.

I also hit a specific issue on the FAQ page: The page title was visible, but the expected question content was not detected at that moment, causing the assertion to fail.

3. What Surprised me ?

Two things stood out.

First, navigation heavy tests were slower than expected.
I initially assumed simple UI checks would be trivial, but they required more time because of page transitions and content loading.

Second, how much wording mattered.

Small changes in step descriptions, like being more explicit about what to look for, noticeably improved execution reliability.

Video Presentation

After completing and running the test cases, I decided to create a short demo video to push myself further, as I felt a video would be a better way to showcase what Passmark can do.

https://www.youtube.com/watch?v=vixWAl4vjq0

Important Links

1. Linkedin Post

2. Github Repo

3. Platform under Test (eSewa)

Conclusion

Firstly, I was really surprised by the announcement of this hackathon, and I kept asking myself, "how is it possible to test an application using just plain English?" I was used to the idea that testing requires writing detailed test cases and automating browsers using tools like Selenium and other frameworks.

But when I went through the Passmark documentation and GitHub repository, I was genuinely amazed. I was able to write meaningful test cases simply by describing user actions, without complex setup.

Overall, this was a completely new experience for me. Testing an application using this approach changed how I think about automation.

My POV :

AI won’t replace traditional testing overnight, but tools like Passmark show that the future of testing might be less about writing code, and more about describing intent.

At the beginning of my session in 2019, I was pleasantly surprised to learn about computer engineering in class nine. I was introduced to a variety of curricula and unfamiliar subject names that I had not previously encountered. During the ongoing session, In a team of 4 members, we were assigned our first web development assignment. All of the activity was beyond my understanding. The rest of the group members completed the project and demonstrated it well. Although I was involved in the presentation, explaining proved to be a difficult challenge because of my minimal contribution. This incident ignited a flame to learn web development and programming.

Anyone can learn regardless of age, but maintaining discipline is important for better outcomes. I began with the basics of programming. Initially, it was hard to understand, but I started learning web development. The learning curve was gradually taking shape over time. By the end of class 9, I was able to make some good-looking projects. Over time, I started taking part in various online Hackathons and found success in some. These events allowed me to connect with tech experts worldwide and learn how to present myself on a global stage.

Besides this, some passive income has also become a motivating factor to be consistent in this field. Because I made my first income as a developer by winning an online hackathon, this experience taught me the importance of hard work, effective communication skills, and a positive mindset to attract financial opportunities. Further in class 12, I got the opportunity to participate in the National Level Hackathon. We created a group of 4 people. Additionally, I was allowed to lead our team. Even Though, we didn't win any positions in the hackathon. We gained valuable insights. It taught me how to handle pressure and deliver results within tight deadlines.

In conclusion, one entrance exam designed my career path. This is one of the decisions that keeps a direct relation to my personal growth. Learning programming, and getting the early taste of engineering certainly changed my thinking perspective. It taught me the importance of money. It has also given me a sense of leadership. I believe going to your college will make me grow even more. I see it as an opportunity to try new things and expand my horizons.

🌟 Introducing the revolutionary AI CEO!
Just grab your virtual pen and draw your thoughts on a blank canvas. Whether it's a business challenge, a creative idea, or a complex dilemma, the AI CEO will:
✨ Understand your vision
✨ Analyze your problem
✨ Provide detailed, innovative solutions

🚀 No words needed—your drawing speaks, and AI listens!
Unleash the power of visual problem-solving with the AI CEO. Your ideas, solved effortlessly.

Meet our Team :

Hi, I'm Rajesh Khadka, and together with my skilled video crafter friend Bishesh Marasini , we’re excited to introduce AI CEO – The Ultimate Problem Solver!

Project Overview :

Sometimes, visuals are the most powerful way to express ideas. You may have a clear thought or a rough idea in mind, but explaining it to others can feel challenging. That’s where AI CEO steps in!

This innovative application can interpret your drawings, analyze your concepts, and chart out a clear path to address your questions. But that’s not all—AI CEO can tackle a wide range of challenges, from basic to advanced math problems to complex business scenarios. In fact, it’s designed to handle virtually any problem you throw at it.

AI CEO is an open-source web application that lets you bring your ideas to life on a canvas. Simply draw your thoughts or describe a problem visually, and the app will process your input and provide solutions directly.

Much like a CEO in a company who tackles diverse challenges, AI CEO is equipped to solve problems across domains, offering clarity and actionable insights for whatever you need. It’s your virtual problem-solving leader—ready to bring your ideas to reality!

Draw it. Express it. Solve it—with AI CEO!

Core Features of the App :

• Extracts the image drawn on the canvas.

• Analyzes the canvas image along with user-provided descriptions.

• Generates a question based on the drawing and user prompt.

• Provides a detailed, step-by-step solution to the generated question.

Some Snaps :

1. Hero Page :

   

   This is the Landing Page of the application which contains the slogan of the application.

2. Canvas Page :

   

   This is the page where user draw a image on the canvas. It also contains the sidebar which displays the output after analyzing the image.

Development Process :

1. Ideation:
When the hackathon was announced, I was busy with my mid-semester exams, so I couldn't start right away. After the exams, I had a hard time thinking of an idea. A few days later, after talking with my friend, I decided to create something unique and useful, and that's how the idea for AI CEO came about.

2. Choosing Technologies:
Since this hackathon was organized by Modus, using Modus was a mandatory requirement. In addition, I incorporated the following technologies to build the application:

• Google Gemini Generative AI: To process the image, generate a question based on the user prompt and drawing, and feed it into the workflow.

• Modus: To generate detailed answers for the questions created by Gemini.

• Node.js: For building the server that bridges communication between Gemini and the AI CEO app.

• React.js: For developing a responsive and user-friendly frontend.

3. Integrating Modus and Gemini APIs:
As a first-time Modus user, working with its APIs was both exciting and challenging. Integrating Modus and Gemini APIs formed the backbone of the application. Exploring Postman and GraphQL playgrounds during this process added an extra layer of fun and learning.

4. Deployment:
Once the application was built, it was time to deploy:

• The frontend was deployed using Netlify, using its live integrations.

• The Node.js server was deployed on Render.com after running a few simple commands.

• Throughout development, I used the hosted Modus app on Hypermode, which made managing everything at the end much smoother.

5. Presentation:
We wanted to create an engaging and unique presentation video to showcase the app. Since the app is called AI CEO, we decided to simulate a conversation between a top CEO, Elon Musk, and a podcaster named Lex. To make it even more interactive, we utilized AI to generate Elon Musk’s voice using a pre-trained model. The entire process was both fun and rewarding, pushing the boundaries of creativity.

And here is the final video made after a multiple take : 😅

Challenges and How I Overcame Them :

1. Installation Challenges:
I recently switched to Linux (Fedora), so I was still getting used to the new environment. My system wasn’t set up correctly, which caused problems when trying to run the Modus project. After several failed attempts to fix it, I decided to switch back to Windows, where the project ran smoothly.

The images show the Hypermode team members helping me resolve the installation related issue.

2. Image Processing Challenges:
Initially, Modus did not support image processing for generating outputs, making it difficult to work with the canvas-drawn images. To overcome this, I integrated Google Gemini Generative AI to extract possible questions from the images. These questions were then fed into the LAMA model via Modus to generate relevant answers. Additionally, members of the Hypermode team provided valuable assistance, helping me navigate and resolve this challenge effectively.

The images show the Hypermode team members helping me resolve the issue related to image processing.

Some useful Links :

• 🚀 GitHub: Click Here

• 🎬 YouTube: Click Here

• 🌐 Website: Click Here

Conclusion :

Overall, the hackathon was an incredible learning experience. I got hands-on with Hypermode and Modus, gained a solid understanding of working with GraphQL APIs, and even discovered some better ways to search on Google. Most importantly, we developed the valuable skill of being patient when our code didn’t work . The support from the community on Discord was invaluable, and it played a key role in shaping the app. The entire experience was amazing, and if you haven't participated in a hackathon yet, I highly recommend giving it a try!

GitHash is an open-source web application licensed under MIT that harnesses the power of GitHub actions and gitHub API to effortlessly publish articles on Hashnode. With GitHash, you can seamlessly share detailed insights into your latest commits on GitHub, highlighting changes made, files added or deleted, and showcasing the actual code modifications. (Perfect for those who want to share their project progress to their audience.)

Furthermore, GitHash offers the flexibility to configure and publish your custom markdown file (markdown.md) after each repository push. To get started, simply connect your Hashnode account to GitHash, and let GitHash handle the publishing process for your desired repository.

I'll be exploring the inner workings of this application in the upcoming section of this blog.

Inspiration, idea, and problem : 🧐

While exploring Hashnode, I encountered potential app ideas, yet I found myself uncertain about which elements to include. Following some brainstorming, the idea of automating the blog-sharing process emerged. Let's harness the capabilities of 'git push' .

The main idea is : 👇

You can publish article in two ways :

Option 1 : -> Handing over all the responsibilities to gitHash, where your task is to push changes to the repository as you would do on any regular day.

Option 2 : -> Specify the custom markdown file [markdown.md] at the root of repo and then proceed with pushing it to the repo.🚀

Note : I will be explaining both of these methods in the Features section of this blog.

Demo of the website : 💻

1. Home Page :

   When you go to GitHash's website, the first thing you see is some text and buttons. You can login using your Google account. There is also a button that has a link to the app's GitHub repository.

   

2. Setup credentials page :

   This is the page where you need to add your Personal Access Token (PAT) and the Publication ID of your Hashnode account.

   

3. Repo Tracks :

   Here you can find all of your repository under which the blogpost are published after successfully committing the changes into the desired github repo. Additionally, you'll find a "See All" button to access more details.

   

4. Blogs under specific repo :

   Here, you can discover all of your blogposts published within a particular repository. The list includes the commit message along with its corresponding blog post.

   

Demo Video : 📺

Features of application : ⚙

Well, the application starts working when user hits git push to the desired repo.

The main function of this application is to look after the user latest commit inside the user selected repo. Then, utilizing the gitHub api to get all the information related to the latest commit. Then, generating the markdown based on the commit and publish the article to the hashnode. (This is pretty straight forward.)

BUT :

1. What if you want to publish your own markdown instead of publishing the the auto generated md by our application which includes all the commit details ?

   -> It is not mandatory to publish an article with commit details (such as code changes, file modifications, additions, deletions) every time you push to the repository. However, you have the option to publish your own markdown file. Simply add a markdown[.]md file to the root of the repository and include the specific phrase "my md" in the commit message while pushing into repo.

   

   Then workflow starts reading the markdown file located at the root of the repo.👇

   

2. What if you want to skip publishing article but still want to push the change to repo ?

   -> Publishing the article with every commit to the repository is not obligatory. You have the flexibility to skip the publishing step. When providing the commit message, include the specific phrase "avoid publish" and GitHub actions will handle your choice accordingly.

   

3. Access to Dashboard to track the publishing process :

   -> Well it's not only about triggering the actions. It's necessary to get the update Whether the blogpost is published or not for better user experience. So, I made a minimal dashboard in order to keep the tracks and identify under which repo articles are published.

   Inside the dashboard user can :

   • Add the hashnode credentials. (PAT and Publication Id)

   • View the tracked repos

   • View the published blogpost under the specific repo.

How gitHash works ? 💁‍♀️

Conclusion :

1. Git push with commit message -> git commit -m"added the changes" and git push

2. Triggers the github action -> It extracts all the commit information and send it to the express server (commit name, repo URL, gitHash token from repo secrets)

3. Express server gets the repo information sent from actions into the req.body

4. Then, Express server sends req to Github api with the github URL.

5. Github api returns the information for latest commit details.

6. Express server craft the raw markdown based on commit details.

7. Then, Express server sends the crafted raw markdown to mindsdb model.

8. Model returns the fully fleshed markdown.

9. Then finally, Express server req to hashnode graphql api along with fully fleshed markdown to PublishPost mutation.

10. Then, React App consumes the rest api to showcase the tracked repo along with the blogpost in respective commits.

Note: This architecture is applicable if the user wants to publish the article including the commit details (fetched from the github api). If User wants to publish own markdown then the github api and mindsdb part are excluded from the architecture diagram. Rest of the process is same.

View the Architecture more clearly : 👉 Here.

As the MindsDB Cloud Editor is currently unavailable for use so I have utilized its local Python installations to conduct testing on my local machine. However, when publishing the application, I chose to comment out the section that involves MindsDB.

Use cases of this app : 👥

Craft the project documentation : Developers have the ability to create project documentation and choose when to share it with their audience. This involves adding a markdown (.md) file to the working repository. As developers implement new features into the project, they can update the markdown file locally and make a final push when the project is completed, ultimately publishing a comprehensive article on Hashnode.

How to use gitHash ?🔁

In this section, I will provide a brief overview of the necessary steps to utilize this application.

1. Visit website : Head towards the gitHash website.

2. Login : Authenticate via Google account.

3. Add GitHash Token: Include the GitHash token (generated by the application) in the repository secrets labeled as Githash_API_TOKEN.

4. Add Hashnode Credentials : Connect GitHash with Hashnode by adding the publication ID and Personal Access Token.

5. Workflow Setup: Add the provided YAML script to the your repository actions inside 👉 (.github/workflows)

6. Push Changes: Test the application functionality by making changes to your codebase, adding a commit message, and pushing changes to the repository.

   (In case you want to publish the custom markdown, just prepare your markdown file and push to the repository including "my md" phrase anywhere in the commit message).

   The moment you hit the command "git push" , the github actions running in your repository starts working for you, based on your commit message.

   

   In the above screenshot the commit message is "my md - added the final test". It includes "my md" inside the commit message. So, gitHub action read the custom markdown file present at the root of the repo and curl to express server.

How did I build the application ?

I used react js for frontend, express for backend, mongodb for database and github actions to automate the flow.

Tech Stack used : 👩‍💻

Development :

1. React JS -> Frontend

2. MongoDB Atlas -> For mongoDB database

3. Express JS -> For Rest API

4. Mindsdb -> For generating overview and summary from the markdown.

5. Github API -> For getting the details of latest commit.

6. Hashnode GraphQL API -> To communicate with hashnode to perform mutations.

7. Ngrok -> To expose the local express server to the public in order to use it in the github action. (As, it is not possible to curl to express server running on localhost from workflow.)

Deployment :

1. Netlify -> To deploy frontend.

2. Render.com -> To deploy backend.

Process :

No, it's not a whole tutorial here on how to make the whole website. Better you can think of it as a general idea and steps.

1.🏠 Frontend : I am quite familiar with react so it wasn't that hard to start. I started with create-vite-app. And I have written some custom CSS also.

2.📝 Rest API : As I was creating the frontend, somehow I had to communicate with the backend. So, I created an express server to listen on port 5000 and when I hit different endpoints. I was able to perform different tasks.

3.🛢️ Setting Database : I used mongoDB, if I have to be more specific, I used mongoDB atlas to store the information related to the user, repo and commits with respective blogpost. I made different models and only allowed the server to communicate.

4.🔁 Configuring GitHub workflow in Actions : This task was challenging as I was new to it. After numerous unsuccessful attempts 😓, I finally created the YAML action file.

5.🐘 Setting up mindsDB : I have used mindsdb to generate the blog summary and blog introduction to attach it into the final markdown in the hashnode.

Yaml script used :

If I elaborate on the entire YAML file here, the article's length will unnecessarily extend. Therefore, I will provide a concise overview of the YAML scripts utilized during the hackathon period. 👉 (Full Explanation).

Brief Explanation :

The YAML file configures a GitHub Actions workflow triggered on each push to the main branch. Workflow contains extracting repository information (URL, name, username), and extracting the commit message from the latest commit.

Additionally, it checks the commit message for specific keywords, and based on conditions, it sends data including repository details, commit message, repository secrets and, if applicable, markdown content to a backend API for further processing. The workflow handles scenarios where certain commit messages trigger skipping the publishing process.

-> I plan to release this action on the GitHub Marketplace as soon as my hectic semester exams are over. 😅

Actual Script :

# Trigger the workflow on each push to the main branch
on:
  push:
    branches: [main]

# Define the jobs to be executed
jobs:
  # Job for publishing the blog post
  publish-post:
    # Operating system for the job
    runs-on: ubuntu-latest

    # Steps to be executed in the job
    steps:
      # Step to checkout the code
      - name: Checkout code
        uses: actions/checkout@v2

      # Step to extract repository information
      - name: Extract Repo Info
        env:
          SECRET_API_KEY: ${{ secrets.Githash_API_TOKEN }}
        id: repo-info
        run: |
          # Extract GitHub repository URL
          REPO_URL="https://github.com/${GITHUB_REPOSITORY}"
          echo "GitHub Repo URL: $REPO_URL"

          # Get GitHub repository name
          REPO_NAME=$(echo $GITHUB_REPOSITORY | awk -F/ '{print $2}')
          echo "Repository Name: $REPO_NAME"

          # Get GitHub username
          USER_NAME=$(echo $GITHUB_REPOSITORY | awk -F/ '{print $1}')
          echo "GitHub Username: $USER_NAME"

          API_KEY=$SECRET_API_KEY
          echo "API Key: $API_KEY"

          # Set output for later steps
          echo "::set-output name=repo-url::$REPO_URL"
          echo "::set-output name=repo-name::$REPO_NAME"
          echo "::set-output name=user-name::$USER_NAME"
          echo "::set-output name=secret-api-key::$API_KEY"

      # Step to extract commit message
      - name: Extract Commit Message
        id: extract-commit-message
        run: |
          COMMIT_MESSAGE=$(git log --format=%B -n 1)
          echo "Commit Message: $COMMIT_MESSAGE"
          echo "::set-output name=commit-message::$COMMIT_MESSAGE"

      # Step to check commit message and send data to backend accordingly
      - name: Check Commit Message and Send Data
        run: |
          # Retrieve outputs from previous steps
          REPO_URL="${{ steps.repo-info.outputs.repo-url }}"
          REPO_NAME="${{ steps.repo-info.outputs.repo-name }}"
          USER_NAME="${{ steps.repo-info.outputs.user-name }}"
          SECRET_API_KEY="${{ steps.repo-info.outputs.secret-api-key }}"
          COMMIT_MESSAGE="${{ steps.extract-commit-message.outputs.commit-message }}"

          # Check if commit message contains "avoid publish"
          if [[ $COMMIT_MESSAGE == *"avoid publish"* ]]; then
            echo "Commit message contains 'avoid publish'. Skipping publishing."
            exit 0  # Skip the rest of the steps
          fi

          # Check if commit message contains "own md"
          if [[ $COMMIT_MESSAGE == *"my md"* ]]; then
            MARKDOWN_CONTENT=$(cat markdown.md | jq -s -R '.' | sed -e 's/^"//' -e 's/"$//')
            echo "Markdown Content: $MARKDOWN_CONTENT"
          else
            MARKDOWN_CONTENT=""
          fi

          # Include the secret, commit message, and markdown content in the payload
          curl_data="{\"githubRepoUrl\": \"$REPO_URL\", \"repoName\": \"$REPO_NAME\", \"userName\": \"$USER_NAME\", \"secretApiKey\": \"$SECRET_API_KEY\", \"commitMessage\": \"$COMMIT_MESSAGE\", \"markdownContent\": \"$MARKDOWN_CONTENT\"}"
          echo "Data to be sent: $curl_data"

          # Use curl to send data to the backend API
          if ! curl -X POST 'https://githash-server.onrender.com/api/publish' \
              -H "Content-Type: application/json" \
              -d "$curl_data"; then
            echo "Error: Failed to send data to the backend."
            exit 1
          fi

Future plans :

I'm uncertain whether I'll integrate these features in the future, but I have some interesting plans in mind. Hopefully, I'll implement these features once my semester exams are over. 😅

1. Realtime notification to frontend on publishing blog : Since the primary request was signaled by the GitHub action, successful responses are also relayed back to GitHub actions. However, in the future, I plan to integrate a real-time notification system for clients upon article publication.

2. All the logs of github actions showed in the UI itself : It's not always the same case. Sometimes, publishing the blogpost may be interrupted due to various reasons. So, in this case, I will be integrating showing all the logs to the user account in the gitHash Dashboard.

3. Enable to add the custom cover image: I have integrated the app to use a static blog cover image at the moment (view here). However, I plan to introduce a feature in the future that will enable users to incorporate their own custom blog cover images. This might involve allowing users to input an image URL in the repository secrets or specifying it directly in the markdown file using a label such as "coverimg". This way, I can programmatically extract the cover image to incorporate it within the mutation.

What I learned : 💡

I've done a few projects before, but this one was different. During the hackathon, I learned to use GraphQL API to perform queries and mutations. I also got good command at GitHub Actions, figuring out how to handle workflows, jobs, and steps. But I can summarize my outcomes here as follows:

• Using Graphql : I was able to make some queries and mutations.

• GitHub actions : From complete beginner to being able to use it conveniently.

• GitHub API : I got to know how flexible GitHub API is. 😊

Important links : 🔗

1. gitHash code

2. Website

3. Repo used for Testing

4. Yaml Script

5. Sample articles shared during the development process

Resources that helped me 🎁

1. Access the repo secrets in workflow

2. Set up secrets to repo.

3. Ngrok session Error fix

Final Words : 🎙

The hackathon was an excellent learning experience. I explored GraphQL API, GitHub Actions, the developer console's network tab, and improved my Google search skills. Collaborating with the community on Discord to shape the app made the journey truly enjoyable. Thanks to Favourite Jome for amazing discord support. 🙂

Feel free to leave a comment if you have any questions - I'd be more than happy to respond. 😊

Connect with me on Twitter @rajeshkhadka200

In the previous article of this series, I discussed the cors error and how I solved the problem after long hours of debugging. In this article, I'm here to discuss the popular error message "Cannot set headers after they are sent to the client" which I faced while using node, express.

Overview

Errors are something that developers run into frequently. However, the "Cannot set headers after they are sent to the client" error can be particularly frustrating, as it can be challenging to pinpoint the root cause of the problem. In this blog post, I will share my experience with this error and the steps I took to fix it.

I've been using Node.js for more than two years, and I am comfortable on making the controllers and routes. But as I was working on my "YODIO" project, a YouTube-to-audio converter, I came across this error message that I had never seen before.

Problem: ❓

While sending HTTP request to the express server /api/convert, I encountered this error message. The controller associated with this route was handling a bit long and asynchronous task whose job was to accept the URL of the youtube video, extract the audio from the video and save the filename in the database after saving the audio files in the desired directory.

The Investigation: 👮‍♂️

This time, the investigation was simple; after submitting an HTTP request to my API route, my application crashed. The app crashed regardless of whether it was sent through Postman or the app itself.

The Breakthrough: ✅

After a lot of debugging the code and googling, I was finally able to sort out the problem. The mistake was in my code itself. After some code review, I came to know that, I was sending multiple responses and was trying to modify headers after it has been already been sent to the client. At the same time, I was trying to send the response inside the for loop which is not appreciable. Later on, I modified and the problem was solved.

So, if you see this error, try to look for anything that tries to send a header after some of the body has already been written. For example, look for callbacks that are accidentally called twice, or any event that happens after the body is sent.

The root cause of the problem (in short) : ✨

1. Improperly written asynchronous code that allows multiple branches to send a response.

2. Not returning from the request handler to stop further code in the request handler from running after you've sent a response.

3. Calling next() when you've already sent a response.

4. Improper logic branching allows multiple code paths to execute an attempt to send a response.

Demonstration: 🖥

Here is an example that demonstrates some possible causes to pop out this error message.

const convertVideo = () => {
   let isSaved = true; 
   if (isSaved) {
        res.json({mesg : "Saved suvvessfully.."});
    } else {
        res.status(500).json({error: 'video not saved !!'});
    }
    res.send('This is another response !!');
}

The code snippet above features an if-else block where, each time, either the if or else block will execute and send a response to the client, regardless of whether the condition is true or false. But Later on, we are again trying to modify the response that has been already sent to the client. Due to this, we got an error message: "Cannot set headers after they are sent to the client"

If you use the return keyword in your else condition your code will run properly.

const convertVideo = () => {
   let isSaved = true; 
   if (isSaved) {
        return res.json({mesg : "Saved suvvessfully.."});
    } else {
        return res.status(500).json({error: 'video not saved !!'});
    }
    return res.send('This is another response !!');
}

☝ This stops the execution of the program after sending the response to the client.

const convertVideo = () => {
    for(let i=0; i<5; i++) {
    res.json({mesg : "Saved suvvessfully.."});
  }
}

With the code above, we're attempting to send the response within the for loop, which will send the response four times in a row. When the code is initially executed, the client receives the response. But, we are attempting to change the response in its further execution once more. So, that we will encounter the same error message.

Nature of HTTPS req and response 🌐

HTTP follows a request-response cycle where the client sends a request to the server and the server responds with a single response. Once the response is sent, the connection between the client and the server is closed, making it impossible to send multiple responses without opening a new connection.

In Node.js and any other HTTP server, it is not allowed to send multiple responses to a single HTTP request because the HTTP protocol specifies that each request can only have one response.

Conclusion: 👋

Debugging can be a challenging process, but with patience and persistence, even the most complex issues can be resolved. In the case of this error, I was able to overcome this error and improve the application's functionality. By sharing my experience, I hope to help other developers facing similar issues.

Call-to-Action:

Have you encountered a similar problem when developing your application? I invite you to share your troubleshooting experiences in the comments area below. Also, consider using YODIO to enjoy the YouTube audio.

As a developer, debugging is an inevitable part of the development process. Recently, while working on my project Easy Blog, I encountered a CORS error when attempting to post content to the Dev.to API. In this post, I'll share my journey of investigating and resolving the issue.

About Easy Blog:

Easy Blog is a platform that enables users to publish their blog posts simultaneously on different platforms without the hassle of rewriting their content in various formats. It utilizes the Hashnode GraphQL API to post content to Hashnode and the Dev.to REST API to post to dev.to.

Simplify your blogging process with Easy Blog - it's always there to help you automate.

The Problem: ❓

1. When I attempted to post my content to the dev.to rest API directly from the client side of my Easy Blog application, I ran into a CORS error.

The Investigation: 👮‍♂️

To solve this cors issue, I started investigating the problem by looking at the code. I tested the Dev.to API using Postman, which worked perfectly fine, and I also messed up my Axios post request by including different request headers, but nothing worked.

The Breakthrough: ✅

After several hours of investigation and Googling, I finally discovered the root cause of the problem. I figured out that the CORS error occurs when a web page hosted on one domain tries to access a resource hosted on a different domain. As my client was running on http://localhost:3000 which was requesting the API hosted on a different domain i.e https://dev.to/api. And also I realized that the client-side application was making an unsecured request (HTTP) to an API that required a secure request (HTTPS).

Additionally, the client-side app may be sending custom headers along with requests that may not be accepted by the resources that I was trying to access. Following several hours of investigation and research, To address this problem, I decided to send my request to a custom Node.js server first, and then handle the Dev.to API from there. This solution resolved the CORS error and allowed me to successfully post my content to dev.to from the Easy Blog application.

Why this aproach worked ?

Solving the issue was possible through this approach because certain APIs may permit requests originating from the server but not from the client. Moreover, some APIs are programmed to authorize only particular headers in requests.

Thanks to Hashnode, it did not give me such a frustrating error. 😄

The Lessons Learned: 😅

From this experience, I learned that it's important to thoroughly investigate and test the code when encountering an error, and not to assume that the code is correct. Additionally, it's important to ensure that the client-side application is making secure requests to APIs that require security, and custom headers are accepted by the resources being accessed.

Conclusion: 👋

Debugging can be a challenging process, but with patience and persistence, even the most complex issues can be resolved. In the case of Easy Blog, I was able to overcome a CORS error and improve the application's functionality. By sharing my experience, I hope to help other developers facing similar issues.

Call-to-Action:

Have you encountered a similar issue while developing your application? Share your debugging tales in the comments section below. And don't forget to try out Easy Blog to streamline your blogging process!

And also don't forget to keep an eye out for the upcoming posts in our #debuggingfeb series, where I'll be sharing more insightful articles on debugging and problem-solving. Stay tuned!

But in this blog, I am covering the sector of web development and app development.

________________________________________________________________________________

My some projects

Feel free to visit my GitHub to see my projects: Visit

Some Development tips :

1. Write clean, readable code

2. Automate repetitive tasks

3. Continuously learn and improve your skills

4. Collaborate with others

5. Test your code thoroughly

6. Utilize version control

Building a chrome extension to disable the youtube shorts on the web.

Here in this section of the blog, I am explaining How we can disable the shorts on YouTube web because these shorts are the most distracting videos and time-consuming content which sucks you badly. You scroll down but never end up. So this is the most time-killing content that auto decreases productivity.

So, folks let's disable the youtube shorts programmatically.

1. First set up the manifest.json file

    {
      "name": "reels remover",
      "description": "reels remover is the chrome extension which saves a lot of time by removing the youtube reels.",
      "version": "1.0",
      "manifest_version": 3,
      "content_scripts": [
        {
          "matches": ["https://www.youtube.com/"],
          "js": ["content.js"]
        }
      ]
    }
   

This is the manifest.json file which is the most essential if you are working on a chrome extension.

1. Set up the content_script file content.js

    document.addEventListener("DOMContentLoaded", function () {
      let elem = document.querySelector(".style-scope ytd-guide-entry-renderer");
      elem.parentNode.removeChild(elem);
    });
   

This code simply finds the shorts on the tab and removes the element from the DOM.

1. After this, you can simply load these files to chrome to get up and running.

Make sure that the developer option is always on when you test the extension on your local machine.

_________________________________________________________________________________________

Wrap up

I had this much to share but we can stay connected on Twitter for sure. Thanks for bearing be till the point.

Before starting my journey, it's really important to understand who am I. So, let me introduce myself first, Hi there👋 I'm just a student carrying a bag on his back and going to the community school. Apart from this, I'm a boy trying to learn Full Stack Development on my own, besides the pressure of Physics, Chemistry and Math.

Ley Readers: Why didn't he mention his name 🙄 ?

✅ On a serious note, My name is Rajesh Khadka. 😂

Whether it's creating an app that helps people stay organized or building a website that connects people with a common interest, I find joy in using my skills to improve the world around me.

_________________________________________________________________________________

My experience in 2022: 🚀

Heading back toward 2022, this year provided me with a lot of fun and good opportunities with some rejections, which I am going to discuss Later on in this blog. I believe that 2022 was a standout year for me as a developer because I had the chance to work on some interesting ideas and also received some quality projects from my clients. This thing I can't explain is that some people (clients) are not wise.. haha 😂. It was a bad experience for me as a developer in 2022.

Come on, you know exactly what kind of clients I'm referring to. 😂

_________________________________________________________________________________

Projects 🖥

I believe that technology has the power to change the world and make a positive impact on people's lives. That's why I'm so passionate about using my skills as a developer to build meaningful and useful products that solve real problems. ✅

Even though I don't consider myself to be exceptionally skilled, I really enjoy the process of building projects.

Here I have some few projects that I'd like to share with you :

1. Mero Room

This is an application that makes the connection between the room seeker and the room owner. The app aims to help address the difficulties that people can encounter when searching for a place to live. The application is not launched yet in the play store but we are planning to launch this app at the very beginning of 2023. I'm referring to we because this is the group project done by me and my friend.

• Download: Mero Room)

• Source code: view on GitHub

Learnings:

Maybe this project is the turning point of my 2022. This was the first mobile application that I built in my entire four years of programming Journey. Although, it was challenging to set up React Native for me and tough to understand the gigantic error it throws but this project provided me a path to explore Mobile Development too.

_________________________________________________________________________________

2. Collab

Collab is a Real-time code sync tool where one user can collab with any other user to write code at the same time. Besides this, users can save written code snippets to the website by creating a profile on the website. Why don't you try it yourself 👉 ? open website.

• Visit: Collab

• Source code: view on GitHub

Learnings:

This was the first project where I used socket io and redis together. Here in this project, I learned all about emitting data to clients and listening to the events from at server side. It was really fun.

I was really excited and motivated when I saw this from Hashnode: Eleftheria Batsou. I'm really happy about their post of appreciation. ♥

_________________________________________________________________________________

3. Suryaghat Library

This is the project that I built for my client in 2022. It is a web application that was developed with the motive of providing books for free.

• Visit: Suryaghat Library

• Source code: private repo - security concern 😂

Learnings:

This project was based on uploading files to the server and serving those files to the frontend. So, it was my very first experience with such operations and I enjoyed the process.

If you didn't notice, this project belongs to the same client which I previously mentioned.

_________________________________________________________________________________

4. Easy Blog

Easy blog is an open source project from where you can easily publish your articles on different blogging platforms at once. You just need to add some keys of the different blogging platforms like (Dev, Hashnode) and you are ready to publish your article.

• Visit: Easy Blog

• Source code: view on GitHub 😂

Learnings:

This is only one project which taught the very basics of graphql because the API endpoint by Hashnode was served via graphql. I was really excited to learn about mutations, queries and many more.

_________________________________________________________________________________

Achievements 🏆

One of the things I am most proud of in my journey as a developer in 2022 is working on good projects and interesting ideas which lead me towards achieving something that I always wanted to. Here in this section, I will be discussing some of my achievements.

Here are some achievements :

1. I was one of the runner up in the Hashnode blogging competition.

   

2. Runner up in notJust.hack hackathon on building App Mero Room.

______________________________________________________________________________

Rejections 👑

As I already mentioned, 2022 was a standout year for me. Although there are few Achievements inside my pocket this year, I participated in many events in 2022 which I failed to win. Rather it's perfect to say the result was not in my favor. Simply, I can say I was rejected.

I participated in Redis x dev hackathon in May where I got only a participation badge hanging on my dev.to profile. Similarly, I participated in mongo DB x dev Hackathon and the result was the same "badge hanging on profile". I also failed to win the title of #4articles4week of hashnode this year only. I also failed the netlify x HashnodeHackathon.

Even though I didn't win the hackathon prize, I feel like I came away from the experience with a lot of new insights and skills that will be useful to me as a developer in the future.

_________________________________________________________________________________

Learnings from 2022 🍀

As I look back on the past year, I am filled with a sense of gratitude and accomplishment for all that I have learned and achieved as a developer. Here, I'd like to share some of the key lessons that have shaped me in 2022.

1. Working with clients

In 2022, I learned the importance of working with clients as a developer. I gained valuable experience in communication, collaboration, and problem-solving, which have helped me to better understand the needs of my clients and deliver high-quality products and services.

2. Working on a team

One of the most valuable lessons I learned as a developer in 2022 was how to work effectively in a team. I learned how to communicate clearly, listen actively, and contribute my skills and expertise to the group to achieve our shared goals. This has been crucial in helping me to build successful projects and relationships with my clients and colleagues. 👨‍👩‍👦

3. Staying current with industry trends

It's really important to stay up to date with the current industry trend and it's really hard to do. But this 2022 taught me to stay current with new trends and good practices used in this field. This has helped me to stay ahead of the curve and stay relevant in a constantly evolving industry. 📈

Apart from this, 2022 taught me to manage time efficiently and this was important because I know How tough it is to manage time parallelly with PCM (Physics, Chemistry and Maths).

• Time Management

• Communication skills

_________________________________________________________________________________

Final words 💖

As I bring this blog to a close, I am filled with a sense of gratitude and accomplishment. Looking back on everything that has happened in 2022, I am overwhelmed by the love and support of my family, friends, and colleagues, who have helped me to navigate the ups and downs of the past year. Despite the challenges and setbacks that I faced, I am grateful for the lessons and experiences that 2022 has brought me

I am excited about all that the future holds. Whether it's continuing to grow as a developer, building new relationships, or exploring new opportunities, I am confident that the skills and resilience that I have gained in 2022 will serve me well in the years ahead. Thank you for following along on my journey, and I hope that my experiences have inspired you in some way.

My Dm's are always open on Twitter .

_________________________________________________________________________________

IDE ( integrated development environment) is one of the tool you uses daily as a developer and of course it is one of the most opened window in your computer system. And for sure, it should be good looking, clean and productive too. So, in this article I'm sharing some useful vscode's extensions for a developer which makes you more productive. And of course I'll be sharing the theme I love most !!

Some useful extensions

1. Thunder Client

I know, being as a developer it is sure that you will be consuming the rest api,for that I'm sure, you will use postman to test api. But, my friend there is one popular extension called thunder client a lightweight Rest API Client Extension for Visual Studio Code for Testing APIs.

Demo :

Download: 🔗 Click here

2. Markdown Preview GitHub Styling

Styling the readme may be one of the challenging task for the developer. We all have the habit of viewing the output of the code side by side, but what about the readme ? but don't worry, we have another powerful and again useful extension from where we can preview the readme while generating it, simply just by clicking one button at the top right corner .

Demo :

Download: 🔗 Click here

3. Prettier - code formator

What usually happens people actually spend a lot of time and mental energy for formatting their code. With Prettier extension integration, you can just press that magic key, the code is formatted. This is an eye opening experience if anything else.

Demo :

Download: 🔗 Click here

4. GitLens

I know it's really confusing when you don't know when this particular line was committed to github, who committed that particular line, what was the changes. So, now the problem is solved due to the powerful extension called GitLens which Quickly glimpse into whom, why, and when a line or code block was changed .

Demo :

Download: 🔗 Click here

5. TODO Highlight

Sometimes, in a big project where there are tons of needs to be implemented, you usually forget adding which features is completed and which one is remaining, so here where a TODO Highlight comes in which allows you to mark the todo in any file you are working on simply writing TODO: Add new features .

Demo :

Download: 🔗 Click here

6. CodeSnap

It's really trouble to share the picture of the specific part of the code to social media, to your friends.. in a good and in organized way. Here where, the codeSnap comes in which allows you to share the code of the specific part of the codebase by generating a beautiful photo in just a single click.

Demo :

Download: 🔗 Click here

6. Live server

Are you bored reloading the browser after changing some code to see the changes, then my friend here is a simple extension called Live server which auto reloads the browser after you change some code in the HTML, CSS, JS file of your project . The all things you should is, install the extension, press a small button which appears at the bottom right of your HTML file named as Go Live which auto starts a project in localhost.

Demo :

Download: 🔗 Click here

6. Material Icon Theme

This is the cool extension I love most in vs code which auto detects the file extension and folder name inside of your project and enable a small icons relatable at the beginning of the file or folder name, which creates more professional looks and of Course helps to understand the purpose of file and folders.

Download: 🔗 Click here

7. Rainbow Brackets

As your codebase becomes larger and larger it is really difficult to identify which one is opening brackets and which one is closing brackets. Here where a Rainbow Brackets comes in which automatically provides a same color for the pair of brackets which makes helps you to debug the code easily .

Demo :

Download: 🔗 Click here

Theme I use

I'm using vs code since 2019, and I had tried more that 20 themes so far. But among all of the themes I used two of them are my favorite on which I keeps switching. You can also give a try to them.

• Andromeda Download

• Atom one Dark theme Download

Wrap up

It always feels great when I reach the end of writing a blog. I had this much to share but we can stay connected on Twitter for sure. And also I highly recommend you guys to drop the name of extensions that I missed to mention above.

I'm using vs code since many years and I have a kind of nice attachments with it. Thank you microsoft vs code team and for those people who has published their extensions into a vs code. It helps a lot !! 😊 And again thanks to Eleftheria Batsou for a big support in discord and in the email throughout the period of 4weeks4articles ! ♥

keep helping, Keep exploring !! 😁

Collab is a Realtime code sync tool where one user can collaborate with any other user to write code at the same time. Beside this, users can save written code snippets to the website by creating a profile in the website. Why don't you try it yourself 👉 ? open website

In this article I'm not walking through all the code I wrote during the development time, but I will be explaining, How I developed the project, what I learned and also share some starter code (redis connection, socket connection ) also some query
to communicate with the redis databse.

Let's start with a simple question !

What is the need of the project ?

• problem

I don't know if it's a problem or not but, I have seen a lot of people writing code in google docs while appearing for the interview (specially while performing coding round). So, I was thinking of building a project to address this problem. At the same time my college was off due to some reason & I thought this would be the right time to build the project which ultimately gave birth to collab.

• Fun fact :

It's same thing writing code in paper or in a google docs. 😂

What I used to build it ? 👩‍💻

There is not any drought, to say I used javaScript (React, Node - Express) to build the project but this time JavaScript is not only in the picture. Alternatively, I used Redis as a database. Ultimately, my tech stack for the project is RERN (Redis, Express, React, Node).

As the application is all about broadcasting the code to all the clients at the same time, syncing all clients so I used socket.io for the real time communication between the browsers. React, Node & express are the usual things for me, I have pretty much worked on it multiple times, but socket.io and redis were totally new to me for this project. So, I will be talking more about redis and socket.io in this blog.

Why did I choose the RERN stack ?

As redis is the one of the fastest database databases and It would be the perfect choice for the real time application where users want to save and retrieve the code within a second. Also, redis allows us to cache the api response so, maybe in future I'll be implementing the redis cache .

Learnings 📰

As I already mentioned, redis and socket io were completely new for me, so It was very fun exploring them. The one word answer for the question is redis and web-socket - Oh ! those two words .. BTW, in this section I'm not just limiting myself to only those two words. I'll be throwing more than 2 big paragraphs .

• 🌐 web sockets

Web Socket is bidirectional, a full-duplex protocol that is used in the scenario of client-server communication, unlike HTTP it starts from ws:// or wss://. It is a stateful protocol, which means the connection between client and server will keep alive until it is terminated by either party (client or server). After closing the connection by either of the client and server, the connection is terminated from both ends.

You can refer this to study in detail

The main thing is in the web socket (socket) is emitting the event or action from the client. listening to the event in the backend (server) and performing the query logic based on that and more importantly, these all things happen in a real-time.

• 1. Initialize the socket

socket.js

// first point out the backend server
export const initSocketClient = async () => {
  let url = "http://localhost:5000";
  const options = {
    "force new connection": true,
    reconnectionAttempt: "Infinity",
    timeout: 10000,
    transports: ["websocket"],
  };
  return io(url, options);
};

• 2. Emit data to server

sendData.js

// emit the data from here, using the socket instance created above

import {initSocketClient } from "./socket.js" ;
import React,{useRef} from "react" ;
const  socketRef = useRef();
// now using this you can emit 
const   socketRef.current = initSocketClient (); 
// emit data
  socketRef.current.emit("join", { // join is the custom event
    room_id : 458582584842,
    username : "Rajesh Khadka",
  });

• 3. Listen to event

server.js

 import http from "http";
import { Server } from "socket.io";
const server = http.createServer(app);
const io = new Server(server);

io.on("connection",(socket)=>{
    socket.on("join", ({ username, room_id }) => {
    console.log({username, room_id})
}
})

• 🛢️ Redis

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker. This definition is according to the official website itself.

I haven't used all of their services but if I have to answer this question from my own experience then I will probably say Redis is a database that facilitates us to store the data in memory in JSON format and also enables us to intelligently search for the data stored inside of the database. I mean their search feature is so cool that it even returns us the result that matches the synonyms of our query, of course only if we ask for it.

How does the application works⚙

Firstly the user joins the new room by entering room ID and username. Then it gets sent to the backend which checks if the room is currently present or not with the same roomID, if yes it pushes the user to the existing room with the same roomID if not then it creates the new room with the same roomID and then pushes the user to the newly created one . Also I have already discussed the working model of the application at this part of the video.

Additional Information ℹ

• 1. Let's connect to Redis Databse

import { Client } from "redis-om"; 
// You need to install   `redis-om` npm package to get started.

const url = process.env.REDIS_HOST;
const client = new Client();
try {
  const res = await client.open(url);
  console.log("Connected to redis !");
} catch (error) {
  console.log("failed connecting redis", error);
}
export default client;

• 2. Add stuff to the database

import { codeRepository } from "../schema/code.schema.js";
  // like model in mongoDB you need to create schema in redis

const postCode = async (req, res) => {
  const code = codeRepository.createEntity(req.body);
  const id = await codeRepository.save(code);
  if (!id) {
    return res.status(404).json({
      message: "Something went wrong !",
    });
  }
  res.status(201).json({
    message: "Posted !!",
  });
};

• 3. Read the data from Database

  import { codeRepository } from "../schema/code.schema.js";
  // like model in mongoDB you need to create schema in redis
  const getMycode = async (req, res) => {
  const myCode = await codeRepository
    .search()
    .return.all();
  res.status(200).json(myCode);
};

• 4. Delete the data from Database

  import { codeRepository } from "../schema/code.schema.js";
  // like model in mongoDB you need to create schema in redis
  const deleteCode = async (req, res) => {
  try {
    await codeRepository.remove(req.params.code_id);
    res.status(200).send("Deleted");
  } catch (error) {
    res.status(400).send(error);
  }
};

Some Important Links 🔗

🔗 main repository

🔗 frontend part of the repository

🔗 backend part of the repository

Getting errors and getting stuck for a long hours is not a new thing in the life of software engineer / developer. Getting gigantic errors and problem to add a single new features is really a troubling situation & all people have a different way to sort out theirs problems which I am going to explain, "What I do if I stuck as a developer ?"

1. I Visit Stack to overflow

Stack overflow is one of the big and great platform for all kind of developers who faces errors and get stuck during the project. I also use stack overflow if I stuck as a developer.

🛠 Fun fact :

Sometimes, I get errors; I copy the error ; paste it in google, and I find the solution in stack overflow which I had not seen before, I don't understand but I copy it and it works.

Beside stack overflow, there are also amazing sites which helps me to figure out the problem !

2. I consultant with my friends

Since, I'm a computer student and there is a small circle of coders who are very active on helping each others. And I talk to the circle to sort out the problem. You can also reach out to Aashish Panthi, Utsav bhattarai and SR code. They all are my classmates.

But, who helped me through different platform are also my friends !!

3. I create post to different Facebook groups

Since, these days there are different active fb groups with large community handled by the different tech peoples. These groups also helps (sometimes) ! 😂

🛠 Funny moment:

Once I posted some silly things saying Guys subscribe to my YouTube channel. And the hate I got in comments was like😨

I prefer these groups :

• Lama Dev
• React Developers
• HTML CSS & JS

4. I also Go through an online articles

Finding solution after reading articles written by different tech persons is the most required skills required for software developer. Speak less, read more should be the moto of software developer !

When it comes about online platform for reading articles, I mostly prefer these platform to sort out the problems.

• Hashnode blog
• Medium visit
• DEV community DEV profile

These platform are the first priority, but sometimes some random articles ranked on 3rd, 4th page of google search also helped me. So, big shutouts to those random articles !! ❤

Things to say

It always feels great when I reach the end of writing a blog. I had this much to share but we can stay connected on Twitter for sure. And I would like to say, Errors are the part of life of software developer, so stay relaxed all the time, think more to solve the problem. Keep learning and keep exploring !!

In previous article, I talked about my failed interviews, make sure you check that too !! 😂

Make sure you drop a beautiful comment and drop heart for article, If this helped you learn something in anyways.

Hello everyone, I'm Rajesh. You would probably call me a failure Rajesh today if I hadn't overcome the failure which I faced for a multiple time.

I'm not a pro programmer, not a pro developer but I have a good experience for building resume, appearing interviews and failing them. I'm not too much old guy who had appeared a ton's of interviews. I just appeared 3 interviews so far for a local startup in my region and I failed all of them. But, before appearing in the 4th interview I think will I have a quite enough lessons that I learnt from them.

Readers be like : enough 😨

Oh common don't do this😨, I ensure that I have enough lesson which can be shared here. I'm a developer not pro but I'm. You might be thinking I'm here to explain a code or something like that but that not the thing !!

What I Leant after failing ??

I'm not demotivating you guys it's true that, "failing is not a bad thing, but not learning anything from the failure is obviously a bad thing." - Rajesh khadka

I know exactly how it feels to face rejections in the mail for the job you’ve so desperately wanted. But my friend, learn these things from the failure, It would be better for next time :

1. To accept the truth

I used to think, I know the concepts very well. I can work for company or any startup but I was wrong at that moment. So, after failing in these interviews, I learnt to accept the the truth that

• " I need to work hard "
• "I need to push myself to learn !"
• "Remember that you aren't perfect"

2. To look after the resume

Since, Resume is also one of the affecting factor for your selection. Job Recruiter or Hiring manager is not going to thoroughly study your resume. So there should be some unique points or keyword related to the job title due to which the possibility of getting hired increases.

In my case the resume was too much random. But for the 4th interview the scenario is something different, resume is good looking . I will share my resume some other day ! 😂

✅Tips : You can refer to this website to build resume :

• LCO resume Builder

3. I learned, " not to be over confident "

Probably, over confident is not a perfectly fitted word for this situation. But the thing is, any individual should not be more confident for his/her job. If interviewer asked, What do you think, Will you get selected for the role you applied ? , Probably the answer should be , "Let's see !! .. How far it goes !"

Usually, the interviewer ask you the question, "What fits you perfect for this job ?"

✅ Tips for the answer :

• The answer shouldn't be fancy.
• Be loyal for this question.

• Just don't try to copy the answers from others, all have their own thought !

  PS : Your selection for the role doesn't depend only on the answer you gave. There may be all the factors lying on the same line which caused unselection for the job. But the way of answering the question is also one of them .

4. We still have room for improvement.

Learning lessons the hard way sucks, and so does getting negative feedback. However, they’ll ultimately help you become better at interviewing. So when you’re lucky enough to hear back from the hiring manager with a specific reason for rejecting you, take the time to think about how you’ll improve next time.

Remember :

“Failure is not the opposite of success, it is a part of success.”

Oh common, Looking these quotes, don't think that this guy (Rajesh) has achieved a lot and He's successful. I don't know, just these quotes boost my motivation to next level ! 😊

One interview made me to build the product

It was a time of covid, Randomly I applied for a post of React developer through Linked in. All the meeting was scheduled for a next day. I was mentally prepared for the interview. After all the interviewer invited me on the zoom meeting and shared a link to write a code on that platform. Which was not really good. I don't remember the exact name of the platform.

May be due the platform on which I was writing code 😂 and many other circumstances, I could not perform well on that interview, which triggered me to build the own product for collaborating for interview purpose.

I will be launching the bare minimum version of app in few days, and surly I will publish the blog on it's launch !!

Things to say

Any experience brings something valuable to the table regardless of the outcome, so don’t feel sad instead, try learning from those job interviews to avoid the same mistakes in the future.

I had this much to share but we can stay connected on Twitter for sure. And forgive me for not including any images (related to interview), I don't have real images and illustrations don't truly depict the emotions. 🙂

If this story helped you learn something in anyways please make sure you clap for it.

A database is an organized collection of structured information, or data, typically stored electronically in a computer system.

Oh. common it's just a definition, nothing more to do with this. Let's give a few minutes to understand database much more practically and lets feel it .. 🔥

• Let's take an example, you just opened Facebook and you wanted to make a post saying , "Hey !! developers'' and if it gets posted successfully,

Where does that post go and stay ?

• You upload videos to the YouTube, and again if its uploaded successfully,

where does that information regarding video goes and saved ?

These all of the questions has a single answer "Database".

Disclaimer ⚠

This blog is totally for beginners, so my request 🙏 for experienced developer please, don't leave a comment saying, "This is the bare minimum and basics" 😂

Types of database 📰

If I'm not wrong, you have frequently heard about sequel and non sequel databases. People are really making these things super complex for the beginners. So, let's break these terms into the easiest one !!

Okay, again lets pick up an example of “uploading YouTube video”. And we all know that a video has a certain attribute i.e. id ,Title, Description, likes, comments, uploaded date and many more. Let's think for a while, How do these actually get visible as a piece of data ? And here where a sequel and non sequel databases comes in.

The above attributes looks like in sequel database :

Here, we can say that, the sequel database stores the data in the table as rows and columns. Some popular sequel databases are :

• MySQL
• Oracle
• Postgrace

And again, these same attributes looks like in non-sequel database :

{
    id : _2525252155,
    title  : "All the things You need to know about DB to get started",
    description :  "Description goes here !",
    likes : 1250,
    comments : "Nice Video ! ❤ "
};

It also may have some nested data :

{
    ....,
    comments : ["Nice blog", "Amazing" ]
};

Here, we can say that the non-sequel database stores the data in the JSON or BSON format . Some popular non-sequel databases are :

• MongoDb
• Firebase

What to use for your Next Project ?

Okay ! It's not a simple or too much easy to say use "MySQL" (sequel) or "MongoDB" (non-sequel). The answer is It depends ! in most of the cases, Choosing the database is based on what type of project you are working on. If it is just a simple todo app feel free choose any db you like the most without thinking about it. But if the project is more than todo app, serves a millions of users then My suggestion would be use Non-sequel db's because they are more scalable and flexible .

Just shown above.

I was doing good but was not able to make any progress, and believe me you won't get any output if you are blindly following the YouTube tutorials. I agree, Contents creator in YouTube are really really doing amazing Job but here are some reason that Why should slow down watching YouTube Tutorials ? or you should find Better ways of watching YouTube Tutorials

1. Decreases problem solving capacity

For any developer or a programmer, it's really necessary to think outside of the box to solve a problem. And think to yourself, if you are watching the tutorial for every single problem you face, then How can you increase your problem solving capacity ? So, it's better to read a blog or a documentation or ask help online rather than following the YouTube tutorials blindly.

• And, those tutorials are edited so you won't find How they actually solve errors !!

2. Fear of stating a new project

Think, the project you made earlier just by following the videos, and suddenly you got a new project. Then, I can say that, the fear starts troubling you. And you starts to think, "weather, I can complete this project or not ? 😓". But Listen, if you develop an older project on your own, you will have extra energy to complete a project, Although the project is completely new for you.

3. Impact in self learning curve

When you watch tuts, you follow your instructor and just code what he/she codes. Here, the whole game ends up. If you follow them coding, you probably do not need to research any concepts or topics and ultimately, you will lose the capacity to learn new things on your own. So, again it's better to read a blog or a documentation or ask help online rather than following the YouTube tutorials blindly. 😂

Fun fact

I know your favorite YouTube instructor is about to complete a whole project, but till now you are continuing watching videos, even without setting up the project !! 😓

Saying these things, I'm not demotivating you guys. But, I'm trying to make a reminder that following YouTube tuts blindly is somehow not a good idea. But wait, I'm not here only to share the cons of watching the tuts. But in the same article I'll share some better ways to watch tuts. 🙋‍♀️

✅ Learn the concept, and apply yourself

Yes, you can watch tutorials to learn the concepts but until and unless you won't try yourself or apply those concepts on your project, probably you won't get the expected outcome. So, you should not only watch but you should try at least once.

Summary

So, guys if you want to make progress in the programming journey, you must come out of the comfort zone and work hard, believe in your self, and I know that you can do it !! ❤ Additionally, In every new Year, every single YouTube Instructor make a video on the topic of "Best programming language for this year". These types of videos make a perfect sense but wait, they rank the languages based on their experience. So, I think it is not a good idea to blindly follow these videos. But it's totally up to you.

Guys, I know it sounds so rude, explaining these things but it was really necessary to say because I don't want you guys to repeat the mistake I did in the past. It's my duty to make aware if any other people are doing something really not good. 😓

Mero Room or (My Room) is a simple and pretty straight forward mobile application that creates a communication channel between room seeker and room owner.

Here, in this article I'm not going to describe the code I wrote during the development, 😁 But my primary goal would be that How we can build a better mobile apps in 2022 ? and secondly What challenges did I faced during the whole development process, and How we can overcome such challenges ?

How we can build a better mobile apps in 2022 ?

In this competitive market, Building a mobile is not so really easy, but is can be made super simple by considering few thing :

1. Your Idea is Everything

The most important thing behind a successful app is a solid idea. You should be able to describe your app in only one sentence. Apps are pretty disposable — if something doesn’t meet a user’s needs, they have no qualms about deleting it off their phone or tablet. So, your idea is the backbone of your application.

2. Identifying Your Audience

To build a successful app, you need to know who is your target audience . First we need to analysis the market shortly and then proceed to the next one !

3. Important vs. Nice to Have

Being as a developer, we all have the habit of including all the features in the current project. But it's really necessary to understand , the feature you are going to include in the product / project is Important or "Nice to have" . Each additional feature you includes in your app during development time, increases costs, increases complexity, and if executed poorly, can impact your users’ experiences negatively.

4. Designing your workflow and prototyping.

Now, you know what you're building, for whom you're building, and what features you are going to include in your app. So, it’s time to map your flow and build your prototypes.

When I say “map your flow,” I'm referring to the flow of actions taken by your users. Common you know that ! 😂

Challenges that I faced , and way to overcome such challenges

I think, I have prettily discussed that, How we can build mobile app efficiently above. Lol 😂. Now in this section I'm here to discuss what challenges I faced at the time of building app so called "Mero Room"

⚡prototyping and Designing the product.

Yes, I totally agree that Design sucks. And designing a product from the scratch is really a challenging job. I had suffered a lot through this problem in my designing and development Journey. and there is no way to say that I didn't passed through this problem in this app development project. I faced a lot of problem while choosing the colors, theme, How the screens of the app is going to look and all of these things. !! But, in the same time google and Dribble helped me a lot. My recommendation is

• "You should take reference from these amazing platform" .
• "There are a lot of Instagram account that provides you an amazing design solutions along with tips and trick " Simply, search for ui_gradient, ux_spring or twineuidesign. oh, common I'm not promoting them 😂..

With these all messed up, I finally completed Designing some screens..

⚡Choosing the tech stack

When it comes to choosing the tech stack, continuously it hits my head. And in this case, I was literally confused in choosing the stack because React Native and Flutter were standing in front of me. Some how I was attracted towards the React native because I was quite familiar with JavaScript and React JS but it took me a time to take the decision thinking which one is best , but trust me, none of these frameworks is best, they all have their own purposes.

• ✅ Pro tips : Always select a stack that you are familiar with.

⚡Challenging Authentication task

In the world of browser i.e (web development), Some of these terms like cookies, LocalStorage were quite popular and understandable terms. But when it comes to virtual Emulator and simulator these all things are gone and sounds really confusing. Storing the tokens, some local data was some how challenging for me.

• ✅ So, who are new to React Native, don't think anything, just open google and search for AsyncStorage if you want to store some data locally and save your time !! 👌😂

⚡Managing a large codebase

Since, project "Mero Room" is a business driven project and has a lots of files, folders and sub folders so, it was really hard to manage those files. And in my case, the name of the folders and files were not too meaningful and context fixable. So it was more tough to manage. But it may not be same for others.

✅ Pro tip :

• Always break down the project in folders and sub folders.
• Give a meaningful name to the files.
• Follow the same naming and coding convention throughout the project. Some popular naming convention are Bem convention and camelCase convention .

⚡Managing silly merge conflict in git

Since, I was working with my team, so I had a headache while managing those merge conflicts in git. It's well said that, "Little knowledge is dangerous" and my little knowledge regarding some git commands pushed me into a world of unmerged code.

✅ Pro tip :

• Always use branching system in any code hosting platform. such as GitHub, Bitbucket or GitLab.
• Always give meaningful commit name while, pushing, the code to repository. (Helps a lot while reverting a code to the previous commit )

Summary

Yes, the whole process was tough for me, but it was so much interesting, full of fun and Learnable. Working hours and hours just to add a single new features and facing the gigantic error was not too much joyful. But, result after a long hours made me very happy and emotional too. My hands on keyboard and my minds on PCM (Physics, Chemistry and Maths ) was really painful for me. But, In my case study also equally important , because I'm not a zuckerberg, larry who is going to the MIT and Harvard. I'm Just a student carrying bag on his back and going to the community school. Managing a valuable time for these subject beside the project was really tough job. Although there were so many challenges, always I tried to give best from my side.

So, guys never loose hope, be optimistic and believe in yourself and change the entire world. Always be supportive so that any others developers can be benefited. With that said, at last I want to say that, The IT world is so much gigantic always be ready to learn a new things !! ❤