Explore all articles in Software Development

How to Create Smooth Navigation Transitions with View Transitions API and React Router?

Normally, when users move between pages in a web app, they see a white flash or maybe a skeleton loader. That’s okay, but it doesn’t feel smooth. Try View Transitions API! Imagine you have a homepage showing a list of movie cards. When you click one, it takes you to a detail page with a big banner of the same movie. Right now, there’s no animation between these two screens, so the connection between them feels broken. With the View Transitions API, we can make that connection smoother. It creates animations between pages, helping users feel like they’re staying in the same app instead of jumping from one screen to another. Smooth and connected transition using View Transitions API In this blog, you’ll learn how to create these nice transitions using the View Transitions API and React Router v7. Basic Setup The easiest way to use view transitions is by adding the viewTransition prop to your React Router links: import { NavLink } from 'react-router'; <NavLink to='/movies/avengers-age-of-ultron' viewTransition> Avengers: Age of Ultron </NavLink> Only cross-fade animation without element linking It works — but it still feels a bit plain. The whole page fades, but nothing stands out or feels connected. Animating Specific Elements In the previous example, the entire page takes part in the transition. But sometimes, you want just one specific element — like an image — to animate smoothly from one page to another. Let’s say you want the movie image on the homepage to smoothly turn into the banner on the detail page. We can do that by giving both images the same view-transition-name. // app/routes/home.tsx export default function Home() { return ( <NavLink to='/movies/avengers-age-of-ultron' viewTransition> <img className='card-image' src='/assets/avengers-age-of-ultron.webp' alt='Avengers: Age of Ultron' /> <span>Avengers: Age of Ultron</span> </NavLink> ); } // app/routes/movie.tsx export default function Movie() { return ( <img className='movie-image' src='/assets/avengers-age-of-ultron.webp' alt='Avengers: Age of Ultron' /> ); } // app.css ... /* This class assign to the image of the movie card in the home page */ .card-image { view-transition-name: movie-image; } /* This class assign to the image of the movie in the movie details page */ .movie-image { view-transition-name: movie-image; } ... Now, when you click a movie card, the image will smoothly grow into the banner image on the next page. It feels much more connected and polished. Animating a single element with view-transition-name Handling Dynamic Data  This works great for a single element, but what happens if you have a list of items, like multiple movies? If you assign the same view-transition-name to all items, the browser won’t know which one to animate. Each transition name must be unique per element — but hardcoding different class names for every item is not scalable, especially when the data is dynamic. Incorrect setup – Same view-transition-name used for all items in a list. The Solution: Assign view-transition-name during navigation Instead of setting the view-transition-name upfront, a more flexible approach is to add it dynamically when navigation starts — that is, when the user clicks a link. // app/routes/home.tsx export default function Home({ loaderData: movies }: Route.ComponentProps) { return ( <ul> {movies.map((movie) => ( <li key={movie.id}> <NavLink to={`/movies/${movie.id}`} viewTransition> <img className='card-image' src={movie.image} alt={movie.title} /> <span>{movie.title}</span> </NavLink> </li> ))} </ul> ); } // app/routes/movie.tsx export default function Movie({ loaderData: movie }: Route.ComponentProps) { return ( <img className='movie-image' src={movie.image} alt={movie.title} /> ); } // app.css ... /* Assign transition names to elements during navigation */ a.transitioning .card-image { view-transition-name: movie-image; } .movie-image { view-transition-name: movie-image; } ... Final output – Smooth transition with dynamic list items Here’s what happens: When a user clicks a link, React Router adds a transitioning class to it.That class tells the browser which image should animate.On the detail page, the image already has view-transition-name: movie-image, so it matches. This way, you can reuse the same CSS for all items without worrying about assigning unique class names ahead of time. You can explore the full source code below: Live DemoSource on GitHub Browser Support The View Transitions API is still relatively new, and browser support is limited:  Chrome (from version 111)Edge (Chromium-based)Firefox & Safari: Not supported yet (as of May 2025) You should always check for support before using it in production. Conclusion The View Transitions API gives us a powerful tool to deliver smooth, native-feeling page transitions in our web apps. By combining it with React Router, you can: Enable basic transitions with minimal setupAnimate specific elements using view-transition-nameHandle dynamic content gracefully by assigning transition names at runtime Hope this guide helps you create more fluid and polished navigation experiences in your React projects!

Uploading objects to AWS S3 with presigned URLs

I’m Quang Tran, a full-stack developer with four years of experience. I've had my fair share of struggles when it comes to uploading files to cloud storage services like Amazon S3. Not too long ago, I used to rely on the traditional method: the server would receive the file from the client, store it temporarily, and then push it to S3. What seemed like a simple task quickly became a resource-draining nightmare, and my server started to “cry out” from the overload. But then, I discovered Presigned URLs—the technique that allows clients to upload files directly to S3 without burdening the server. Presigned URLs help us solve the issues mentioned above. Today, I will show you how to implement this in SupremeTech's article. Traditional file uploading When you use applications with file upload features, such as uploading photos to social media platforms, the process is mainly done by selecting a photo from your device and sending it to the server for storage. This process started with traditional upload and has evolved over time. The steps were as follows: The user selects a photo from the device.The client sends a request to upload the photo to the server.The server receives and processes the photo, then stores it in the storage. The traditional file upload process This process may seem simple, but it can impact the server's performance. Imagine when thousands of people are uploading data at the same time, and the data size is large; your server could become overloaded. This requires you to scale your application server and ensure available network bandwidth. After identifying this issue, AWS introduced the Presigned URL feature as a solution. So, what is a Presigned URL? What is the Presigned URL? A presigned URL is a URL that you can provide to your users to grant temporary access to a specific S3 object. You can use a presigned URL to read or upload an object to S3 directly without passing it through the server. This allows an upload without requiring another party to have AWS security credentials or permissions. If an object with the same key already exists in the bucket specified in the presigned URL, Amazon S3 replaces the existing object with the uploaded object. When creating a presigned URL, you must provide the following information: Amazon S3 bucket nameAn object key (if reading this object will be in your Amazon S3 bucket, if uploading, this is the file name to be uploaded)An HTTP method (GET for reading objects or PUT for uploading)An expiration time intervalAWS credentials (AWS access key ID, AWS secret key ID) You can use the presigned URL multiple times, up to the expiration date and time. Amazon S3 grants access to the object through a pre-signed URL, which can only be generated by the bucket's owner or anyone with valid security credentials. How to upload a file to S3 using a presigned URL? Workflow for uploading a file using a presigned URL How to create a presigned URL for uploading an object? We already know what a presigned URL is, so let's explore how to create one and upload a photo through it. There are two ways to create a presigned URL for uploading, which are: Using the AWS Toolkit for Visual Studio (Windows).Using the AWS SDKs to generate a PUT presigned URL for uploading a file. In this blog, I will introduce how to use the AWS JS SDK (AWS SDK for JavaScript) to generate a PUT presigned URL for uploading a file. Using the AWS JS SDK First, you need to log in to the AWS console with an account with permission to read and write objects to S3. When you use the AWS SDKs to generate a presigned URL, the maximum expiration time is 7 days from the creation date.You need to prepare the AWS credentials (AWS access key ID, AWS secret key ID), region, S3 bucket name, and object key before uploading and securely storing them on the server. Before we start creating a presigned URL, there are a few important things to note as follows: Block all public access to the S3 bucket (crucial for data security, preventing accidental data leaks or unauthorized access to sensitive information)Never store AWS credentials in front-end code (access key ID, secret key ID)Use environment variables and secret managers to store AWS credentials securelyLimit IAM permissions (least privilege principle - AWS recommendation)Configure CORS to allow other origins to send file upload requests To create a direct image upload flow to S3, follow these steps: On the front-end, you call the API to create a presigned URL on the back-end server and send the key of the object you want to store.On the back end, you create an API to generate the pre-signed URL, as shown below, and respond to the front-end. import { PutObjectCommand, S3Client, } from '@aws-sdk/client-s3'; import { getSignedUrl } from '@aws-sdk/s3-request-presigner'; const createPresignedUrlWithClient = async ({ region, bucket, key }) => { const client = new S3Client({   region,   credentials: {     accessKeyId: 'your access key id',     secretAccessKey: 'your secret key id',   }, }); const command = new PutObjectCommand({ Bucket: bucket, Key: key }); return await getSignedUrl(client, command, { expiresIn: 36000 }); }; const presignedUrl = await createPresignedUrlWithClient({ region: 'ap-southeast-1', bucket: 'your-bucket-name', key: 'example.txt', }); The front-end receives the response and performs a PUT request to upload the file directly to the S3 bucket. <!-- wp:table --> <figure class="wp-block-table"><table><tbody><tr><td><strong>const</strong> putToPresignedUrl = (presignedUrl) =&gt; {<br>&nbsp; <strong>const</strong> data = 'Hello World!';<br>&nbsp; axios.put(presignedUrl, data);<br>};</td></tr></tbody></table></figure> <!-- /wp:table --> Object in S3 after upload Content of the object An example of a presigned URL:  https://presignedurldemo.s3.ap-southeast-1.amazonaws.com/example.txt?X-Amz-Algorithm=AWS4-HMAC-SHA256&amp;X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&amp;X-Amz-Credential=AKIAUPMYNICO4HMDKONH%2F20250101%2Fap-southeast-1%2Fs3%2Faws4_request&amp;X-Amz-Date=20250101T021742Z&amp;X-Amz-Expires=36000&amp;X-Amz-Signature=9f29f0f34a19c9e9748eb2fc197138d4345e0124746f99ad56e27e08886fa01a&amp;X-Amz-SignedHeaders=host&amp;x-amz-checksum-crc32=AAAAAA%3D%3D&amp;x-amz-sdk-checksum-algorithm=CRC32&amp;x-id=PutObject Among them, there are query parameters that are required for S3 to determine whether the upload operation is allowed. Query parameterDescriptionX-Amz-AlgorithmThe signing algorithm used. Typically AWS4-HMAC-SHA256X-Amz-CredentialA string that includes the access key ID and the scope of the request. Format: <AccessKey>/<Date>/<Region>/s3/aws4_request. It helps AWS identify the credentials used to sign the request.X-Amz-DateThe timestamp (in UTC) when the URL was generated. Format: YYYYMMDD'T'HHMMSS'Z'.X-Amz-ExpiresThe number of seconds before the URL expires (e.g., 3600 for one hour). After this time, the URL becomes invalid.X-Amz-SignedHeadersA list of headers that are included in the signature. Commonly just host, but can include content-type, etc., if specified during signing.X-Amz-SignatureThe actual cryptographic signature ensures that the request has not been tampered with and proves that the sender has valid credentials. Now that you know how to generate a presigned URL, let's examine some limitations you should consider. Limitations of Using S3 Presigned URLs 5GB Upload Limit: 5GB per-request upload limit in S3, with no easy way to increase itURL Management Overhead: A unique URL must be generated for every upload, increasing code complexity and backend logic.Risk of Unintended Access: Anyone with the URL can upload until it expires. There's no built-in user validation.Client-Side Upload Issues: Client-side uploads can cause data inconsistency if an error occurs mid-upload. See more: Mastering AWS Lambda: An Introduction to Serverless ComputingAWS Lambda Triggers: How to Trigger a Lambda Function?Best Practices for Building Reliable AWS Lambda Functions Conclusion You have learned another way to upload objects to S3 directly without requiring public access to your S3 bucket. Please choose the method that best fits your use case. References: AWS (no date) Uploading objects - Amazon Simple Storage Service, AWS. Available at: https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html (Accessed: 19 May 2025).  AWS (no date b) Uploading objects with presigned URLs - Amazon Simple Storage Service, AWS. Available at: https://docs.aws.amazon.com/AmazonS3/latest/userguide/PresignedUrlUploadObject.html (Accessed: 19 May 2025).

Mastering AWS Lambda: An Introduction to Serverless Computing

Imagine this: you have a system that sends emails to users to notify them about certain events at specific times of the day or week. During peak hours, the system demands a lot of resources, but it barely uses any for the rest of the time. If you were to dedicate a server just for this task, managing resources efficiently and maintaining the system would be incredibly complex. This is where AWS Lambda comes in as a solution to these challenges. Its ability to automatically scale, eliminate server management, and, most importantly, charge you only for the resources you use simplifies everything. Hello everyone! I’m Đang Đo Quang Bao, a Software Engineer at SupremeTech. Today, I’m excited to introduce the series' first episode, “Mastering AWS Lambda: An Introduction to Serverless Computing.” In this episode, we’ll explore: The definition of AWS Lambda and how it works.The benefits of serverless computing.Real-world use cases. Let’s dive in! What is AWS Lambda? AWS Lambda is a serverless computing service that Amazon Web Services (AWS) provides. It executes your code in response to specific triggers and scales automatically, charging you only for the compute time you use. How Does AWS Lambda Work? AWS Lambda operates on an event-driven model, reacting to specific actions or events. In simple terms, it executes code in response to particular AWS lambda triggers. Let’s explore this model further to gain a more comprehensive understanding. The above is a simplified workflow1 for sending emails to many users simultaneously, designed to give you a general understanding of how AWS Lambda works. The workflow includes: Amazon EventBridge:Role: EventBridge acts as the starting point of the workflow. It triggers the first AWS Lambda function at a specific time each day based on a cron schedule.How It Works:Configured to run automatically at 00:00 UTC or any desired time.Ensures the workflow begins consistently without manual intervention.Amazon DynamoDB:Role: DynamoDB is the primary database for user information. It holds the email addresses and other relevant metadata for all registered users.How It Works:The first Lambda function queries DynamoDB to fetch the list of users who need to receive emails.AWS Lambda (1st Function):Role: This Lambda function prepares the user data for email sending by fetching it from DynamoDB, batching it, and sending it to Amazon SQS.How It Works:Triggered by EventBridge at the scheduled time.Retrieves user data from DynamoDB in a single query or multiple paginated queries.Split the data into smaller batches (e.g., 100 users per batch) for efficient processing.Pushes each batch as a separate message into Amazon SQS.Amazon SQS (Simple Queue Service).Role: SQS serves as a message queue, temporarily storing user batches and decoupling the data preparation process from email-sending.How It Works:Each message in SQS represents one batch of users (e.g., 100 users).Messages are stored reliably and are processed independently by the second Lambda function.AWS Lambda (2nd Function):Role: This Lambda function processes each user batch from SQS and sends emails to the users in that batch.How It Works:Triggered by SQS for every new message in the queue.Reads the batch data (e.g., 100 users) from the message.Sends individual emails to each user in the batch using Amazon SES.Amazon SES (Simple Email Service).Role: SES handles the actual email delivery, reliably ensuring messages reach users’ inboxes.How It Works:Receives the email content (recipient address, subject, body) from the second Lambda function.Delivers emails to the specified users.Provides feedback on delivery status, including successful deliveries, bounces, and complaints. As you can see, AWS Lambda is triggered by external events or actions (AWS EventBridge schedule) and only "lives" for the duration of its execution. >>> Maybe you are interested: The Rise of Serverless CMS SolutionsCreate Your First AWS Lambda Function (Node.js, Python, and Go) Benefits of AWS Lambda No Server Management:Eliminate the need to provision, configure, and maintain servers. AWS handles the underlying infrastructure, allowing developers to focus on writing code.Cost Efficiency:Pay only for the compute time used (measured in milliseconds). There are no charges when the function isn’t running.Scalability:AWS Lambda automatically scales horizontally to handle thousands of requests per second.Integration with AWS Services:Lambda integrates seamlessly with services like S3, DynamoDB, and SQS, enabling event-driven workflows.Improved Time-to-Market:Developers can deploy and iterate applications quickly without worrying about managing infrastructure. Real-World Use Cases for AWS Lambda AWS Lambda is versatile and can be applied in various scenarios. Here are some of the most common and impactful use cases: Real-Time File ProcessingExample: Automatically resizing images uploaded to an Amazon S3 bucket.How It Works:An upload to S3 triggered a Lambda function.The function processes the file (e.g., resizing or compressing an image).The processed file is stored back in S3 or another storage system.Why It’s Useful:Eliminates the need for a dedicated server to process files.Automatically scales based on the number of uploads.Building RESTful APIsExample: Creating a scalable backend for a web or mobile application.How It Works:Amazon API Gateway triggers AWS Lambda in response to HTTP requests.Lambda handles the request, performs necessary logic (e.g., CRUD operations), and returns a response.Why It’s Useful:Enables fully serverless APIs.Simplifies backend management and scaling.IoT ApplicationsExample: Processing data from IoT devices.How It Works:IoT devices publish data to AWS IoT Core, which triggers Lambda.Lambda processes the data (e.g., analyzing sensor readings) and stores results in DynamoDB or ElasticSearch.Why It’s Useful:Handles bursts of incoming data without requiring a dedicated server.Integrates seamlessly with other AWS IoT services.Real-Time Streaming and AnalyticsExample: Analyzing streaming data for fraud detection or stock market trends.How It Works:Events from Amazon Kinesis or Kafka trigger AWS Lambda.Lambda processes each data stream in real time and outputs results to an analytics service like ElasticSearch.Why It’s Useful:Allows real-time data insights without managing complex infrastructure.Scheduled TasksExample: Running daily tasks/reports or cleaning up expired data.How It Works:Amazon EventBridge triggers Lambda at scheduled intervals (e.g., midnight daily).Lambda performs tasks like querying a database, generating reports, or deleting old records.Why It’s Useful:Replaces traditional cron jobs with a scalable, serverless solution. Conclusion AWS Lambda is a powerful service that enables developers to build highly scalable, event-driven applications without managing infrastructure. Lambda simplifies workflows and accelerates time-to-market by automating tasks and seamlessly integrating with other AWS services like EventBridge, DynamoDB, SQS, and SEStime to market. We’ve explored the fundamentals of AWS Lambda, including its definition, how it works, its benefits, and its application in real-world use cases. It offers an optimized and cost-effective solution for many scenarios, making it a vital tool in modern development. At SupremeTech, we’re committed to harnessing innovative technologies to deliver impactful solutions. This is just the beginning of our journey with AWS Lambda. In upcoming episodes, we’ll explore hơ to optimize AWS Lambda functions in different programming languages and uncover best practices for building efficient serverless applications. Stay tuned, and let’s continue mastering AWS Lambda together! Note: 1.  This workflow is for reference purposes only and is not an optimized solution.

 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.

How to Undo Commits Safely in Git: Git Reset and Git Revert Explained

Introduction In software development, mistakes in commits happen more frequently than we would prefer. Imagine you are working on a feature branch and accidentally commit sensitive information, like an API key, or commit in the wrong branch. You quickly realize the need to undo these changes, but as you search for solutions, you come across two common commands: git reset and git revert. Each offers a way to return, but which is right for your situation? In this article, SupremeTech will explore both commands, how they work, when to use them, and how to decide which approach best addresses your specific needs. Three trees in Git Before getting started, it’s important to understand Git's internal state management systems, called “Git’s three-tree”: Working Directory: This is the workspace on your local machine, it reflects the current state of your files and any changes made that have not yet been staged or committed. You can see changes in the Working Directory with git status.Staging Index: This space holds a snapshot of changes ready to be committed. After you’ve made changes in the Working Directory, you can add them to the Staging Index with git add.Commit History: This is the timeline of saved changes in your project. When you use the git commit command, it takes the changes from the Staging Index and adds them to this history as a new commit. Figure 1. The Git’s three-tree The animation above demonstrates Git's three-tree structure by showing the creation of file1.js and committing it as C1. We add two more examples: file2.js as a C2 commit and file3.js as a C3 commit. These three commits will be used throughout the article as we explore git reset and git revert commands. Figure 2. Visualizing Git's three-tree with three commits Undoing commits with git reset The git reset command allows you to undo changes in your working directory by moving the branch tip back to a specific commit and discarding all commits made after that point. Figure 3. Visualizing the git reset command After running the command git reset HEAD~1, you’ll notice two changes: The branch tip has moved to the commit C2.The latest commit (C3) has been discarded from the commit history. The HEAD~1 is a way to reference the commit before the current HEAD. You can use similar syntax to go back further, like HEAD~2 to go back two commits from HEAD. Alternatively, you can specify a particular commit using its hash ID. The next question is where did the changes from C3 commit go? (the file3.js in this example). Did it delete permanently, or is it saved somewhere? This is where the git reset flags come into play. Bypassing one of the following flags, you can control the changes: --soft: It undoes the commits in the history and places the changes back in the Staging Index, ready to be committed again if needed. Figure 4. Visualizing git reset command with --soft flag -—mixed (this is the default option): It is similar to—-soft but also clears the Staging Index. This means any changes from the discarded commits are left unstaged in the Working Directory, requiring you to re-add them before re-committing. Figure 5. Visualizing git reset command with --mixed flag --hard: This option clears all changes from both the Staging Index and Working Directory and resets the codebase to match the specified commit without making any modifications. Figure 6. Visualizing git reset command with --hard flag By using git reset, you've successfully undone a specific commit. However, try to push these changes to the remote repository with a regular git push. You’ll get an error because the local commit history no longer matches the remote. To push these changes, you need to use a force push (git push --force). While this command will update the remote branch, it comes with risks - it can overwrite the remote history, creating potential issues for other developers. To avoid these problems, let’s explore a safer alternative: Undoing public commits with git revert The git revert command is an undo command, but it doesn’t work like the git reset. Instead of removing a commit from the project history, it creates a new one containing the inverse of the original changes. Figure 7. Visualizing the git revert command The result of running the command git revert HEAD is a new commit that undoes the changes made in the C3 commit. Since the C3 commit added file3.js, the revert will effectively delete this file. In short, running git revert HEAD will bring your code back to its state at the C2 commit. You can prevent git revert from automatically creating a new commit by using the -n or --no-commit flag. With this option, the inverse changes are placed in the Staging Index and Working Directory, allowing you to review or modify them before committing. Figure 8. Visualizing git revert command with --no-commit flag The git revert command allows you to go back to previous commits without removing any mistake commits. It doesn’t re-write the project history. Because of this, this command should be used to undo changes on a public branch. What is the difference between Git Reset vs. Git Revert? The difference between git reset and git revert is that git reset should be used to undo changes in your local history, while git revert should be recommended for undoing changes on a shared or public branch. Both git reset and git revert are commands for undoing changes, but they work differently in key ways: git resetgit revertHow it worksReverts to a previous state by removing the specified commit.Reverts to a previous state by creating a new commit with inverse changes.OptionsOffers --mixed, --soft, and --hard flags to control how changes are handled.Offers --no-commit to add inverse changes without automatically committing them.UsageRecommended for undoing changes in your local history.Recommended for undoing changes on a shared or public branch. Conclusion By now, you should clearly understand how to undo changes in a Git repository using git reset and git revert. In short, use git reset for local-only history changes, and use git revert to undo changes on a shared branch safely. Choosing the right command for your situation lets you keep your project history clean and ensures smoother collaboration with your teammates.

Ionic vs. React Native: A Comprehensive Comparison

Ionic vs. React Native is a common debate when choosing a framework for cross-platform app development. Both frameworks allow developers to create apps for multiple platforms from a single codebase. However, they take different approaches and excel in different scenarios. Here’s a detailed comparison. Check out for more comparisons like this with React Native React Native vs. Kotlin Platform Native Script vs. React Native The origin of Ionic Framework Ionic Framework was first released in 2013 by Max Lynch, Ben Sperry, and Adam Bradley, founders of the software company Drifty Co., based in Madison, Wisconsin, USA. What's the idea behind Ionic? The creators of Ionic saw a need for a tool that could simplify the development of hybrid mobile apps. At the time, building apps for multiple platforms like iOS and Android required separate codebases, which was time-consuming and resource-intensive. Therefore, the goal was to create a framework that allowed developers to use web technologies—HTML, CSS, and JavaScript—to build apps that could run on multiple platforms with a single codebase. Its release and evolution over time The first version of Ionic was released in 2013 and was built on top of AngularJS. It leveraged Apache Cordova (formerly PhoneGap) to package web apps into native containers, allowing access to device features like cameras and GPS. 2016: With the rise of Angular 2, the team rebuilt Ionic to work with modern Angular. The renovation improved performance and functionality. 2018: Ionic introduced Ionic 4, which decoupled the framework from Angular, making it compatible with other frameworks like React, Vue, or even plain JavaScript. 2020: The company developed Capacitor, a modern alternative to Cordova. It provides better native integrations and supports Progressive Web Apps (PWAs) seamlessly. Key innovations of Ionic First of all, Ionic popularized the use of web components for building mobile apps. In addition, it focused on design consistency, offering pre-built UI components that mimic native app designs on iOS and Android. Thirdly, its integration with modern frameworks (React, Vue) made it appealing to a broader developer audience. Today, Ionic remains a significant player in the hybrid app development space. It's an optimal choice for projects prioritizing simplicity, web compatibility, and fast development cycles. It has a robust ecosystem with tools like Ionic Studio. Ionic Studio is a development environment for building Ionic apps. The origin of React Native React Native originated at Facebook in 2013 as an internal project to solve challenges in mobile app development. Its public release followed in March 2015 at Facebook’s developer conference, F8. Starting from the problem of scaling mobile development In the early 2010s, Facebook faced a significant challenge in scaling its mobile app development. They were maintaining separate native apps for iOS and Android. It made up duplicate effort and slowed down development cycles. Additionally, their initial solution—a hybrid app built with HTML5—failed to deliver the performance and user experience of native apps. This failure prompted Facebook to seek a new approach. The introduction of React for Mobile React Native was inspired by the success of React, Facebook’s JavaScript library for building user interfaces, introduced in 2013. React allowed developers to create fast, interactive UIs for the web using a declarative programming model. The key innovation was enabling JavaScript to control native UI components instead of relying on WebView rendering. Its adoption and growth React Native quickly gained popularity due to its: Single codebase for iOS and Android.Performance comparable to native apps.Familiarity for web developers already using React.Active community and support from Facebook. Prominent companies like Instagram, Airbnb, and Walmart adopted React Native early on for their apps. Today, React Native remains a leading framework for cross-platform app development. While it has faced competition from newer frameworks like Flutter, it continues to evolve with strong community support and regular updates from Meta (formerly Facebook). Ionic vs. React Native: What's the key differences? Core Technology and Approach React Native Uses JavaScript and React to build mobile apps.Renders components using native APIs, resulting in apps that feel closer to native experiences.Follows a “native-first” approach, meaning the UI and performance mimic native apps. Ionic Uses HTML, CSS, and JavaScript with frameworks like Angular, React, or Vue.Builds apps as Progressive Web Apps (PWAs) or hybrid mobile apps.Renders UI components in a WebView instead of native APIs. Performance React Native: Better performance for apps that require complex animations or heavy computations.Direct communication with native modules reduces lag, making it suitable for performance-intensive apps. Ionic: Performance depends on the capabilities of the WebView.Works well for apps with simpler UI and functionality, but may struggle with intensive tasks or animations. User Interface (UI) React Native: Leverages native components, resulting in a UI that feels consistent with the platform (e.g., iOS or Android).Offers flexibility to customize designs to match platform guidelines. Ionic: Uses a single, web-based design system that runs consistently across all platforms.While flexible, it may not perfectly match the native look and feel of iOS or Android apps. Development Experience React Native: Ideal for teams familiar with React and JavaScript.Offers tools like Hot Reloading, making development faster.Requires setting up native environments (Xcode, Android Studio), which can be complex for beginners. Ionic: Easier to get started for web developers, as it uses familiar web technologies (HTML, CSS, JavaScript).Faster setup without needing native development environments initially. Ecosystem and Plugins React Native: Extensive library of third-party packages and community-driven plugins.Can access native features directly but may require writing custom native modules for some functionalities. Ionic: Has a wide range of plugins via Capacitor or Cordova for accessing native features.Some plugins may have limitations in terms of performance or compatibility compared to native implementations. Conclusion: Which One to Choose? Choose React Native if:You want high performance and a native-like user experience.Your app involves complex interactions, animations, or heavy processing.You’re building an app specifically for mobile platforms.Choose Ionic if:You need a simple app that works across mobile, web, and desktop.You have a team of web developers familiar with HTML, CSS, and JavaScript.You’re on a tight budget and want to maximize code reusability. Both frameworks are excellent in their own right. Your choice depends on your project’s specific needs, the skill set of your development team, and your long-term goals.

Getting Started with Authentication in React Native

Authentication is a critical part of most mobile applications. It helps verify user identity and control access to data and features. There are several libraries that make it easier to set up authentication in React Native. This guide will walk you through the basics of authentication, using the popular libraries react-native-app-auth and Auth0. Why Use an Authentication Library? Using an authentication library simplifies the process of managing user credentials, tokens, and permissions. It also adds security, as these libraries follow the latest standards and best practices. Here, we’ll explore react-native-app-auth for OAuth 2.0 authentication and Auth0 for a more comprehensive identity management solution. Setting Up Authentication with react-native-app-auth react-native-app-auth is a library that supports OAuth 2.0 and OpenID Connect. It’s suitable for apps that need to connect with Google, Facebook, or other providers that support OAuth 2.0. Installation Start by installing the library with: npm install react-native-app-auth If you’re using Expo, you’ll need to use expo-auth-session instead, as react-native-app-auth is not compatible with Expo. Basic Setup To set up react-native-app-auth, configure it with the provider's details (e.g., Google): import { authorize } from 'react-native-app-auth'; const config = { issuer: 'https://accounts.google.com', // Google as OAuth provider clientId: 'YOUR_GOOGLE_CLIENT_ID', redirectUrl: 'com.yourapp:/oauthredirect', scopes: ['openid', 'profile', 'email'], }; In this configuration: issuer is the URL of the OAuth provider.clientId is the ID you receive from the provider.redirectUrl is the URL your app redirects to after authentication.scopes defines what data you’re requesting (e.g., user profile and email). Implementing the Login Function With the configuration done, create a function to handle login: const login = async () => { try { const authState = await authorize(config); console.log('Logged in successfully', authState); // Use authState.accessToken for secure requests } catch (error) { console.error('Failed to log in', error); } }; Here: authorize(config) triggers the authentication flow.If successful, authState contains the access token, ID token, and expiration date.Use the accessToken to make requests to the API on behalf of the user. Logging Out To log users out, clear their tokens: const logout = async () => { try { await authorize.revoke(config, { tokenToRevoke: authState.accessToken }); console.log('Logged out'); } catch (error) { console.error('Failed to log out', error); } }; This will remove the access token and effectively log out the user. Setting Up Authentication in React Native with Auth0 Auth0 is a widely used identity provider that offers a more comprehensive authentication setup. It supports multiple login methods, such as social login, username/password, and enterprise authentication. Installation Install the Auth0 SDK for React Native: npm install react-native-auth0 Basic Setup Initialize the Auth0 client by providing your domain and client ID: import Auth0 from 'react-native-auth0'; const auth0 = new Auth0({ domain: 'YOUR_AUTH0_DOMAIN', clientId: 'YOUR_CLIENT_ID', }); Implementing the Login Function Use Auth0’s web authentication method to start the login flow: const login = async () => { try { const credentials = await auth0.webAuth.authorize({ scope: 'openid profile email', audience: 'https://YOUR_AUTH0_DOMAIN/userinfo', }); console.log('Logged in successfully', credentials); // Store credentials.accessToken for API requests } catch (error) { console.error('Failed to log in', error); } }; Here: scope and audience define the permissions and data you request.credentials.accessToken will be used for secure API requests. Logging Out To log out with Auth0: const logout = async () => { try { await auth0.webAuth.clearSession(); console.log('Logged out'); } catch (error) { console.error('Failed to log out', error); } }; Storing Tokens Securely Tokens are sensitive data and should be stored securely. Use libraries like react-native-keychain or SecureStore in Expo to securely store tokens: import * as Keychain from 'react-native-keychain'; const storeToken = async (token) => { await Keychain.setGenericPassword('user', token); }; const getToken = async () => { const credentials = await Keychain.getGenericPassword(); return credentials ? credentials.password : null; }; Conclusion This guide covered setting up basic authentication in React Native with react-native-app-auth and Auth0. These libraries streamline the process of handling secure login and token management. After implementing, remember to handle token storage securely to protect user data. Streamline Authentication in React Native with SupremeTech’s Offshore Development Expertise Setting up authentication in a React Native app can be complex, but with the right libraries, it's achievable and secure. Whether using react-native-app-auth for OAuth 2.0 or Auth0 for comprehensive identity management, these tools help handle user authentication smoothly and securely. For businesses aiming to scale and streamline mobile app development, SupremeTech offers skilled offshore development services, including React Native expertise. Our teams are experienced in building secure, high-performance applications that meet industry standards. If you're looking to enhance your mobile development capabilities with a trusted partner, explore how SupremeTech can support your growth.

Choosing A Good Backend For React Native Apps

As a business owner looking to develop a React Native app, it’s natural to focus on the front end-the design, layout, and user experience. However, there’s another critical part: the backend. The backend powers the app’s functionality. It processes, stores, and delivers data behind the scenes. Think of it as the “engine” of your app. Therefore, choosing a good backend for React Native apps is no less important to foster your app performance. While the front end decides how the app looks, the backend controls what it can do. If you want dynamic features—like user accounts, order processing, or real-time updates—the backend is essential. Understanding the backend basics helps you make better development decisions. It influences costs, timelines, security, performance, and scalability. Do you need a backend for thousands or millions of users? Should the app integrate with your existing CRM or ERP systems? How will the app securely store customer data and meet privacy laws? All these questions depend on the backend. This guide explains the backend essentials from a business owner’s perspective. With this knowledge, you’ll make informed decisions about your app’s backend. Whether choosing a simple Backend-as-a-Service (BaaS) or a custom-built solution, understanding these points will help you pick the right approach. How To Choose A Suitable Backend for React Native Apps A good backend option depends greatly on the purpose of your React Native Apps. However, there are some key things to keep in mind. Choosing Between a Custom Backend or Backend-as-a-Service (BaaS) First of all, there are two main paths: a custom-built backend or using a Backend-as-a-Service (BaaS) like Firebase, AWS Amplify, or Supabase. A Custom Backend will allow more control and customization. You can build every feature to meet your exact needs, making it easy to handle unique workflows, custom data models, or complex business logic. However, it takes more time and resources to set up and maintain. In addition, a custom backend offers cost efficiency over time. Although upfront development costs are higher, a custom backend can reduce long-term costs by eliminating the need for ongoing subscription fees or third-party limitations. While a custom backed requires initial financial investment, Backend-as-a-Service (BaaS) can provide instant outcomes for business in early stage. It is faster and easier to set up, with out-of-the-box solutions for common needs (like user management and notifications). A lot of existing BaaS is designed to handle spikes in traffic automatically, so your app can grow without worrying about server capacity. Additionally, BaaS platforms typically offer strong security features and follow industry standards, which is beneficial for apps handling user data. Since the BaaS provider handles backend infrastructure, your team can focus on building and enhancing the app’s front end. BaaS is also ideal for prototypes or MVPs, where you need fast deployment without the commitment to a custom solution. However, customization might be limited, and costs can add up if the app scales quickly. It cannot be denied that BaaS gains its popularity due to many advantages. Which one is more popular? The choice between a custom backend and BaaS depends on the type of project, its complexity, and long-term goals. BaaS is more popular among startups, small businesses, or projects focused on getting to market quickly. Custom backends are more popular with enterprises, businesses with complex requirements, and apps with high customization needs. They’re common in industries where data control, security, and integration flexibility are paramount, such as finance, healthcare, and e-commerce. Some Common Backend Choices for React Native Apps Here are some common backend choices for React Native apps. Node.js with Express Why: Node.js is popular for mobile backends due to its non-blocking, event-driven architecture, which is great for handling multiple requests. Paired with Express, a flexible framework, it allows easy setup of RESTful APIs. Good for: Apps needing real-time data, like chat or collaborative tools. Firebase Why: Firebase, a Backend-as-a-Service (BaaS) by Google, provides pre-built features like authentication, real-time database, cloud storage, and analytics without needing custom server infrastructure. Good for: Quick prototypes, simple apps, or apps that need real-time data synchronization. AWS Amplify Why: AWS Amplify provides a BaaS-like approach, with cloud storage, authentication, APIs, and even machine learning integration, all managed by AWS services. Good for: Apps needing scalable infrastructure with support for advanced AWS services. GraphQL with Apollo Server Why: Unlike REST, GraphQL allows clients to request only the data they need, making it efficient and flexible for mobile apps. Apollo Server makes it easy to build a GraphQL API. Good for: Apps needing highly customized data queries, minimizing over-fetching or under-fetching of data. Strapi (Headless CMS) Why: Strapi is a customizable, open-source headless CMS that uses Node.js. It provides an easy interface to manage and serve content. Good for: Apps needing flexible content management, such as e-commerce or blogs. Each backend choice has its strengths depending on the app’s data needs, real-time requirements, and development speed. React Native apps commonly communicate with these backends via REST APIs or GraphQL, depending on the data structure and interaction required. Conclusion In conclusion, the decision comes down to your app’s goals, budget, and the complexity of features you need. BaaS solutions can be a quick, cost-effective option for businesses aiming to launch an MVP or a simple app with limited backend demands. However, for apps that require high customization, seamless integrations, or handle sensitive data, a custom backend offers the control, flexibility, and scalability needed for long-term success. If you’re ready to discuss your app’s backend needs, book a free consultation with SupremeTech. With extensive experience in building high-performance systems for applications serving millions of users, our team can guide you toward a backend solution designed to meet your unique goals.

Tips for Product Owner: How to manage offshore development teams?

As product owners, you often struggle with balancing high-quality development and budget constraints. From the business owner's perspectives, offshoring has become a go-to strategy to reduce costs without compromising the quality of products. However, managing offshore teams effectively requires a thoughtful approach to bridge the gaps. Those gaps can be geographical, cultural, and operational differences. A dedicated team abroad, when managed well, however, can deliver outstanding results and provide insightful ideas. Here’s a quick guide to how to manage offshore development teams effectively. What is an offshore development team? An offshore development team refers to a group of professionals located in a different country, who work on software development projects for a company in another country. These teams are usually contracted to perform technical tasks such as coding, testing, and maintaining software. Offshore teams are typically hired to achieve cost savings, access a borderless talent pool, and scale resources more flexibly. Key characteristics of an offshore development team There are many types of offshore development team, but all of them should share some common characteristics: Geographic Separation: They operate in a different country, often in a different time zone.Lower Costs: Offshore teams are usually located in regions with lower wages compared to the company’s home country.Technical Expertise: Many offshore teams have specialized skills and experience in various tech stacks and development methodologies.Collaboration Models: Offshore teams may work under various engagement models, such as dedicated teams, project-based outsourcing, or staff augmentation, depending on the company’s needs. Though commonly mistaken, offshore development teams are distinct from nearshore teams. Nearshore teams are usually located in neighboring or nearby countries with closer time zones. Sometimes, they share the same cultures as well. How to Manage Offshore Development Teams Effectively? After deciding that offshoring can be a successful strategy for your project, you're entering a more challenging phase. That's how to onboard and manage an offshore team efficiently. The process should be as smooth as possible to avoid any unwanted collision with your existing product team. Let's deep dive into the guidelines for your streamlined offshoring experience. 1. Choose the Right Partner First and foremost, you should seek for an offshore partner with a solid reputation for quality and experience in your industry. What's the traits that you should take into consideration? A proven track record of successful projects.Domain expertise aligned with your product needs.Responsiveness and professional working manners.Established communication protocols and cultural fit. Conduct thorough due diligence, including reviews, testimonials, and a pilot project if possible. 2. Set Clear Expectations and Goals Secondly, you need to clearly define project goals, timelines, and quality standards are crucial. Here’s how: Document Specifications: Provide detailed documentation, mockups, or even interactive prototypes.Define Success Metrics: Quality benchmarks, key performance indicators (KPIs), and timelines need to be agreed upon from the outset.Establish Milestones: Use milestones to check progress and ensure alignment. 3. Prioritize Transparent Communication Open, consistent communication is fundamental in overcoming time zone and cultural differences. Implement these strategies to foster effective communication: Use Collaborative Tools: Tools like Slack, Zoom, and project management platforms (like Jira or Asana) keep everyone connected.Set Up Regular Meetings: Schedule regular check-ins that accommodate both time zones. These could be weekly sprints or bi-weekly reviews.Create Documentation: Ensure all project requirements, changes, and feedback are documented for easy reference. 4. Embrace Agile Development The Agile framework can provide a structured way to manage offshore teams. Moreover, Agile’s iterative approach allows for ongoing feedback and adjustments, keeping development on track: Conduct Daily Stand-Ups: Even brief virtual stand-ups can keep the team aligned.Use Shorter Sprints: Shorter sprints ensure regular deliverables, fostering a continuous feedback loop.Retrospectives: Post-sprint retrospectives allow the team to discuss improvements, helping to adapt and optimize workflows. 5. Invest in a Strong Onshore-Offshore Collaboration Model Building a hybrid team model, where some team members are onshore and others offshore, can improve collaboration and oversight. Having a product owner, project manager, or tech lead onshore helps maintain quality by providing immediate feedback and clarifying requirements. Likewise, the offshore development team should ensure project management roles to tackle issues promptly. Sometimes, the management roles of offshore team are not equally valued. And that can be a huge mistake right there. 6. Monitor Quality Assurance and Testing Ensure the offshore team has a robust QA process in place to catch issues before they reach production: Automated Testing: Implement automated testing to streamline quality checks.Regular Code Reviews: Encourage a culture of code reviews where team members cross-check each other’s work.Performance Metrics: Track performance metrics related to code quality, including bug count and resolution times. 7. Build Trust and Foster Team Culture Building rapport and trust is essential. Make efforts to: Celebrate Achievements: Recognize individual and team accomplishments.Encourage Openness: Create an environment where team members feel comfortable sharing feedback and challenges.Offer Learning Opportunities: Provide training resources to help your offshore team keep up with the latest technologies and methodologies.Frequent Visits: After all, face-to-face communication is irreplaceable to tie the bond. Do not underestimate the importance of business visits to your offshore team's country and vice versa. 8. Control Costs with Clear Budgeting and Transparent Billing Finally, while cost-saving is a significant driver for offshoring, keep an eye on the budget with: Fixed Price Milestones: Setting fixed price milestones helps control costs.Detailed Invoicing: Request detailed invoices to ensure you’re paying only for what’s necessary.Avoiding Scope Creep: Keep the project scope clear and tightly controlled. By taking a proactive approach to managing offshore development teams, you can balance cost savings with high-quality results. With the right planning, communication, and collaboration strategies, your offshore team can be a powerful asset in delivering quality products on time and within budget. Explore SupremeTech's offshore development team By following these best practices, you can leverage offshore development to deliver high-quality software while managing costs effectively. If you’re looking for a trusted partner with a proven track record, consider SupremeTech. Our offshore development team has experience working with Japanese corporations on multi-million-user products, ensuring a strong focus on quality, scalability, and reliability. We emphasize win-win collaboration, proactive problem-solving, and transparent communication to help you achieve your goals smoothly. For more insight, check out our case study on successful collaboration with Japanese enterprises. If you're interested in our services, book a free consultation with us now.