DEV Community: Awan Shrestha

How to Supercharge Your React Native App Performance with Amazon CloudFront & S3 Transfer Acceleration

Awan Shrestha — Mon, 17 Mar 2025 07:58:49 +0000

Introduction

Today, nobody likes a slow app. Users expect fast and seamless experiences from their applications. React Native—a popular framework for cross-platform app development—is known for its efficiency. However, performance bottlenecks can still arise, especially when dealing with large media files, slow network responses, and high latency.

If your React Native app loads images and videos slowly or experiences lag in content delivery, you need a robust optimization strategy. This is where Amazon CloudFront and S3 Transfer Acceleration come into play. These AWS services are designed to speed up content delivery and file transfers, ensuring your app performs smoothly—even for users across the globe.

Amazon CloudFront: A global Content Delivery Network (CDN) that caches and delivers your assets (images, videos, APIs) from edge locations closer to users, reducing latency and load times.
S3 Transfer Acceleration: A feature of Amazon S3 that speeds up file uploads and downloads by routing traffic through AWS’s high-performance global network.

In this guide, we’ll explain the biggest performance bottlenecks in React Native apps, demonstrate how to set up CloudFront for faster content delivery, detail how to enable S3 Transfer Acceleration for quick uploads, and share best practices to ensure your app runs at top speed.

By the end of this tutorial, you’ll have a high-performance React Native app that feels smooth, responsive, and lightning-fast—no more frustrated users, no more complaints. So, let's get started!

Understanding Performance Challenges in React Native

Before discussing solutions, let’s first understand why React Native apps can struggle with performance, especially when handling media files, API calls, and global users. Key challenges include:

Slow Content Delivery for Global Users

Serving images, videos, or other static files from a single S3 bucket or origin server can lead to increased latency for users located far from the server. For example, a user in Europe accessing content from an S3 bucket in the US may face delays due to network distance.
Large File Uploads Slowing Down the App

Uploading files (like profile pictures, documents, or videos) to S3 can be slow, especially on weak networks. The further the user is from the S3 bucket’s region, the worse the experience.
High Latency in API Responses

Fetching data from an API hosted in one AWS region can take longer for users in different regions. Without caching, every request has to travel all the way to the origin server, increasing response time.
Inefficient Caching Strategy

Without proper caching, your app repeatedly fetches the same resources, increasing network load and slowing down performance. Effective caching ensures that commonly accessed content is quickly available.
Poorly Optimized Images & Videos

Large, uncompressed media files directly affect app performance. If users must download full-resolution images instead of optimized versions, load times can significantly increase.

How CloudFront & S3 Transfer Acceleration Solve These Issues

CloudFront acts as a CDN, caching and delivering content from AWS edge locations closer to users. This reduces the time it takes to load assets such as images, JavaScript files, and videos.
S3 Transfer Acceleration optimizes the file upload process by speeding up transfers using AWS’s global infrastructure. Instead of taking a slow, direct route, data is intelligently routed through the fastest AWS pathways.

Setting Up Amazon CloudFront for Faster Content Delivery

Step 1: Create a CloudFront Distribution

Configure CloudFront to Serve Files from Amazon S3
- Sign in to your AWS account and open the CloudFront Console.

Click "Create Distribution" and select "Web" as the delivery method.

Configure the Origin
- In the Origin Domain Name field, select your S3 bucket (or manually enter the URL if it’s private).

Set Origin Access Control Settings (OAC) to "Yes" for enhanced security.
Choose Redirect HTTP to HTTPS for secure connections.

Set Cache Behavior & Performance Settings
- Viewer Protocol Policy: Select "Redirect HTTP to HTTPS".
- Allowed HTTP Methods: Choose GET, HEAD (or GET, HEAD, OPTIONS for APIs).
- Enable Compression: Set to YES for faster file delivery.
- TTL Settings: Use a low TTL (Time-to-Live) for dynamic content and a longer TTL for static files.
Deploy the CloudFront Distribution
- Click "Create Distribution" and wait a few minutes for deployment.
- Once deployed, copy the CloudFront domain name (e.g., d1234abcd.cloudfront.net).

Step 2: Update S3 Bucket Permissions for CloudFront

If your S3 bucket is private, update its bucket policy to allow CloudFront access. For example:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "Service": "cloudfront.amazonaws.com"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*",
      "Condition": {
        "StringEquals": {
          "AWS:SourceArn": "arn:aws:cloudfront::YOUR_ACCOUNT_ID:distribution/YOUR_DISTRIBUTION_ID"
        }
      }
    }
  ]
}

“This ensures CloudFront can serve content from S3 while keeping it private!”

Step 3: Update Your React Native App to Use CloudFront

Now, instead of fetching files from the S3 bucket URL, we’ll update our React Native app to use the CloudFront URL for optimal performance.

Example: Updating Image URLs

Before (Slow, Direct S3 URL):

<Image source={{ uri: "https://your-bucket.s3.amazonaws.com/image.png" }} />

After (Faster, CloudFront CDN URL):

<Image source={{ uri: "https://d1234abcd.cloudfront.net/image.png" }} />

Now, media files will load much faster, improving app performance globally!

What We Achieved Here

Efficient Static Asset Delivery: CloudFront caches and delivers static assets efficiently.
Optimized Global Access: Users get content from the nearest AWS Edge location.
Reduced Latency: Improved response time and reduced load on the S3 bucket.

Next, we’ll optimize file uploads using S3 Transfer Acceleration to speed up large file uploads for users worldwide.

Accelerating File Uploads with Amazon S3 Transfer Acceleration

While CloudFront helps speed up content delivery, we still need to optimize uploads—especially for users in regions far from the S3 bucket. This is where Amazon S3 Transfer Acceleration (S3 TA) comes in.

S3 TA routes uploads through the closest AWS edge location, reducing latency and significantly improving upload speeds.

Step 1: Enable S3 Transfer Acceleration

To activate Transfer Acceleration, follow these steps:

Go to AWS S3 Console Open Amazon S3 and select your bucket.

Enable Transfer Acceleration
- Click on Properties → Scroll to "Transfer Acceleration".
- Click "Edit" and set it to "Enabled".
- Save changes.
Get the Accelerated Endpoint

Instead of using:

https://your-bucket.s3.amazonaws.com

Save changes.

https://your-bucket.s3-accelerate.amazonaws.com

Now, what happens? The uploads will route through AWS edge locations for better performance!

Step 2: Update React Native App to Use S3 TA

Now, update the file upload logic in your React Native app.

i) Install AWS Amplify & Configure S3

For this, use the following command:

npm install aws-amplify @aws-amplify/storage

ii) Update Amplify Configuration (aws-exports.js)

Modify the endpoint to use S3 Transfer Acceleration:

const awsmobile = {
  aws_user_files_s3_bucket: "your-bucket",
  aws_user_files_s3_bucket_region: "us-east-1",
  aws_user_files_s3_accelerate: true, // Enables acceleration
};

iii) Modify the Upload Function to Use Accelerated Endpoint

Import Storage from aws-amplify and Alert from react-native, then update your upload function as follows:

import { Storage } from "aws-amplify";
import { Alert } from "react-native";

const uploadFile = async (fileUri) => {
  try {
    const response = await fetch(fileUri);
    const blob = await response.blob();

    const result = await Storage.put("uploaded-file.jpg", blob, {
      level: "public",
      contentType: "image/jpeg",
      customPrefix: {
        public: "https://your-bucket.s3-accelerate.amazonaws.com/",
      },
    });

    Alert.alert("Success", "File uploaded successfully!");
  } catch (error) {
    console.error("Upload Error:", error);
    Alert.alert("Upload Failed", error.message);
  }
};

This ensures uploads are automatically routed through AWS edge locations for faster speeds!

Step 3: Benchmark Upload Performance

To verify improvements, you can compare upload speeds before and after enabling Transfer Acceleration using the following AWS CLI command:

aws s3 cp large-file.mp4 s3://your-bucket/ --region us-east-1

Results:

Without Acceleration: 5-10 Mbps
With Acceleration: 30-50 Mbps

Outcome:

Faster uploads, lower latency, and improved user experience!

What We Achieved Here

Enabled Transfer Acceleration for S3 uploads
Updated the React Native app to use accelerated endpoints
Significantly improved file upload speed for global users

Next, we’ll look at best practices for further performance optimization in React Native.

Best Practices for Optimizing React Native Performance with CloudFront & S3

Now that we’ve set up CloudFront for fast content delivery and S3 Transfer Acceleration for optimized uploads, let's explore additional best practices to further enhance performance in your React Native app. Here are these:

1) Implement Effective Caching Strategies

Purpose: Reduce load times by storing frequently accessed data closer to users.
Techniques:
- Set appropriate cache headers in CloudFront to reduce redundant requests for static assets like images and fonts.
- Use client-side caching in React Native with tools like Async Storage or redux-persist to minimize unnecessary API calls.

2) Optimize Image & Video Loading

Purpose: Ensure smooth loading of high-resolution media without slowing down the app.
Techniques:
- Store compressed images and videos in S3 to reduce file sizes and improve transfer speeds.
- Use CloudFront for fast content delivery, reducing latency when fetching media.
- Lazy load images using optimized libraries like react-native-fast-image to improve scrolling performance.

3) Minimize API Calls & Optimize Data Transfer

Purpose: Enhance performance by reducing the number of API requests and optimizing data transfer.
Techniques:
- Batch API requests using GraphQL with AWS AppSync instead of making multiple REST calls.
- Enable Gzip compression for API responses to reduce data transfer size.
- Prefetch frequently used data to load essential information in advance and minimize wait times.

4) Preload and Prefetch Critical Assets

Purpose: Enhance responsiveness by ensuring critical assets are available when needed.
Techniques:
- Preload images, fonts, and API data to prevent delays when users navigate the app.
- Use efficient asset management to avoid unnecessary rendering and performance bottlenecks.

By applying these best practices, you ensure that your React Native app is:

Faster and more responsive.
Efficient in loading images, videos, and API data.
Optimized for lower bandwidth usage and reduced costs.

The Final Verdict

Optimizing React Native performance isn’t just about writing efficient code—it’s about leveraging the right cloud infrastructure to ensure speed, scalability, and a seamless user experience.

By integrating AWS CloudFront and S3 Transfer Acceleration, you can:

Deliver static assets faster with CloudFront’s global edge network.
Reduce latency and load times by caching and optimizing API responses.
Improve user experience with optimized image and video loading.
Minimize data transfer costs while maintaining performance efficiency.

This approach is a game-changer for any React Native app handling large media files or global audiences. Implement these strategies today, and watch your app run faster, smoother, and more efficiently!

How to Build a Real-Time Collaboration App with AWS AppSync & GraphQL

Awan Shrestha — Wed, 26 Feb 2025 16:50:31 +0000

Introduction

Imagine you're using a team collaboration app, but messages take seconds to appear, document edits don’t sync instantly, and notifications arrive late.

Frustrating, right?

Real-time collaboration is no longer a luxury—it’s a necessity. Users expect instant updates, whether they’re chatting, editing shared files, or tracking live data. But building a smooth, scalable real-time system comes with challenges:

Slow updates that require manual refreshes.
Heavy server loads due to frequent polling.
Synchronization conflicts, lead to outdated or lost data.

So, how do you fix this? Here’s the answer AWS AppSync and GraphQL Subscriptions.

AWS AppSync makes real-time data synchronization effortless with a fully managed GraphQL backend.
GraphQL subscriptions provide instant updates, eliminating the need for excessive API calls.

In this guide, we’ll cover the biggest challenges in building real-time collaboration, how AWS AppSync & GraphQL work together to keep data in sync, a step-by-step guide to setting up real-time updates in your app, and best practices to ensure speed, scalability, and security.

By the end, you’ll have a fast, seamless, and real-time collaboration system—no delays, no lost updates, just instant synchronization. So, let’s get started!

Understanding AWS AppSync & GraphQL for Real-Time Collaboration

Real-time collaboration is a game-changer for modern applications, enabling seamless interactions between users, whether in a chat app, live document editing, or shared dashboards. AWS AppSync, powered by GraphQL, provides the perfect solution for instant data synchronization without the complexity of managing servers or manually maintaining WebSocket connections.

Before diving into implementation, let’s break down how AWS AppSync and GraphQL work together to make real-time collaboration effortless.

i) What is AWS AppSync?

AWS AppSync is a fully managed GraphQL service that enables applications to fetch, modify, and sync data in real-time. Unlike traditional REST APIs, which require multiple endpoints, AppSync provides a single GraphQL endpoint for efficient data queries.

It works seamlessly with:

Amazon DynamoDB – For scalable, low-latency data storage.
AWS Lambda – To process complex business logic before updating data.
Amazon Cognito – To manage user authentication and authorization.

With built-in offline support and conflict resolution, AWS AppSync ensures a smooth experience even when users lose internet connectivity.

ii) How GraphQL Enables Real-Time Collaboration

GraphQL is a flexible query language that allows clients to request only the data they need, reducing unnecessary data transfer. It operates using three main operations:

Queries – Retrieve specific data (e.g., get user messages in a chat app).
Mutations – Modify data (e.g., send a new message, update a task status).
Subscriptions – Listen for real-time updates when data changes.

For real-time collaboration, GraphQL subscriptions play a crucial role. When a user modifies data, all connected users get live updates instantly, eliminating the need for manual refreshes.

For example, in a team collaboration app, if User A updates a shared task, User B sees the change in real time without reloading the page.

iii) How AWS AppSync Uses WebSockets for Live Data Sync

Traditional APIs rely on polling, which repeatedly sends requests to check for new data. This approach is inefficient, increases latency, and consumes more resources.

AWS AppSync solves this problem by using WebSockets, a lightweight protocol that maintains an open connection between the client and the server.

WebSockets vs. REST Polling & Webhooks:

Feature	WebSockets (AppSync)	Rest Polling	Webhooks
Data Delivery	Instant updates	Delayed (frequent requests)	Event-driven
Efficiency	Low bandwidth, real-time sync	High server load	Requires external event triggers
Connection	Persistent connection	Repeated requests	On-demand updates

With WebSockets, AWS AppSync sends real-time push updates whenever data changes, making it ideal for:

Live chat applications
Collaborative dashboards
Multi-user document editing

By leveraging GraphQL subscriptions and WebSockets, AWS AppSync enables apps to deliver a seamless real-time experience—without the overhead of constantly checking for updates.

What’s Next?
Now that we understand why AWS AppSync is a game-changer, let’s move on to Setting Up AWS AppSync & GraphQL for Real-Time Collaboration, where we’ll configure everything step by step!

Setting Up AWS AppSync for Real-Time Collaboration

In this section, we'll create an AWS AppSync API, define a GraphQL schema, and enable real-time data synchronization for a live chat application.

i) Creating an AWS AppSync API

The first step is to set up an AWS AppSync API in the AWS Console. Here’s how:

Step 1: Navigate to AWS AppSync

Log in to your AWS Console.
Search for AWS AppSync and open the service.
Click Create API and select Build from Scratch.

Step 2: Configure API Settings

Enter a name for your API (e.g., RealTimeChatAPI).
Choose GraphQL as the API type.
Select an authentication method:
- Amazon Cognito – Best for user authentication and access control.
- API Key – Good for quick testing (expires in 7 days).
- IAM Roles – Recommended for enterprise-grade security.
Click Create to finalize your API setup.

Step 3: Enable GraphQL Subscriptions

To allow real-time updates, we need to enable GraphQL subscriptions:

Go to the Settings tab in AWS AppSync.
Enable Real-Time Updates for subscriptions.

At this point, our AWS AppSync API is ready to handle real-time data! Now, let’s define the GraphQL schema.

ii) Defining the GraphQL Schema for Real-Time Collaboration

A GraphQL schema defines how data is structured and how clients interact with the API. Let’s create a schema for a live chat app that allows users to send and receive messages instantly.

Step 1: Define the Message Type

We start by defining a Message type that includes:

id – Unique identifier for the message.
content – The actual text of the message.
sender – The user who sent the message.
createdAt – Timestamp for when the message was sent.

type Message {
  id: ID!
  content: String!
  sender: String!
  createdAt: AWSDateTime!
}

Step 2: Create a Mutation to Send Messages

Next, we define a mutation that allows users to send new messages:

type Mutation {
  sendMessage(content: String!, sender: String!): Message
}

This mutation takes content and sender as inputs and returns the newly created message.

Step 3: Enable Real-Time Subscriptions

To receive real-time updates when a new message is sent, we use a GraphQL subscription:

type Subscription {
  onNewMessage: Message @aws_subscribe(mutations: ["sendMessage"])
}

Whenever a message is sent via sendMessage, all subscribed users will receive the update instantly.

Step 4: Deploy the Schema

Go to the Schema tab in AWS AppSync.
Click Edit Schema and paste the GraphQL schema.
Click Save and then Deploy.

Now, we have a fully functional real-time messaging system powered by AWS AppSync!

Next, we’ll configure the backend resolvers to store and retrieve messages from DynamoDB.

Integrating AWS DynamoDB as a Data Source

Now, we’ll set up AWS AppSync and define a GraphQL schema for real-time messaging, the next step is to integrate Amazon DynamoDB as the database backend. This will allow us to store, retrieve, and query messages efficiently while ensuring scalability.

i) Setting Up a DynamoDB Table for Storing Messages

DynamoDB is a fully managed NoSQL database that offers high availability, scalability, and low-latency performance. We’ll create a DynamoDB table to store our chat messages.

Step 1: Create a New DynamoDB Table

Go to the AWS Console and navigate to DynamoDB.
Click Create Table and enter a table name, e.g., ChatMessages.
Set up the Primary Key:
- Partition Key (id) → String (Unique message ID).
- Sort Key (createdAt) → String (Timestamp for ordering messages).
Keep On-Demand capacity mode (for automatic scaling).
Click Create Table to finalize the setup.

Step 2: Enable Time-Based Sorting (Optional but Recommended)

To efficiently fetch the latest messages first, we use the createdAt Sort Key, ensuring:

Messages are automatically sorted by timestamp.
We can query messages within a time range.

Now that our database is set up, let’s connect it with AWS AppSync.

ii) Connecting DynamoDB with AWS AppSync Resolvers

Resolvers map GraphQL operations (queries, mutations, and subscriptions) to database actions. We’ll configure AWS AppSync to store and retrieve messages from DynamoDB.

Step 1: Connect DynamoDB to AWS AppSync

Open AWS AppSync and navigate to the Data Sources tab.
Click Create Data Source and select Amazon DynamoDB Table.
Choose the ChatMessages table created earlier.
Select IAM Role-based Access (AppSync will automatically create the role).
Click Create to finalize the connection.

Step 2: Define a Resolver for Storing Messages

Next, we need to map the GraphQL mutation (sendMessage) to DynamoDB so messages are saved when a user sends them.

Go to the Resolvers tab in AWS AppSync.
Select the Mutation field sendMessage.
Click Attach Resolver, choose DynamoDB, and select ChatMessages.
Use the following Request Mapping Template to insert messages into DynamoDB:

{
  "version": "2018-05-29",
  "operation": "PutItem",
  "key": {
    "id": { "S": "$util.autoId()" },
    "createdAt": { "S": "$util.time.nowISO8601()" }
  },
  "attributeValues": {
    "content": { "S": "$context.arguments.content" },
    "sender": { "S": "$context.arguments.sender" }
  }
}

This will:

Generates a unique message ID (id).
Sets the timestamp (createdAt) automatically.
Stores the message content (content) and sender (sender) in DynamoDB.
Click Save Resolver to apply the changes.

Step 3: Define a Resolver for Fetching Messages

To allow users to retrieve chat history, we define a resolver for GraphQL queries.

Select the Query field for fetching messages.
Attach a Resolver with the following Request Mapping Template:

{
  "version": "2018-05-29",
  "operation": "Query",
  "query": {
    "expression": "#chatRoom = :room",
    "expressionNames": {
      "#chatRoom": "chatRoomId"
    },
    "expressionValues": {
      ":room": { "S": "$context.arguments.chatRoomId" }
    }
  },
  "scanIndexForward": false,
  "limit": 20
}

This will:

Fetches messages for a specific chat room.
Sorts messages from newest to oldest (scanIndexForward: false).
Limits result to 20 messages per query.

Next, we’ll configure GraphQL subscriptions to push real-time updates to all connected users.

Implementing Real-Time GraphQL Subscriptions in a React App

Now that we have AWS AppSync and DynamoDB integrated, we’ll implement real-time GraphQL subscriptions in a React app using AWS Amplify. This will allow users to send and receive messages instantly without refreshing the page.

i) Setting Up AWS Amplify in a React Project

AWS Amplify provides a simplified way to connect a React app with AWS services like AppSync. We need to install Amplify, configure authentication, and connect it with our AppSync API.

Step 1: Install AWS Amplify

In your React project directory, run:

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

Step 2: Configure Amplify in React

To connect our React app with AWS, we configure Amplify in the index.js or App.js file:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

This will:

Loads the AWS AppSync API configuration from aws-exports.js.
Enables real-time GraphQL operations with AppSync.

Now, we can implement GraphQL subscriptions and mutations to send and receive messages in real-time.

ii) Subscribing to Real-Time Messages in React

GraphQL subscriptions allow the app to listen to new messages and update the UI instantly.

Step 1: Import GraphQL Subscription

Modify your React chat component to listen for new messages:

import { API, graphqlOperation } from 'aws-amplify';
import { onNewMessage } from './graphql/subscriptions';

API.graphql(graphqlOperation(onNewMessage)).subscribe({
  next: (messageData) => console.log('New message received:', messageData),
});

Step 2: Update State When a New Message Arrives

Instead of just logging the new message, we update the UI dynamically:


import React, { useEffect, useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { onNewMessage } from './graphql/subscriptions';

const ChatComponent = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const subscription = API.graphql(graphqlOperation(onNewMessage)).subscribe({
      next: ({ value }) => {
        setMessages((prevMessages) => [...prevMessages, value.data.onNewMessage]);
      },
    });

    return () => subscription.unsubscribe(); // Cleanup on unmount
  }, []);

  return (
    <div>
      {messages.map((msg, index) => (
        <p key={index}>{msg.sender}: {msg.content}</p>
      ))}
    </div>
  );
};

export default ChatComponent;

Result:

The useEffect subscribes to onNewMessage when the component mounts.
When a new message is received, it updates the UI in real-time.
The unsubscribe() function stops listening when the component unmounts.

Now, users will see new messages instantly in the chat window.

iii) Sending Messages with GraphQL Mutations

Users need a way to send messages, which will then be stored in DynamoDB and distributed in real-time via GraphQL subscriptions.

Step 1: Import the GraphQL Mutation

Modify your chat input component to include a send button:


import { API, graphqlOperation } from 'aws-amplify';
import { sendMessage } from './graphql/mutations';

async function sendNewMessage(content, sender) {
  await API.graphql(graphqlOperation(sendMessage, { content, sender }));
}

Step 2: Add a Message Input Field

Update the UI to allow users to type and send messages:


const ChatInput = () => {
  const [message, setMessage] = useState('');

  const handleSendMessage = async () => {
    if (message.trim() !== '') {
      await sendNewMessage(message, 'User1'); // Replace 'User1' with actual username
      setMessage('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type your message..."
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
};

export default ChatInput;

Result:

Users type a message in the input field.
When they click Send, the message is sent to AWS AppSync via sendMessage.
AppSync stores the message in DynamoDB and notifies all active subscribers.

Finally, we have created GraphQL above and made our app ready. You can now sign up, add new data, and see real-time updates of newly added entries.

This completes the real-time chat implementation using AWS AppSync, GraphQL, DynamoDB, and React!

Best Practices for Optimizing Real-Time App Performance

Now that we've built real-time applications with AWS AppSync, GraphQL, and DynamoDB, it's essential to ensure that they are scalable, secure, and optimized for performance.

Key Best Practices

Enable AppSync Caching

Reduce database reads by caching frequently accessed data, improving response times and lowering DynamoDB costs.
Use DynamoDB Auto-Scaling

Dynamically adjust read/write capacity to handle traffic spikes efficiently while preventing over-provisioning.
Optimize GraphQL Queries

Fetch only necessary fields, use pagination, and filter data at the database level to minimize response size and reduce network overhead.
Manage WebSocket Connections

Limit excessive open connections, close inactive sessions, and handle reconnections efficiently to prevent unnecessary background processing.

By implementing these best practices, your AWS AppSync-powered real-time app will be faster, more responsive, and cost-efficient.

The Final Verdict

Building a real-time collaboration app isn’t just about implementing GraphQL subscriptions—it’s about leveraging the right AWS tools to ensure seamless performance, scalability, and security.

By integrating AWS AppSync, GraphQL, and DynamoDB, you can:

Deliver real-time updates with GraphQL subscriptions and WebSockets.
Ensure low-latency data synchronization for a smooth user experience.
Scale dynamically with DynamoDB’s auto-scaling capabilities.
Enhance security with fine-grained access control using Cognito and IAM.

This cloud-native approach transforms how real-time apps handle data, making them more responsive, efficient, and scalable. Implement these best practices today, and build applications that keep users engaged—without lag or data inconsistencies!

HTML to PDF JavaScript – Example with Code

Awan Shrestha — Tue, 25 Feb 2025 07:33:52 +0000

In this blog we will see how we can convert the HTML site to PDF using JavaScript.

For a project, I needed to convert some HTML to PDF using JavaScript.

It was a basic site. There would be a form inside a div, and all I needed to do was generate the pdf out of that div and show it in a new tab. All in the client side, no backed server.

The main tasks here were:

To generate the HTML out of PDF.
To show the generated pdf in a new tab.

Server-Side Option for .NET Developers?

Before we dive into the JavaScript approach, here's something I came across lately.

JavaScript works for this project since everything needs to be client-side with no backend server. If you have a .NET backend available, server-side generation saves you from the workarounds coming up below.

If you're working with .NET/C#, IronPDF is a library that handles HTML to PDF conversion on the server side. IronPDF solves similar issues I’m about to mention in this article:

The CSS not loading: IronPDF uses Chrome's rendering engine, so external CSS works as expected.
The text not being selectable: IronPDF generates real text in PDFs, not canvas images.
Alignment issue with jsPDF: Full CSS3 support means your divs stay where they should.

Besides, IronPDF also works in Java, Python, and Node.js. If you're already working with JavaScript (like in this tutorial), you could use the same language on your backend with Node.js and avoid all the client-side limitations. Start 30-day free trial of IronPDF here.

Now let's get into how to do it all in JavaScript when client-side is what you need.

HTML to PDF using JavaScript

So, the first part here. Pretty simple HTML to PDF.

A quick Google Search and I came upon this html2pdf library.

As stated in its documentation “html2pdf.js converts any webpage or element into a printable PDF entirely client-side using html2canvas and jsPDF.”

That was all I wanted. There were lots of other tutorials out there on it as well.

It all worked and it downloaded the pdf as well. But the pdf was blank.

html2pdf generate and return Blank or Empty PDF

That was a bit of weird. A few searches and turns out, there were some issues with the version.

Used the 0.9.3 version and issue solved.

CDN Link: https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js

It printed the div with all the contents.

JavaScript Code:

let element = document.getElementById('div-to-print')

html2pdf().from(element).save();

So, it saved / downloaded the pdf file.

But I didn’t need it to be downloaded, I need it to show in a new browser tab.

Open PDF in new tab instead of Download – JavaScript – using Blob

We need to create a new blob from the pdf file and create new URL to show that file. Reading this issue, I got to know that using html2pdf promise API, we could get the file instead of downloading it. And then use it to create the blob.

How we would do it with a normal file.

const filed = document.querySelector('input[type=file]').files[0];
let file = new Blob([filed], { type: 'application/pdf' });
let fileURL = URL.createObjectURL(file);
window.open(fileURL);

Using it with the pdf generated from HTML by html2pdf:


async function printHTML() {

let worker = await html2pdf().from(element).toPdf().output('blob').then((data) => {
    console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })
}

It worked. The PDF was now not downloading, but being opened in new tab. And now, I styled the div using CSS. But there was problem.

html2pdf CSS Not Working

The CSS I had written for the div was not loading up. The CSS was not working with html2pdf.

A few searches, and found out that external CSS was not being loaded up by html2css. So, only HTML was being printed. Not the CSS.

The workaround was to write CSS in HTML with style tag or to use inline CSS. Also, few workarounds in this issue.

Finally the PDF was being generated as I needed. Just one more caveat.

html2pdf PDF Text not Selectable

The texts in PDF were not being selectable. Now this might not be an requirement for most of the projects, but I needed it.

html2pdf generates pdf as canvas image. It had been using html2canvas all along. So, there were no texts. They were just canvas images out of HTML being converted to PDF.

I had to search for another library. Why not use the one I had been using all the way along under the hood.

jsPDf is used by html2pdf. So, I tried for jsPDF.


doc.fromHTML(document.getElementById("div-to-print"),
     22, // Margins
     17,
     {'width': 400},
     function (a) {
          // doc.save("HTML2PDF.pdf"); // To Save
          let blobPDF = new Blob([doc.output()], { type: 'application/pdf' });
          let blobUrl = URL.createObjectURL(blobPDF);
          window.open(blobUrl);
});

And all good here.

Open PDF in new tab instead of downloading from jsPDF

As for opening in new tab instead of downloading PDF from jsPDF, similar as in html2pdf case, in the callback function, we can pass doc.output() to create the blob.

And the PDF being generated was in text, not images.

So, all good and I added the CSS. But.

jsPDF CSS not Working

Turns out jsPDF does not work with CSS. And to make it work with CSS, it was to use html2canvas. And that’s what html2pdf had been doing all along.

We can easily pass margins in the jsPDf. And also it supported the html attributes as This is p one as old times. But the reason I was needing CSS was because the div I was trying to print had two divs inside of it. And one of them needed to be centered aligned both vertically and horizontally.

The next thing I was searching was “How to center align div child with HTML only without using CSS”.

Turns out there was text API in the jsPDF that would take multiple parameters and make the job easy without CSS.

API.text = function(text, x, y, flags, angle, align);

Multiple such texts and the job would be done.

But instead of writing multiple texts, if I could do it with multiple HTML elements with withHTML function, then that could be great. Turns out it works.

By adding another HTML element block in callback of function adding previous block, it could be done.

A few more calculations, and using the calculated values as margins, it could be perfectly center aligned.


let pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight()
let pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth()
let recipientBlock = document.querySelector(".div2-block")
let rHeight = recipientBlock.clientHeight
let rWidth = recipientBlock.clientWidth

doc.fromHTML(document.querySelector(".div1-block"),
   22, 17, { 'width': 200, 'height': 200 },
   function (a) {
      doc.fromHTML(document.querySelector(".div2-block"),
          pageWidth / 2 - rWidth / 4,
          pageHeight / 2 - rHeight / 4,
          { 'width': 200, 'height': 200 },
          function (a) {
              let blobPDF = new Blob([doc.output()], { type: 'application/pdf' });
              let blobUrl = URL.createObjectURL(blobPDF);
              window.open(blobUrl);
                });
        });

Finally, around the end of the project.

Finally, one more thing was to do. That was to set the width and height of the final pdf.

It was given there in documentation and pretty easy.

Pass the Height and Width as an array and specify the unit. For some reasons, unit: “px” for pixels was having problems. So, used the “pt”. It worked.

let doc =new jsPDF({orientation: 'l', unit: 'pt', format: [widthForJsPDF, heightForJsPDF]})

So, this is how a project is done, converting HTML to PDF using JavaScript.

And all I did was Google searches.

Setting up CI/CD in AWS with CodeCommit, CodeDeploy, CodePipeline, ECR, and ECS

Awan Shrestha — Sat, 24 Feb 2024 10:33:17 +0000

In the fast-paced world of software development, Continuous Integration (CI) and Continuous Deployment (CD) have become essential practices for delivering high-quality software at a rapid pace. In this blog post, we'll explore how to set up a CI/CD pipeline in AWS using services like CodeCommit, CodeDeploy, CodePipeline, ECR, and ECS.

Introduction

Continuous Integration (CI) involves automatically integrating code changes from multiple contributors into a shared repository. Continuous Deployment (CD) takes it a step further by automating the deployment of code changes to production or other environments. AWS provides a suite of services to seamlessly implement CI/CD pipelines.

Step 1: Setting up CodeCommit

Log in to the AWS Management Console.
Navigate to the CodeCommit service.

Click on Create repository.

Give a Repository Name and click “Create”

Click on Clone URL and then Clone HTTPS

Navigate to IAM, select "Users," choose the desired IAM user, click on "Security Credentials," and scroll down to generate CodeCommit credentials.

Save or download the credentials.

Containerize your application using Docker. Note: I am using a free website template from https://www.free-css.com/free-css-templates/page296/spering for this process.

wget https://www.free-css.com/free-css-templates/page296/spering.zip
Unzip spering.zip

#Dockerfile
# Use a base image with a lightweight web server
FROM nginx:alpine

# Set the working directory to the web root
WORKDIR /usr/share/nginx/html

# Copy the website files to the container
COPY . .

# Expose port 80 for the web server
EXPOSE 80

Push the containerized application into CodeCommit using Git commands.

git init 
git status
git add .
git commit –m “enter your message”
git remote origin <repository-url copied from step 5>
git push origin master

Step 2: Setting up ECR

1.Navigate to the Elastic Container Registry (ECR) service.

Click on "Create repository," provide a name for the repository, and proceed to create it.

Step 3: Setup EC2

Note: Follow these steps to launch an instance.
https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/option3-task1-launch-ec2-instance.html

Step 4: Set up the target group and load balancer.

In the left navbar, navigate to Load Balancing, click on "Target Groups," and proceed to create a new target group.

2.Give target group a name and create

Create a load balancer.

Step 5: Set up ECS (Elastic Container Service).

Navigate to the Elastic Container Service.

Create a cluster, assign it a name, and select "External instances" for the infrastructure using ECS Anywhere.

Create a task definition.

5.Provide a name for the task definition, select "EC2" as the launch type, and allocate the required CPU and memory resources (e.g., for a t2.medium instance family, allocate 1 vCPU and 0.8GB memory).

6.Under "Container," specify details such as the container name, image URI (copy it from the ECR repository where the image was pushed), and the host and container port settings.

Navigate to the created cluster, go to the "Services" tab, and proceed to create a new service.

8.Select the launch type as EC2, choose the task definition family created earlier, and assign a name to the service.

Expand the "Load balancer" section, select "Application Load Balancer," use an existing load balancer (choose the one created earlier), and for the listener, select the target group created earlier.

Step 6: Setup Codepipeine

1.Navigate to the CodePipeline service.

2.Click on "Create pipeline"

Specify the pipeline name, select the pipeline type, and provide the role name.

4.Select the source provider, then choose the repository and branch created on CodeCommit.

5.For the build phase, opt for a build provider such as AWS CodeBuild, and click "Create project" as demonstrated below; a new tab will open.

Provide a name for the build.

Select the operating system, runtime, image, image version, and role name. Ensure that the role has the necessary permissions to access ECR and CloudWatch.

Create a buildspec.yaml file.

version: 0.2

env:
  variables:
    REPOSITORY_URI: "xxxxxxx.dkr.ecr.us-east-1.amazonaws.com/mywebsite"

phases:
  pre_build:
    commands:
      - echo Logging in to Amazon ECR...
      - aws --version
      - aws ecr get-login-password --region us-east-1 | docker login --username AWS --password-stdin xxxxxxxxx.dkr.ecr.us-east-1.amazonaws.com
  build:
    commands:
      - echo Build started on `date`
      - echo Building the Docker image...
      - docker build -t $REPOSITORY_URI:latest .
  post_build:
    commands:
      - echo Build completed on `date`
      - echo Pushing the Docker image...
      - docker push $REPOSITORY_URI:latest
      - echo Writing image definitions file...
      - printf '[{"name":"mywebsite","imageUri":"%s"}]' $REPOSITORY_URI:latest > imagedefinitions.json

artifacts:
  files: imagedefinitions.json

Note: Obtain the push command and Repository URI from Amazon ECR.

Proceed with the pipeline setup and move to the next steps.

Configure the deployment by selecting Amazon ECS as the deploy provider. Choose the previously created cluster and service on ECS. Provide the image definitions file and proceed by clicking "Next."

Review the configuration and proceed to create the pipeline.

Release the changes or push any updates to CodeCommit; AWS CodePipeline will automatically initiate and execute the configured deployment process.

After a successful build, you can access your website through the Load Balancer DNS or map a custom domain to the Load Balancer using Route 53.

Step 7: Check CI/CD

Open your HTML file and make the desired changes.

Push the changes you made in the HTML file to your CodeCommit repository.

The pipeline will be automatically triggered, and your changes will be deployed automatically after a successful deployment.

You can now view your changes on your website.

Conclusion

Implementing CI/CD in AWS with CodeCommit, CodeDeploy, CodePipeline, ECR, and ECS streamlines your development workflow, ensuring rapid and reliable delivery of your applications. By following these steps, you can create a robust CI/CD pipeline that integrates seamlessly with AWS services.

Additional Resources:

AWS CodeCommit: https://docs.aws.amazon.com/codecommit/latest/userguide/welcome.html
AWS CodeDeploy: https://docs.aws.amazon.com/codedeploy/latest/userguide/welcome.html
AWS CodePipeline: https://docs.aws.amazon.com/codepipeline/latest/userguide/welcome.html
AWS ECR: https://docs.aws.amazon.com/amazon-ecr/latest/userguide/what-is-ecr.html
AWS ECS: https://docs.aws.amazon.com/ecs/latest/userguide/intro.html

How to Build a Waterfall Chart with JavaScript

Awan Shrestha — Wed, 01 Nov 2023 15:26:58 +0000

Data visualization is an essential tool for understanding complex data sets and effectively conveying insights. Among the various types of charts and graphs used for this purpose, the waterfall chart stands out as a powerful way to represent changes in financial data, such as revenue, expenses, and profits over a specific period.

In this tutorial, we'll explore how to create a waterfall chart using JavaScript. To illustrate the process, we'll use the example of an income statement for a company, in this case, Twitter Inc.’s latest (and last) one.

Whether it’s to analyze a company's financial performance, project budgets, or inventory fluctuations, this step-by-step guide will help you easily create a useful interactive JS-based waterfall chart.

Waterfall Chart That Will Be Created

Here’s the JavaScript-based waterfall chart that will be the final visualization of this tutorial. Take a quick look at it, and let’s get started!

A. Creating a Basic JS Waterfall Chart

If you're new to creating JS charts, don't worry; it's easier than you think! You can create stunning charts, including waterfall plots, following these four fundamental steps:

Create a container
Include the necessary JavaScript files
Add data to visualize
Write simple JS charting code

Step 1: Create a Container

Begin by setting up a container for your waterfall chart. This involves adding a block-level HTML element to your webpage, defining its id, and specifying its width and height.

This is how your HTML structure could look:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Waterfall Chart</title>  
    <style>
      html, body, #WaterfallContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="WaterfallContainer"></div>
  </body>
</html>

Step 2: Include Necessary JavaScript Files

Once the container is set up, include the necessary JavaScript files in the <head> section. This tutorial shows how you can use a JS charting library like AnyChart.

Here’s how your HTML might look with the necessary <script> tags included:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Waterfall Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-waterfall.min.js"></script>
    <style>
      html, body, #WaterfallContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="WaterfallContainer"></div>
    <script>
      // All the code for the waterfall chart will come here.
    </script>
  </body>
</html>

Step 3: Add Data to Visualize

Next, it's time to add data to visualize. The data for Twitter Inc.'s last income statement (Twitter Inc. no longer exists; the company is now a part of X Corp.) originates from here. For a waterfall chart, you can set the data in many ways; I will include it just like that directly in the code.

Below is an example of a data set, where the data is structured as an array. Each item contains an "x" and "value" fields. The "x" field represents the name of the corresponding item of the income statement, while the "value" field signifies the magnitude of each data point.

var data = [
  { x: "Revenue", value: 5077.482 },
  { x: "Cost of revenue", value: -1797.510 },
  { x: "Gross profit", isTotal: true },
  { x: "Operating expenses", value: -3772.711 },
  { x: "Income (loss) from operations", isTotal: true },
  { x: "Interest expense", value: -51.186 },
  { x: "Interest income", value: 35.683 },
  { x: "Other income (expense), net", value: 97.129 },
  { x: "Income (loss) before income taxes", isTotal: true },
  { x: "(Provision) benefit for income taxes", value: 189.704 },
  { x: "Net income (loss)", isTotal: true }
];

Step 4: Write Simple JS Charting Code

Now, you can easily visualize the data with just a few lines of charting code.

Start by ensuring your code executes only when the page has fully loaded by wrapping it up in a function like the one below.

anychart.onDocumentReady(function () {
  // Your code goes here.
});

Now, it's time to define the data you want to visualize, taking it from the previous step.

anychart.onDocumentReady(function () {

  // set the data
  var data = [
    { x: "Revenue", value: 5077.482 },
    { x: "Cost of revenue", value: -1797.510 },
    { x: "Gross profit", isTotal: true },
    { x: "Operating expenses", value: -3772.711 },
    { x: "Income (loss) from operations", isTotal: true },
    { x: "Interest expense", value: -51.186 },
    { x: "Interest income", value: 35.683 },
    { x: "Other income (expense), net", value: 97.129 },
    { x: "Income (loss) before income taxes", isTotal: true },
    { x: "(Provision) benefit for income taxes", value: 189.704 },
    { x: "Net income (loss)", isTotal: true }
  ];

  // All the next code for the JS waterfall chart will come here.

});

Now that you have your data, create an instance of a waterfall chart. This chart instance will serve as the canvas upon which you'll visualize your data.

var chart = anychart.waterfall()

To add your data to the waterfall chart, create a series object and assign your data to it. The series object is where you define how the data will be represented on the graphic. This step connects your data to the chart and tells it how to display each data point.

var series = chart.waterfall(data);

You may choose to disable data point labels if your values are large and would otherwise clutter the view (all values can still be seen in the tooltip). We will return the labels and customize this and a few other things in the chart later in Section B.

series.labels(false);

You’ve set up your JS waterfall chart, but now it needs a home. Set the ID of the container element in your HTML where the visual will be displayed. This makes your chart aware of where it should appear on your webpage.

chart.container("WaterfallContainer");

Finally, with all the pieces in place, issue the command to draw the resulting waterfall chart.

chart.draw();

Initial Waterfall Chart Result

And there you have it! Your basic JavaScript waterfall chart comes to life. The complete code is provided below for your convenience. Feel free to explore the interactive version and play with the code on AnyChart Playground, and let’s proceed to customize this waterfall chart visualization in the next section of the tutorial!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Waterfall Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-waterfall.min.js"></script>
    <style>
      html, body, #WaterfallContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="WaterfallContainer"></div>
    <script>
      anychart.onDocumentReady(function () {
        // set the data
        var data = [
          { x: "Revenue", value: 5077.482 },
          { x: "Cost of revenue", value: -1797.510 },
          { x: "Gross profit", isTotal: true },
          { x: "Operating expenses", value: -3772.711 },
          { x: "Income (loss) from operations", isTotal: true },
          { x: "Interest expense", value: -51.186 },
          { x: "Interest income", value: 35.683 },
          { x: "Other income (expense), net", value: 97.129 },
          { x: "Income (loss) before income taxes", isTotal: true },
          { x: "(Provision) benefit for income taxes", value: 189.704 },
          { x: "Net income (loss)", isTotal: true }
];
        // create a waterfall chart
        var chart = anychart.waterfall();
        // create a series and set the data
        var series = chart.waterfall(data);
        // hide the labels
        series.labels(false);
        // set the container for the chart
        chart.container("WaterfallContainer");
        // draw the resulting chart
        chart.draw();
      });
    </script>
  </body>
</html>

B. Customizing a Waterfall Chart

Now, let’s see how you can enhance the visual appeal of the waterfall chart by adding some customizations.

1. Add the Zero Line

When working with negative values, it can be advantageous to include a zero-line marker on the X-axis. This zero line acts as a reference point, visually separating positive and negative values. You can achieve this by adding the following code.

var line = chart.lineMarker().value(0);

2. Rotate the Chart

In some cases where certain income statement items have lengthy names, you can improve the chart's appearance by rotating the X-axis labels, or even the entire chart which is what you can see below. The following change in orientation to a vertical layout provides more space for accommodating extended item names.

chart.isVertical(true);

Additionally, you can arrange the bars in reverse order to enhance the legibility of the waterfall chart.

chart.xScale().inverted(true)

3. Configure Labels

Labels play a crucial role in conveying information to viewers. By customizing labels, you can significantly enhance the chart's visual presentation and readability.

To start, enable series labels by simply removing the series.labels(false); line. Labels are displayed by default unless specified otherwise.

Next, for instance, customize the appearance of labels within the chart using HTML as shown below. The formatting logic applied within the corresponding function allows you to apply different styles depending on whether the label represents a total value or a non-total value. Total values are displayed in red with a lighter font weight, while non-total values are shown in gray. Additionally, rounded values (with zero decimal places) are displayed in both cases.

chart.labels()
  .useHtml(true)
  .format(function() {
    if (this.isTotal)
      return "<span style='color: #dd2c00; font-weight: 100; font-size: 11'>" +
        this.absolute.toFixed(0) + "M" + "</span>";
      return "<span style='color: gray; font-weight: 100; font-size: 11'>" +
        this.diff.toFixed(0) + "M" + "</span>";
  });

4. Name the Chart

Providing a clear and informative title for your waterfall chart is essential to help users quickly understand what the graphic represents. Here’s how you can name the chart, making it obvious at a glance that it displays the income statement for Twitter Inc. for the year 2021.

chart.title("Income Statement for Twitter Inc. (2021)");

5. Customize the Value Axis

You can also improve the clarity of the chart by changing the format of the values represented on the value (Y) axis. Specifically, you can name the axis "USD" to denote the currency. Additionally, you can format the values to be more understandable, such as by showing values in billions of USD for larger values, like in this case.

// customize the format of the y-axis labels
chart.yAxis().labels().format("{%Value}{scale:(1000)(1)|(B)}");

// set the y-axis title
chart.yAxis().title("USD");

6. Configure the Tooltip

Tooltips provide valuable information to users when interacting with the chart. To make tooltips more direct and precise, you can customize them as you need. In this case, for example, the "M USD" in the tooltip title makes it obvious that values within the tooltip are displayed in millions of USD.

chart.tooltip().titleFormat("{%x}" + " (M USD)");

7. Configure the Visual Appearance

You can also improve the visual appearance by customizing the coloring. For instance, the code below enriches the connectors’ stroke with a vibrant red color and a dashed pattern, making it visually striking.

chart.connectorStroke("#ff6666", 2, "2 2", "round");

Furthermore, you can configure the appearance of the bars in different states, including normal, hovered, and selected. Here’s how you can specify distinct visual settings for falling and rising values, tailoring the chart's visual presentation according to your preferences and specific design requirements.

// normal state
series.normal()
  .fill("#8C8C8C", 0.7)
  .hatchFill("forward-diagonal", "#BEBEBE", 1, 10)
  .stroke("#8C8C8C")
  .fallingFill("#FC4E6F", 0.8)
  .fallingStroke("#FC4E6F", 1, )
  .risingFill("#44C882", 0.8)
  .risingStroke("44C882");
// hovered state
series.hovered()
  .fill("#8C8C8C", 0.1)
  .hatchFill("forward-diagonal", "#117A65", 1, 10)
  .stroke("#8C8C8C", 2)
  .fallingFill("#FC4E6F", 0.1)
  .fallingStroke("#FC4E6F", 2, "10 5", )
  .risingFill("44C882", 0.1)
  .risingStroke("44C882", 2);
// selected state
series.selected()
  .fill("#8C8C8C", 0.5)
  .hatchFill("forward-diagonal", "#8C8C8C", 1, 10)
  .stroke("#8C8C8C", 4)
  .fallingFill("#922B21", 0.5)
  .fallingStroke("#B03A2E", 4, )
  .risingFill("#117864", 0.5)
  .risingStroke("#148F77", 1);

8. Add an Arrow to Visualize the Total Change

In the final step of this waterfall chart tutorial, I’ll show you how to add an arrow to connect the initial and final values, providing a clear visual representation of the total change. Check it out.

// add an arrow
var totalChangeArrow = chart.addArrow({
  from: "Revenue",
  to: "Net income (loss)"
});

// set arrow's label format
totalChangeArrow.label().format("{%Value}{numDecimals:0}" + "M");

Final Waterfall Chart Result

After implementing these customizations one by one, I am excited to present the final version of the waterfall chart powered by JavaScript. Its sleek design and smooth interactivity make it an exceptional tool for data visualization.

Feel free to access and modify the source code on AnyChart Playground to suit your specific needs. Experiment with colors, interactions, and other features to create a chart that perfectly matches your unique style. For your convenience, I have included the entire code of this JS waterfall chart below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Waterfall Chart</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-waterfall.min.js"></script>
    <style>
      html, body, #WaterfallContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="WaterfallContainer"></div>
    <script>
      anychart.onDocumentReady(function () {
        // set the data
        var data = [
          { x: "Revenue", value: 5077.482 },
          { x: "Cost of revenue", value: -1797.510 },
          { x: "Gross profit", isTotal: true },
          { x: "Operating expenses", value: -3772.711 },
          { x: "Income (loss) from operations", isTotal: true },
          { x: "Interest expense", value: -51.186 },
          { x: "Interest income", value: 35.683 },
          { x: "Other income (expense), net", value: 97.129 },
          { x: "Income (loss) before income taxes", isTotal: true },
          { x: "(Provision) benefit for income taxes", value: 189.704 },
          { x: "Net income (loss)", isTotal: true }
        ];
        // create a waterfall chart
        var chart = anychart.waterfall();
        // add the zero line
        var line = chart.lineMarker().value(0);
        // rotate the chart
        chart.isVertical(true);
        // set the reverse order of the bars
        chart.xScale().inverted(true);
        // customize the labels
        chart.labels()
          .useHtml(true)
          .format(function() {
            if (this.isTotal)
              return "<span style='color: #dd2c00; font-weight: 100; font-size: 11'>" +
                this.absolute.toFixed(0) + "M" + "</span>";
              return "<span style='color: gray; font-weight: 100; font-size: 11'>" +
                this.diff.toFixed(0) + "M" + "</span>";
          });
        // set the chart title
        chart.title("Income Statement for Twitter Inc. (2021)");
        // add the usd caption on the y-axis labels
        chart.yAxis().labels().format("{%Value}{scale:(1000)(1)|(B)}");
        // set the y-axis title
        chart.yAxis().title("USD");
        // create a series and set the data
        var series = chart.waterfall(data);
        // configure the tooltip title
        chart.tooltip().titleFormat("{%x}" + " (M USD)");
        // customize the connector stroke
        chart.connectorStroke("#ff6666", 2, "2 2", "round");
        // configure the visual settings of the series:
        // normal state
        series.normal()
          .fill("#8C8C8C", 0.7)
          .hatchFill("forward-diagonal", "#BEBEBE", 1, 10)
          .stroke("#8C8C8C")
          .fallingFill("#FC4E6F", 0.8)
          .fallingStroke("#FC4E6F", 1, )
          .risingFill("#44C882", 0.8)
          .risingStroke("44C882");
        // hovered state
        series.hovered()
          .fill("#8C8C8C", 0.1)
          .hatchFill("forward-diagonal", "#117A65", 1, 10)
          .stroke("#8C8C8C", 2)
          .fallingFill("#FC4E6F", 0.1)
          .fallingStroke("#FC4E6F", 2, "10 5", )
          .risingFill("44C882", 0.1)
          .risingStroke("44C882", 2);
        // selected state
        series.selected()
          .fill("#8C8C8C", 0.5)
          .hatchFill("forward-diagonal", "#8C8C8C", 1, 10)
          .stroke("#8C8C8C", 4)
          .fallingFill("#922B21", 0.5)
          .fallingStroke("#B03A2E", 4, )
          .risingFill("#117864", 0.5)
          .risingStroke("#148F77", 1);
        // add an arrow
        var totalChangeArrow = chart.addArrow({
          from: "Revenue",
          to: "Net income (loss)"
        });
        // set arrow's label format
        totalChangeArrow.label().format("{%Value}{numDecimals:0}" + "M");
        // set the container id for the waterfall chart
        chart.container("WaterfallContainer");
        // draw the resulting chart
        chart.draw();
      });
    </script>
  </body>
</html>

Conclusion

This tutorial was designed to be a comprehensive and user-friendly guide to ensure you can effortlessly create waterfall charts using JavaScript (HTML5). I hope we've succeeded in that endeavor.

If you have any questions or require further assistance, please don't hesitate to ask in the comments section. I'm here to help and will do my best to address any doubts you may have. I'm eagerly looking forward to the fantastic waterfall charts you'll create using this guide, so feel free to share your creative visualizations. For inspiration, you can take a look at this waterfall chart gallery and learn more in the waterfall chart documentation. And your contributions can be a source of further inspiration for others, including myself.

Happy charting!

Creating a Candlestick Chart with JS to Analyze Stocks

Awan Shrestha — Mon, 01 May 2023 14:26:37 +0000

Candlestick charts are a fantastic data visualization tool for tracking the price movements of stocks over a period of time. In this tutorial, I'll show you how to create your own candlestick chart using JavaScript.

We’ll be using TSMC (Taiwan Semiconductor Manufacturing Company) as an example, as they're the largest contract chip maker in the world and have been making waves in the stock market recently.

By the end of this tutorial, you'll be able to create your own JS candlestick charts and analyze stock trends like a pro. So, let's get started and dive into the exciting world of data visualization with JavaScript!

What is a Candlestick Chart?

You may already be familiar with candlestick charts, but just in case you need a quick refresher, here's the gist: A candlestick chart, or a Japanese candlestick chart, is a type of chart used to visualize the price movement of a stock over time. Each point on the graph represents a specific time period, and the "candle" shape is made up of a rectangular body and two wicks that extend from either end.

The body of the candle represents the difference between the opening and closing prices, while the wicks represent the highest and lowest prices that occurred during that time period. The color of the candle can indicate whether the stock price went up or down during that period, with green or blue usually indicating a rise and red indicating a decline.

Candlestick charts are a popular tool used by traders and analysts to identify trends and patterns in stock prices. And now, with the power of JavaScript, you can create your very own candlesticks and impress all your finance friends with your data visualization skills!

Candlestick Chart Being Built

Are you ready to create your very own candlestick chart with JavaScript? I sure am! By the end of this tutorial, you'll have a beautiful graph that looks something like the one below:

Exciting, right? So let's not waste any time, and get right into the fun part: building our candlestick chart!

Steps to Build a Basic JS Candlestick Chart

Okay, let's get started with building our very own candlestick chart using JavaScript! Don't worry if you're new to this — I'll walk you through each step, and before you know it, you'll be a pro at it!

Here's a quick list of what we'll be doing:

Create a basic HTML page.
Insert the required JS files.
Set the data.
Write some JS charting code.

Let's get started!

1. Create a Basic HTML Page

To start things off, let's create a basic HTML page and give it the snazzy title "JavaScript Candlestick Chart." We'll add an HTML block element called <div> to contain our masterpiece, and give it a special ID attribute of "container" so we can refer to it later in the code.

To make our chart look extra slick, we'll throw in some CSS rules in the <style> block. We can set the width and height properties to 100% and the margin and padding to 0. Of course, you can always change these to suit your personal style.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Candlestick Chart</title>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

2. Insert the Required JS files

Using JavaScript charting libraries is an absolute game-changer when it comes to creating stunning interactive visualizations. Luckily, you don't need to be a technical wizard to use them. For this tutorial, we'll be working with AnyChart, which has detailed documentation (e.g., candlestick here and stock candlestick here), and does not require a fee for non-commercial use.

Next up, we need to insert the required JS files. This is where the beauty of CDNs (Content Delivery Networks) comes in handy. We can simply add the links to the Core, Stock, and Data Adapter modules in the <head> section of our HTML page. We'll also need to add the CSS links for UI and fonts to ensure our candlestick chart looks top-notch.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Candlestick Chart</title>
    <link href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css" rel="stylesheet" type="text/css">  
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-stock.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // All the code for the JS Candlestick chart will come here
    </script>
  </body>
</html>

Later on, we might need several other modules for customization.

3. Set the Data

To set up the data for the candlestick chart, we will use the stock data of TSMC, which I have compiled into a CSV file available at this link. Loading the data is easy with the anychart.data.loadCsvFile() function, which we can use to load the data from the CSV file into our chart. This function will parse the CSV file and create a data table, which will be used to plot the chart.

anychart.data.loadCsvFile('https://gist.githubusercontent.com/awanshrestha/6481638c175e82dc6a91a499a8730057/raw/1791ef1f55f0be268479286284a0452129371003/TSMC.csv', function (data) {});

4. Write Some JS Charting Code

Alright, it's time to put all the pieces together and create our awesome candlestick chart for TSMC! Let's start by writing some JS code to make our chart functional.

First off, we need to wrap our code in the anychart.onDocumentReady() function. This ensures that the code is executed only after the document has finished loading.

anychart.onDocumentReady(function () {
  anychart.data.loadCsvFile(
'https://gist.githubusercontent.com/awanshrestha/6481638c175e82dc6a91a499a8730057/raw/1791ef1f55f0be268479286284a0452129371003/TSMC.csv',
    function (data) {});
});

Since candlestick charts can process table-formatted data, we create a table using the table() method and add our data to it with the addData() method.

var dataTable = anychart.data.table();
dataTable.addData(data);

But hold up, we're not done yet! We need to map our data properly to make it visually appealing. So, we use the mapAs() function to create a new mapping object responsible for mapping the data.

var mapping = dataTable.mapAs({
  open: 1,
  high: 2,
  low: 3,
  close: 4
});

Next, we create a stock chart and a plot to represent our data.

// create a stock chart
var chart = anychart.stock();
// create the plot
var plot = chart.plot(0);

Moving on, we work on the grid settings and create a series for our data. Using the addSeries() method, we configure our series name to be TSMC using the name() function. And to add a playful touch, we use the iconType() function to show the rise and fall of the stock markets with arrowheads pointing up and down, respectively.

// set the grid
plot.yGrid(true).xGrid(true).yMinorGrid(true).xMinorGrid(true);
// create the candlestick series
var series = plot.candlestick(mapping);
series.name('TSMC');
series.legendItem().iconType('rising-falling');

To give our chart a title, we use the title() function. And finally, we specify the container of our chart as the HTML div with the id "container". And voila! Our JavaScript-based candlestick chart for TSMC is ready to be rendered with the draw() function.

// set the title of the chart
chart.title('TSMC Stock Chart');
// set the container id for the chart
chart.container('container');
// initiate the chart drawing
chart.draw();

And here it is. Our (first) candlestick chart for the TSMC:

But wait, there's more! In the next section, we'll learn how to customize our chart to make it even more visually appealing and informative. So keep reading!

The Playground Link is also available for you to play with the interactive version of this visualization. And the entire code for the basic JS candlestick chart has been placed below for your convenience.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Candlestick Chart</title>
    <link href="https://cdn.anychart.com/releases/8.11.0/css/anychart-ui.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.anychart.com/releases/8.11.0/fonts/css/anychart-font.min.css" rel="stylesheet" type="text/css">  
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-stock.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
anychart.onDocumentReady(function () {
  // load data
  anychart.data.loadCsvFile(
'https://gist.githubusercontent.com/awanshrestha/6481638c175e82dc6a91a499a8730057/raw/1791ef1f55f0be268479286284a0452129371003/TSMC.csv',
    function (data) {
      // create a data table with the loaded data
      var dataTable = anychart.data.table();
      dataTable.addData(data);
      // map the loaded data for the candlestick series
      var mapping = dataTable.mapAs({
        open: 1,
        high: 2,
        low: 3,
        close: 4
      });
      // create a stock chart
      var chart = anychart.stock();
      // create the chart plot
      var plot = chart.plot(0);
      // set the grid settings
      plot
        .yGrid(true)
        .xGrid(true)
        .yMinorGrid(true)
        .xMinorGrid(true);
      // create the candlestick series
      var series = plot.candlestick(mapping);
      series.name('TSMC');
      series.legendItem().iconType('rising-falling');
      // set the title of the chart
      chart.title('TSMC Stock Chart');
      // set the container id for the chart
      chart.container('container');
      // initiate the chart drawing
      chart.draw();
    }
  );
});
    </script>
  </body>
</html>

Options to Customize a JS Candlestick Chart

Alright, now that we've got our basic JavaScript-based candlestick chart up and running, it's time to put our creative hats on and add some customizations to make it even more awesome! Let's explore some fun ways to jazz up our chart and make it stand out from the rest.

A. Get a Custom Date Range Picker and Selector

Buckle up, it's time to play with some dates! Let's add some customization to our candlestick chart by setting up a custom date range picker and selector. With this feature, users can easily navigate date/time-based charts and select specific periods for further analysis.

To get started, we need to add the Common UI module by including the following CDN link in the head section of our HTML page.

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>

Once added, we can use the range picker to facilitate the use of the scroller by providing two input fields that allow users to customize the start and end dates on the display.

var rangePicker = anychart.ui.rangePicker();
rangePicker.render(chart);

Additionally, we can use the range selector, which provides a set of buttons for selecting certain time periods.

var rangeSelector = anychart.ui.rangeSelector();
rangeSelector.render(chart);

For our chart, we've chosen a custom date range of 2020 to 2022 to represent the post-COVID scenario.

chart.selectRange('2020-01-01', '2022-12-31');

B. Configure the Visual Appearance

Who said charts have to be boring? Let's make our JS candlestick chart stand out with some visual enhancements! In this section, we will explore how to configure the theme of the chart.

The theme changes the face, feel, and layout of the candlestick chart. I want to go with something glamorous. To get started, we need to add the following CDN link in the head section of our HTML page.

<script src="https://cdn.anychart.com/releases/8.11.0/themes/dark_glamour.min.js"></script>

Once added, we can use the function theme() to change the theme or background color of the chart.

anychart.theme('darkGlamour');

With the code provided below, we can change different parts of the candlesticks to create a unique look and feel. And don't forget the conditional coloring of the chart: green for positive growth and red for negative.

series.fallingFill("#FF0D0D");
series.fallingStroke("#FF0D0D");
series.risingFill("#43FF43");
series.risingStroke("#43FF43");

Ta-da! Feast your eyes on the beautiful transformation of our candlestick chart!

C. Add Event Markers

Let's make our candlestick chart even more informative by adding event markers. This will provide a better understanding of key developments and dividends that occurred during the selected time period.

To begin with, we need to establish the settings for the event markers in our graph.

var eventMarkers = plot.eventMarkers();

We can also customize the appearance of our event markers.
set the symbol of event markers

plot.eventMarkers().format(function() {
  return this.getData("symbol");
});

Next, we add the data for the event markers. I have added some significant events that occurred between 2020 and 2022 based on information from the TSMC Wikipedia page and various news portals.

eventMarkers.data([
  { "symbol": 1, date: '2020-03-11', description: 'WHO declares COVID-19 a global pandemic' },
  { "symbol": 2, date: '2020-11-20', description: 'TSMC wins approval from Arizona for $12 billion chip plant' },
  { "symbol": 3, date: '2021-07-12', description: 'TSMC and Foxconn reach deals to buy COVID-19 vaccines for Taiwan' },
  { "symbol": 4, date: '2021-11-09', description: 'TSMC announces to build a specialty technology fab in Japan with Sony' },
  { "symbol": 5, date: '2022-02-24', description: 'Russia-Ukraine war begins' },
  { "symbol": 6, date: '2022-11-15', description: 'Berkshire Hathaway discloses a $4.1 billion stake in TSMC' },
]);

The result of implementing all of the above code will be a candlestick chart that includes event markers, making it easier to understand the key events that took place during the selected time period.

D. Add Annotations

Let's add some helpful fun to the JS candlestick chart by including annotations!

First, we need to add the Annotations module by including the following script in the HTML code:

<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-annotations.min.js"></script>

To add an annotation to the candlestick chart, we'll use the annotations() object and one of its methods, such as ellipse(), rectangle(), or more. Let's start by creating the annotation object:

var annotation = plot.annotations();

For this article, we'll use the rectangle() method, which requires four points to define its location. You'll need to insert these four points in YYYY-MM-DD format. Since the exact start and end dates of the "work from home" period may vary, we'll use the day the pandemic was declared as the first date, and the day the first vaccine was approved by the WHO as the second date.

annotation.rectangle({
  // X - part of the first anchor
  xAnchor: '2020-03-11',
  // Y - part of the first anchor
  valueAnchor: 45,
  // X - part of the second anchor
  secondXAnchor: '2020-12-31',
  // Y - part of the second anchor
  secondValueAnchor: 125,
  // set the stroke settings
  stroke: '3 #098209',
  // set the fill settings
  fill: '#43FF43 0.25'
});

We can also add a text label annotation:

annotation
  .label()
  .xAnchor('2020-03-11')
  .valueAnchor(75)
  .anchor('left-top')
  .offsetY(5)
  .padding(6)
  .text('Global Lockdowns — Rise in demand for semiconductor chips')
  .fontColor('#fff')
  .background({
    fill: '#098209 0.75',
    stroke: '0.5 #098209',
    corners: 2
  });

E. Add the MACD Indicator for Technical Analysis

MACD (Moving Average Convergence / Divergence) is like a superhero of technical analysis indicators! It shows the difference between a fast and slow exponential moving average (EMA) of closing prices. To add this indicator to the candlestick chart, we'll create a separate plot using the macd() method, which requires a mapping with the value field in it:

// add a second plot to show macd values
var indicatorPlot = chart.plot(1);
// map the macd values
var macdIndicator = indicatorPlot.macd(mapping);

Don't forget to set the series type for the histogram series and adjust the plot height if needed:

// set the histogram series type
macdIndicator.histogramSeries('area');
macdIndicator
  .histogramSeries().normal().fill('green .3').stroke('green');
macdIndicator
  .histogramSeries().normal().negativeFill('red .3').negativeStroke('red');
// set the second plot's height
indicatorPlot.height('30%');

Note that the MACD indicator must be placed before the date range configuration:

// add a second plot to show macd values
var indicatorPlot = chart.plot(1);
// map the macd values
var macdIndicator = indicatorPlot.macd(mapping);
// set the histogram series
macdIndicator.histogramSeries('area');
macdIndicator
  .histogramSeries().normal().fill('green .3').stroke('green');
macdIndicator
  .histogramSeries().normal().negativeFill('red .3').negativeStroke('red');
// set the second plot's height
indicatorPlot.height('30%');
// set the pre-selected range
chart.selectRange('2020-01-01', '2022-12-31');

Great job! You're now ready to view the final version of the JavaScript candlestick chart on the Playground and make any additional customizations you desire. The entire code, with all the additions made, is listed below. So feel free to experiment and make any further changes you see fit!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Candlestick Chart</title>
    <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-stock.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/themes/dark_glamour.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-ui.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-data-adapter.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-annotations.min.js
"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
  // load data
  anychart.data.loadCsvFile(
'https://gist.githubusercontent.com/awanshrestha/6481638c175e82dc6a91a499a8730057/raw/1791ef1f55f0be268479286284a0452129371003/TSMC.csv',
    function (data) {
      // create a data table on the loaded data
      var dataTable = anychart.data.table();
      dataTable.addData(data);
      // map the loaded data for the candlestick series
      var mapping = dataTable.mapAs({
        open: 1,
        high: 2,
        low: 3,
        close: 4
      });
      // create a stock chart
      var chart = anychart.stock();
      // change the color theme
      anychart.theme('darkGlamour');
      // create the chart plot
      var plot = chart.plot(0);
      // set the grid settings
      plot
        .yGrid(true)
        .xGrid(true)
        .yMinorGrid(true)
        .xMinorGrid(true);
      // create the candlestick series
      var series = plot.candlestick(mapping);
      series.name('TSMC');
      series.legendItem().iconType('rising-falling');
      // create a range picker
      var rangePicker = anychart.ui.rangePicker();
      rangePicker.render(chart);
      // create a range selector
      var rangeSelector = anychart.ui.rangeSelector();
      rangeSelector.render(chart);
      // modify the color of the candlesticks 
      series.fallingFill("#FF0D0D");
      series.fallingStroke("#FF0D0D");
      series.risingFill("#43FF43");
      series.risingStroke("#43FF43");
      // set the event markers
      var eventMarkers = plot.eventMarkers();
      // set the symbol of the event markers
      plot.eventMarkers().format(function() {
        return this.getData("symbol");
      });
      // set the event markers data
      eventMarkers.data([
        { "symbol": 1, date: '2020-03-11', description: 'WHO declares COVID-19 a global pandemic' },
        { "symbol": 2, date: '2020-11-20', description: 'TSMC wins approval from Arizona for $12 billion chip plant' },
        { "symbol": 3, date: '2021-07-12', description: 'TSMC and Foxconn reach deals to buy COVID-19 vaccines for Taiwan' },
        { "symbol": 4, date: '2021-11-09', description: 'TSMC announces to build a specialty technology fab in Japan with Sony' },
        { "symbol": 5, date: '2022-02-24', description: 'Russia-Ukraine war begins' },
        { "symbol": 6, date: '2022-11-15', description: 'Berkshire Hathaway discloses a $4.1 billion stake in TSMC' },
      ]);
      // create an annotation
      var annotation = plot.annotations();
      // create a rectangle
      annotation.rectangle({
        // X - part of the first anchor
        xAnchor: '2020-03-11',
        // Y - part of the first anchor
        valueAnchor: 45,
        // X - part of the second anchor
        secondXAnchor: '2020-12-31',
        // Y - part of the second anchor
        secondValueAnchor: 125,
        // set the stroke settings
        stroke: '3 #098209',
        // set the fill settings
        fill: '#43FF43 0.25'
      });
      // create a text label
      annotation
        .label()
        .xAnchor('2020-03-11')
        .valueAnchor(75)
        .anchor('left-top')
        .offsetY(5)
        .padding(6)
        .text('Global Lockdowns — Rise in demand for semiconductor chips')
        .fontColor('#fff')
        .background({
          fill: '#098209 0.75',
          stroke: '0.5 #098209',
          corners: 2
        });
      // add a second plot to show macd values
      var indicatorPlot = chart.plot(1);
      // map the macd values
      var macdIndicator = indicatorPlot.macd(mapping);
      // set the histogram series
      macdIndicator.histogramSeries('area');
      macdIndicator
        .histogramSeries().normal().fill('green .3').stroke('green');
      macdIndicator
        .histogramSeries().normal().negativeFill('red .3').negativeStroke('red');
      // set the second plot's height
      indicatorPlot.height('30%');
      // set the chart display for the selected date/time range
      chart.selectRange('2020-01-01', '2022-12-31');
      // set the title of the chart
      chart.title('TSMC Stock Chart');
      // set the container id for the chart
      chart.container('container');
      // initiate the chart drawing
      chart.draw();
    }
  );
});
    </script>
  </body>
</html>

Conclusion

Congratulations! You've made it to the end of our candlestick charting journey with JavaScript! It might have been a bit overwhelming at first, but now you're a pro at visualizing stock data like a boss. If you have any questions or need any help, don't hesitate to reach out. Happy charting!

Real-Time Data Processing using AWS

Awan Shrestha — Sat, 04 Mar 2023 09:33:32 +0000

Real-time data is something that is being updated on a near-to-real-time basis. We will be using different AWS services to create a data pipeline that will be used to handle and integrate this real-time data and finally load it into a Redshift Data Warehouse.

We will be considering the following architecture for this scenario.

Google Big Query View

Google Big Query View is a service provided by Google Cloud Platform. We are considering this view as a source for us. We are assuming the data in the view is being updated at a certain rate. This view should contain relational data that will use to perform real-time integration.

AWS Glue Job

We will be using AWS Glue Job as an extraction script for this scenario. For this, the first thing needed is to create a connection to Google Big Query View. Following are the steps to be followed for this purpose:

Subscribe Connector

First, we need to go to connectors in AWS Glue to subscribe to a connector for Google Big Query. The following image shows how we can subscribe to a connector for Google Big Query.

Create a Connection

After subscribing to the connector for Google Big Query view, we can set up a connection by using the JDBC URL and the connection credentials for the View.

For this purpose, we are using a secrets manager to store the JSON credentials and use them as a secret. After setting up the JDBC connection, we can access the Big Query view either using Scala or Pyspark in the Glue Job Script.

This is a sample script of how we can access the data of the view from AWS Glue Job. For this, we need the “parentProject”, “table”, and the “connectionName” we made earlier.

After the data has been extracted, we can convert it into a pyspark dataframe. We can now access the dataframe and put it into an active Kinesis Data Stream.

We are using boto3 to initialize the kinesis data stream. We should have already created a kinesis data stream for this purpose.

AWS Kinesis Data Stream

Kinesis Data Stream can be used to ingest large streams of data in real-time. In this scenario, we are putting records in the kinesis data stream at a certain rate from the Glue Job. We have to make sure that the data stream must be always active in order to ingest data.

Kinesis data stream also uses shards, that allows multiple consumers to consume the records by distributing it.

When record is put into the data stream, it is distributed among the shards that are defined on the basis of the partition key.

Shards are the reason for the rate normalization in the kinesis data stream, that’s why it helps in higher throughput and scalability for data streaming purposes.

Following image shows how a data stream can be created in the AWS console.

AWS Kinesis Firehose

Kinesis Firehose is a delivery stream in the kinesis platform along with kinesis data stream. This is used to get the records from the data stream and deliver it to a destination.

The main purpose of the kinesis Firehose is to ingest the streaming data so that we can focus more on the analytics rather than the data pipeline. It is used to process data that is being produced continuously and needs to be stored and analyzed quickly. In this scenario we are dealing with realtime data, so Firehose would be the best option to process and store the real-time data.

The following image shows a step to make a kinesis Firehose, for this scenario, our source is going to be a kinesis data stream and the destination is going to be the s3 bucket. We can encrypt the data, transform the format of the data and do quick ingestion using this delivery stream.

AWS S3 Bucket

AWS S3 bucket stands for Simple Storage Service. This can be considered as the data lake where we will be storing all the ingested data. Kinesis Firehose will be responsible to deliver the data in the desired format to the s3 bucket. A

nd, on the basis of the event of the file delivery on the s3 bucket, we can trigger a lambda function that will be responsible to load the data into the Redshift tables.

The following image shows the steps of creating a s3 bucket. After the bucket has been created, it can be used to trigger the lambda function and perform further data integration.

Lambda Function

The lambda function is a popular service provided by AWS. It is a serverless, event-based service widely used for computing purposes.

In this scenario, we are using the lambda function to get the data that was put in s3 bucket and load it into Redshift tables. The following image shows a step to make a lambda function.

Create a connection to AWS Redshift

We can use a Python environment for this purpose and create a connection to AWS Redshift. The following python script shows a way to create a connection to AWS Redshift. After a connection has been created, we can use this script to execute by sending a SQL statement to this script and cluster information as constants.

Load data from S3 Bucket to Redshift Tables

After a connection has been created, using the event that has triggered the Lambda function, we can access the file and load it to any of the Redshift Tables. The following Copy command provides us the facility to load the data from the s3 bucket into a Redshift Table. A proper IAM role is needed for this purpose to load the data into the Redshift table.

AWS Redshift

AWS Redshift is a Data Warehouse service provided by AWS. Redshift is a petabyte scaled Data Warehouse so, it can store a huge amount of relational data. After the data has been inserted into Redshift Tables, we can process it through the lambda function for further transformation. We can create a cluster for this purpose and create multiple schemas for this like STG, TMP, and TGT. After data has been loaded in the desired destination, views can be created on top of the target tables and then metrics out of it.

Finally using tools like Tableau, we can create interactive reports.

Host React App with AWS Amplify and GitHub

Awan Shrestha — Fri, 24 Feb 2023 12:14:26 +0000

Introduction

AWS Amplify consists of a set of tools and services that helps developers to build and deploy web and mobile applications more easily and quickly.

AWS Amplify provides various pre-built tools and services to help developers create applications faster and with less effort.

These tools and services can help with things like authentication, storage, hosting, and notifications so that developers can focus on building their application's unique features and functions. For this walkthrough, we are gonna focus on integrating Amplify with GitHub.

Amplify's open-source framework consists of libraries, UI components, and a command line interface (CLI) to build an app backend and integrate it with your iOS, Android, Web, and React Native apps, etc.

Pre-Requisites

React application to GitHub:
Ensure that your React application is pushed to a GitHub repository. You can do this by initializing a new Git repository in your React application directory, committing your changes, and pushing them to GitHub.

AWS Account:
The AWS Free Tier provides customers the ability to explore and try out AWS services free of charge up to specified limits for each service.

Step 1: Navigate to AWS Amplify on AWS Console

Step 2: Select Amplify Hosting

We have two options. Either use Amplify Studio or go with Amplify Hosting. As we have a React app so we are going to select the “Get Started” button under Amplify Hosting.

Step 3: Select GitHub as your source provider

We have several options to specify what is our code source. You can connect your source code from a Git repository or upload files to host a web application in minutes. Amplify Hosting allows you to build, deploy, and host your web application easily and efficiently.

You can use GitHub, Bitbucket, GitLab, AWS CodeCommit, or deploy without any git provider.

Step 4: Authorize Amplify to Access your GitHub repositories

You need to authorize Amplify to access your GitHub repositories. This allows Amplify to build and deploy your web application directly from your GitHub repository.

Step 5: Add Repository and Branch

Under “Recently updated repositories” you choose the repository that has your updated code. Once selected there will be a list of branches of that repository. Select the branch you want to deploy.

Step 6: Define the Application name in the Build Setting

Once in Build settings, you can specify the application name for AWS Amplify. Usually, Amplify detects default build settings but in case you have different configurations, you can customize it through the edit button.

Once completed review the settings and select deploy to deploy the application finally.

Step 7: Visit the Application Link by AWS Amplify

The process of provisioning, building, and deployment will take a few minutes. Amplify Hosting will automatically handle the deployment process for you. View your deployed application once the deployment is complete, you can view your deployed application by clicking the endpoint link.

Conclusion

In this tutorial, we showed you how to deploy a React application to the AWS Amplify Console using GitHub. With Amplify, you can easily deploy your React applications to the web with just a few clicks. With its simple and intuitive user interface, Amplify takes care of all the heavy lifting, allowing you to focus on developing your application. We hope this tutorial has been helpful, and wish you the best of luck with your application deployment!

Building Robust User Sign-Up with AWS Cognito and React

Awan Shrestha — Sat, 18 Feb 2023 13:13:15 +0000

Introduction

Cognito by Amazon is a solution for authentication, authorization, and user management for mobile and web applications.

The main components of AWS Cognito are:

User Pools
Identity Pools

User Pools

A user pool is a user directory in Amazon Cognito. It stores user profile information, such as username, email, and phone number. You can get sign-up, and sign-in features for your application, as well as security features to handle passwords.

Identity Pools

An identity pool is a store of user identity information that is returned from federated identity providers, such as Amazon Cognito User Pools or other identity providers supported by Amazon Cognito. An identity pool provides AWS credentials to access other AWS services. "Federated identity" means users can obtain temporary, limited-privilege AWS credentials to access AWS services, such as Amazon S3 or Amazon DynamoDB.

For this tutorial, we are going to implement User Pools and enable users to Sign Up and Sign In.

Setting Up User Pool for Amazon Cognito

Navigate to Amazon Cognito

To begin setting up AWS Cognito, log in to the AWS Management Console and navigate to the Amazon Cognito service. From here, you will be able to create and manage User Pools and Identity Pools for your application.

Step 1: Configure Sign-in Experience

a. Authentication Providers
You will have the option to enable different authentication providers, such as email, phone number, and social identity providers like Facebook and Google. Additionally, you can customize the look and feel of the sign-in page by modifying the branding and styling options.

b. Cognito user pool sign-in options
You can choose one or multiple options, such as username, email, and phone number. If you only select one attribute or a username with another attribute, users will be able to sign in using all the selected options. If you only choose a phone number and email, users will be prompted to choose one of these two sign-in options during the sign-up process.

Step 2: Configure security requirements

a. Create a Password Policy
You can define the length and complexity requirements for the passwords used by your users. You can specify the minimum length, the number of required uppercase and lowercase characters, and other constraints such as the requirement for numbers, symbols, or non-alphabetic characters.

b. Multi-Factor Authentication (MFA)
You can enhance the security of your application by enabling multi-factor authentication (MFA) during the user sign-in process. MFA requires users to provide an additional form of authentication beyond their password, such as a code sent via text message or generated by an authenticator app. Note that the MFA settings you configure will apply to all app clients associated with your User Pool. For now, we are gonna disable MFA.

c. Configure User Account Recovery
You can set up how users will recover their accounts in the event that they forget their passwords. It is recommended to enable self-service account recovery, as it allows users to reset their own passwords in a convenient manner. Another choice is how your User Pool will deliver messages to users when they request an account recovery code. You can select either SMS messages (charged separately by Amazon SNS) or email messages (charged separately by Amazon SES).

Step 3: Configure the sign-up experience

Self-Service Sign-Up allows users to sign up for an account on their own, without the need for administrator intervention. Attribute Verification verifies the validity of the information provided by users during the sign-up process, such as their email address or phone number.

a. Specify Required Attributes
You can select the attributes that are required when a new user is created in your User Pool. These are the minimum pieces of information that a user must provide in order to sign up for an account. By default, Cognito assigns all users a set of standard attributes based on the OpenID Connect (OIDC) standard, but you can add additional attributes as needed.

Step 4: Configure message delivery

In this step, you can set up how Amazon Cognito will send messages to your app users. Cognito uses Amazon Simple Email Service (SES) to send email messages and Amazon Simple Notification Service (SNS) to send SMS messages.

You have the option to use Cognito's default email address as a temporary start for development, which allows you to send up to 50 emails per day. Alternatively, you can set your own reply-to email address to have greater control over the appearance and branding of the emails sent from your app.

Note: If you set an invalid reply-to address, there is a risk of sending restrictions being imposed on your account. It is important to ensure that the reply-to address you set is valid and properly configured.

Step 5: Integrate your app

You will set up app integration for your Amazon Cognito User Pool. Choose a name that is descriptive and easily recognizable to you and your team, so that it is easy to find and manage your user pool.

Unless you want to use Cognito's Hosted UI and OAuth 2.0 server for user sign-up and sign-in flows, do not check “Use the Cognito Hosted UI”.

The app client represents a single platform or app that has permission to call unauthenticated API operations in your user pool. By configuring an app client, you are specifying the settings that determine how the app will interact with Amazon Cognito.

A client secret is used by the server-side component of an app to authorize API requests. By choosing to use a client secret, you can prevent unauthorized third parties from impersonating your client.

Step 6: Finish creating User Pool

In this final step, you will review all the selections you have made for your Amazon Cognito User Pool and configure any necessary settings. Once you have reviewed your selections and are satisfied, you can choose the "Create user pool" button to confirm and create your user pool.

Step 7: Copy the User Pool ID

Once your Amazon Cognito User Pool is created, you will be able to access its details page, where you can find the User Pool ID. This ID is a unique identifier for your user pool, and you will need it to integrate your application with the user pool. To copy the User Pool ID, simply select it and copy it to your notepad.

Step 9: Copy Client ID

In the details page of your Amazon Cognito User Pool, you will also find the Client ID for each of your app clients. The Client ID is a unique identifier for your app client, and you will need it to integrate your application with the user pool. To copy the Client ID, simply select it and copy it to your notepad.

Integration with React project

To integrate Amazon Cognito with a React project using the amazon-cognito-identity-js library, you can follow these steps:

Step 1

Install the library by running npm install amazon-cognito-identity-js in your project directory.

Step 2

Import the necessary modules in your React component files, such as CognitoUserPool, CognitoUserAttribute, and AuthenticationDetails.



import { CognitoUserPool } from 'amazon-cognito-identity-js';

Step 3

Create an instance of the CognitoUserPool class, passing in your user pool id and client id.



const poolData = {

    UserPoolId: 'Your User Pool ID',

    ClientId: 'Your Client ID',

  };

const UserPool = new CognitoUserPool(poolData);

Step 4

Call the sign up method on the CognitoUserPool instance, passing in the desired email, username, password, name, and gender.



UserPool.signUp(

      email,

      password,

      [

        { Name: 'name', Value: name },

        { Name: 'preferred_username', Value: username },

        { Name: 'gender', Value: gender },

      ],

      null,

      (err, data) => {

        if (err) console.error(err);

        console.log(data);

      }

    );

Step 5

Integrate the code with your app or you can just clone the code from the repo:
Client Git repo:

https://github.com/awanshrestha/aws-cognito-client

By cloning the accompanying GitHub repository, you will have successfully set up an AWS Cognito User Pool and integrated it with a React app. The repository is fully functional and can be run locally with the correct configuration details.

Conclusion

In conclusion, setting up an AWS Cognito User Pool and integrating it with a React app is a great way to add user authentication to your application. With this setup, you can ensure that your app users' data is secure and provide a convenient way for users to sign up for your app.

So, whether you're a seasoned developer or just getting started, AWS Cognito is definitely worth considering for your next project.

MLH Fellowship – The Amazing Experience of Becoming An MLH Fellow

Awan Shrestha — Sun, 24 Oct 2021 15:18:52 +0000

Last three months at MLH Fellowship, I worked on Facebook WebXR samples project, developing immersive VR experiences on web using WebXR.

I worked with my teammate Schezeen Fazulbhoy on this project under the mentorship of our mentor and the project maintainer Rik Cabanier from Facebook.

MLH Fellowship has been an amazing experience, where I got to learn a lot, meet new people, collaborate and work on some awesome projects. In this blog, I will share my journey about MLH Fellowship.

MLH Fellowship

“The MLH Fellowship is a remote internship alternative for aspiring technologists. Spend 12 weeks building your skills by collaborating on real-world projects.”

In MLH Fellowship, students get to work on different latest technologies. They are matched with the projects as per the skillsets and interest. Its a global platform where students from across the globe collaborate and contribute.

In MLH Fellowship, fellows are put into small groups ‘pods’. The fellows collaborate to contribute to assigned projects under mentorship of professional software engineers.

And apart from the coding and project aside, there are a ton of skills building, team building and fun activities and workshops.

Learn more about MLH Fellowship here.

The Inception

So, it was in late 2020, I came to know about MLH Fellowship. I found about it on Facebook and it sounded like a great program. And, on learning more about it from a YouTube video by Kunal Kushwaha, I really wanted to be a part of this program.

As soon as my exams finished in December, I started looking for the fellowship. The application form required basic information, a code project sample and three question essays.

About the project, I submitted a group project specifying my role in the project. The project was in JavaScript. And as for the questions, I answered those honestly about my interest, learnings and more on the project.

The Process

After submitting my application, I was eagerly waiting for the result.

My initial application had passed, and I received the email regarding that. However, I had submitted my application very close to deadline. And that had its effect.

In short, my application had passed, and I also gave my Initial Interview, but the class for Spring Batch was already full. So, my application was deferred for the next batch.

Everything happens for a reason

And that was the very very good thing that happened to me.

It was because in March 2021, I got to be in the World Finals of Microsoft Imagine Cup 2021.
Imagine Cup was also a life changing experience.

More on My Journey to the World Finals – Imagine Cup 2021

Had I been in the Fellowship Spring Batch, which would have started in February, it would have been quite difficult to manage time for both.

Next Steps

My Initial Interview had been with Sashrika Kaur who was very friendly and the interview had gone smooth.

So, after my Initial Interview, I had my Technical Interview. My technical interview was with Kunal Kushwaha. It would be around the project code sample I had submitted, and technologies and tools I had mentioned in the application.

Both the interview went very good and smooth. The people form MLH are very nice and friendly, and that makes the interview process very smooth and easy.

The Results

I had a feeling that my interviews had gone good and was expecting to get accepted.

Around late May, I received the email, “Congratulations, you’re going to be an MLH Fellow! 🎉”.

I was very happy that finally, I was going to be an MLH Fellow.

MLH Fellowship – The Journey Starts

The journey starts, sign ups in different platforms and getting to know the fellowship system.

I was an Open Source Fellow and I was in Pod 3.0.2. Karan Sheth and Alex Wilkes were our pod leaders. And in my pod were Abishek, Akashdeep, Ben, Daniela, Howard, Jake, John, Khairo, Schezeen, Stuti and me.

We were from different parts of the world. And this diversity is the beauty of programs like MLH Fellowship, where we get to meet people from different culture and background. This helps to get newer perspectives and learn new things.

We named our pod Bashful Boolions, and here is our pod logo designed by Ben.

The first week was about getting to know the MLH Fellowship better and getting to know the team members.

Each fellow had to do an 1-on-1 meeting with other fellows in the pod. This was a great way get to know each other better.

Then, we also had the Orientation Hackathon. There were groups formed of 3-4 members. There were many amazing projects presented in the hackathon.

Our team created Koding Buddy, which is a platform providing a collaborative working space in the form of a code-editor and compiler along side a video chat window to help people connect in a more fruitful manner.

The second week started with assignment of projects and this summer I was going to be contributing to the WebXR Samples project.

The Project – WebXR Samples

In MLH Fellowship, I worked on Facebook / WebXR Samples projects along with my pod mate Schezeen Fazulbhoy. We collaboratively worked on the project under the guidance of our project maintainer Rik Cabanier.

Hello WebXR

We were introduced to the project by our pod leaders Alex and Karan, and we got to learn more about it from our maintainer Rik.

Before we started on the project, we had meetings with Rik who explained about the project and the issues that we could be working on.

We would be working on the existing code base by previous fellows Soham Parekh and Zhixiang Teoh. We had a call with both of them and got insights about the project, reference implementations and resources to learn about WebXR.

Previous fellows were mainly focused on WebXR Layers. As per the instructions from Rik, we mainly focused on creating and implementing Hand Interactions and Gestures with WebXR Hand Inputs API.

Getting Started

AR/VR side of development is a something which I find interesting but had never tried before the fellowship. It was amazing to know that using my existing knowledge of JavaScript, I could build immersive experiences for the web.

I had some experiences with 3D Graphics, but I was new to XR, WebXR and three.js. So, initially I learnt about three.js, creating 3D environments and objects with it, and leveraging it to access the WebXR API.

Then I learnt about WebXR and creating the immersive VR experiences for web with it. After that, I started working on the project, first with basic VR scenes and then moving on to the hand gestures and interactions.

We used the WebXR browser Emulator until the time our Oculus Quest 2 had arrived.

The Implementation – Under the Hood

The WebXR Device API gives access to hand-tracking XR systems primarily exposing the poses of hand skeleton joints. It can be used to render hand models in VR scenes as well as performing gesture detection with hands.

Accessing the API, we performed calculations on the positions of the hand skeleton joints in the VR world. Then, we created some mathematical functions to detect the hand gestures and used three.js 3D rendering library to render the hands and other objects in the VR scene.

By calculating distances amongst the hand joints and the objects, we detected simple hand gestures as pinching, touching and selecting.

Finally, the Project

By the implementation of above mentioned hand gestures, we built hand interaction samples.

Some of the samples we built are:

Drawing in space with fingers
Creating and erasing three.js objects
Grabbing, transferring and changing properties the three.js objects
Using two hands interaction to resize the objects

Apart from that, we worked on some interesting features like Spiderman pose and Thanos snap pose.

In Spiderman pose, one would throw the spider web with hands when we give the Spiderman go-web-go pose.

In Thanos example, half of the objects in scene would be deleted with a snap.

We faced some challenges setting up the project and development environment with the Oculus.

So, keeping that in regards, we created detailed documentation on project and oculus development environment setup. So that, future contributors can get started with the project quickly and easily.

Takeaways

WebXR is very exciting but it might be intimidating at first.

Once we start to build stuffs, it’s really fascinating to see how the project just comes to life.

As a child I used to do a lot of paper crafts. And coming to this day, creativity and a sense of building something is one of the best things I love about software engineering.

And the fact that, we could give our creative inputs in the project, and how we could actually be inside of the project once we put on the Oculus and press that ‘Enter VR’ button, is something really exciting.

In the past three months, I have taken a new journey to the world of AR/VR and learnt and build some awesome stuffs that I would not have imagined before the fellowship.

Apart from technical skills, I got to know and work with Schezeen, who have been an awesome teammate. I am grateful to have had Rik as our maintainer whose insights were highly valuable and encouraging for us.

This project has definitely given me the confidence to tackle challenges in my future ventures and contributing to other open source projects.

Knowing that the samples we have built will serve as reference for future implementations is one of the best takeaways.

Apart from the Project

Apart from the project, there were many other activities going on in the fellowship. As we have already talked about the hackathon. Then there were daily events or workshops by MLH for different different skills development.

The pod meetings and weekly retrospections where we would share about progresses, shoutouts or any blockers were really helpful to keep oneself on track.

There were game nights, retrospections, capturing the flag, and many others which were fun and were a great opportunity to learn.

Show and Tells in MLH Fellowship

Then there were the show and tells. I did my show and tell on paper craft and some basic robotics stuff.

I created a paper toy car model, and connected it with ESP8266 and some motors. The system (car) would be controlled from a webpage remote that I deployed on Azure. Finally, I let my podmates remotely control the car.

And all this connections, paper crafts, and coding and deploying stuffs I did live in show and tell. It was a challenge for myself as well, and it went great.

Around the End of the MLH Fellowship

I had a great time with my pod this summer. Here is one from our last pod meeting.

And around at the end of the fellowship, we had demo days, where every fellows would be giving the demo of their projects or works.

Me and Schezeen prepared for it and we shared about WebXR, Our Project, the Community, How it works, Challenges, Learnings and Takaways.

And at last, we shared our project demo live by sharing the Oculus Screen casting. The demo went very good.

Finally at the end of August, we had our graduation. And, I graduated from the MLH Fellowship Batch 3.

And,

MLH Fellowship has been a great experience. Working on amazing projects while collaborating with amazing teammates, learning from our awesome project maintainer, its been an amazing experience.

I got to work on WebXR Samples project. The project itself was awesome and the fact that we were able to give our creative inputs to it was a great thing. I got to learn about XR, 3D Graphics, three.js and WebXR Library. Also, I learnt about the power of pair programming sessions. Moreover, I also got to work with Facebook Oculus Quest 2.

I got an amazing pod with awesome pod leaders and pod mates. Everyone was so much helpful and we got to learn so much from each other, via show and tells and one on ones. Not only about the technical stuffs I also got to learn more about the cultures, geographies of my podmates.

From the initial hackathon, where we got to learn about good GitHub practices and many more, to our demo day, where I showed my Thanos Snap hand interactions with WebXR project saying, ‘This one is INEVITABLE’, every single experience in MLH has been amazing.

MLH Fellowship is one of the best thing that has happened to me.

The MLH Chapter has added strong skillsets, amazing talented friends, and tons of memories to cherish for the future. Its truly been a lifetime experience.

Journey to the World Finals – Imagine Cup 2021

Awan Shrestha — Wed, 15 Sep 2021 09:21:31 +0000

This blog is about our journey to the World Finals of Imagine Cup 2021.

Our team “Virtual Radiologist” ( Ashish Adhikari, Sabil Shrestha, Sansrit Paudel and me ) were selected as the World Finalists in Imagine Cup 2021. Competing in one of the greatest student competitions, along with amazing students from across the globe, it was really a dream come true.

Imagine Cup

Imagine Cup is an annual competition sponsored and hosted by Microsoft which brings together student worldwide to help resolve some of the world’s toughest challenges. It is considered one of the top student competitions and awards related to technology and software.

Out of the tens of thousands of students from 163 countries who registered for the 2021 Imagine Cup, our team reached the World Finals and we were the Earth Category Runner up in the Imagine Cup 2021.

Imagine Cup 2021 World Finals happened virtually.

It was a lifetime opportunity for us to represent our country Nepal at the World Finals.

And in this blog, I will share the experience of this incredible journey. So, let’s start from the start.

The Journey

Talking about my journey to Imagine Cup, its incomplete without stating my journey of Microsoft Learn Student Ambassador program.

The start point for both was same.

The Inception

It was November 2, 2019, Microsoft Imagine Cup Bootcamp Nepal was being organized at Softwarica College. A few days earlier, Rashika, who is a Microsoft Learn Student Ambassador from our university had invited me. Hoping to learn something, I was there, and this was the point of inception.

That day I learnt about the Imagine Cup and the Microsoft Learn Student Ambassadors program, then known as Microsoft Student Partners. And I was very inspired form the sessions of previous Imagine Cup winners, finalists from Nepal, MVPs and MSPs.

Microsoft Learn Student Ambassador

The idea of becoming the Force for Good and helping to empower other students with technology was very exciting for me.

After the event, on our way back from Softwarica College to Ratnapark Bus Park, I was having a talk with Aashish Subedi about the event.

He asked me if I would apply for the Imagine Cup. At that time, I didn’t had a good project or an idea. So, I told him that, I was not sure for this year, probably I would try next year, but one thing was for sure; I would be applying to the Microsoft Student Partners program.

November 30, I applied for the program. January 9, 2020, I got an email: 'Welcome to the Microsoft Student Partners program'.

For the rest of 2020, I was very active in the community. I participated, spoke at , hosted, organized, leaded a lot of events and in the process, learnt a lot, and made friends from around the world.

All this knowledge of different technical skills as well as communication, management and presentation helped a lot for and in the Imagine Cup.

Know more about the program: https://studentambassadors.microsoft.com/

The Submission

January 2021, and we conducted a similar kind of Bootcamp Event for the Imagine Cup 2021, to help other students know about Imagine Cup.

The difference from last year was, I was on the other side, the organizing side for this bootcamp.

And, we had a team and we had the project.

The Project

Our project Pico Sat is a miniature version of an environmental satellite, which provides you information about your environment. It has microcontrollers with different sensors which collects different environmental parameters and transfer them via internet or radio waves. And the information is stored, analyzed and visualized in graphs and charts.

More about the project here: Pico Sat

The competition required us to submit the proposal and the software along with software instructions.

We prepared all those and submitted.

Imagine Cup 2021 World Finals

March 2, 2021, I was at the university. Early morning I woke up, and picked up my phone to call my dad and wish him a Happy Birthday.

I saw there were two emails arrived in the night. One of them was a very good news. I can’t share it here for some reasons.

World Finalists

And the second one stopped my nervous system for a time. It read:

'Congratulations Team Virtual Radiologist – you are a 2021 Imagine Cup World Finalist!'

I couldn’t believe it for a few minutes, and while still in shock, called and wished my dad and told my family about it and explained, how much of a big thing it was.

Then I called my teammates, who also became super excited.

The email also had a many instructions. We had to fill up some surveys, do some sign ups and a lot more information on it.

Finishing the tasks, I returned home that day from university and had a great time with my family.

The Preparations

3rd of March, we had our All-Competitor Briefing. We were briefed about the competition format, important dates and some other information.

Now some dates like 3 Minute Pitch and Round 1 dates and times were for us to choose from given slots while, there were some other fixed dates events for our help and guidance.

We also got introduced to the Imagine Cup Team as well:

Keith Loeber, Imagine Cup Director
Pablo Veramendi, Global Competition Director
Cristina Brendicke, Comms and PR Manager
Gabrielle Wilson, Social Media Lead
Jalen McGee, Student Audience Program Manager
Jeff Clausen, Competition Lead
Karin Weltman, Registration and Logistics Lead
Joan Hoshino, Event Owner

It was a wonderful moment meeting with all these amazing people. Really thankful for creating this amazing platform for students.

We also received 1000$ Azure credits for enhancing our project.

We also got opportunity to meet other teams in the World Finals. There were 39 teams from across the world under categories:

Earth
Education
Healthcare
Lifestyle

Here we were not only competing with the best minds from their classes, but best minds from across the world. We were so much happy to be a part of this photo, this experience, along with these amazing and inspiring people from across the globe.

Helps and Recognitions

We started sharing it on our socials and everybody were very happy about it. I was very proud to be representing Nepal in this amazing platform.

We are very much thankful to our Department of Computer Science and Engineering, Kathmandu University and our HoD Bal Krishna Bal sir for managing space and resources for our team to collaborate and work on the project.

The MVP from Nepal Mr. Pradeep Kandel helped us along the journey with all guidance and resources. Pradeep dai and Nishan dai set up a meeting for us along with other domain expert, which was very helpful in marketing aspect of our project. Our visiting faculty at KU, Raunak Maskay sir also helped us with guidance.

The 3 Minute Pitch

We needed to record a 3 minute project pitch, that would later be shared with judges to familiarize them with the project.

Our Pitch was on March 9. Sabil from out group gave the pitch, which went good.

Our Team before the 2 Minute Pitch

Other Activities

Throughout the month of March there were numerous events/ activities being organized by the Imagine Cup Team for us to learn and prepare our best for the event.

Now, lets not go to all date details. There were events as meeting with Judge Panels, previous Imagine Cup World Finalists, sessions for helping with presentations, Q&As, etc. Those were all very very helpful and we got to meet with some really inspiring personalities.

As all events were happening at morning Pacific time, it was around night time for us, every event.

On March 23, we got a call from UPS. Microsoft had sent us the Imagine Cup Swags.

Here is the unboxing.

Meanwhile, we also took some group and project photos and updated our team profile in the Imagine Cup portal.

Team Selfie – Virtual Radiologist

Project Enhancement

Throughout all these, we had been constantly working to enhance our project. For weeks we collaborated at our university work space and worked on the project.

We worked on the hardware and added new way of data transfer. We incorporated the Azure IoT Hub and other Azure services and enhanced our project.

Our final project was something like:

Imagine Cup Round 1

Finally it was March 25, Round 1 of Imagine Cup 2021.

Round 1 was more of a showcase demo, where we would demonstrate our solutions and answer the judges questions. Round 1 was happening on multiple days slots, ours was on March 25.

Each team would have 8 minutes time on total, only top 3 teams from each category, would move on to Round 2.

Our judges were:

Ayca Bas
Chris Noring
Henk Boelman
Lee Stott
Ruth Yakabu

We were at our university work space, from where we gave the demo. I gave the pitch and software demo and Sansrit gave the hardware demo.

Our Q&A went good as well.

I think the last question was the one, that made the difference. We were asked why one would buy our project and we answered, 'Every Person in this planet should have right to know the quality of air he/she is breathing and…' and the time bell ring, marking the end of our 8 minute time.

We said that answer on flow and till this date, I am not sure what I would say after 'and' hadn’t the bell rung.

After the Round 1, it was already pretty late night for us. So, we took a group photo, and I went back to my room and slept.

Into the Next Phase

Next morning, I was very tired and woke up late to the phone call from Sansrit. He told that we were in. We were in the Top 12 teams. (Top 3 teams in Earth Category)

There was an email regarding that from Imagine Cup.

Meet the 2021 Imagine Cup Top 12 teams

Finally after weeks, we went to attend the university classes that day.

On March 27, we had our Round 2 competition briefing. Round 2 was happening on March 31.

Also, a mentor had been assigned to each group, for helping with the Round 2 pitch. We were grateful to have Henk Boelman as our mentor. Henk is a Cloud Advocate specializing in Artificial intelligence and Azure with a background in application development.

On the following days, we had a couple of sessions with Henk, where he guided us with best practices to follow during the pitch and ideas to make the best out of demo.

We also had mentoring sessions with Rupesh Krishna Shrestha sir, Deependra Bajracharya sir and previous finalists.

Imagine Cup Round 2

And finally it was March 31, the Round 2 day.

Round 2 was a pitch and demo session, followed by a group Q&A. Each group would give presentation and demo for maximum 3 minutes and there would be a group Question and Answer session by judges after that.

The judges for Round 2 were:

Kai Frazier
Jason Goldberg
Keira Havens
Neil Sebire
Amanda Silver
Devendra Singh

For the past few days we had been working on our slides, pitch and backup demo video. Also, for the past few days, Kathmandu had been in its worst polluted environment.

Hazardous haze blankets valley – The Himalayan Times

As it matched perfectly with our theme and project, we decided to start our slide with the same issue.

That day it rained heavily, a lot. A few hours before the event, we went to canteen and had dinner. Then we came back to our work space and all set for the Round 2.

Few Moment To Go…

And just a few moment before the event, the electricity power went off. It was very unusual in the university, even the backup power was not available, probably because of the weather.

We waited for a few minutes, hoping it would come back or the backup power would start, but they didn’t. And we had to make quick decisions and quick changes.

We made some changes, setup lights with torches. What I was amazed about myself that day was the perseverance and calmness I had developed. Had I been put into same situation more than a year before, I would have frozen out of nervousness. And that day, despite everything, I was doing my best, and so were my teammates.

That moment, I was really thankful for every events, challenges, that I were part of over the last year, because those were the things which taught me all these.

Imagine Cup Round 2 Starts

The event started. Pablo with “Virtual Drum Roll Please!!!”, shared the outline. Our turn was in second last.

One by one, teams started giving the presentation and demo. Somewhere in the middle, we realized, the laptop that we were going to use for the main presentation and demo might run out of battery, so we switched everything and set up in another laptop.

And the electricity came back!

And, just a moment before our presentation, it went off again. Thankfully, we had everything set up. I gave the presentation pitch and Sansrit gave the hardware demo.

It went very good. The electricity issue didn’t have any impact on our performance. Only apart from that, I looked like one pitching from a decades old camera due to my camera lighting, as I only had one torch light focused there.

Me there in second row, first one.

After that we had our Q&A round, which went good as well.

And around half an hours later, the results were announced. Team ProTag from New Zealand became the winning team in the Earth Category. ProTag is a smart ear tag for livestock that can detect the early onset of illness in real-time; lowering costs and increasing animal welfare along with farmers peace of mind.

We ended up as Earth Category Runner Ups, and here came the end to our journey of Imagine Cup World Finals. It had already been midnight time by then, so I went back from university and slept.

And,

The four winning teams from each category competed in the World Championship, where Team REWABA from Kenya won the Imagine Cup 2021. The project was an IoT-based infant monitoring solution, which remotely analyzes infant parameters during post-natal screening and serves as an early warning intervention system.

We being Runner Ups, also won Trophies and some cash prizes.

Here is the Trophy Unboxing.

So, this was our journey, four students from Kathmandu University, Nepal to the World Finals of Microsoft Imagine Cup 2021.

For me personally, it has been a lifetime experience. Yes, there is this thing that Imagine Cup 2021 happened virtually. It would have been an amazing experience to fly to Seattle for World Finals. But, even virtually it has been a once in a lifetime experience.

These were some of the best memories ever. I got to learn and explore so much, and meet amazing talented people from across the world. And the best part was everybody was using innovation for something good.

Imagine Cup has been a dream come true.

#DreamIt #BuildIt #LiveIt

ImagineCup2021

My Other Journeys