DEV Community: Sharjeel Yunus

Implementing Stripe in Ensemble: A Technical Deep Dive

Sharjeel Yunus — Mon, 18 Aug 2025 17:04:56 +0000

Integrating subscriptions with Stripe is one of those tasks that looks straightforward on paper but quickly becomes complex in practice. Between ephemeral keys, client secrets, webhooks, and subscription lifecycles, it’s easy to get lost.

In this post, I’ll walk through the technical design of how Ensemble integrates Stripe for mobile apps, why we chose a frontend-only abstraction, and how you can set up a backend to complete the flow.

⚙️ The Design Philosophy

Ensemble is a low-code platform, but we made an intentional design decision:

Frontend logic (initialize Stripe, show Payment Sheet) is built in.
Backend logic (create Payment Intents, manage subscriptions, handle webhooks) is left to the developer.

Why? Because billing systems vary wildly. Some apps require a single plan, while others necessitate multi-tier pricing, trials, discounts, or usage-based billing. Offloading this to developers’ backends gives flexibility without locking you in.

🔄 The Flow

Here’s how the Stripe integration works in Ensemble:

User taps Subscribe in your app.
Ensemble initializes Stripe with your publishable key.
Your backend creates a Payment Intent and returns a clientSecret.
Ensemble presents the Payment Sheet with that clientSecret.
Stripe processes the payment.

Your backend listens to webhooks to update subscription state.

📐 Architecture Diagram

📝 Ensemble Config Example

First, initialize Stripe:

Button:
  label: Initialize Stripe
  onTap:
    initializeStripe:
      publishableKey: "pk_test_your_publishable_key_here"
      merchantIdentifier: "merchant.com.yourapp"
      onSuccess:
        showToast:
          message: "Stripe initialized successfully"
      onError:
        showToast:
          message: "Failed to initialize Stripe"

Then, show the Payment Sheet using the clientSecret from your backend:

initializeStripe:
  publishableKey: "pk_test_your_publishable_key_here"
  merchantIdentifier: "merchant.com.yourapp"
  onSuccess:
    showPaymentSheet:
      clientSecret: ${paymentIntentClientSecret}
      configuration:
        merchantDisplayName: "My Store"
        style: "system"
        primaryButtonLabel: "Pay $29.99"
      onSuccess:
        showToast:
          message: "Payment successful!"
      onError:
        showToast:
          message: "Payment failed"
  onError:
    showToast:
      message: "Failed to initialize payment system"

🖥 Backend Implementation (Node.js Example)

Your backend needs to create a Payment Intent and return the clientSecret. Here’s a minimal Express setup:

import express from "express";
import Stripe from "stripe";

const app = express();
const stripe = new Stripe("sk_test_your_secret_key_here");

app.post("/create-payment-intent", async (req, res) => {
  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: 2999, // $29.99
      currency: "usd",
      automatic_payment_methods: { enabled: true },
    });

    res.json({ clientSecret: paymentIntent.client_secret });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(4242, () => console.log("Server running on port 4242"));

🧩 Webhooks: The Source of Truth

One of the most important design lessons: don’t rely solely on the client for subscription state.

Stripe webhooks tell you when:

A payment succeeds or fails.
A subscription renews or cancels.
A trial starts or ends.

This means your backend should update your database on every webhook event and expose that state back to your app. Ensemble can then reflect the user’s status (trial, active, canceled).

🛠 Lessons Learned

While building and testing this integration, here are a few takeaways:

Ephemeral keys are tricky: They expire quickly, so your backend must issue fresh client secrets reliably.
Testing saves time: The Stripe CLI is a must-have for simulating webhook events.
Graceful error handling matters: Expired cards, failed renewals, and canceled subscriptions are real-world cases you need to handle.
Separation of concerns: Keeping the frontend in Ensemble and backend in your stack of choice made the integration more flexible and maintainable.

✅ Wrapping Up

Stripe subscription management isn’t easy, but with Ensemble, the frontend flow becomes dead simple: initialize Stripe and show the Payment Sheet.

The complexity shifts to your backend, where you create Payment Intents and manage subscription state via webhooks. This design provides developers with flexibility while eliminating 80% of the boilerplate typically required to integrate Stripe.

If you’re building a subscription-based app, I’d love to hear how you’re handling Stripe integration — drop your thoughts in the comments!

[Boost]

Sharjeel Yunus — Thu, 27 Feb 2025 21:43:43 +0000

Understanding Localhost: What Happens When You Type It?

Sharjeel Yunus — Wed, 26 Feb 2025 17:30:21 +0000

Whether you’re a frontend developer spinning up a React app or a backend engineer debugging an API, localhost is where your journey begins. Type npm run dev, and your browser opens http://localhost:3000. But what actually happens when you type "localhost"? Let’s peel back the layers of this networking cornerstone.

What is Localhost?

Localhost isn’t just tech jargon—it’s a reserved domain name that always points back to your own machine. Think of it as your computer’s self-address. When John types localhost on his laptop and Jane does the same on her desktop, they’re each accessing their own devices, with zero overlap.

How Localhost Works: DNS vs. Loopback

To understand localhost, let’s contrast it with a typical web request:

Typing "google.com":
- Your browser queries DNS servers to resolve the domain to an IP (e.g., 142.250.189.206).
- The request routes through the internet to Google’s servers.
Typing "localhost":
- No DNS involved! Your OS immediately maps localhost to the loopback IP 127.0.0.1.
- The request never leaves your machine. Instead, it’s processed internally via the loopback interface, a virtual network card for self-communication.

127.0.0.1: The Loopback Address Explained

The loopback address (127.0.0.1) is a special IP reserved for self-referential traffic. When your app listens on 127.0.0.1:3000, it’s saying, “I’ll only accept requests from this machine.”

Where is Localhost Defined?

Linux/macOS: /etc/hosts
Windows: C:\Windows\System32\drivers\etc\hosts

This file contains the line:

127.0.0.1    localhost

This hardcodes the mapping, overriding DNS. Fun fact: The entire 127.x.x.x range is reserved for loopback, but 127.0.0.1 is the standard.

Why Port 3000? Default Ports in Development

When you run npm run dev, tools like React or Next.js default to port 3000. Other common defaults:

Node.js/Express: 3000, 8000
Python/Flask: 5000
Ruby on Rails: 3000
Apache/Nginx: 80 (HTTP) or 443 (HTTPS)

Port conflicts? Use lsof -i :3000 (Unix) or netstat -ano | findstr :3000 (Windows) to identify and kill blocking processes.

Modifying the Hosts File: Proceed with Caution

You can map custom domains to 127.0.0.1 for local testing. For example:

127.0.0.1    mytestsite.dev

Now, mytestsite.dev resolves to your machine. But beware:

Editing the hosts file requires admin privileges.
Typos can break network functionality. Always back up the file first!

IPv4 vs. IPv6: Localhost’s Dual Identity

IPv4: 127.0.0.1
IPv6: ::1

Run ping localhost to see which your system prefers:

# IPv4 response
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.045 ms

# IPv6 response
64 bytes from ::1: icmp_seq=0 ttl=64 time=0.045 ms

Most frameworks default to IPv4. To support both, configure your server to listen on 0.0.0.0 (IPv4) or :: (IPv6).

Why Localhost Matters for Developers

Offline Development

Test apps without internet—crucial for debugging in restricted environments (e.g., airplanes, remote areas).
Security
- Safely test authentication flows (OAuth redirects to localhost avoid exposing tokens online).
- Database connections via 127.0.0.1 stay isolated from external networks.
Speed

Bypass network latency. Benchmark API performance locally without noise.
Privacy

Localhost traffic never touches your physical network card, making it immune to eavesdropping.

Localhost in Code: Language Examples

Python

import socket
print(socket.gethostbyname("localhost"))  # Output: 127.0.0.1

Java

import java.net.InetAddress;

public class LocalhostDemo {
    public static void main(String[] args) throws Exception {
        // Use getByName("localhost") to force loopback resolution
        InetAddress localhost = InetAddress.getByName("localhost");
        System.out.println(localhost.getHostAddress());  // Output: 127.0.0.1
    }
}

Node.js

const dns = require('dns');

dns.lookup('localhost', (err, address) => {
    console.log(address); // Output: 127.0.0.1 or ::1
});

Public vs. Private vs. Loopback IPs

Type	Example	Purpose
Public	`8.8.8.8`	Globally routable (assigned by ISP).
Private	`192.168.1.1`	Local network use (NAT-enabled).
Loopback	`127.0.0.1`	Internal machine communication.

Common Pitfalls & Fixes

“Port Already in Use”
- Unix: kill -9 $(lsof -ti:3000)
- Windows: taskkill /F /PID <process_id>
Docker Isolation

Containers have isolated networks. Access the host’s localhost via:
- host.docker.internal (Docker Desktop)
- --network="host" flag (Linux)
Firewalls Blocking Requests

Ensure localhost is whitelisted in firewall settings.

Beyond Localhost: Sharing Your Work

Tools like ngrok or localhost.run expose localhost to the internet:

ngrok http 3000  # Creates a public URL (e.g., https://abc123.ngrok.io)

Ideal for testing webhooks, sharing demos, or debugging on mobile devices.

Final Thoughts

Next time you load localhost:3000, remember:

Your OS maps localhost to 127.0.0.1, skipping DNS.
The loopback interface keeps traffic internal.
Your local server (React, Flask, etc.) handles the request.

From debugging to deploying, localhost is the unsung hero of development. Ready to level up? Dive into HTTPS configuration for localhost or explore Docker’s networking models.

How do you use localhost in your workflow? Share your tips below!

Enhancing the Map Widget in Ensemble: Introducing Fixed & Draggable Markers 🚀

Sharjeel Yunus — Sat, 22 Feb 2025 18:35:53 +0000

At Ensemble, we’re constantly looking for ways to enhance developer experience by making our low-code/no-code framework more intuitive and powerful. Recently, I worked on upgrading our Map Widget to introduce two powerful new features that simplify the location selection and marker interactions:

✅ fixedMarker: Pins a marker at the map’s center, letting users navigate the map beneath it.

✅ draggableMarker: Empowers users to drag and reposition markers freely.

These features address critical user needs while boosting flexibility. Let’s dive into why we built them, how they work under the hood, and how you can leverage them in your apps.

🎯 Why We Built These Features

Previously, our Map Widget’s markers were static, forcing users to jump through hoops to adjust locations. Here’s what drove our update:

1️⃣ Simplifying Precise Location Selection

Problem: Apps like delivery services or property listings require pinpoint accuracy. Moving static markers was cumbersome.
Solution: fixedMarker keeps the marker centered while users pan the map, making location selection seamless.

2️⃣ Enabling Manual Marker Placement

Problem: Use cases like marking custom meeting points needed manual drag-and-drop flexibility.
Solution: draggableMarker lets users reposition markers intuitively with a simple drag.

🚀 Under the Hood: Implementing the Features

📍 `fixedMarker`: Always Center Stage

Step 1: Centralizing Marker Data

We created a unified class to manage the marker’s position and icon, ensuring consistency and reducing rendering overhead.

class FixedMarker {
  LatLng position;
  BitmapDescriptor? icon;

  FixedMarker({required this.position, this.icon});
}

// Initialize with a default position
FixedMarker _fixedMarker = FixedMarker(position: widget.controller.defaultCameraLatLng);

Step 2: Optimizing Position Updates

By updating the marker’s position only when it changes (and debouncing map movements), we eliminated flickering and improved performance.

void _onCameraMove(CameraPosition position) {
  if (widget.controller.onCameraMove != null) {
    _cameraMoveDebouncer.run(() async {
      LatLngBounds bounds =
          await (await _controller.future).getVisibleRegion();
      _executeCameraMoveAction(widget.controller.onCameraMove!, bounds);
    });
  }

  // Only update the position if it's different
  if (widget.controller.fixedMarker &&
      _fixedMarker.position != position.target) {
    setState(() {
      _fixedMarker.position = position.target;
    });
  }
}

🖱️ `draggableMarker`: Freedom to Drag and Drop

Enabling Marker Drag

We added a flag to toggle drag functionality and linked it to an event handler that updates the marker’s stored position after movement. The marker’s new position is persisted in real-time, allowing seamless integration with other app components.

markerPayload.marker = Marker(
  markerId: markerId,
  position: markerPayload.latLng,
  icon: markerAsset ?? BitmapDescriptor.defaultMarker,
  draggable: widget.controller.draggableMarker, // Enables dragging
  consumeTapEvents: true,
  onDrag: (latLng) {
    _moveCamera(latLng); // Update position on drag
  },
  onTap: () {
    _selectMarker(markerId);
  },
);

🛠️ How to Use These Features in Your Ensemble App

Enable `fixedMarker`

Keep the marker centered while panning by setting fixedMarker: true in your Map configuration.

Map:
  fixedMarker: true

Enable `draggableMarker`

Allow users to drag markers freely with draggableMarker: true.

Map:
  draggableMarker: true

Combine Both for Ultimate Flexibility

Enable both flags to let users start with a centered marker that becomes draggable on demand.

Map:
  fixedMarker: true
  draggableMarker: true

🚀 Ready to Try It Yourself?

Explore these features in Ensemble Studio or dive deeper into our documentation:

🔑 Lessons Learned

1️⃣ Debounce Strategically: Throttling camera move events reduced redundant state updates.

2️⃣ Optimize Marker Caching: Centralizing marker data streamlined state management.

3️⃣ Prioritize Developer Control: Clear configuration flags let developers tailor interactions to their app’s needs.

🌟 What’s Next?

We’re just getting started! What features would you like to see in the Map Widget?

Live location tracking?
Customizable gesture controls?

Let us know in the comments below! 💬

🚀 Happy building!

Goodbye Create React App

Sharjeel Yunus — Mon, 20 Mar 2023 00:09:38 +0000

React is a popular JavaScript library that helps you build user interfaces for websites and apps. When starting a new project with React, you may wonder if you should use a framework or not. React just released its new documentation React Docs and the creators of React recommend using a framework, and in this article, we'll see why.

Framework

Frameworks are pre-built sets of tools and features that can help you build websites and apps faster and more efficiently. They provide features like routing (helping you move between different parts of your site or app), data fetching (helping you get data from a server), and generating HTML (helping your site or app load faster).

The Problem

While you can use React without a framework, building a project fully with React can lead to problems as your project grows. As you add more features, your JavaScript code can become larger, leading to slower load times. You may also need to figure out how to split code for every route individually or encounter server-client network waterfalls that make your app feel very slow. This is why Svelte has SvelteKit, Vue has Nuxt, and other frameworks exist to solve these problems.

The Solution

React frameworks solve these problems by default, with no extra work from your side. They let you start with a lean codebase and scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects.

What if I still want to use CRA?

If you have unusual constraints that aren't served well by existing frameworks or you simply prefer to create your own custom setup, you can still use React without a framework. You can grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.

Conclution

In summary, while it's possible to use React without a framework, the creators of React recommend using a framework to solve common problems and make building your app or website faster and more efficient. Its time to say Goodbye to create-react-app and start using Production-grade React frameworks like Next.js, Remix, Gatsby or Expo (for native apps).

React 18 release candidate mode is finally here!!

Sharjeel Yunus — Wed, 09 Mar 2022 23:12:37 +0000

React is an open-source JavaScript UI library designed by Facebook, it has gained a lot of popularity in the front-end developer community.

React has finally released React 18 in Release Candidate mode and has some exciting features and updates for the React.js development community. That means it is now officially stable in a way and there will not be lot more changes or lot more things added to react 18.

So now React 18 is in release candidate mode you can go ahead and now install npm install react@rc it will install a release candidate version for you.

Let's look at what is new in React and what you can expect!

1. Concurrent Rendering

So the biggest thing obviously which react 18 brings is concurrent rendering and this had been renamed from concurrent mode to concurrent rendering so that you know there's not a breaking versus a non-breaking mode in react now this is just concurrent rendering where react would try to render stuff concurrently whenever you're using ReactDOM.createRoot instead of ReadDOM.render

2. Server Rendering APIs

Earlier from a server-side you could have streamed the response to the client and that would have worked but it did not support the concurrent rendering and suspense very properly. So react 18 also adds support for a new couple of functions which properly streams not only the response but also with the ability to hold data for suspense and whenever that arrives it can stream the rest of the stuff.
So again this is required for things like React Server Components might use and might benefit from this new streaming API.

3. Automatic Batching

React 18 also brings in support for batching the state updates. Batching is when React groups multiple state updates into a single re-render for better performance. Earlier react also used to batch state updates for example if setA(5) and setB(7) where setA and setB are two state variables and of course it will batch them together nut there were certain conditions where react would not batch them for example in setTimeout. So, that is now fixed or in a way improved in react 18.

// Before React 18 only React events were batched

function handleClick() {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

4. useId

There is a new Hook useId which actually gives you a deterministic and stable unique identifier both on client and server.
So what happens when your server delivers some react server-side rendered document to the client, of course, that is delivered as an HTML file but you still have to rehydrate that with JS, so this rehydration process sometimes results in a mismatch between what JavaScript expects on the client versus what has been sent from the server and usually that is in cases of keys or stuff which is client-specific and so on.
SO userId is a new hook that allows you to create deterministic keys or deterministic values on server and client both and it's useful in fact it's important in React 18 because of how concurrent rendering works and how things will arrive out of order on the client.

5. Dropping support for Internet Explorer

React is now dropping its support for internet explorer completely. Now internet explorer has arrived at its end of life. React 18 cannot support it because of these concurrent rendering and interesting features which requires things like micro task queues for scheduling and interrupting the main thread allowing the user input to interrupt the main thread when react is working so all of those things are very hard to bring support to internet explorer.

Conclusion

So, these were the top 5 changes react 18 is bringing. React 18 is still in release candidate mode now so you can install react@rc and react-dom@rc in react release candidate mode as well and get started with your React 18 journey. And of course, this will pass on the benefits to frameworks like NextJS and Remix also because these things also use react as the underlying library.

How to upload a JSON file to firebase and access it as list items from the web?

Sharjeel Yunus — Sun, 18 Apr 2021 11:09:23 +0000

If you have a large JSON file and you wanna upload it to a database, Firebase Realtime Database would be your first choice. But how can you import that large file directly without doing everything manually? And how can you fetch this data to as List items via Vanilla JavaScript?

Let's start with JSON => (JavaScript Object Notation) is used when data is sent from a server to a web page.

Here's how our JSON file looks like!⤵

{
    "Certificates-List" : [
        {
            "courseName": "Elements of AI: Introduction to AI",
            "institute": "University of Helsinki"
        },

        {
            "courseName": "Javascript Beginner",
            "institute": "Udemy"
        },

        {
            "courseName": "Introduction to Flutter Development",
            "institute": "App Brewery"
        }
    ]
}

First of all Configure your Firebase project for the web How to Configure Google Firebase for Web

Now click on 3 dots and select import JSON, select your file.

Ahhan! your JSON file is now uploaded to Firebase Realtime Database.
Now your database should look like this:

To see this as an API, Copy the URL of the database and write the folder name .json after it. Like this => https://test-45959-default-rtdb.firebaseio.com/Certificates-List.json

Now how can we access this data to a webpage using Vanilla JavaScript?
Create a ul tag with id="Certificates-List".
Your Project should look like this⤵

Time for the real part: Access data from Firebase to Web

Create a function to add items to the list like this:

function addItemsToList(courseName, institute) {
      var ul = document.getElementById("Certificates-List");

      var _courseName = document.createElement("li");
      var _institute = document.createElement("li");

      _courseName.innerHTML = "CourseName: " + courseName;
      _institute.innerHTML = "Institute: " + institute;

      ul.appendChild(_courseName);
      ul.appendChild(_institute);
    }

Here we grab the ul tag by id and then create the list items via li tag. Using appendChild store the grabbed data to list items.

Now create a function to fetch data from database:

function FetchAllData() {
      firebase
        .database()
        .ref("Certificates-List")
        .once("value", function (snapshot) {
          snapshot.forEach(function (ChildSnapshot) {
            let courseName = ChildSnapshot.val().courseName;
            let institute = ChildSnapshot.val().institute;
            addItemsToList(courseName, institute);
          });
        });
    }

Here we're fetching our data from Firebase Realtime Database with the ref of database folder name i.e Certificates-List. And then calling the addItemsToList() to get the data.

Now to load data

window.onload(FetchAllData());

Your code should be like this:

And here's how your web page should look like:

That's it. We're all OK. Now you can customize this data and webpage however you like.👋

Web Developer? Terms you should understand!

Sharjeel Yunus — Sun, 14 Mar 2021 22:27:27 +0000

The Tech Industry is full of peculiar words, to which anyone can get confused. Web development is no rule-breaking, and if you need to make it as a programmer, you need to be having some knowledge of the industry lingo.

This list will give you a good introduction to some of the most important terms that you’ll come across when working in web development.

Code
Code is essentially what web developers write using programming languages.

Bug
A bug is an error that prevents a website or app from running as it should.

Debugging
Debugging is the process of identifying and dealing with BUGs.
Debugging is a multistep process: the developer locates the problem, isolates the source and then gets to work on fixing it.

API
“Application Program Interface” An API enables two different programs to communicate with each other by making some parts of the website code available to developers.

Framework
Frameworks were invented to make the process of building a website faster and easier. They provide you with a base to build your code and design. Some common frameworks include Ruby on Rails, Bootstrap, AngularJS and Vue.

Jamstack
Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It typically comprises 3 components: JavaScript, APIs and Markup.

Graphql
GraphQL is a query language for APIs. it is used to load data from a server to a client -- it's a way to get data from an API into your application.

Algorithm
An Algorithm is basically a set of steps for carrying out certain tasks. In computer programming, algorithms are a key part of problem-solving.

Data Structures
Data Structures are a way of organizing and storing data for maximum efficiency — much like books in a library. Data structures make it easy to find, access, sort, insert and delete data.

Git
Git is a version control system where developers can store and manage their code. Git enables you to track changes in Code and reverse them if necessary, and also to work together with other teams and manage multiple projects at once.

GitHub
GitHub is a cloud interface for Git. Its the largest host of source code in the world! GitHub offers all the version control functionality of Git, but also offers its own features, such as bug tracking, task management and project wikis.

Libraries
Libraries are stores of pre-written code, or modules, that programmers can take and insert into the code they’re writing. Libraries can save developers considerable time and effort.

Mobile-first
Mobile-first is an approach to web design and development that prioritizes mobile devices. Rather than building a website with a desktop in mind and then considering how it might look on a mobile device, with a mobile-first approach, the website is first built for the small screen.

DevOps
“Development Operations.” System of working that helps to keep development, IT operations, and quality assurance departments on the same page to make for better end-products and collaborations.

GUI
“Graphical User Interface.” The image of how a website is laid out and meant to be interacted with. In website design, this is how everything will ideally look in layout.

This is by no means an exhaustive list, but it should help you to start talking about the web developer talk.

Swag by HactoberFest

Sharjeel Yunus — Sun, 18 Oct 2020 10:38:15 +0000

To support open-source contribution a program "HactoberFest" is held by DEV and Digital Ocean in collaboration with Github every year.
GitHub is a version control platform where you can share your projects and can also contribute to other projects, for that you have to open a pull request.

HactoberFest is an event based on opening 4 pull request to encourage open source contribution. And as an award by DEV and Digital Ocean swags are given to them. These swags includes tree/t-shirt, stickers and badges.

How to Join this Event?

To participate, register at the official site: hacktoberfest.digitalocean.com Make sure you are connected with your GitHub account. Then, submit at least four pull-request (PRs) to any public GitHub repository.