# Grayhat Blog Tag: JavaScript

> Expanded public blog context for posts tagged JavaScript.

## Page

- [JavaScript Tag](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/javascript)
- [JavaScript Tag LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/tag/javascript/llms.txt)
- [Root LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms.txt)
- [Root Full LLM Context](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/llms-full.txt)
- [Tag API](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/api/public/v1/tags/javascript)

## Tag Details

- Slug: `javascript`
- Description: Not provided
- Post count in current snapshot: 7

## Current Posts

- [Fixing a Next.js Documentation Issue](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/fixing-a-next-js-documentation-issue) - How a small bug in the MSW example led me to contribute my first merged PR to Next.js, and what it taught me about open source.
- [Create Multiplayer Web Games, Faster](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/create-multiplayer-web-games-faster) - We built a React/Vite-powered game engine, powered by Playroom.
- [Automatons and AI for JavaScript Junkies](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/automatons-and-ai-for-javascript-junkies) - Automatons are the forerunners to AI, but don’t underestimate them. They’re cheap, fast, predictable, and do their job perfectly.

What’s the difference? Both AI and Automatons branch out from the Theory of Automata, which is a foundational concept of computing. It sees the world as consequences and actions (in their terminology, “states” and “transitions”). Automatons start off very simple; they carry out tasks in a deterministic fashion. Consider it like a branch of finite possibilities, and a
- [Secure your ship](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/secure-your-ship) - In the fast-paced world of modern web development, where tools like Vercel, Checkly, Mixpanel, and Hotjar have revolutionized workflows, it's easy to focus on the efficiency gains these platforms bring while inadvertently neglecting a critical aspect—security. As development teams expand and diversify their skill sets, the boundaries of projects expand exponentially. With more contributors, integrations, and code to manage, the attack surface grows significantly, amplifying the potential risks.

- [Sign in with Adobe in a Next.js App](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sign-in-with-adobe-in-a-next-js-app) - Use the power of Adobe to authenticate your Next app.
- [Medusa.js for Entrepreneurs, Part 2: Features](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-2-features) - Cloning the frontend, backend, and admin panel repositories results in a readily available template e-commerce application with all the basic user flows, from adding a product to a basket to placing and tracking orders. Furthermore, the administration panel has every capability imaginable for a template application.

Below is a brief description of all the major features ready to use in the Medusa template app:


User Side (Frontend)

Below are some of the prominent features readily available fo
- [Medusa.js for entrepreneurs, Part 1: Intro](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-1-intro) - The world of e-commerce is experiencing unprecedented growth, with more businesses moving online each day to meet the demands of digital consumers. As the industry continues to evolve, the need for efficient, user-friendly, and powerful tools for creating e-commerce web applications has become more critical than ever.

Enter MedusaJS: a powerful, open-source e-commerce platform that simplifies the process of building and managing an online store. In this blog, we'll explore the power of MedusaJS

## Child Route Content

### [Fixing a Next.js Documentation Issue](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/fixing-a-next-js-documentation-issue)

- Slug: `fixing-a-next-js-documentation-issue`
- Published: 2025-10-24T18:22:25.000+05:00
- Updated: 2025-10-24T18:31:40.000+05:00
- Reading time: 4 min
- Tags: Open Source, Vercel, Next.js, JavaScript, Open Source Community
- Authors: Hamad Ullah
- Visibility: public

A few months ago, I was assigned a ticket to integrate **Mock Service Worker **in to Ruby for API mocking. While trying to make things work, I stumbled upon a confusing issue, not in my code, but in the **Next.js documentation itself**. What began as a simple debugging session turned into a pull request that’s now officially merged into the Next.js repository.

This is a blog post on of how I found an issue, what I did to fix it, and why contributing to open source is essential.

### How I Found the Issue

I setting up **API mocking** using **MSW** in our Next.js application. For local development, MSW is incredibly useful, it intercepts network requests and allows us to simulate API behaviour without touching the backend.

I followed the Next.js documentation example for MSW setup carefully, but something just wasn’t working. The **worker setup** wasn’t behaving as described, in fact the imports were unrecognized.

After digging into the issue for a bit, I realized the example itself had a **outdated setup,** something subtle that could easily trip up any developer trying to follow it step by step.

I checked GitHub, and someone had already opened an issue describing the same problem. I realized the documentation is outdated and added a to-do for future reference to fix it in my free time.

### What I Did

I cloned the Next.js repo, navigated to the documentation example, and made the necessary fix. The goal was simple, make the MSW example actually work as advertised.

After verifying the fix locally and ensuring that it didn’t break anything else, I submitted a **pull request** with a short, clear explanation of what the problem was and how my change resolved it.

The **Pull Request **I made is the following**:**

Fix/msw-issue-68521 by HamadUllah16 · Pull Request #83482 · vercel/next.jsFix: 68521 Updating outdated with-msw example
The with-msw is outdated and doesn't work with the latest msw version.
What?
The with-msw example is outdated and does not work with the latest msw…*GitHubvercel*Soon after, one of the maintainers reviewed it, validated the change, and merged it.

That was a really satisfying moment, not just because my code was now part of Next.js, but because other developers wouldn’t need to waste their time figuring out why the setup isn't working as expected.

### Why I Think It Got Merged

Open source maintainers get hundreds of PRs. What I did was review the ones that actually got merged. I think that’s what worked in my case:

- I explained *why* the fix was needed, not just *what* it did.
- I referenced the existing issue and made it easy to verify the bug and the fix.
- The PR didn’t introduce extra complexity. It was a focused, single-purpose fix.
- I followed the repo’s contribution guide and conventions closely.
- I added a demo video which made it easier for reviewers to glance over my changes. Even though they'd still test locally, it establishes trust.

I tried to make it as contextual and easy to review as possible, because open-source reviewers are often doing this work in their free time - it's best to utilize their time in the best possible way, in the rare hours they get it.

### Why is open source development important?

Open source is the invisible backbone of modern web development. Majority of the frameworks, libraries, and tools we use, from **React** to **Next.js**, **MSW**, **Tailwind**, and beyond, are built on the collective effort of thousands of developers who share their work openly.

Contributing back isn’t just a nice gesture, it’s how the web keeps evolving. When you fix a bug, improve documentation, or clarify an example, you’re helping thousands of other developers avoid the same confusion.

What makes open source especially powerful in the **JavaScript ecosystem** is how interconnected everything is. A small fix in one project can ripple across others, improving developer experience far beyond a single codebase.
In a world where frameworks constantly transform and build on each other, collaboration is what keeps innovation moving forward.

Ruby – AI Powered Pitch Platform for Smarter SalesClose deals faster with Ruby. Instantly generate personalized, insight-driven sales pitches for any company using AI. Trusted by modern sales teams to win more.**Check out Ruby, the project I'm working on at Grayhat.

I'm open to learn more in the future about Next.js and contributing to open-source. Stay tuned!

### [Create Multiplayer Web Games, Faster](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/create-multiplayer-web-games-faster)

- Slug: `create-multiplayer-web-games-faster`
- Published: 2024-05-04T10:31:32.000+05:00
- Updated: 2024-08-31T13:41:49.000+05:00
- Reading time: 2 min
- Tags: Development, Multiplayer Gaming, Gaming, JavaScript, Developer Tools
- Authors: Syed Abdullah Nasir
- Visibility: public

**Open-source Product Announcement! Check out create-multiplayer-game on NPM and GitHub. Currently in alpha.***Imagine this**...*

You have a great idea for your next indie game, and since the world is online-first, you dive into the world of multiplayer game development, but you want to skip the tedious setup process. Sockets? Firebase Realtime DB?

Eventually, you give up on multiplayer, and focus on building a great single-player experience first. When you do, and you put off multiplayer to the end, you end up having to refactor a lot of code to make it "multiplayer-ready".

What if games were built **multiplayer-first**?

That's why we built a React/Vite powered game template, powered by Playroom. It swiftly conjures up a multiplayer game template in React, so you can focus on bringing your gaming vision to life.

npx create-multiplayer-game@latestIt will ask you a few small questions to personalize your game. Have a look.

*Works great with macOS and Linux.**Name Your Game: **First off, we need a name for your masterpiece. What will you call it?

**Project Name: **Need a project name, or are you happy with the default generated one? Feel free to customize it as you like!

**Choose Your Template: **Now, which template suits your fancy? Use your arrow keys to browse the options:

*Option A:*

"vite-react-ts": A ReactJS project with Vite, crafted in TypeScript. It's equipped with PlayroomKit for multiplayer magic, along with an array of game components, sounds, and interactions. Usually the top choice.

*Option B:*

"next-ts'': A NextJS project in TypeScript, powered by PlayroomKit for multiplayer functionality.

Once you've made your choice, sit back as we download your selected template. Then, you'll be greeted with a message: "Project initialized at . Happy Coding!"

### What's next?

- We're building a mechanism for you to keep updating your game, as we improve our templates.
- We're building a useful Chrome DevTool for debugging game states (no more hardcoding or adding "cheats" to go forward in a game).
- Some premium templates with some extra goodies.

Read more here: https://grayhat.studio/games/pricing

*We love open source, bringing useful tech to builders, and contributing to the overall knowledge stream. A lot of our work is R&D-based and on experimental tech. If you're interested in working with or for *Grayhat*, DM or comment!*

**This article was authored by** Syed Abdullah Nasir, **Software Engineer at Grayhat.**

### [Automatons and AI for JavaScript Junkies](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/automatons-and-ai-for-javascript-junkies)

- Slug: `automatons-and-ai-for-javascript-junkies`
- Published: 2023-12-11T15:28:00.000+05:00
- Updated: 2024-05-09T16:25:01.000+05:00
- Reading time: 4 min
- Tags: JavaScript, LLMs, Automation, AI, Automata, Automationsolutions, Bots, Meta, WhatsApp, Artificial Intelligence, xstate
- Authors: Saad Bazaz
- Visibility: public

*AI !== LLMsAutomatons are the forerunners to AI, but don’t underestimate them. They’re cheap, fast, predictable, and do their job perfectly.

What’s the difference? Both AI and Automatons branch out from the Theory of Automata, which is a foundational concept of computing. It sees the world as consequences and actions (in their terminology, “states” and “transitions”). Automatons start off very simple; they carry out tasks in a deterministic fashion. Consider it like a branch of finite possibilities, and at each state, it decides to move to the next state or stay on the current one. AI (especially deep learning) can be seen as a complex Automatons with the ability to “learn”.

TLDR; Automatons work on data, AI understands it.

## The problem

At Omni, we wanted to utilize Vercel’s Serverless Architecture to deliver video and audio content to multiple platforms, WhatsApp being the first. We leaned towards Vercel’s Edge functions due to the mass scale at which they can operate, and due to the cheap cost and long function runtimes.

Unlike a standard server, Serverless cannot have context. Each function invocation is independent from the other. We needed a solution to persist state between function invocations, and we needed to make it robust for our product roadmap; there are tonnes of features more to be implemented.

We wanted to have a conversational flow with the user. Having an “if else” sort of situation would get messy **very quickly.** We couldn’t be restricted by bot libraries because 1) The Edge is very picky about libraries; many JavaScript libraries are not supported, 2) Making external API calls for the bot would be a costly resource, 3) We needed to actually render content, and we weren’t too sure about how that would play out in a restricted environment.

## Stumbling upon states

Luckily, I’d taken a course on Formal Methods back in uni. We’d made states in two boomer Eclipse tools called SPIN and UPPAAL. I knew we needed something similar. We needed something which could “pause” and “resume” work from any point, and knew exactly what to do. But there was no way I was going back to Eclipse. Then we discovered XState.js.

State management is a challenge on the web, giving rise to Redux, Zustand, and many more state management libs. XState solves that using academic principles of state management. It’s also got a snazzy web editor, reminiscent of my Eclipse days, but at least with good UI.

*PS: If a professor is reading this, please utilize new libraries like these in your classrooms, instead of dinosaur-age software which was prime in your days. This stuff is more relevant to students and can help them solve actual problems.*

### Building

We used the online editor to build the states, with the help of our research partner Haroon Ali. The online editor gave us the equivalent JS code, and we loaded the now-deprecated XState 4. Worked well in Edge. Here’s our original diagram:

Xstate Machine original diagram

*

However, it turns out that academic theory is a bit different from practical; we ended up having to add reusable guards on JavaScript to keep our code sane. Now that it was a reusable and clean machine, we created a Factory Function that would generate a flavored machine for every platform; WhatsApp, Telegram, and WeChat.

Our highest priority is maintenance and ease of adding new features. Since we’re only two developers, it would mean the death of our product if it took too long to adapt to new features.

## Cons

### Predictable death

XState has no predictable way of knowing when its transitions have stopped. That was bad for us, because as soon as we returned a response to the user, our serverless function was killed. To tackle that, we polled the machine every few seconds to see if there was still any activity.

// Additional "hack" to wait for the state to settle
do {
  const space = '\\u200B' // Zero Width Space
  const queue = encoder.encode(space)
  // Send an empty streaming response to keep the serverless function alive
  controller.enqueue(queue)
  // Wait 12 seconds. That's quite enough for Omni renders.
  await new Promise((resolve) => setTimeout(resolve, 12000))
} while (Object.entries(interpreter.state.activities).some((v) => v[1]))
console.log('[machine] Ending interpreter...')

// Complete the streaming response here
controller.close() ### Always

We use the “always” keyword in XState to auto-transition to states. However, there’s no way to repeat an “entry” action when the state loops on itself. So our bots are quiet when they’re stuck at a state.

### Cache states

This is more of a Vercel Edge problem than an Xstate problem, but if there was a more performant (and, as always, cheap!) way of retrieving userstate, we would shift to that. We’ve checked out Vercel KV, but that seems a bit overkill for now.

Are you a developer? Have you really read all this through? Bruh. If yes, we’d love to hear your solutions!

We're building AI-powered dubbing tools at scale and at precision, at Omni. If you're interested in our API, or interested in joining our team, hit us up.

**Author: **Saad Bazaz

**Special mentions:**

Muhammad Hashim for kickass botting

Haroon Ali for RnDing at his best.

UrduX for their constant support and research work.

### [Secure your ship](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/secure-your-ship)

- Slug: `secure-your-ship`
- Published: 2023-10-25T15:36:00.000+05:00
- Updated: 2024-05-10T13:49:03.000+05:00
- Reading time: 3 min
- Tags: Supply Chain Security, NPM, Open Source, Open Source Community, JavaScript, Typescript, Vercel, Innovation, Tech
- Authors: Asfand Yar
- Visibility: public

*In the fast-paced world of modern web development, where tools like Vercel, Checkly, Mixpanel, and Hotjar have revolutionized workflows, it's easy to focus on the efficiency gains these platforms bring while inadvertently neglecting a critical aspect—security. As development teams expand and diversify their skill sets, the boundaries of projects expand exponentially. With more contributors, integrations, and code to manage, the attack surface grows significantly, amplifying the potential risks.

Real-world incidents serve as stark reminders of the impact of security vulnerabilities. The Equifax breach in 2017 exposed sensitive data from 147 million individuals due to unpatched software, and the Colonial Pipeline ransomware attack in 2021 disrupted critical fuel supplies. Security lapses have even derailed major mergers and acquisitions, as seen in the delayed acquisition of Yahoo by Verizon following data breach revelations. The SolarWinds exploit underscored the risks associated with unlicensed software, affecting numerous networks.

### AI & Blockchain bring more security concerns than before.

Supply chain challenges wield a profound impact on the growth trajectory of today's AI and blockchain startups. In the AI realm, dependencies on open-source libraries and frameworks make startups vulnerable to security breaches and compromised model outputs, disrupting development timelines and compromising data integrity. Likewise, in the blockchain space, vulnerabilities in smart contract frameworks and consensus mechanisms due to supply chain issues can undermine the trustworthiness of distributed ledgers, leading to compliance issues and investor concerns.

These vulnerabilities often arise from various sources such as unpatched software, misconfigurations, and human error. The complexity introduced by open-source components and third-party integrations necessitates thorough vetting and monitoring to counter potential threats.

### Enter SecOps.

Integrating Supply Chain Security and Security Operations (SecOps) into development cycles becomes imperative for proactively addressing vulnerabilities. However, current security solutions often suffer from alert fatigue, overwhelming users and diluting the impact of critical notifications.

Enter listen.dev, a new player in the dynamic landscape of web development challenges, offering a fresh perspective on fortifying security measures seamlessly.

### Make Security Actionable.

If you've used dependabot before, you'll immediately know what the term "alert fatigue" means even if you've never read about it before. Basically, when you receive a flood of notifications and alerts but don't have an action item for them, and they keep piling up, you eventually start ignoring the notifications.

That's deadly for security; you start ignoring once, and it goes permanently under the rug **until it's too late.**

We've had some insider conversations with listen.dev, and according to their claims, security is no longer an afterthought. It's gotta be part of the SDLC (Software Development Life Cycle).

What does that mean for devs? Just like how Vercel plugs themselves right into the everyday DX (Developer Experience) of a developer with their GitHub integration, listen.dev also has a GitHub integration which gives you 1) Actionable insights, 2) A "Security Review" mechanism (Yes, it works exactly as it sounds like. It's a security approval for each PR which has security vulnerabilities).

On the side, Listen features the standard:

**Real-time Security Scans:** By embedding real-time security scans into each pull request, listen.dev facilitates early identification and resolution of vulnerabilities during code integration.

**DNS Profiling:** A standout feature, listen.dev's DNS profiling provides proactive alerts for potential malicious attacks, acting as a shield against looming threats.

**User-Friendly Interface:** listen.dev distinguishes itself by offering a user-friendly interface focusing highly on its DX (taking inspiration from Vercel), making security measures not only effective but also accessible.

**High Customization:** The platform's high level of customization caters to diverse user needs, ensuring improved security and ease of use with tailor-made solutions adaptable to specific requirements.

In the ever-evolving digital landscape, listen.dev emerges as a promising contender, offering robust security enhancements alongside a user-centric approach. Its suite of features designed for practical usability and adaptability signals a potential shift towards more secure and personalized web development practices.

The key is not just about adopting new tools but integrating security seamlessly into the development workflow. It's necessary now more than ever before to be proactive than reactive - a supply chain vulnerability or hack could mean life or death for a company in today's privacy-savvy world.

At Grayhat, we bring impossible to life, and challenge tech to its very extreme. A team of ragtag hackers, with a thirst for innovation, we don't shy from taking on early-stage design and development challenges which define the gray line which sits between the possible and impossible.

Interested in working with us? Drop us an email at sales@grayhat.com.pk

Author: Asfand Yar Aftab

### [Sign in with Adobe in a Next.js App](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/sign-in-with-adobe-in-a-next-js-app)

- Slug: `sign-in-with-adobe-in-a-next-js-app`
- Published: 2023-10-20T13:07:00.000+05:00
- Updated: 2024-08-31T13:42:30.000+05:00
- Reading time: 3 min
- Tags: JavaScript, Development, Next.js, NextAuth
- Authors: Saad Bazaz
- Visibility: members

**You can see the relevant Pull Request, and all the provider's code mentioned in this article, on GitHub: https://github.com/nextauthjs/next-auth/pull/8890Whether you're a seasoned Auth geek, or a newbie, NextAuth (soon, Authjs.dev) is the auth lib to use. That's why we chose it for Omni, since we needed a stable Auth solution so we could focus on experience.

Adobe is a popular platform for creatives, and is widely used (obviously) internally at Adobe. From Behance, to Creative Cloud, and to Adobe Stock and many more, it's sort of the defacto for professional creatives. I believe it's a staple for products building in the art, media and design space, and sits right next to Google and ArtStation, and that made it a low-hanging fruit as an authentication feature for Omni's tools.

This article has been made after painful hours understanding Adobe's OAuth 2.0 documentation. But there's one thing I'm grateful for; **standards** in the boring stuff. OAuth 2.0 has really made life much easier than before. The wild days of crappy Auth setups are long gone, and almost all major providers follow the standard to quite an extent, making integrations a breeze. At least for the libraries and builders who understand the standard.

## How to implement Adobe OAuth 2.0 Authentication

### 1. Create an account on Adobe's Developer Console

Pretty straightforward. Use your team's account to create a Developer account on Adobe. You should be able to see a console here: https://developer.adobe.com/console/home

*An important question: *What information do you want from Adobe? This is something that differs for each app. In our case, we just needed the bare minimum, so we went with Adobe Stock. You can see all the available scopes in OAuth 2.0 here.

### 2. Create a project

On the Adobe Developer Console, create a new project for the app you're working on.

### 3. Add an API

In the project you just created, you need to add an API.

We chose Adobe Stock here, as mentioned earlier, because it gave us what we needed at the bare minimum.

Make sure to choose an API with the **OAuth Web App **option. That's the one which'll work with Next.js. Read more on all the types here.

### 4. Configure the Credential

**Default redirect URI: **This is the domain where you're hosting your app. Use https.

**Redirect URI pattern: **This is a regex. This is the one I use:

https://({{YOUR-PROJECT-NAME-ON-VERCEL}}-.*-{{YOUR-TEAM-NAME-ON-VERCEL}}\.vercel\.app|localhost)(.*)/api/auth/callback/adobe### 5. Install NextAuth

Read more on that here. Set it up as per your requirements.

### 6. Add the Adobe Provider

If, by the time you're reading this article, our PR is not part of the main source code, you'll have to add a custom OAuth Provider. No worries, here's the code for that:

### [Medusa.js for Entrepreneurs, Part 2: Features](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-2-features)

- Slug: `medusa-js-for-entrepreneurs-part-2-features`
- Published: 2023-06-14T17:06:00.000+05:00
- Updated: 2024-05-09T17:07:12.000+05:00
- Reading time: 3 min
- Tags: E-Commerce, Medusa, Medusa.js, JavaScript
- Authors: Anonymous
- Visibility: public

*Cloning the frontend, backend, and admin panel repositories results in a readily available template e-commerce application with all the basic user flows, from adding a product to a basket to placing and tracking orders. Furthermore, the administration panel has every capability imaginable for a template application.

Below is a brief description of all the major features ready to use in the Medusa template app:

### **User Side (Frontend)**

Below are some of the prominent features readily available for end-users on the frontend. Being open source, Medusa is evolving day by day and continuously adding new features to make e-commerce application creation a breeze!

**Login/Sign up:**

Users can create accounts, and Medusa keeps track of completed orders, pending orders, billing addresses, and more.

**Note:** Account creation is not mandatory; users may also make anonymous purchases without signing in.

**Browse products: **

Users can explore different available products and view specific details for each product, such as variants, material, weight, kind, shipping and returns, inventory, and other product details provided by the admin.

**Add to cart: **

Users can easily add products to their cart and set the desired quantity. Medusa also handles the inventory quantity, which we'll cover later in the admin section!

**Discount coupon: **

Users can apply a discount coupon, if offered by the store, and enjoy discounts on price or delivery based on the conditions set by the admin.

**Gift card: **

Users may enter a gift card, if applicable, and receive rewards for their purchase according to the conditions set by the store admin.

**Delivery:**

 Users can select shipping alternatives provided by the store manager after completing the billing details form.

**Payment: **

Once products are added to the cart, the delivery method is selected, discounts (if any) are applied, and taxes (if any) are added, users can make payments using authorized methods set by the store administrator. However, integration of the payment plugin is required before proceeding.

**Receipt generation: **

After a successful payment, an order receipt is generated, and the order is placed on the server and displayed on the admin dashboard.

All basic template pages are available on the frontend; simply customize them as desired and create any new pages related to your app that are not already available.

### **Admin Panel**

Logging into the Admin Panel using the default account (username: admin@medusa-test.com, password: supersecret) or an admin account created by posting an API request on the server using Postman gives you access to the following ready-to-use features.

**Orders: **

When an order is placed, it is added to the orders list on the orders tab at the top of the admin dashboard. Clicking on an order displays detailed information about the placed order and provides admin access to available options, such as canceling the order, capturing money, creating fulfillment, editing the order, and more.

**Products: **

One of the most important modules of any e-commerce platform is the ability for the admin to add new products to one or more sales channels (sales channels will be addressed later). Medusa provides full admin support for adding/editing products, organizing products, adding products to different sales channels, adding different variants with different prices, adding attributes related to products, adding thumbnails and media files (requires integration of a cloud bucket plugin), setting inventory management flags, monitoring quantity, defining delivery alternatives, and much more for adding items as per the store management requirements.

**Customers: **

All clients registered with the application can be viewed and searched in the customer list displayed in the customers tab of the side menu bar. Registration date, orders, and other client information can be accessed here. Admin can also add new customers. A highly interesting and necessary feature in the customers module is the ability for the administrator to establish and add customers to customer groups. Customers in a certain group can be readily treated based on specific conditions/benefits, such as creating a group of B2B customers or loyal customers, etc. These clients can be linked to one or more sales channels, allowing for offering different options to target audiences or charging varying prices for the same items.

**Discounts: **

Discounts can be suggested for all customers as a whole or for a specific consumer group. Medusa offers three types of discounts: percentage discounts, flat amount discounts, and free delivery discounts. When a discount is created, a discount code must be generated for eligible users to enter and receive the discount.

**Gift cards: **

Gift cards can be generated and managed by the store manager or used by customers for their purchases.

**Pricing: **

Prices for different product variants can be overridden for different customer groups. If no override is made, then the default product variant price will be applied.

These are the major features of the Medusa Admin Panel. Furthermore, Medusa provides support for managing regions, currencies, return reasons, and taxes for different regions, while also allowing the creation of different sales channels (still in beta version and needs to be enabled before use at the time of writing the blog).

### **Conclusion**

Everything you need for your e-commerce application is available; all you have to do is customize it to your specifications and get paid for the whole e-commerce solution in the shortest time known to humanity!

Article by Talha Rizwan Malik

### [Medusa.js for entrepreneurs, Part 1: Intro](https://grayhat-company-blog.grayhatstudio.workers.dev/blog/medusa-js-for-entrepreneurs-part-1-intro)

- Slug: `medusa-js-for-entrepreneurs-part-1-intro`
- Published: 2023-06-06T17:08:00.000+05:00
- Updated: 2024-05-09T17:09:02.000+05:00
- Reading time: 2 min
- Tags: Medusa, Medusa.js, JavaScript, E-Commerce
- Authors: Anonymous
- Visibility: public

*The world of e-commerce is experiencing unprecedented growth, with more businesses moving online each day to meet the demands of digital consumers. As the industry continues to evolve, the need for efficient, user-friendly, and powerful tools for creating e-commerce web applications has become more critical than ever.

Enter MedusaJS: a powerful, open-source e-commerce platform that simplifies the process of building and managing an online store. In this blog, we'll explore the power of MedusaJS and how it makes creating an e-commerce web application a breeze for developers.

**1. Ready-to-Use Application:**

Everything you need for your e-commerce application is available, from the frontend to the backend and the admin panel. With all the necessary modules at your disposal, your task is to mold it according to your requirements and create an e-commerce application with minimal coding in the quickest time possible.

**2. Flexible and Modular Architecture:**

One of the standout features of MedusaJS is its flexible and modular architecture. This allows developers to easily tailor the platform to their specific needs by adding or removing features as necessary. The use of a headless architecture also enables seamless integration with any frontend, making it an ideal choice for businesses seeking a custom online shopping experience.

**3. Easy-to-Use API:**

MedusaJS provides a robust, easy-to-use API that allows developers to access and manage all aspects of their e-commerce store. With comprehensive documentation and an active community, getting started with MedusaJS is simple. Developers can quickly build and deploy their e-commerce web applications with ease.

**4. Support for Multiple Payment and Shipping Options:**

An essential aspect of any e-commerce platform is its ability to support multiple payment and shipping options. MedusaJS offers built-in support for popular payment gateways like Stripe, PayPal, and Braintree, as well as integrations with shipping providers such as Shippo and EasyPost. This flexibility allows businesses to choose the payment and shipping options that best suit their needs, ultimately enhancing the customer experience.

**5. Extendable with Plugins:**

MedusaJS's plugin-based system enables developers to extend the platform's functionality with ease. Numerous plugins are already available for various use cases, such as adding support for additional payment gateways or integrating with third-party services. This extensibility ensures that MedusaJS can grow and adapt to meet the ever-changing needs of the e-commerce landscape.

**6. Community and Support:**

As an open-source platform, MedusaJS boasts an active and supportive community of developers and users. Help is readily available through forums, social media, and other online resources. Regular updates and improvements to the platform ensure that it remains at the cutting edge of e-commerce technology.

**Conclusion:**

 MedusaJS is a powerful, flexible, and easy-to-use e-commerce platform that streamlines the process of creating and managing an online store. With its modular architecture, robust API, support for multiple payment and shipping options, and a thriving community, MedusaJS is an excellent choice for businesses looking to build a custom e-commerce web application. By harnessing the power of MedusaJS, developers can focus on creating engaging, feature-rich online shopping experiences that cater to the demands of today's digital consumers.

Article by Talha Rizwan Malik