DEV Community: Mohamed Ashiq Sultan

Built my first TUI as a web dev and the experience was awesome

Mohamed Ashiq Sultan — Sun, 15 Feb 2026 07:27:22 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built a Terminal UI to ralph loop Github Copilot to automate vibe codeing tasks.

I previously built this as a Desktop app but realized I myself spend most time in terminal so why not build this as a TUI as this be learning experience for me on TUIs

Now since this is available as an NPM package you can try this out easily with

npm i -g copilot-ralp
cd to your project and run copilot-ralp

Demo

My Experience with GitHub Copilot CLI

I have used Copilot in VSCode mostly and this is my first time using AI tool in a CLI. I especially liked the Resume feature and the premium request usage metrics we get at the end.

Experience building TUI as a web developer

I have been developing web application for almost a decade and this is my first time trying a TUI.

When thinking which libraries to use, I was initially exploring non JS libraries as react was the last thing I want to write on a TUI but dobled down on React Ink anyways 😅 as I dont like to vibe code stuff I'm not so familiar with.

Thanks to copilot that setup was a breeze. I was able to reuse some logic from my electron code also since its React, the jsx way to layout and handle state in the CLI was understandable at first glance.

So I realized in TUI its not mouse clicks anymore and its just keyboard-driven. I had to unlearn the usual Web UI brain of “yeah, the user will just click that” and shft to “how would the user know this exists” mindset. Surprisingly copilot added a little bar at the bottom like in older Turbo C and nano editor this was somthing I wouldnt have comeup myself.

One thing for sure AIs are getting better at coding and its high time that we utilize them to learn and build something new.

If you made it this far, feel free to drop a ❤️ on the post. Thanks.

I Built a Desktop Client for Copilot to automate vibe coding tasks while I sleep.

Mohamed Ashiq Sultan — Tue, 10 Feb 2026 12:45:30 +0000

This is a submission for the GitHub Copilot CLI Challenge

What I Built

I built a desktop app for Copilot to work on taks in a Ralph loop mode. The app has a plan mode and also creates git commits for each task.

Demo

GitHub Repository

YouTube Demo

Inspiration

Original post on Ralph loop. This is the post that triggered the Ralph way to use claude code. And I thought of building an UI for this for copilot because, TBH, Copilot is the chepest pricing I could find right now for AI assisted coding.

My app doesn’t strictly follow the OP, because I’ve moved some responsibilities out of the AI layer and into the orchestration layer. The system now handles the following tasks:

Linear selection of requirements
process.txt updates after each task
Creating Git commits

I made this way so the system is predictable and to reduce ambiguity of relying on AI

My Experience with GitHub Copilot CLI

This is my first experice with AI in CLI (yes I dont have Claude code), before this I have used copilot only inside VSCode but using it in a CLI feels like more control. I liked how we can mention files with @ (which I also included in my app btw). I also loved the --yolo flag and I was mostly starting my sessions with yolo mode. Almost forgot to mention the --resume session was a saver and the information on how much premium request info at end of session was really helpful.

Choosing models

I must say this, choosing models in copilot felt more like a survival game. As I'm in a free tier I dont want to lose all my premium requests, since my app in itself is an UI for copilot, so testing the app also means additional calls so I followed this strategy. Sonnet 4.5 for normal tasks and Opus only when required so I dont use x3 the limit.

This is my typical flow

Start in yolo mode
Select models based on requirement.
Choose the files I think the AI should know for the task
First the Plan mode
Then Execute mode

Thanks for reading

A like on the post ❤️ would be great.

Co-Researcher | A Medical Research tool | Multi-Agent and Real-time data

Mohamed Ashiq Sultan — Sat, 30 Aug 2025 05:39:24 +0000

This is a submission for the AI Agents Challenge powered by n8n and Bright Data

What I Built

I built a Co-Research app to help scientists in healthcare and medicine get their work done faster in drug discovery. It’s uses by multiple n8n AI Agent nodes each having brightdata as their tool to retrive real-time data from internet

Each agent takes care of a specific job, like pulling in Clinical Trial data, checking literatures, analysis of safety concerns and then a final agent ties it all together into a neat summary with insights.

Demo

Main Workflow

Sub Workflow

Live App You can try the app in the below link.

https://co-researcher.vercel.app

n8n Workflow

Technical Implementation

I have created two workflows.

Main Workflow: This is where the actual research workflow happens. It uses multiple AI agents, with each agent handling a specific part of the research process.
Sub Workflow: To search the internet using BrightData Think of this like a resuable helper function. It handles web searching tasks and is designed to work with any existing or new workflows. In this project, three different agents use this same sub workflow as their search tool.

LLM Model: Well, I used Gemini Flash due to their free tier.
Memory: I used simple memory provided by n8n
Tools: Well, the BrightData search

This is simply the tech stack

Next.js: Web app
n8n: Research Automation
BrightData: For Searching Web
AirTable: Storage
Gemini: LLM

Bright Data Verified Node

I have used couple of bright data nodes

Webscrapper Node with Google AI search
Monitor Snapshot
Download Snapshot

Journey

This project is an inspiration from James Zou talk on Virtual Lab of AI Scientists. Since this is just a hackathon project, I didn't capture his complete version, rather adapted the core ideas he outlined so credits to him.

Okay now about my actual journey

I'm completely new to both n8n and brightdata so had to watch some YouTube videos to get an overall understanding. Also as person who likes to avoid tooling and loves to code everything, this entire concept seemed too good to be true. What I personally liked is the easy integration with the various platforms with just API keys and also the orchestration of AI Agent tool, this is super cool coz If I had to code this I would easily sit at least a week on this.

I started experimenting with BrightData on n8n, and initially tried using it directly as a tool in an agent node. But that didn't really work for me cox the results would get stored in a BrightData snapshot, which made it pretty tricky to orchestrate the whole process properly.

So I had this idea to create a separate workflow instead and call that as a tool. Turns out this approach worked really well for me, What I ended up with was this reusable web searching workflow that I can basically plug in anywhere I need it I pretty much liked this neat solution.

Now all I needed is a place to store the records, I wanted to keep it simple and went with Airtable. Finally I created a Next.js app to make it accessible and view the results.

You can find the code along with n8n workflow jsons in the below GitHub repo.
GitHub

If you have read it till here, a like would be great, thank you.

...

InboxMemory AI - RAG your Emails - Postmark

Mohamed Ashiq Sultan — Wed, 28 May 2025 18:26:18 +0000

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built

I have build a tool "InboxMemory AI". In short its think of it as ChatGPT for your emails. You can send emails to make it into searchable knowledge base and ask questions via email or from the app in natural language. Basically RAG from emails

Demo

Video Walthrough

screenshots

QA via Email

QA via App

Getting Started

Just send "Hi [your name]" to the email ai@kbhelper.com. The AI picks up your name, creates your account, and you're ready to go ⚡

Behind the Scenes

When you forward an email, we break it into chunks and store it in our vector database. If you send a question, our AI searches through everything you've saved and gives you an actual answer. You can also hop into the web app to browse your saved emails or ask questions with a proper interface.

Code Repository

GitHub Link

ashiqsultan / inbox_memory_ai

Inbox Memory AI build for Postmark hackathon | Using AI via email

InboxMemory AI

📁 For detailed setup and development instructions, please check the respective READMEs inside the backend/ and frontend/ folders.

Postmark Hackathon Project

This project was built for the Postmark Challenge: Inbox Innovators hackathon.

🔗 Blog Post: Read more about this project

What is InboxMemory AI?

InboxMemory AI is like ChatGPT for your emails. It's an intelligent email assistant that transforms your inbox into a searchable knowledge base using RAG (Retrieval Augmented Generation) technology.

Key Features

📧 Email-to-Knowledge: Forward emails to create a searchable knowledge base
🤖 Natural Language Q&A: Ask questions about your emails in plain English
✉️ Email Interface: Query via email or through the web app
🔍 Smart Search: AI-powered semantic search through your email content
⚡ Quick Setup: Just send "Hi [your name]" to ai@kbhelper.com to get started

How It Works

Store: Forward emails to build your knowledge…

View on GitHub

How I Built It

Techstack

FastAPI for the backend
PostgreSQL for email storage
LanceDB as our vector database
Redis for OTPs and rate limiting
React for the frontend
Gemini handling the AI magic and embeddings
Docker for deploymnet

Along with the RAG system I ahve also build Auth system with email OTP because why not? since Postmark an email service anyways why not lets try that out. Gemini provides generous free tire which allowed me to use them. Wrote smaller AI Agent like files with specific system instructions for each task.

Some challenges I faced

I initially used Ngrok when testing in local but suprised to find no ngrok like services was mentioned in their docs. It will be a pain to initially debug without them

Architecture

Please try it

Please try it out as of writing this I have 50 more free emails from Postmark gota use them all. If this sounds useful to you, an upvote would be great. Thanks.

Debounce and Throttle in JS. Visualize and Understand

Mohamed Ashiq Sultan — Fri, 25 Oct 2024 12:25:36 +0000

This is not just another article trying to explain how Debounce or Throttling works at code level rather this is an illustration to remember and visualise the concept so that you can practically apply them at your work.

Personally, I often find myself forgetting the concepts of debouncing and throttling, so when someone asks me to explain them—or if a question pops up in an interview—I just blink 😑. To avoid that, I made a simple page to help refresh my memory. If you don't want to feel like an imposter follow along 😉.

In the below codepen I have set the delay to 2 seconds for both debounce and throttle. Try clicking on random food items and give a pause.

Index

The Restaurant Analogy
Explanation
- Why Debounce or Throttle anyway ?
- JS Event Handler
- Whats wrong ?
- Debounce
- Throttle

Link to page

ashiqsultan.github.io

GitHub Link

Restaurant Analogy

Imagine you're at a restaurant and want to order some food, so you pick the menu from the table and you just start to read all the items. (In the webpage I shared, clicking different food items will be equivalent to reading the menu item)

The analogy here

📖 Reading food item = 👇 Button Click
👨‍🍳 Waiter going to kitchen = 🌐 API call

And imagine there are three different types of waiters at the restaurant who could serve you:

💁‍♂️ Normal Waiter
- Takes note every single time you mention an item
- Runs to the kitchen for each individual item
- Like JS handling every single event immediately
🤵 Debounced Waiter
- When you start reading the menu he will be waiting for you to pause for atleast 2 seconds before taking the order.
- Like waiting for a user to finish typing before making an API call
👨‍🍳 Throttled Waiter
- Takes orders only once every 2 seconds
- If you mention multiple items within those 2 seconds, they'll all go in the same order
- Like limiting API calls to once every X seconds, regardless of user activity

Note: The main difference is:

Debouncing: Waits for activity (button click) to STOP for a specified time to trigger

Throttling: Triggers at REGULAR intervals, regardless of when an activity is stopped

Also 2 sec is just something I used as example it can be any timeperiod

Explanation

Why Debounce or Throttle anyway?

Before understanding debounce or throttle we need to know why are they even used in the first place. To know that lets understand behaviour of JS event handlers

Event Handlers in JS

In JS, event handlers are just functions that execute when specific events (like clicks, typing, or scrolling) occur. By default, these handlers will fire every single time the event happens - every keystroke, every click, or scroll movement.

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

Whats wrong?

Say for example you have a button that would make an API call

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

The above function will execute the makeApiCall() on each button click (i.e) if you manage to press it 10 times within 1 sec, guess what you have made 10 api calls in 1 sec. This is the default behaviour.

But firing an API call every single time for an event can be inefficient and most times this is not what you are looking for. This is where throttling and debouncing come in to picture.

If you want to take away a definition from this article may be this is the one. Throttling and debouncing are two most common ways to control an Event Listener’s response rate.

Debouncing

I’m not going to explain the code for debouncing as this can just be imported from lodash, rather we will see where you can actually use it.

Use Debouncing when you want to make the api call only if the user has stopped typing for a certain amount of time or stopped clicking for a certain amount of time.

In our example if the user keeps clicking on the button even for 5 min straight, the api call will be made only once.

So two things are happening here:

User needs to stop clicking.
Stop clicking means atleast for 2 seconds there should be no clicking on the button.

Throttle

Throttle is like an interval. Use this when you dont want to wait till the user stops rather make an api call on every interval say 2 seconds

Example if the user is typing for 1 minute straight without pausing then for every 2 sec you would be calling the API.

Conclusion

As mentioned in the article this is not to explain how the functions work rather to visualise and understand why its used. I would surely recommend you to understand at code level how they work but personally would still use the debounce and throttle provided by lodash library and not to reinvent the wheel.

If you like the article leave a thumbs up, it would really motivate me to write more. Thanks 👍.

HealthLingo | AI Agents Enabling Multilingual Doctor consultation via WhatsApp

Mohamed Ashiq Sultan — Fri, 21 Jun 2024 17:57:07 +0000

This is a submission for Twilio Challenge v24.06.12

What I Built

People can directly contact doctors from WhatsApp in their native language.
Based on patients query a suitable doctor from the list of doctor will be selected by AI.
The Doctor replies in English while the patient's will receive the reply in their preferred language.

Demo

Video explanation of the project and the codebase

Working of the App

The app consists of two layers

Business layer
AI layer

The business layer is responsible for handling the incoming msg and Database interactions while the AI layer consists of multiple small agents which interacts with Open AI API. I have used MongoDB as the database to store information like patient details, chat summary and doctor information.

Twilio and AI

AI

Multiple Agents for handling specific tasks using OpenAI's GPT-4o model
Translate Agent
Chat Summary Agent
Two Agents for Details Collection
- Basic Details Agent
- Medical Details Agent

Twilio

Twilio Whatsapp service.
Initially the app was deployed as Twilio Functions but was as I added more conditions I was hitting timeouts sometimes. So yeah, I just deployed in AWS using docker. And yes only one Twilio service.

Additional Prize Categories

Impactful Innovators: People who are visiting a country for first time or immigrants who still find it difficult to express especially their medical condition in the foreign language can use this kind of app to communicate with doctors and express their symptoms and conditions.
Also the AI will pick the right doctor based on their condition.
The privacy of both doctor and patient is maintained as no phone numbers are shared.

The vision of such a app in real life would be

Social service mined Doctors signing up for such a service and give some details about their specialty

Patients who are looking for answers for some rare or specific condition could potentially find the right doctor and explain their problem in the language they are comfortable with

If you've made it this far, thanks for reading the post! Leaving a like would mean a lot, as it supports my work and encourages me to keep creating more content. Have a great day !

GitHub

ashiqsultan / twilio-whatsapp-ai-bot

A project developed for dev.to hackathon using Twilio whatsapp service using ChatGPT for AI services

Twilio Whatsapp Bot

This project is created as part of dev.to Twilio Challenge 2024. Link to Challenge Page

The project uses Twilio Whatsapp service along with OpenAI ChatGPT model for AI.

The concept of the app is to facilitate communication between patients and doctors.

Change log

Im need to change the code base from twilio functions to normal express server. This is due to the 10 sec runtime in twilio functions. There will be lot of file changes as the module imports are different for twilio reusable functions To refer the code you can checkout this commit: c0797c0

View on GitHub

Clever Caching | Stock Analysis app using Netlify's fine-grained cache control

Mohamed Ashiq Sultan — Sun, 12 May 2024 12:53:47 +0000

This is a submission for the Netlify Dynamic Site Challenge: Clever Caching

What I Built

I have build a Stock Analysis tool which shows price history, financial data and related News articles for any NYSE listed stock.
Github Link

Cache Mechanisms used in the Project

Netlify-Vary headers
Netlify-CDN-Cache-Control headers
SWR (Stale while revalidate)

On-demand Cache Invalidation mechanism using

purgeCache() helper function
Netlify-Cache-Tag headers to purge cache by tags

Demo

A 10 min video explaining the app and code base.

Link to app: https://market-lens-app.netlify.app/

Cache Status Screen shots

Initial load of a stock page will have Cache-Status as "Netlify Edge"; fwd=miss
Further load of the same page will have Cache-Status as "Netlify Edge"; hit

Platform Primitives

Tell us how you leveraged Netlify Cache Control.

To begin with I firstly configured cache as manual in the netlify.toml file for the paths I want to cache.

[[edge_functions]]
  function='news'
  path= '/api/news/:symbol'
  cache='manual'

[[edge_functions]]
  function='financial'
  path= '/api/financial'
  cache='manual'

In the above file you can see something called symbol, this stands for stock ticker symbol (Example AAPL is the symbol for Apple INC ). This symbol plays a key role for the caching mechanism in this project. Let see how.

For the sake of learning I have used two approaches for querying data
1: Ticker symbol in Path Params.

api/news/AAPL -> will fetch all news article related to Apple stock

2: Ticker symbol in Query Params.

api/financial?symbol=AAPL -> will fetch financial data for Apple stock

1. Caching Response when dynamic value in Path params

For fetching the news data the ticker symbol is passed in the URL's path param. The response header looks like below.

const headers = {
  'Content-Type': 'application/json',
  'Cache-Control': 'public, max-age=0, must-revalidate',
  'Netlify-CDN-Cache-Control':'public, max-age=120, stale-while-revalidate=300',
  'Cache-Tag': `${symbol}, ${symbol}-news`,
};

I have used Netlify-CDN-Cache-Control with stale-while-revalidate
The stale-while-revalidate in the Netlify cache header allows cached content to be served even after it expires (max-age), while simultaneously refreshing the cache in the background. In this case, it allows serving stale content for up to 300 seconds while a new version is fetched and revalidated.

When the dynamic variable (the stock symbol) is used as a path param you dont have to do much as the symbol is part of the url path.

/api/news/AAPL -> Will have Apple news article Cached
/api/news/MSFT -> -> Will have Microsoft news Article Cached

The challenge is when symbol is passed in query params. lets see how its cached.

2. Caching with Netlify-Vary | Dynamic value in Query params

When the symbol is passed in query params then you have to add a custom header Netlify-Vary in-order to cache the response. The response header looks like below.

export default async (req: Request, context: Context) => {
  const parsedUrl = new URL(req.url);
  const queryParams = Object.fromEntries(parsedUrl.searchParams.entries());
  const symbol = queryParams.symbol
...
const headers = {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Cache-Control': 'public, max-age=0, must-revalidate',
      'Netlify-CDN-Cache-Control':
        'public, max-age=604800 , stale-while-revalidate=2592000',
      'Netlify-Cache-Tag': `${symbol}, ${symbol}-financial`,
      'Netlify-Vary': 'query=symbol',
    };

This header object is similar to the one we saw above except that we have added an additional header field Netlify-Vary with value query=symbol. This makes sure to cache response taking the symbol query param into consideration.

/api/financial?symbol=MSFT -> Will cache Microsoft financial data
/api/financial?symbol=TSLA-> Will cache Tesla's financial data

On-demand Cache Purging

I have used Netlify's purgeCache() helper to implement on-demand cache invalidation. I have made this function accessible under the path /manual-purge
Cache invalidation is one of the hardest things to do in Software development but I'm pretty impressed how Netlify has made it easy to implement with the helper function and cache tags.

Cache Tags

You may have noticed a field in my response headers labeled Netlify-Cache-Tag. This field is crucial for managing cache invalidation behavior effectively.

// news.ts
const header ={
....
'Netlify-Cache-Tag': `${symbol}, ${symbol}-news`,
...
}
// financial.ts
const header ={
....
'Netlify-Cache-Tag': `${symbol}, ${symbol}-financial`,
...
}

The use of ticker symbol as tag names allows us to target specific company data for purging without affecting other company data.

The below tables might help you understand how responses are tagged

URL	Cache tags
/api/news/MSFT	MSFT, MSFT-news
/api/financial?symbol=MSFT	MSFT, MSFT-financial
/api/news/TSLA	TSLA, TSLA-news

This granular approach ensures that updates or modifications related to particular stocks or financial information are accurately purged without affecting other data.

Example

/manual-purge?tag=MSFT Will purge all cached response related to Microsoft i.e News, Financial and Price data
/manual-purge?tag=MSFT-news This will purge only the news data related to Microsoft while other cached data related to Microsoft or any other company is not disturbed. What's surprising is that the code to purge by tags is relatively simple.

  const url = new URL(req.url);
  const cacheTag = url.searchParams.get('tag');
  await purgeCache({
    tags: [cacheTag],
  });

Below image shows how cached response related to Apple stock are purged

Below image shows how only cached response related to Microsoft news are purged

Personal Hurdles

I have been searching API providers for stock market data and
settled with Polygon io as the free plan allows 5 calls per minute.

To be honest, this limitation guided my cache strategy to prioritize minimizing external API calls. By serving cached data for previously accessed stocks, the app successfully avoids redundant calls to the same company.

Conslusion

If you have reached this part of the article it would be great if you to leave a like ❤️ for the post as it would motivate me to experiment more stuffs like this.
As someone implementing edge functions and caching for the first time I found Netlify's documentation comprehensive, sparing me the need to rely heavily on YouTube tutorials. The cache-status in response headers simplified debugging not to mention the real time logs in Netlify console. The ability to group and purge cache using Netlify-cache-tags struck me as a particularly cool feature. Looking forward to use them in real life application.

Thanks to Dev.to team and Netlify for the Hackathon. I learned something new.

Real-time Location tracking App build with MongoDB Change Streams and Socket.io

Mohamed Ashiq Sultan — Tue, 06 Dec 2022 12:08:05 +0000

What I built

A Real-time Delivery Service application. The concept is similar to Uber but for carrying packages locally. I have used MongoDB Change Streams to update location and Shipment status notifications in real-time. For this I have to build two UIs one for users and other to simulate delivery associates.

Left Window: User App
Right Window: Driver Simulator

Category Submission:

Real-time Change Stream

Video Explanation

App Link

How to Simulate the demo

Note: Browser's Geolocation API is 🚫 not used to avoid storing any user location information (GDPR).
To make things easy I have made Chennai, a city in India as the base location. Please simulate the app in the location which gets loaded
🚫 Signup is disabled. Please use the credentials provided below in the post
The Backend is hosted on Render.com free tier so there might be some cold start issues when trying to login

Open the Driver Simulator
Enter this associate id to continue 637f9183e03774d5c46ddffc
Open the User app
Use the below credentials to login

Email: carl@example.com
Password: s24x546olk45edxf

In the User app click on the "New delivery" button
Confirm pickup location
Confirm drop location
You will see a notification on the driver simulator
Accept the new delivery request
In the simulator move the truck icon across the marker (GIF provided below)
You will see the truck movement on the user map in real-time
In the simulator Update the delivery status
You will see the status information getting updated in the user app real time

Screenshots

Architecture Diagram

Live location and Status updates

Driver Simulator

Description

There are three repos to this project.

The Backend
The Backend is connected to MongoDB Atlas and does CRUD operations on API calls. The Backend service also uses Socket.io to handle socket connections. MongoDB Change Streams events are broadcasted via Socket.io. There are three main Change Stream subscriptions in this application
- Delivery Agent's location update change stream to track package
- Shipment Status updates to update status in User UI
- New Shipment Created notification broadcasted to Agents to Accept or Reject a shipment.
User UI
Both frontends are build React and uses Leaflet for Maps. The User UI is used to do CRUD events like Signup, Login, Create new deliveries and to show real-time events.
- Real-time information updates on Delivery Status.
- Real-time location of the the package being delivered can be seen on the Map
Delivery Associate Simulator
This is used to simulate a delivery agent. This app receives real-time notification when any new delivery gets initiated. Agents can Accept or Reject deliveries and Update delivery status.
The important functionality the simulator provides is the ability to simulate the GPS location update event of an agent. The current location of an Agent is denoted by a Truck Marker on the map. Dragging the marker across the Map emits an event to update the Agent's current location in the DB.

Link to Source Code

Permissive License

MIT License

Background

What made me decide to build this particular app?

I wanted to try MongoDB's Change Stream functionality, so I was thinking about building a real-time application. And since MongoDB supports GeoJSON out of the box I wanted to challenge myself and decided to build a real-time application which uses location data.

What inspired me?

Uber and Food delivery Apps. There's a company in India named Dunzo who do similar delivery service.

How I built it

I have used MongoDB Atlas free tier for this application.
Something new I learned building this app is MongoDB Change Stream.
I have used Socket.io to create Socket Connection rooms and broadcast events. Socket room name is just the Shipment id and user subscribes to the respective room i.e Shipment id he has created. When there's a MongoDB Change Stream event on Shipment Collection I'm publishing the updated document to the room using the shipmentId which got updated.

Shipment.watch([], watchOptions).on('change', (data: any) => {
    const fullDocument = data.fullDocument;
    if (data.operationType === 'update') {
      io.to(String(fullDocument._id)).emit(
        socketEvents.SHIPMENT_UPDATED,
        fullDocument
      );
    }
  });

I have used Render to deploy the backend and Netlify to deploy the frontend applications

Additional Resources/Info

Real-time Poll app using Redis, WebSocket, Node.js and React

Mohamed Ashiq Sultan — Sat, 27 Aug 2022 18:53:00 +0000

Overview of My Submission

Architecture diagram

For the hackathon I have build a full stack Poll application which uses various Redis modules to implement microservice architecture. The application lets users to create polls and share it with others. Once users cast their vote they can view the results in real-time i.e the poll result graph in Frontend would get updated real-time for all users as votes are being casted.

Redis Modules used in the app

RedisJSON
Hash
List as queue
pub/sub

Note: The detailed documentation can be found in the Readme file of the GitHub repository embedded. This post contains only the minimal info required for hackathon submission.

I have used Node.js for the backend and React for the frontend. I have used Socket.io for implementing Websocket and also used socket.io Redis adapter for multi node deployments thus making this a complete horizontally scalable solution.

Submission Category:

Microservice Mavens (I believe my submission can also be considered under MEAN/MERN Mavericks 😄)

Video Explainer of My Project

Language Used

TypeScript / Node.js

Link to Code

The project consists of three repositories

ashiqsultan / pollboard-backend

Poll board is a simple poll app build using Redis. This repo is the API service for the application

Poll Board Real-time Poll app

The application lets users to create polls and share it with others. Once users cast their vote they can view the results in real-time i.e the poll result graph in Frontend would get updated real-time for all users as votes are being casted.

Architecture Diagram

Homepage

Vote page

Create new Poll page

TODO Overview video (Optional)

Here's a short video that explains the project and how it uses Redis:

How it works

The application consists of three repositories

Poll API Service

The API server is responsible for all CRUD operations on Poll entity.

Socket Service

The socket service uses Socket.IO . All users are connect to a socket room. The room name is the poll id they are answering for.

Frontend

As you guessed it is the frontend application build with React as a SPA. It…

View on GitHub

Additional Resources / Info

I have always wanted to work with Redis for a long time and thanks to this Hackathon as it served as the best time to learn and build a small project using Redis. I spent all the weekends of this month to plan the application. I realized that Redis stack provides a lot of modules so I need pick the right one for my needs. Thanks to the detailed docs and resources by the Redis team. Also a special thanks for the RedisInsight team its such a useful tool for Redis beginners I found it similar to the MongoDB Compass.

Homepage

Vote page

Create new Poll page

Check out Redis OM, client libraries for working with Redis as a multi-model database.
Use RedisInsight to visualize your data in Redis.
Sign up for a free Redis database.

To those who use arrow keys to find old commands.

Mohamed Ashiq Sultan — Sun, 07 Mar 2021 14:40:36 +0000

TL;DR

history
history | grep command-name
Press ctrl + r -> type the command.

I hope everyone is aware that hitting the arrow keys helps us navigate to recently executed commands but what if you forgot a command you used months before and want to use it now or view all the commands you used relating to git or docker. We will see three commands I often use to achieve this.

history

Using this will list all the commands you have executed.

Execute a command from History

To execute any one of the commands from the list type
! <history-number>

history | grep

This is just the previous one but we are using the grep to filter the list.
Example, if you want to see only the commands related to docker, you would type
history | grep docker

ctrl + r ->

Press ctrl + r and start typing the command you knew you have executed months before. The terminal will autocomplete the command.
Example if you haven't used ssh for sometime and feel lazy about looking the history, you could press ctrl + R and type ssh The terminal will autocomplete with your recent ssh command.
Example
I have used ctrl + r then typed heroku. The terminal autocompleted with my most recent heroku command

Do you know GeoJSON ?

Mohamed Ashiq Sultan — Sun, 30 Aug 2020 19:45:10 +0000

Introduction

For those who don't know, GeoJSON is the standard data format used to store location data and geographical features.

Terminologies
Different Geometry types
Resources

GeoJSON is just a JSON object. What makes them a different datatype from plain JSON is its specifications.

Some databases like Mongo DB has official support for GeoJSON data type. Just like how MongoDB identifies String and Integer types, it identifies and differentiates GeoJSON from normal JSON. It comes with support for indexing and querying GeoJSONs

In this post, I will cover some of basic concepts of the GeoJSON data type.

A typical GeoJSON looks like this.
Don't get overwhelmed, we have discussed everything below.

{
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type": "Point",
        "coordinates": [-40.078125,70.72897946208789]
    }
}

Terminologies

Coordinates

A single point in the map is called a coordinate
When we are pointing at a location on the map, we are pointing to some longitude and latitude units. We store these sets of units in an array called coordinates.
A coordinates array contains two elements longitude and latitude
NOTE: the order is important
coordinates : [ longitude , latitude ]

Geometry

Think of geometry as structures. A Geometry defines in what structure the coordinates are stored.
There are certain predefined case-sensitive types of geometry, namely 'Point', 'Line', 'Polygon', and more. We will see them one by one.

A typical geometry looks like below

"geometry": {
    "type": "Point",
    "coordinates": [longitude,latitude]
}

"type"

Every geometry must have a property called "type" whose value must only be one of the GeoJSON types mentioned in the GeoJSON RFC

There are some geometry types that are used to store other geometry types. They are "Feature" and "FeatureCollection" we have discussed about them below.

Geometry Types

Point

A point is a single point or marker on the map. Its geometry contains a single coordinate. This may be used to store individual place like a store.

"geometry": {
        "type": "Point",
        "coordinates": [
            78.4918212890625,
            22.304343762932216
        ]
    }

MultiPoint

As you have guessed by the name, a MultiPoint geometry is used to store multiple points of coordinates in a single geometry. Each element in the coordinates array is itself a coordinate. This may be used to store list of favorite places.

{
    "type": "MultiPoint",
    "coordinates": [
        [80.26951432228088,13.09223800602329],
        [80.27061939239502,13.091631907724683],
        [80.2714991569519,13.09260375427521],
        [80.27050137519836,13.093241199930675]
    ]
}

LineString

They are a line of points. The JSON structure is the same as that of MultiPoint but since this is of type LinePoint, individual coordinates are treated as a connected line rather than points lying around distinctly.

"geometry": {
    "type": "LineString",
    "coordinates": [
        [80.2122116088867,13.113586344333864],
        [80.25959014892577,13.072121016365408],
        [80.29048919677733,13.114923819297273],
        [80.3207015991211,13.075799674224164],
        [80.33477783203125,13.112248862097216]
    ]
}

MultiLineString

As the name states it is used to store more than one LineString in a single geometry. Each element of the Coordinates array is like a single LineString Coordinates array.

"geometry":{"type": "MultiLineString",
"coordinates" : [
[
[longitude,latitude],
[longitude,latitude],
[longitude,latitude]  
 ],
[
[longitude,latitude],
[longitude,latitude],
[longitude,latitude]  
 ],
[
[longitude,latitude],
[longitude,latitude],
[longitude,latitude]  
 ],
]}

Polygon

The RFC specification defines polygons are linear rings, in case you are wondering what's a linear ring, so was I.
Let me put it this way, polygons are any shape which is closed, yes literally any shape. In the coven image of this post each letter is a polygon.

If you understood LineStrings, the RFC specification also defines polygons are closed LineString i.e a polygon is any shape that is closed. A closed LineString means the first and the last coordinate will be the same.

This may be used to store borders. May it be country's border, city, village or an area's border.

"geometry": {
    "type": "Polygon",
    "coordinates": [
        [
            [78.44238281249999,22.62415215809042],
            [77.8436279296875,22.151795575397756],
            [78.486328125,21.764601405743978],
            [79.0521240234375,22.233175265402785],
            [78.44238281249999,22.62415215809042]
        ]
    ]
}

MultiPolygon

By this time you should have guessed, same like MultiPoint and MultiLine, MultiPolygon is a collection of Polygons. You can use this to store border information of different cities in a state.

The cover image of this post can be an example of MultiPolygon

Feature and FeatureCollection

Here comes the juice. Now you learned about how to store geographical data in various structures like Points, Lines, and Polygons. Now how do you store information for those locations?

The proper way to store geographical information is by using Feature and FeatureCollection.

GeoJSON Feature and FeatureCollections are geometry themselves. They are a kind of geometry that is used to store other geometry and properties (information) about that geometry.

A typical Feature looks like this

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-10.0,-10.0]
    },
    "properties": {
        "temperature": "4C",
        "country": "IN",
        "somepropertyName": "Some description"
    }
}

In the above GeoJSON, the geometry can be any of the types we discussed earlier like Point, Line, or Polygon and the properties contain data and information about that geometry.

FeatureCollection

As the name suggests a FeatureCollection GeoJSON contains a collection of Features.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [78.31054687499999,22.39071391683855]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [78.486328125,11.43695521614319]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [77.9150390625,27.176469131898898]
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "Point",
        "coordinates": [75.673828125,19.766703551716976]
      }
    }
  ]
}

Resources

RFC secification for GeoJSON
https://tools.ietf.org/html/rfc7946
Interactive hands on with GeoJSON
https://geojson.io/
Best JS Map Library
Leaflet.js

Learn Promises to write Asynchronous JavaScript code

Mohamed Ashiq Sultan — Tue, 18 Feb 2020 09:47:37 +0000

What you will learn

Creating Promises
Promise Executor function
resolve and reject in Promise
Consuming Promises
Chaining Promises
Catching errors in Promise

Disclaimer : I have used only arrow functions.

Why write Async code anyway?

JavaScript is a single-threaded programming language which means only a single statement is executed at a time. This means until a statement is completely executed it will not go to the next line of code.
This is a problem if you have a code snippet that takes a long time to complete such as an API call or reading a file from the disk.

To solve this we write asynchronous JavaScript code.

Creating New Promises

Promises are easy to create. Just create a function and return a new Promises

const longOperation = () => {
         return new Promise ()
    }

A promise takes an executor function as a parameter which again takes two parameters resolve and reject the code is easier to understand than my words.

const longOperation = () => {
    return new Promise((resolve, reject) => {
        // executor function
        // your business logic here
    });
};

Executor function

This is the place where you would write the synchronous code (or any code) which you want to run in the background. It has two arguments resolve and reject.

`resolve` and `reject`

Think of these as return statements in a function. The Executor function should execute either resolve or reject based on your business logic. When the code inside the Executor function runs like expected without any errors, then execute the resolve function with the value you want to return. If anything goes wrong like 'file not found' or 'network error' return the error message using the reject function. I hope the following code will make it clear.

const longOperation = (a, b) => {
    return new Promise((resolve, reject) => {
        // executor function
        try {
            const result = a * b;
            resolve(result);
        } catch (error) {
            reject(`Error resolving promise ${error}`);
        }
    });
};

Same example using if..else

   const longOperation = (a, b) => {
        return new Promise((resolve, reject) => {
            // executor function
            const result = a * b;
            if(true){
                resolve(result);
            }
            else{
                reject(`Error resolving promise ${error}`);
            }
        });
    };

Again

resolve(returnValue) : Use this to return the result from successful execution of the business logic.
reject(errorValue) : Use this when your logic fails and you want to throw errors. This will trigger the catch block when the function is called inside a try...catch block or the .catch() when you consume your promise.

Consuming Promise

A promise can be consumed in two ways

.then().catch() function
async / await function

Method 1 `.then().catch()`

This is the simplest way to consume a promise.

longOperation(5,6).then().catch()

When the Promise longOperation runs without any errors the .then() is executed. If there are any errors, the .catch() is executed

longOperation(5, 5)
    .then(result => console.log(result))
    .catch(err => console.log(err));

console.log('This will be logged first'); // to demonstrate that promise is non-blocking

Output
This will be logged first
25

Explanation

The .then() is executed if longOperation executes without any error, in other words, if the Promise is resolved
The .catch() is executed if longOperation rejects the Promise
The result argument will contain the value passed to the resolve
The err argument will contain the value passed to the reject

Note : The code console.log('This will be logged first'); is only used to demonstrate that Promises are non-blocking. Though it is callafter the longOperation function call, it's being logged first in the console, this is because the longOperation returns a Promise which runs in the background which makes JS available to execute the remaining code.

Method 2 `async / await`

Using async / await is like sugar-coating what we saw earlier. Instead of using .then() we are using a syntax which looks like synchronous code.

const main = async () => {
};

Just declare a function like you will usually do.
Add async keyword before the parenthesis of the arrow function. This will allow the function to use await keyword inside it.

const main = async () => {
        try {
            const result = await longOperation(10, 2);
            console.log(result);
        } catch (error) {
            console.log(error)
        }
    };
    main()

    console.log('This will be logged first'); // to demonstrate that promise is non-blocking

    Output
    This will be logged first
    20

Explanation

The variable result will contain the resolved value from the promise longOperation (i.e) it will contain the value passed inside the resolve().

When something goes wrong with longOperation then the catch block is executed. The error variable contains the value passed inside the reject() of the Promise.

Note: If you are using async...await then you should always consume promises inside a try...catch block.

Chaining Promises

Some times you want to chain Promises (i.e) you want to execute another Promise after completion of a Promise.

Chaining Promise using `.then()`

longOperation(5, 5)
    .then(result => longOperation(10, result)) // multiply result by 10
    .then(result => longOperation(100, result)) // multiply result by 100
    .then(result => console.log(result)) // console log final result
    .catch(err => console.log(err));

console.log('This will be logged first'); // to demonstrate that promise is non-blocking

OUTPUT
This will be logged first
25000

Note: Since I'm lazy to write imaginative Promise functions, I'm using the same longOperation to mimic a new promise. In reality, you will be calling different promises after the successful execution of one.

If any Promise in the chain throws an error then the .catch() is executed.

Chaining Promise using `async / await`

const main = async () => {
    try {
        const result1 = await longOperation(10, 5);
        const result2 = await longOperation(100, result1); // multiply result1 with 100
        const result3 = await longOperation(1000, result2); // multiply result2 with 1000
        console.log(result3); // only executed after all the Promises are resolved
    } catch (error) {
        console.log(error);
    }
};

main();

console.log('This will be logged first'); // to demonstrate that promise is non-blocking

This will be logged first
5000000

Using async / await will make your code look tidy and readable unlike .then() in which you would have to write a lot of callbacks.

The catch block will be executed when any of the Promise throws an error.

Catching Errors in Promise

As we saw earlier, when any of the Promise executes the reject() function then the catch block is executed. To demonstrate this we will create a new Promise.

const checkAndMultiply = (a, b) => {
    return new Promise((resolve, reject) => {
        // executor function
        if (isNaN(a) || isNaN(b)) {
            const error = 'Error: inputs are not numbers';
            reject(error);
        }
        const result = a * b;
        resolve(result);
    });
};

checkAndMultiply is a Promise which will only resolve if both the inputs passed to it are numbers else it will throw an error.

const main = async () => {
    try {
        const result1 = await longOperation(10, 5);
        const result2 = await checkAndMultiply("text", result1);
        const result3 = await checkAndMultiply(100, result2);
        console.log(result3);
    } catch (error) {
        console.log(error);
    }
};

main();
console.log('This will be logged first');


Output
This will be logged first
Error: inputs are not numbers

The first Promise longOperation is resolved successfully
The second Promise checkAndMultiply take string as one of its argument. So the Promise is rejected and the catch block is called without executing the next Promise in the code.

I hope this article might have helped you to understand Promises in JavaScript better. You can read more about Promise from MDN Web Docs.