Mastering AWS Lambda: An Introduction to Serverless Computing

Automate Your Git Workflow with Git Hooks for Efficiency

Have you ever wondered how you can make your Git workflow smarter and more efficient? What if repetitive tasks like validating commit messages, enforcing branch naming conventions, or preventing sensitive data leaks could happen automatically? Enter Git Hooks—a powerful feature in Git that enables automation at every step of your development process. If you’ve worked with webhooks, the concept of Git Hooks might already feel familiar. Like API events trigger webhooks, Git Hooks are scripts triggered by Git actions such as committing, pushing, or merging. These hooks allow developers to automate tasks, enforce standards, and improve the overall quality of their Git workflows. By integrating Git Hooks into your project, you can gain numerous benefits, including clearer commit histories, fewer human errors, and smoother team collaboration. Developers can also define custom rules tailored to their Git flow, ensuring consistency and boosting productivity. In this SupremeTech blog, I, Đang Đo Quang Bao, will introduce you to Git Hooks, explain how they work, and guide you through implementing them to transform your Git workflow. Let’s dive in! What Are Git Hooks? Git Hooks are customizable scripts that automatically execute when specific events occur in a Git repository. These events might include committing code, pushing changes, or merging branches. By leveraging Git Hooks, you can tailor Git's behavior to your project's requirements, automate repetitive tasks, and reduce the likelihood of human errors. Imagine validating commit messages, running tests before a push, or preventing large file uploads—all without manual intervention. Git Hooks makes this possible, enabling developers to integrate useful automation directly into their workflows. Type of Git Hooks Git Hooks come in two main categories, each serving distinct purposes: Client-Side Hooks These hooks run on the user’s local machine and are triggered by actions like committing or pushing changes. They are perfect for automating tasks like linting, testing, or enforcing commit message standards. Examples:pre-commit: Runs before a commit is finalized.pre-push: Executes before pushing changes to a remote repository.post-merge: Triggers after merging branches. Server-Side Hooks These hooks operate on the server hosting the repository and are used to enforce project-wide policies. They are ideal for ensuring consistent workflows across teams by validating changes before they’re accepted into the central repository. Examples: pre-receive: Runs before changes are accepted by the remote repository.update: Executes when a branch or tag is updated on the server. My Journey to Git Hooks When I was working on personal projects, Git management was fairly straightforward. There were no complex workflows, and mistakes were easy to spot and fix. However, everything changed when I joined SupremeTech and started collaborating on larger projects. Adhering to established Git flows across a team introduced new challenges. Minor missteps—like inconsistent commit messages, improper branch naming, accidental force pushes, or forgetting to run unit tests—quickly led to inefficiencies and avoidable errors. That’s when I discovered the power of Git Hooks. By combining client-side Git Hooks with tools like Husky, ESLint, Jest, and commitlint, I could automate and streamline our Git processes. Some of the tasks I automated include: Enforcing consistent commit message formats.Validating branch naming conventions.Automating testing and linting.Preventing accidental force pushes and large file uploads.Monitoring and blocking sensitive data in commits. This level of automation was a game-changer. It improved productivity, reduced human errors, and allowed developers to focus on their core tasks while Git Hooks quietly enforced the rules in the background. It transformed Git from a version control tool into a seamless system for maintaining best practices. Getting Started with Git Hooks Setting up Git Hooks manually can be dull, especially in team environments where consistency is critical. Tools like Husky simplify the process, allowing you to manage Git Hooks and integrate them into your workflows easily. By leveraging Husky, you can unlock the full potential of Git Hooks with minimal setup effort. I’ll use Bun as the JavaScript runtime and package manager in this example. If you’re using npm or yarn, replace Bun-specific commands with their equivalents. Setup Steps 1. Initialize Git: Start by initializing a Git repository if one doesn’t already exist git init 2. Install Husky: Use Bun to add Husky as a development dependency bun add -D husky 3. Enable Husky Hooks: Initialize Husky to set up Git Hooks for your project bunx husky init 4. Verify the Setup: At this point, a folder named .husky will be created, which already includes a sample of pre-commit hook. With this, the setup for Git Hooks is complete. Now, let’s customize it to optimize some simple processes. Examples of Git Hook Automation Git Hooks empowers you to automate tedious yet essential tasks and enforce team-wide best practices. Below are four practical examples of how you can leverage Git Hooks to improve your workflow: Commit Message Validation Ensuring consistent and clear commit messages improves collaboration and makes Git history easier to understand. For example, enforce the following format: pbi-203 - refactor - [description…] [task-name] - [scope] - [changes] Setup: Install Commitlint: bun add -D husky @commitlint/{config-conventional,cli} Configure rules in commitlint.config.cjs: module.exports = {     rules: {         'task-name-format': [2, 'always', /^pbi-\d+ -/],         'scope-type-format': [2, 'always', /-\s(refactor|fix|feat|docs|test|chore|style)\s-\s[[^\]]+\]$/]     },     plugins: [         {             rules: {                 'task-name-format': ({ raw }) => {                     const regex = /^pbi-\d+ -/;                     return [regex.test(raw),                         `❌ Commit message must start with "pbi-<number> -". Example: "pbi-1234 - refactor - [optimize function]"`                     ];                 },                 'scope-type-format': ({ raw}) => {                     const regex = /-\s(refactor|fix|feat|docs|test|chore|style)\s-\s[[^\]]+\]$/;                     return [regex.test(raw),                         `❌ Commit message must include a valid scope and description. Example: "pbi-1234 - refactor - [optimize function]".                         \nValid scopes: refactor, fix, feat, docs, test, chore, style`                     ];                 }             }         }     ] } Add Commitlint to the commit-msg hook: echo "bunx commitlint --edit \$1" >> .husky/commit-msg With this, we have completed the commit message validation setup. Now, let’s test it to see how it works. Now, developers will be forced to follow this committing rule, which increases the readability of the Git History. Automate Branch Naming Conventions Enforce branch names like feature/pbi-199/add-validation. First, we will create a script in the project directory named scripts/check-branch-name.sh. #!/bin/bash # Define allowed branch naming pattern branch_pattern="^(feature|bugfix|hotfix|release)/pbi-[0-9]+/[a-zA-Z0-9._-]+$" # Get the current branch name current_branch=$(git symbolic-ref --short HEAD) # Check if the branch name matches the pattern if [[ ! "$current_branch" =~ $branch_pattern ]]; then   echo "❌ Branch name '$current_branch' is invalid!"   echo "✅ Branch names must follow this pattern:"   echo "   - feature/pbi-<number>/<description>"   echo "   - bugfix/pbi-<number>/<description>"   echo "   - hotfix/pbi-<number>/<description>"   echo "   - release/pbi-<number>/<description>"   exit 1 fi echo "✅ Branch name '$current_branch' is valid." Add the above script execution command into the pre-push hook. echo "bash ./scripts/check-branch-name.sh" >> .husky/pre-push Grant execute permissions to the check-branch-name.sh file. chmod +x ./scripts/check-branch-name.sh Let’s test the result by pushing our code to the server. Invalid case: git checkout main git push Output: ❌ Branch name 'main' is invalid! ✅ Branch names must follow this pattern:   - feature/pbi-<number>/<description>   - bugfix/pbi-<number>/<description>   - hotfix/pbi-<number>/<description>   - release/pbi-<number>/<description> husky - pre-push script failed (code 1) Valid case: git checkout -b feature/pbi-100/add-new-feature git push Output: ✅ Branch name 'feature/pbi-100/add-new-feature' is valid. Prevent Accidental Force Pushes Force pushes can overwrite shared branch history, causing significant problems in collaborative projects. We will implement validation for the prior pre-push hook to prevent accidental force pushes to critical branches like main or develop. Create a script named scripts/prevent-force-push.sh. #!/bin/bash # Define the protected branches protected_branches=("main" "develop") # Get the current branch name current_branch=$(git symbolic-ref --short HEAD) # Check if the current branch is in the list of protected branches if [[ " ${protected_branches[@]} " =~ " ${current_branch} " ]]; then # Check if the push is a force push for arg in "$@"; do   if [[ "$arg" == "--force" || "$arg" == "-f" ]]; then     echo "❌ Force pushing to the protected branch '${current_branch}' is not allowed!"     exit 1   fi done fi echo "✅ Push to '${current_branch}' is valid." Add the above script execution command into the pre-push hook. echo "bash ./scripts/prevent-force-push.sh" >> .husky/pre-push Grant execute permissions to the check-branch-name.sh file. chmod +x ./scripts/prevent-force-push.sh Result: Invalid case: git checkout main git push -f Output: ❌ Force pushing to the protected branch 'main' is not allowed! husky - pre-push script failed (code 1) Valid case: git checkout main git push Output: ✅ Push is valid. Monitor for Secrets in Commits Developers sometimes unexpectedly include sensitive data in commits. We will set up a pre-commit hook to scan files for sensitive patterns before committing to prevent accidental commits containing sensitive information (such as API keys, passwords, or other secrets). Create a script named scripts/monitor-secrets-with-values.sh. #!/bin/bash # Define sensitive value patterns patterns=( # Base64-encoded strings "([A-Za-z0-9+/]{40,})={0,2}" # PEM-style private keys "-----BEGIN RSA PRIVATE KEY-----" "-----BEGIN OPENSSH PRIVATE KEY-----" "-----BEGIN PRIVATE KEY-----" # AWS Access Key ID "AKIA[0-9A-Z]{16}" # AWS Secret Key "[a-zA-Z0-9/+=]{40}" # Email addresses (optional) "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" # Others (e.g., passwords, tokens) ) # Scan staged files for sensitive patterns echo "🔍 Scanning staged files for sensitive values..." # Get the list of staged files staged_files=$(git diff --cached --name-only) # Initialize a flag to track if any sensitive data is found found_sensitive_data=false # Loop through each file and pattern for file in $staged_files; do # Skip binary files if [[ $(file --mime-type -b "$file") == "application/octet-stream" ]]; then   continue fi # Scan each pattern using grep -E (extended regex) for pattern in "${patterns[@]}"; do   if grep -E -- "$pattern" "$file"; then     echo "❌ Sensitive value detected in file '$file': Pattern '$pattern'"     found_sensitive_data=true     break   fi done done # If sensitive data is found, prevent the commit if $found_sensitive_data; then echo "❌ Commit aborted. Please remove sensitive values before committing." exit 1 fi echo "✅ No sensitive values detected. Proceeding with committing." Add the above script execution command into the pre-commit hook. echo "bash ./scripts/monitor-secrets-with-values.sh" >> .husky/pre-commit Grant execute permissions to the monitor-secrets-with-values.sh file. chmod +x ./scripts/monitor-secrets-with-values.sh Result: Invalid case: git add private git commit -m “pbi-002 - chore - add unexpected private file” Result: 🔍 Scanning staged files for sensitive values... -----BEGIN OPENSSH PRIVATE KEY----- ❌ Sensitive value detected in file 'private': Pattern '-----BEGIN OPENSSH PRIVATE KEY-----' ❌ Commit aborted. Please remove sensitive values before committing. husky - pre-commit script failed (code 1) Valid case: git reset private git commit -m “pbi-002 - chore - remove unexpected private file” Result: 🔍 Scanning staged files for sensitive values... ✅ No sensitive values detected. Proceeding with commit. [main c575028] pbi-002 - chore - remove unexpected private file 4 files changed, 5 insertions(+) create mode 100644 .env.example create mode 100644 .husky/commit-msg create mode 100644 .husky/pre-commit create mode 100644 .husky/pre-push Conclusion "Humans make mistakes" in software development; even minor errors can disrupt workflows or create inefficiencies. That’s where Git Hooks come in. By automating essential checks and enforcing best practices, Git Hooks reduces the chances of errors slipping through and ensures a smoother, more consistent workflow. Tools like Husky make it easier to set up Git Hooks, allowing developers to focus on writing code instead of worrying about process compliance. Whether it’s validating commit messages, enforcing branch naming conventions, or preventing sensitive data from being committed, Git Hooks acts as a safety net that ensures quality at every step. If you want to optimize your Git workflow, now is the time to start integrating Git Hooks. With the proper setup, you can make your development process reliable but also effortless and efficient. Let automation handle the rules so your team can focus on building great software.

 Exploring API Performance Testing with Postman

Hello, tech enthusiasts and creative developers! I’m Vu, the author of SupremeTech’s performance testing series. In the article “The Ultimate Guide to JMeter Performance Testing Tool,” we explored JMeter's strengths and critical role in performance testing. Today, I’m introducing an exciting and straightforward way to do API performance testing using Postman. What is Postman? Postman is a robust API (Application Programming Interface) platform that empowers developers to quickly design, test, document, and interact with APIs. It is a widely used tool for testing APIs, which is valuable in software development, primarily web or mobile app development. Why Use Postman for API Testing? Postman is favored by software developers, testers, and API specialists because of its many advantages: User-Friendly Interface: Postman’s intuitive design makes it easy to use.Supports Diverse HTTP Methods: It handles requests such as GET, POST, PUT, DELETE, PATCH, OPTIONS, and more.Flexible Configuration: Easily manage API request headers, parameters, and body settings.Test Automation with Scripts: Write JavaScript code within the Tests tab to automate API response validation.Integration with CI/CD: Postman's CLI tool, Newman, seamlessly integrates with CI/CD pipelines, enabling automated API testing in development workflows.API Documentation and Sharing: Create and share API documentation with team members or clients effortlessly. Performance API Testing on Postman As of mid-2024, Postman introduced a new feature allowing users to perform API performance testing quickly and conveniently. With just a few simple steps, you can evaluate your API’s performance under high load and ensure its strength. Step 1: Select the Collection for Performance Testing Open Postman and navigate to the Collections tab on the left sidebar.Choose the Collection or Folder you want to test. Step 2: Launch the Collection Runner After selecting your desired Collection or Folder, click Run Collection to open the Collection Runner window.In the Runner, select the APIs you want to include in the performance test.Switch to the Performance tab and choose a simulation method:Fixed: Simulates a fixed number of users.Ramp Up: Starts with a few users and gradually increases.Spike: Introduces a sudden surge in traffic followed by a reduction.Peak: Increases traffic to a high level and sustains it for a period. Step 3: Adjust Virtual Users and Test Duration Configure the Virtual Users and Test Duration settings to simulate the desired load.Start with smaller values, then gradually increase them to gain a clear understanding of your API's performance under varying conditions. Step 4: Run the Test Click Run to start the performance test.During the test, Postman will send API requests and provide real-time data on:Response Time: The API's duration to respond to a request.Error Rate: The percentage of failed requests.Throughput: The number of API requests the system can handle per second. Step 5: Analyze the Report Once the test is complete, Postman generates a detailed report, including: Response Time: Tracks the duration it takes for APIs to process requests.Error Rate: Highlights any issues encountered during testing.Throughput: Measures the system's capacity to process requests under load. Use these metrics to evaluate whether your API performs efficiently under heavy traffic. These insights will guide you in optimizing your API for better performance. Leverage Customization for Realistic User Simulation Postman allows you to customize request data for each virtual user. You can upload a CSV or JSON file with unique datasets if you want different data for each user. This feature enables a more accurate simulation of real-world user behavior. After each test run, Postman provides an easy-to-understand report highlighting the areas for improvement. You can track performance changes and compare test results to identify weaknesses and refine your API. Test and Optimize Your API with Postman With Postman’s new performance testing feature, API optimization has never been easier. It helps you quickly identify and address potential issues to ensure your system is always ready to handle user demands effectively and reliably.   For more details and step-by-step guidance, check out the following resources on the Postman website:   OverviewRun a performance testView performance test metricsDebug performance test errorsInject data into virtual users Start your API performance optimization journey with Postman and prepare your system to meet every demand seamlessly. >>> Explore more articles about performance testing: SupremeTech’s Expertise in the Process of Performance Testing

From Raw Data to Perfect API Responses: Serialization in NestJS

Hello, My name is Dzung. I am a developer who has been in this game for approximately 6 years. I've just started exploring NestJS and am excited about this framework's capabilities. In this blog, I want to share the knowledge I’ve gathered and practiced in NestJS. Today's topic is serialization! As you know, APIs are like the messengers of your application, delivering data from the backend to the client side. Without proper control, they might spill too much information, such as passwords or internal settings. This is where serialization in NestJS steps in, turning messy, raw data into polished, purposeful API responses. With the power of serialization, you can control exactly what your users see, hide sensitive fields, format nested objects, and deliver secure, efficient, and downright beautiful responses. In this blog, we’ll explore how serialization in NestJS works, why it’s a must-have skill for any developer, and how to implement it step by step. Your APIs will go from raw and unrefined to clean and professional by the end. Let’s dive in! What Happens Without Serialization? Let’s look at what happens when you don’t use serialization in your NestJS application. Imagine you’re building a user management system, and you create an API endpoint to fetch user details. Here’s your User entity: Now, you write a simple endpoint to fetch a user: What happens when you call this endpoint? The API sends the entire user object straight to the client—every single field included: The consequences of lacking Serialization in the NestJS application Security Risks: Sensitive data, like passwords, should never be exposed in API responses.Data Overload: Users and clients don’t need internal flags or timestamps—they just add noise.Lack of Professionalism: Messy, unfiltered responses make your API look unpolished and unreliable. Next, we’ll see how to clean up this mess and craft polished API responses using NestJS serialization techniques. The Differences in Applying Serialization By implementing serialization in your NestJS application, you can take full control over what data is exposed in your API responses. Let’s revisit the previous example and clean it up. Step 1: Install class-transformer To get started with serialization, you need the class-transformer package. Install it with: Step 2: Update the User Entity with Exposed or Excluded Decorator Use class-transformer decorators to specify which fields should be exposed or excluded. Only the ID and email fields will be included in the response. Step 3: Apply the Serializer Interceptor NestJS provides a built-in ClassSerializerInterceptor to handle serialization. You can apply it at different levels: Per-Controller Globally To apply serialization to all controllers, add the interceptor to the application setup: When the Get User Endpoint is called, this is what your API will now return: Why Serialization Makes a Difference Security: Sensitive fields are automatically excluded, keeping your data safe.Clarity: Only the necessary fields are sent, reducing noise and improving usability.Professionalism: Clean and consistent responses give your API a polished look. Dynamic Serialization with Group What if you want to show different data to users, such as admins versus regular users? The class-transformer package supports groups, allowing you to expose fields based on context. Example: In the controller, specify the group for the transformation: When the Get User Endpoint is called, this is what your API will now return: By incorporating serialization into your NestJS application, you not only improve security but also enhance the user experience by providing streamlined, predictable, and professional API responses. Now that you know how serialization works in NestJS, you can apply these techniques to your projects, creating safer, cleaner, and more maintainable APIs. SupremeTech has lots of experience and produces web or app services. Let’s schedule a call now if you want to work with us. Also, now we are hiring! Please check open positions for career opportunities.

Atomic Design In Software Development

Hello everyone! I'm Linh, a front-end developer passionate about discovering effective methods for system development. When I first entered the tech industry, I faced challenges organizing UI components logically and reusable. This experience motivated me to seek strategies to optimize my workflow while ensuring that the products I developed were easy to scale and maintain. Recently, I explored the concept of Atomic Design, which has become a guiding principle for me in tackling these challenges more systematically and scientifically. This approach has significantly influenced my design thinking. Through this article, I aim to inspire you and offer a fresh perspective if you're also looking for solutions for your systems. Taking Cues From Chemistry Looking for a way to build and create a design system reminds me of developments in other fields and industries. Many areas, such as design and architecture, have developed smart modular systems to produce incredibly complex things like airplanes, ships, and skyscrapers. These thoughts take me back to my school days in chemistry labs. The idea is that all matter—whether solid, liquid, gas, simple, or complex—is made up of atoms. These atoms bond to form molecules, which combine into more complex organisms, eventually creating everything in our universe. Similarly, systems built up from smaller components are more logical and connected. We can break the entire system into basic building blocks and work from there. That’s the core idea of atomic design. What Is Atomic Design? Atomic Design is an interface design methodology that focuses on creating a system of components rather than entire pages. Introduced by Brad Frost in 2013, this approach emphasizes using small, independent elements that can be reused and combined to form a cohesive whole. This strategy facilitates quicker product development, promotes a unified interface, and simplifies maintenance. “Atomic Design is a methodology where designers prioritize creating individual components and then combine them, rather than designing entire pages.” Atomic Design can enhance the design development process, promoting consistency, adaptability, and efficiency across projects. By applying the principles of Atomic Design, developers and designers can collaborate within a cohesive design system, ultimately delivering a scalable and high-quality user experience. Atomic Design organizes components into five levels, progressing from simple to complex, as illustrated above: Atoms: These are the most basic components, such as HTML tags like buttons, inputs, labels, and icons.Molecules are combinations of two or more atoms that create more complex components. For example, a form group consists of an input and a label.Organisms are more complex UI components of multiple molecules and/or atoms. For instance, a form can comprise several form groups and buttons.Templates are layout frameworks created from organisms and molecules. They define how these components are arranged on a page but do not contain actual data or content; they represent an abstract structure.Pages: These are specific instances of templates where real content is added to create complete web pages or applications. Pages include all necessary components—atoms, molecules, organisms, and templates—along with specific content for end users to interact with. In the following sections, we will explore each level of Atomic Design in detail. Atoms Similar to atoms in nature, these elements may seem abstract, but they are the foundational building blocks of all our user interfaces. In web interfaces, atoms are the fundamental HTML elements, such as labels, inputs, and buttons. As the smallest components, they cannot be broken down any further. Atoms can also be abstract concepts, including colors, fonts, and even more intangible UI aspects, like animations. Molecules When we combine atoms, things become more interesting and tangible. Molecules are groups of atoms that bond together and serve as the minor basic units of a compound. They possess unique properties and act as core elements within our design system. For example, when atoms like labels, inputs, or buttons stand alone, they are useless. However, when combined into a form, they can work effectively together. Molecules can be simple or complex and designed for reuse or one-time use. A molecule can have multiple variants (similar to components in a Variant in Figma) intended for different contexts or interactions (such as hover, pressing, or after a delay). Organisms Molecules provide us with building blocks to combine to create organisms. Organisms are groups of molecules that come together to form a more complex and complete structure. Organisms can consist of similar or different elements. For instance, a website header might include a logo, menu, and search box. When you visit the category page of most e-commerce websites, you'll see product listings displayed in a grid format, composed of smaller components like images, titles, captions, etc. Templates Templates are combinations of organisms that create complete pages. They focus on the basic content structure rather than the final content. Templates help clearly define important properties such as image sizes and text lengths, thereby establishing an effective system for managing dynamic content and ensuring alignment with the design. “You can create good experiences without knowing the content. What you can’t do is create good experiences without knowing your content structure. What is your content made from, not what your content is?” Pages Pages are specific instances of templates. Placeholder content is replaced with representative content to depict what end users will see accurately. In simpler terms, pages are templates filled with real data for presentation purposes, offering the most realistic view of the design. Developers and designers will test how templates work with actual content, allowing designers to return and adjust to molecules, organisms, and templates as needed. Benefits Of Applying Atomic Design In User Interface (UI) Design Consistency Atomic Design utilizes a modular approach, ensuring each interface element adheres to a consistent design language. When a component, such as a button or color, is modified or updated, these changes are automatically reflected across all pages, maintaining uniformity throughout the product. This consistency is crucial for large and complex design teams, where smooth and synchronized updates are essential. Reusability Reusability is one of the most significant advantages of Atomic Design. By defining basic components in a standardized way, you can reuse them throughout different contexts and parts of the product. Due to this reusability, designers and developers can quickly integrate complex interfaces from standardized small components. For example, a button designed according to the standards can be used on various pages, from the homepage to product pages and forms, without needing to be recreated. This not only minimizes repetitive work but also ensures consistency across the entire design system. Atomic Design's reusability also promotes flexibility. It allows for easy updates or replacements of a component across the system without changing every detail on each page. Maintainability Atomic Design enables designers and developers to efficiently monitor and modify specific interface parts without impacting the entire system. The team can directly adjust the associated atoms or molecules when updates are required for a component, such as a button or color. These changes will automatically be reflected across all instances of that component. This approach reduces errors, minimizes repetitive tasks, and ensures that updates are consistently applied throughout the system. Scalability Like maintainability, Atomic Design allows designers and developers to expand the system by adding new components at the appropriate levels without disrupting the overall structure. For instance, if a new type of button or content combination is needed, the team can create new atoms or molecules and seamlessly integrate them into existing organisms and templates. This method enables a system to quickly scale from a small application to larger, more complex products with many new pages and features while maintaining structural integrity. Atomic Design's scalability ensures that products can evolve continuously and improve while minimizing the effort required for updates or adjustments to meet new demands. This helps products quickly adapt to changing user needs and market conditions. A prime example of successfully implementing Atomic Design principles in UI design is the Shopee UI Design System. Shopee is building its interface systems based on Atomic Design principles to maintain consistency across its entire product range. By applying Atomic Design to fundamental components such as buttons, colors, and font families (Atoms), as well as groups of components like product lists (Molecules) and elements like navigation bars or product carousels (Organisms), Shopee enhances development speed through the reuse of standardized components, ensuring a consistent interface across multiple platforms. Reality Use-Cases Atomic Design is a robust methodology for creating user interfaces (UI) that has been extensively utilized in various open-source projects. Below are some notable systems that SupremeTech has adopted and incorporated into its client solutions: Shopify Polaris Design System Shopify uses Polaris to create a consistent interface for all applications related to Shopify. Similar to Shopee UI, Shopify Polaris applies the levels of Atoms, Molecules, and Organisms from Atomic Design into its design system. This helps Shopify enhance development efficiency and maintain long-term product quality. MedusaJS As an open-source e-commerce platform, MedusaJS implements atomic design to organize the UI components for its Storefront and Admin Dashboard. Storefront UI: When building the Shopify Storefront interface for Medusa.js projects, Atomic Design helps organize UI components hierarchically. 1. Atoms: Button:  Add to Cart button, View Product button.Text: Product title, price.Icon: Shopping cart icon, search icon. 2. Molecules: Product Card: Includes an image, title, price, and Add to Cart button.Navbar: Contains the logo, menu links, and search bar. 3. Organisms: Product Grid: A grid of product cards.Header: Combines the logo, navigation bar, and mini cart. 4. Templates: Product detail pages or product category pages. 5. Pages: Homepage, checkout page. Admin Dashboard: Medusa.js also requires an admin UI to manage products, orders, and customers. Atomic Design helps organize the admin interface. 1. Atoms: Input: Input fields (product name, price).Button: Save, Delete, or Add product buttons.Badge: Displays order status (completed, processing). 2. Molecules: Search Bar: Search input field with a button and icon.Table Row: A row in a data table (product, order). 3. Organisms: Data Table: Displays a list of products or orders.Sidebar: Navigation menu for sections like Products and Orders. 4. Templates: Product list page with sidebar and data table. 5. Pages: Product management page, order management page. By applying Atomic Design, MedusaJS achieves: Component reusability: UI components like buttons, forms, or cards can be reused in both the storefront and admin dashboard.Easy expansion: When adding new features (e.g., wishlist or promotional modules), you can combine existing Atoms, Molecules, and Organisms.Consistency assurance: Atomic Design ensures that components are uniformly designed from the admin interface to the storefront.Facilitated collaboration: Design and development teams can collaborate on a transparent hierarchical system. Wrapping Up Atomic Design is a valuable method in design and development; fundamentally, it serves as a framework for building user interfaces. The immediate benefits include time and cost savings, improved product consistency, enhanced team collaboration, support for accessibility efforts, and strategic long-term initiatives. These reasons drive organizations to adopt design systems. Mastering the core principles of modern design systems will help you grow as a designer or developer.