Offline-to-Online Commerce with Shopify Plus

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!

Anh Duong – A Journey of Rising Above to Shine Bright

At SupremeTech, we often meet during meetings, rush through deadlines together, and celebrate when our products are released. But behind those intense work hours, there are powerful stories of personal transformation & growth that we don’t always get to hear. ST is not only a witness to these journeys but also a part of them. In May, during our ST WOW section—a time where we honor people who make others say “WOW,” not only in work but also in life—we recognized Anh Duong. Duong has been with SupremeTech for four years and has gone through an impressive personal transformation. Let’s explore his story together! From a Shy Boy to the Confident Anh Duong Today Just over two years ago, Duong often felt insecure, especially about his appearance. He was skinny and had trouble even carrying water bottles around the office. He often felt tired and weak due to poor health. These little moments slowly pushed him to make a change, not to impress others, but to take control of his life. He started going to the gym in April 2023. At first, it was just something to try out. When the numbers on the scale didn’t move, he felt discouraged. But instead of giving up, that became a turning point. He chose discipline. He chose daily habits. He set long-term goals. Day by day, these choices built into something bigger—not just in how he looked, but in how he felt. No Trainer, No Showing Off – Just Self-Understanding Duong didn’t have a personal trainer. There was no magic solution. He studied on his own to learn what worked for his body—what foods, exercises, and routines suited him best. He designed his own meals, workouts, and rest schedule. Not to meet someone else’s standards, but to fit what he truly needed. Now that he’s “in shape,” his training is no longer a challenge—it’s just part of a healthy lifestyle. Success Measured by Spirit, Not Muscles After one year, Duong said his energy had improved significantly. He rarely feels drained now. People around him notice he’s more cheerful and full of life. And after two years? He says it’s a turning point—he truly feels proud of what he has achieved with his body. Now, he’s more confident. He’s in a relationship. His family is proud. And most importantly, he inspires others who once felt the same way. “You won’t know until you try. Don’t work out to show off—do it to change yourself.”Nguyen Van Anh Duong That’s Duong's message to anyone who feels unsure, insecure, or not strong enough to start. At ST, we’re proud to have people like Anh Duong—not just skilled at work, but also strong in their personal lives. We believe going far takes not only skills but also willpower. It’s not just about working together, but also living and growing together. Thank you, Anh Duong, for your personal transformation effort and for being a warm and strong light in our ST family. Related articles: From Unpaid Trial to the Top: The Inspiring Rise to Vice PresidentFrom Seeking The Path to Leading The Way: Phuoc’s Journey at SupremeTech

Philippines Business Trip Report: Seminars and School Visits for BA Recruitment

This time, SupremeTech embarked on our very first BA business trip to the Philippines! We visited two cities: Baguio, known for its high altitude, cool climate, and popularity as a study-abroad destination, and Cebu, a well-known tourist spot. Our itinerary consisted of four days in Baguio and three days in Cebu, totaling one week. The primary purposes of this BA business trip were: Visiting language schools for our recruitment of Japanese Business Analysts (BA).Hosting a career seminar for Japanese students interested in working abroad. Through direct conversations with language school staff and students, we gained valuable insights into their genuine concerns and aspirations. It was a truly eye-opening and enriching experience for us. Currently, many students return to Japan for domestic employment after studying abroad, often unable to fully leverage their global mindset. Additionally, when people consider working abroad, they usually look to English-speaking countries, such as Australia or Canada, while opportunities in ASEAN countries—especially emerging economies like Vietnam—remain relatively underexplored. During this BA business trip, our goal was to introduce “working in ASEAN” as a viable career option to language school students and staff, and to encourage them to view their time abroad not just as a study period, but as a stepping stone to a global career. We hope this BA business trip served as a meaningful first step toward expanding their future possibilities. Introducing SupremeTech and the Role of Business Analysts (BA) SupremeTech is a technology company based in Da Nang, Vietnam, specializing in web service development and AI applications. Our core business revolves around offshore development, connecting Japanese clients with talented Vietnamese engineering teams. Among our team, the role of a Japanese BA is especially crucial. BA does more than just translate language; they carefully listen to clients’ needs, organize those requirements into clear specifications, and communicate them effectively to the development team. In essence, they act as a vital bridge between clients and engineers. This role requires not only language skills but also strong logical thinking, cross-cultural understanding, and flexible communication abilities. Many of the Japanese BA thriving at SupremeTech have studied English at language schools in the Philippines. They leverage the skills they gained during their language studies to tackle challenges and build careers in Vietnam. However, it’s also common for language students to return to Japan after their studies and choose domestic employment instead. The international mindset and valuable experience gained through studying abroad in the Philippines can be put to even better use, and our company offers a field where those strengths truly shine. Bringing “Working Abroad” Closer to Everyone The key message we wanted to convey in our seminar was that working overseas in IT companies is not just for a special few—it’s something anyone can pursue. We heard many concerns from both school staff and students, such as: “I’m worried whether my English skills are good enough.”“Can I take on this challenge even without prior industry experience?” What we truly value is not how much skill or experience you have right now, but whether we can grow together moving forward. Nobody is perfect.At the same time, emerging countries like Vietnam offer an environment that allows you to take on new challenges flexibly.We strongly believe that those who are willing to try have the most excellent chances. During the seminar, we shared genuine stories from Japanese people currently working on-site, detailed explanations of the work itself, and the skills required. We hope this helped make the idea of working abroad feel a little more realistic and achievable. Studying abroad is not the goal—it’s just the beginning.We look forward to continuing to explore the career possibilities beyond language study, together. Insights from Our Conversations with Students Through our interactions with language school staff and students who attended our seminar, we came to realize the following: Many people are interested in working abroad, but find it challenging to take the first realistic step.There is a lack of information and opportunities to trigger action.Many of them are seriously focused on their future, and we felt great potential in each one of them. For those who are thinking, “I want to change something” or “I want to take a step forward,”We sincerely hope that this seminar and these conversations have helped give them a little push in the right direction. There is nothing more rewarding than that for us. Why Vietnam? – From the Frontlines of Offshore Development You might be wondering, “Why Vietnam?” or “What’s it like to do offshore development there?” Here are the three main reasons why we have chosen Vietnam as our base: A Practical Solution for Global IT Talent ShortagesWith Japan facing a serious shortage of IT professionals, offshore development with Asian countries has been expanding rapidly. Among them, Vietnam stands out due to its strong compatibility with Japanese business culture, offering a great balance of technical skills, cost efficiency, and talent availability.A Market Full of Opportunities for Young Professionals Vietnam has a relatively young population, with approximately 60% of its population under the age of 35. Its rapidly growing IT market provides many opportunities for young talent to gain hands-on experience early in their careers.Comfort and Cultural Familiarity Vietnam is just two hours ahead of Japan, making communication and coordination easier. The cost of living is relatively affordable, and the culture is friendly and welcoming to Japanese people. Our base city, Da Nang, is renowned for its tranquil environment, surrounded by mountains and the sea, offering a perfect balance between work and personal life. Conclusion This BA business trip and seminar were a significant challenge for us as well. By visiting language schools on-site and directly engaging with students, we gained valuable insights, new learnings, and important connections. We plan to leverage this valuable experience in our future recruitment efforts and continue to nurture strong relationships with language schools. Our key messages remain:“Working overseas isn’t just for special people — anyone can give it a try.” “Opportunities to take on new challenges are often closer than you think.” We will continue to share these messages and deepen our collaboration with schools. We also look forward to future visits and new challenges. We hope to visit the Philippines and interact directly with language school staff and students once again. Above all, we sincerely wish that the connections made during this BA business trip will become a new stepping stone for someone’s career journey. Through these activities, we hope more people will engage with our company and, in the future, become our colleagues. If you are interested in the role of BA or an overseas career, please check out [our recruitment information here].If you'd like to learn more or discuss whether this path is right for you, we also offer casual online meetings. We’re cheering you on as you take on new challenges. Gallery Bagauio API BECI (EOP campus) Our first visit was to API BECI, located on a lush, green hillside. We were impressed by the campus’s clean and well-maintained facilities, which beautifully blend the open, relaxing atmosphere of a resort with a focused, structured learning environment. We discussed the possibility of future collaboration with the student manager. JIC (Premium campus） We had the opportunity to visit JIC’s Premium Campus, nestled in a peaceful, green environment. The campus is spacious and well-equipped with convenient facilities such as a café, gym, and convenience store. The cafeteria, in particular, offered a spacious and open atmosphere with an excellent view. We also enjoyed a buffet-style meal there, which exceeded our expectations in both taste and quantity. Amidst this resort-like comfort, students were highly focused on their studies. JIC offers a variety of unique programs tailored to different levels, goals, and budgets at each of its campuses, and is known for its original curriculum and materials. During our visit, we also had positive discussions with the local team about the possibility of future collaboration on an English × IT learning program, and we’re excited about the potential opportunities that lie ahead. PINES (main campus) Our final stop in Baguio was PINES, one of the well-known language schools. Founded in 2001, the school relocated to a new campus in 2018, providing an even more comfortable and study-friendly environment. The campus is about a 10-minute drive from SM City Baguio, the city’s largest shopping mall, and is surrounded by nature, with lush parks just a short walk away. The school offers a fully integrated environment where classrooms and dormitories are housed in the same building, eliminating the need for commuting. It also features well-equipped shared spaces such as a gym and student lounge, ensuring a comfortable living experience. What stood out to us during the visit was the calm, focused atmosphere throughout the campus. It’s designed for serious learning. Many students are working professionals or individuals preparing for a career change, and we were particularly impressed by their strong sense of purpose and career motivation. CEBU B CEBU Our final visit was to B’Cebu, a language school newly established in 2023 on Mactan Island, Cebu. This promising new campus was founded as a sister school to API BECI, a well-established school with over 20 years of experience in Baguio. Upon arrival, we were immediately struck by the open and refreshing resort-like atmosphere of the campus! The clean and modern school buildings and dormitories are complemented by a full range of lifestyle facilities, including a gym, café, and convenience store, creating an uplifting environment just by being there. In contrast to the calm and focused study atmosphere in Baguio, B’Cebu offers a unique style of study abroad that perfectly blends the relaxed resort vibe, engaging activities, and language learning. A fascinating discovery was the chance to speak directly with the Korean owner. We learned that B’Cebu is part of a group that also operates B’Hoian in Hoi An, Vietnam. Given its geographical proximity to Danang, where our company is based, this connection opens up promising opportunities for future collaboration. Remarkably, the campus even features a dedicated diving pool! Students can obtain diving certification if they want, providing a unique combination of English language learning and resort experience. Meals are served buffet-style, offering a rich variety of options catering to the diverse international students. We had the chance to try the dish ourselves and found it delicious, so much so that it was hard not to eat too much! Curious World Academy (CWA） Our last stop was Curious World Academy. Although the visit was planned on short notice, we had a productive meeting with the manager and toured the school. We got a clear idea of the school’s atmosphere. The school is still relatively new, but it has already gained popularity due to its modern facilities and practical programs. The campus feels calm and focused — a great place for students who want to study seriously but also have time to relax. There’s a swimming pool and other nice facilities, which help students stay comfortable and learn well. Many students are young and seem very serious about their future. This visit gave us great hope and some excellent ideas for the future. Seminar - PINES

BA Team’s Offsite Training Session: Boosting Logic and Negotiation Skills

BA stands for “Business Analyst,” but for this day, it also means “Break Away” from daily work. Our BA team recently participated in an off-site training session that was both meaningful and enjoyable. We learned valuable skills and shared laughs with a very engaging Japanese trainer through this Business Analyst training. Besides learning practical techniques, we got to see how professionals in Japan work with clear logic and how negotiation can be more creative than expected. Logical Thinking – Clear Communication Starts with Clear Thinking This part of the Business Analyst training session wasn’t about boring theories. Instead, it focused on how BAs can share ideas in ways that clients can easily understand. The goal was to avoid confusion when people understand the same message in different ways. One key idea the trainer shared was: 一文一義 (Ichi-bun Ichi-gi) – "One sentence, one idea." This means not putting too many ideas into one sentence; keep it simple to avoid confusion. The trainer reminded us: “The best communication is not using big words or complex grammar, but explaining difficult things in the simplest way.” In project discussions, what matters most is being concise, clear, and convincing, not using overly complex or lengthy sentences. One powerful tool we learned is the Pyramid Structure, a way to organize ideas clearly: Top-down communication: Start with the conclusion first, then give reasons.MECE: Ideas should not overlap, and together they must cover all important points. The Pyramid has 3 parts: Main MessageThe key point you want to say.Say it at the beginning.Key Points2–4 supporting reasons.Supporting EvidenceFacts, examples, numbers, or specific details. We practiced this method with the question:"What are the strengths of SupremeTech when promoting our brand?"  Everyone was surprised by how much clearer and more logical the answers became. Negotiation – Helping Clients Discover Their Real Needs Next, we moved into negotiation skills. The trainer gave us two surprising facts: Most clients don’t know exactly what they need at the start.Between 70% and 80% of buying decisions are made during the discussion process. As BAs, how can we help clients realize what they actually need, even if they haven’t explicitly stated it? We learned two useful techniques: 1. SPIN Questions A 4-step method to guide the conversation: S – Situation: Understand the client’s current situation.P – Problem: Identify any issues they are facing.I – Implication: Explore the impact of these problems.N – Need-payoff: Show how a solution can help. 2. BAF Focuses on: Benefit: What the client gains.Advantage: Why it works well.Feature: What the product or service includes. We did a quick practice activity: “Sell this bag to a customer.” Each group played both the BA and the client in real-life scenarios. The room was filled with energy and laughter as teams realized that simply changing the way they asked questions helped clients discover new needs they hadn’t previously considered. Example using SPIN: S (Situation): “What kind of bag do you use now?”P (Problem): “Do you ever feel it’s too small or hard to match with outfits?”I (Implication): “Is it inconvenient if you have to switch bags for different occasions?”N (Need-payoff): “Would it help to have one stylish bag that fits everything and works for all events?” And then with BAF: B (Benefit): “You can use this bag for work, travel, or outings while staying stylish.”A (Advantage): “Many office workers choose this model for its flexibility.”F (Feature): “It has 3 compartments and is made of water-resistant material.” By using these techniques, BAs can help clients understand what they truly need and make more informed decisions. “Soft Skills” – The Secret Tools of Every BA Being a BA without soft skills is like being a superhero without a cape—it feels like something’s missing! From the Pyramid Structure to SPIN and BAF, these are the soft skills that help BAs feel more confident when interacting with clients. With these tools, you don’t just meet client needs—you impress them and build stronger trust. Have you “equipped” yourself with these skills yet?If not, don’t wait—try practicing them in your next Business Analyst training meeting!