Our Services

Our Works

Testimonials

What Our Clients
Say About Us

I am incredibly pleased with the services provided by Timedoor, Satya and team are very pleasant to work with. The team has proven to be efficient and empathetic. They delivered a fully functional website within timeframe and tailored an easy-to-use CMS. Throughout the entire process, I was consistently impressed with their attention to detail and problem solving.

Alvita Chen

Associate Director of SAKA Museum

Definitely the best IT company in Bali. For us it was very important to find professional company who will match our expectation and will be ready to create a functional and attractive website for us, we spent a few month choosing between 5 companies and made a right choice. Everyone in Timedoor is very passionate, experienced and ready to help anytime you need it.

Hugo

Founder of INDA SURF

Thank you for your such good assistance and support for our website. I trusted Timedoor Team since they have good working ethics and really care about their customer. They respond to our requests and questions immediately. I’m satisfied for the result and will surely ask for Timedoor Team’s care for my future projects. All success for Timedoor and team.

Chinatsu Ishiodori

Founder of Siki Bali & Rumah Kecil

We thank Timedoor Indonesia especially Mr. Yutaka and team who designed our Website and its system. PT. Timedoor Indonesia works professionally and always punctual with the time to finish every project they have. Now our daily work became easier because they built us the perfect website to fulfill all our request and needs. All the best for Timedoor Team.

Pipin Haryanto

General Manager of Oasis Kuta Hotel

At first time I met Timedoor Team I feel that I will have a good business relationship with them. Their team is professional and friendly. We have good communication so we trust Timedoor to do some projects, from a Hospitality site, Construction site, and even Educational Institution site. Our all old website reborn as new website.

Fatin Hamamah

Founder of Abhinaya Villa Management

I would like to thank all the professional team of Timedoor for creating an excellent website for my company. It is a real pleasure to work with them, excellent communication, reactivity and always bring solution with creativity. I am very satisfy with their services and I would recommend them without hesitation to anyone looking for a professional web services.

Furukawa Teito

Founder of Luxindo Property

It’s hard to find a good website developer who understand what we really want and need in Ineondsia. I work in Bali, Jakarta, and wanted to make a website which represents my business’ philosophy and concept, and Timedoor Indonesia delivered exactly what I imagined my website would be.

Till Marzloff

Architect of Tiga Kotak

Timedoor built a great new website for us 7South Coffee and we are very happy with the results. We plan to use Timedoor services again for our other new websites as we expand to more countries and for internet marketing. Their team is professional and fun to work with on these projects!

Lance Shay

Founder of 7 South Coffee

Other Happy Clients

Hino
Volkswagen
BNI
Indosat
Broco
Caroline
Shimajiro
Jiipe
LIA
Spin Fish
Bali TV
Bali Post
Asita
Mercure
Kura-Kura Bus
Bubba Gump
Siki
Watabe
Kamaya Bali
Tasini
Granola
Hideaway
Hundred Seeds
JAIF
J Trust Bank
Nissan
Sharp Point
Cow Style
Honda
Yamaha

Our Location

Bali

Jl. Tukad Yeh Aya IX No.46, Renon Denpasar, Bali

+62-812-3836-3440

Open Map

Jakarta

JL Boulevard Barat Raya Blok LC7. 39-40, Klp. Gading Bar., Daerah Khusus Ibukota Jakarta 14240

+628814677923

Open Map

New Cairo

٢٤ د جنوب الاكاديمية, New Cairo 3, Cairo Governorate, Egypt

+201551002308

Open Map

Tokyo

160-0004 Tokyo, Shinjuku, Yotsuya 3 Chome 2-1 Frontplace Yotsuya Building 2F

+62-812-3836-3440

Open Map

We are working across the world

Our Team

Why We Have a Strong Team

Timedoor's Team

Why We Have a Strong Team

PT. Timedoor Indonesia is one of the top IT company in Denpasar, Bali. Our CEO, Yutaka Tokunaga, grew up and was educated in Japan, which is famous for the hard working culture to provide top quality products or services. He is a professional business person with an extensive knowledge of internet business and is happy to use his knowledge to assist Timedoor clients in Indonesia.

Timedoor's Ceo Mr. Yutaka

Why We Are
Professional

I moved from Japan to Indonesia in 2014 and started this IT company. At that time, the speed of the Internet was slow and there were not many website and mobile app services, but over the last five years, the digitalization of Indonesia has progressed rapidly.

Timedoor Career

We Are Hiring New Talents!

Timedoor always welcome young talents who have great potential and passion. If you want to develop yourself and your career, Timedoor is the best place to start your career. We are looking for Web Programmers, Web Designer, Mobile Apps Developer as full time employee or Part Time Job.

Let's join our adventure!

Why Us?

Home About Image
Home About Image

Your shop and website share the same analogy. Customer will not visit your shop if they see the place dirty just like how they would leave immediately if they see your web is poorly designed. Our motto is: "Creating a User Friendly" website that makes it easy for customers to navigate.

Our Customer Support Team always responds promptly and sincerely to customers with the right answers, based on their extensive knowledge coordinated with management, designers and programmers. If you have any problem with our customer support, please immediately contact us. We aim to be a good partner that takes away stress and helps your business.

Do you want a Wordpress or PHP website? We can handle both as per your request. Our programmers are highly skilled professionals, who have been trained with Japanese standard. Even with difficult functions or huge systems, we are ready to challenge ourselves and overcome the obstacle. For every customer requests, we always look for solutions to realize results and propose ideas instead of looking for reasons on why we cannot do it.

One of our motto is ‘Create a website that contributes to the results of your business’. We are not just creating a website, we have the principle that every Website that is made will contribute to your business. We are committed to help your business thrive and grow.

News & Blog

Stay Updated
with Latest Trends

Creating a Match Card Transition Animation for a Dating App: A Guide

March 6, 2024 • Knowledge

Creating a Match Card Transition Animation for a Dating App: A Guide

In the dynamic world of mobile applications, user engagement plays a crucial role, especially in dating apps. One effective way to enhance user interaction is by incorporating a Card Transition Animation. In this article, we'll delve into the process of creating a Card Transition Animation for a dating app using React Native and Reanimated.   Introduction Card Transition Animations are visually appealing and provide a seamless way for users to navigate through potential matches. Unlike traditional swipe gestures, this animation is triggered by a button press, leading to a smooth transition between different user profiles or cards. We will be using React Native, a popular framework for building mobile applications, and Reanimated, a library for handling complex animations.   Setting the Stage: Project Setup Before diving into the implementation of the Card Transition Animation, let's ensure that our development environment is set up correctly. Assuming you have a React Native project ready, ensure that you have the necessary dependencies installed. # Install Reanimated library npm install react-native-reanimated react-native-gesture-handler   Setting Up the Component In the dating app, we have two key components involved in the Card Transition Animation: PotentialMatchList and PotentialMatchItem. The former is responsible for rendering a list of potential matches, while the latter represents an individual match item.   PotentialMatchList Component The PotentialMatchList component serves as the container for the cards and handles user actions, passing relevant data to the PotentialMatchItem component.   // PotentialMatchList Component import React, { useMemo } from "react"; import PotentialMatchItem from "./PotentialMatchItem"; interface Props { // Props declaration } export default function PotentialMatchList({ // Props destructuring }: Props) { // ... return ( {slicedPotentialMatchList?.map((item, index) => { ); })} );   PotentialMatchItem Component The PotentialMatchItem component represents an individual match item and includes the Card Transition Animation logic. // Import necessary React and React Native components import React from "react"; import { View, TouchableOpacity, Text, Animated, Dimensions, StyleSheet, } from "react-native"; // Define the Props interface interface Props { onAnimate: () => void; } const PotentialMatchItem: React.FC = ({ onAnimate }) => { const translateXAnimateValue = new Animated.Value(0); const handleAnimate = (direction: string) => { const DURATION = 500; // Define the animations using Animated.parallel const animations = [ Animated.timing(translateXAnimateValue, { toValue: direction === "left" ? -1 : 1, duration: DURATION, useNativeDriver: true, }), Animated.timing(opacity, { toValue: 0, duration: DURATION, useNativeDriver: true, }), ]; // Start the animations in parallel Animated.parallel(animations).start(() => { console.log("Card slide..."); // Additional actions can be performed after the animation completes }); }; return ( {/* Your card content goes here */} Card Content {/* Button inside the Animated View */} handleAnimate("left")} style={styles.animateButton}> Animate ); }; const styles = StyleSheet.create({ container: { alignItems: "center", justifyContent: "center", marginBottom: 20, }, cardText: { fontSize: 20, fontWeight: "bold", marginBottom: 10, }, animateButton: { backgroundColor: "#3498db", padding: 10, borderRadius: 5, marginTop: 10, }, buttonText: { color: "white", fontWeight: "bold", textAlign: "center", }, animatedCard: { backgroundColor: "#2ecc71", padding: 20, borderRadius: 10, position: "absolute", top: 0, left: 0, }, }); export default PotentialMatchItem; The direction parameter is used to determine the direction of the animation. If direction is "left," it implies a dislike animation; otherwise, it implies a like animation. The animations are defined using AnimatedRN.timing for translation and opacity. Both animations are started in parallel using AnimatedRN.parallel. The completion callback of start can be used to perform additional actions after the animation completes.   Conclusion Implementing a Card Transition Animation for a dating app involves orchestrating various elements, from handling user button presses to animating background opacity and horizontal translation. React Native, coupled with the Reanimated library, provides a robust foundation for creating immersive animations that enhance the overall user experience. By following this guide, you can create a Card Transition Animation that not only adds a visual flair to your dating app but also ensures a delightful and engaging user journey. Experiment with different animation parameters and styles to tailor the card transition experience to your app's unique personality. Happy coding!

Designing UI Using Design Token with Figma Variables

November 23, 2023 • Knowledge, Figma

Designing UI Using Design Token with Figma Variables

Recently, Figma has released a major update that makes it easier for designers to create more flexible designs. If you are already familiar with it, the most talked-about feature is Variables. In the summer of 2023, Figma announced its latest feature, Figma Variables, which is similar to the function of design tokens and can be used directly in Figma. Figma Variables is currently in the Beta testing phase and is only available if you are on an educational or paid plan. This article will discuss how we use Variables and design tokens to make color usage more effective in design. Let's go!   Context & Problem We have a multi-brand design system that we use to design mobile applications. All styles from the brands are incorporated into one design called Timedoor Design System. When we initially created this design system, we did not consider making a flexible color system for different brands. However, after studying several famous design systems such as Material, IBM, and Ant Design System, we discovered that one of the fundamental elements to start a design system is to have a strong foundation, one of which is Design Tokens. Therefore, we have decided to create design tokens for the Timedoor Design System to simplify its usage, starting with Design Token Color.   Color Token Structure In the migration towards variables in Figma, we start by defining the color structure that will be used for all brands designed using the design system.   1. Primitive Tokens Primitive tokens are a collection of raw colors that will later be incorporated into semantic tokens. Examples of primitive tokens in colors are blue, purple, or green. We select several colors to be used as examples based on their function and brand colors. We create a primitives token structure with a shades structure as shown below, where a single raw color will be transformed into 11 derivative colors to facilitate the use of colors in the semantic scheme to be created.   2. Semantic Tokens Semantic tokens are a collection of variables that provide functionality to primitive tokens. Primitive tokens will reference each semantic token as needed. Examples of semantic tokens include primary color, secondary color, success color, and others. In the Timedoor Design System, we group semantic colors according to their functions, such as primary color, secondary color, background color, text color, and so on, as shown in the example below. As can be seen, primitive colors will be reused in semantic colors to maintain color consistency in design. In these semantic tokens, we also directly define themes, namely light and dark themes, both of which still use the same primitive color sources.   3. Contextual Tokens (Optional) Contextual tokens are usually used directly in the UI components being created. However, in the Timedoor Design System, we have decided to only use them up to semantic tokens, considering time and the number of people in the team. Contextual tokens will reuse the previously defined semantic colors. Examples of using contextual tokens include button-primary-default, button-primary-hover, and others.   How variables work in our design system Let's see how to apply color variables in the multi-brand design system that our team has created.   1. We separate the color file from the component file Separating files in the design system is useful for improving the efficiency of using colors, making it easier to update if there are any required updates to color variables or the components themselves. After separating the files, the color files will be published so that they can be used independently by the component files later.   2. Using color variables in components Example of using color token variables in a button component. The button container uses the color primary/main and the content inside uses the color primary/content. [caption id="attachment_6283" align="alignnone" width="768"] Example using color token in button component[/caption]   3. Components that already use semantic color tokens can utilize modes In semantic token, we have set it up so that designs that use color variables can change color according to the created modes, namely light and dark. Here is an example of using a color theme on a button component. [caption id="attachment_6284" align="alignnone" width="768"] Button component on light mode[/caption] [caption id="attachment_6287" align="alignnone" width="768"] Button component on dark mode[/caption]   In both of the above modes, the button component still uses the same semantic tokens, which are primary/main and primary/content. However, due to the different modes, the primitive token changes, making the design more flexible in terms of color usage.   Example using color token variables on our project One of the use cases of variables in our project is where we have 3 themes that already use primitive tokens and semantic tokens.   Conclusion Building a well-structured design system takes time and continuous iteration. Therefore, we try to establish a strong foundation in the design system we are building by applying design tokens through the variables feature in Figma. So don't be afraid to experiment so that we can learn from those experiments that have already happened in our design system. Thank you for reading. If you have any more questions or want to go deeper into this topic, just reach us via our website or another social links. Happy designing!

Leveraging ChatGPT for SEO-Friendly Article Creation

May 18, 2023 • Knowledge

Leveraging ChatGPT for SEO-Friendly Article Creation

Introduction In the digital age, content is king. But not just any content - it needs to be high-quality, relevant, and optimized for search engines. This is where Search Engine Optimization (SEO) comes into play. SEO is a set of strategies and techniques used to boost a website's visibility in search engine results, thereby increasing traffic and potential business opportunities. One of the tools that can help in creating SEO-friendly content is ChatGPT, an artificial intelligence model developed by OpenAI. This article will guide you on how to leverage ChatGPT to create content that not only engages your audience but also ranks well in search engine results.   Understanding SEO and Its Importance SEO is a crucial component of digital marketing. It involves optimizing your online content so that a search engine likes to show it as a top result for searches of a certain keyword. SEO is important because it increases your website's visibility, which can lead to more potential customers and leads for your business. Key elements of SEO include keyword optimization, creating high-quality and relevant content, using meta tags effectively, and building high-quality backlinks. All these elements work together to improve your site's ranking on search engine results pages (SERPs), making it easier for potential customers to find your business.   Introduction to ChatGPT ChatGPT is a language model developed by OpenAI. It uses machine learning algorithms to generate human-like text based on the input it receives. ChatGPT can be used for a variety of tasks, including drafting emails, writing code, creating written content, and even tutoring in a range of subjects. One of the key benefits of using AI like ChatGPT in content creation is its efficiency and consistency. It can generate high-quality content quickly, saving you time and effort. Furthermore, it can provide new insights and perspectives, enhancing the quality of your content.   Using ChatGPT for Keyword Research and Optimization Keyword research is a fundamental aspect of SEO. It involves identifying popular words and phrases people enter into search engines. These keywords can then be used to optimize your content, making it more likely to be discovered by users. ChatGPT can be a valuable tool in this process. You can use it to generate ideas for keywords related to your topic. For example, if you're writing an article about digital marketing, you can ask ChatGPT to suggest related keywords. It might suggest terms like "social media marketing," "content marketing," "SEO," and "email marketing." Once you have your keywords, you can use ChatGPT to help incorporate them naturally into your content. Remember, keyword stuffing - the practice of overloading your content with keywords - can lead to penalties from search engines. ChatGPT can help ensure your keywords are used in a way that is natural and relevant to your content.   Creating High-Quality, Relevant Content with ChatGPT Creating high-quality, relevant content is one of the most effective SEO strategies. Search engines favor content that provides value to users, and high-quality content is more likely to attract backlinks, which can further boost your SEO. ChatGPT can assist in creating such content. You can use it to generate ideas for blog posts, articles, or other forms of content. You can also use it to draft the content itself. For example, you can provide ChatGPT with a brief outline of your article, and it can generate a detailed draft based on that outline. Remember, while ChatGPT can generate high-quality content, it's always important to review and edit the content to ensure it meets your standards and accurately represents your brand.   Using ChatGPT to Generate Meta Descriptions and Meta Tags Meta descriptions and meta tags play a crucial role in SEO. They provide search engines with information about your page's content, which can help improve your visibility in search results. ChatGPT can be used to generate effective meta descriptions and meta tags. For meta descriptions, you can provide a brief summary of your content and ask ChatGPT to refine it. For meta tags, you can ask ChatGPT to suggest relevant keywords based on your content. Remember, while meta tags are not as influential as they once were, they still play a role in SEO. They can help search engines understand your content and can improve click-through rates from search results. Using ChatGPT to Optimize Content Structure for SEO. The structure of your content can also impact your SEO. This includes elements like headings, subheadings, and the overall layout of your content. ChatGPT can assist in optimizing your content structure for SEO. You can use it to generate headings and subheadings that incorporate your keywords. You can also use it to create an outline for your content, ensuring it is structured in a way that is easy for both users and search engines to navigate.   Building High-Quality Backlinks with ChatGPT Backlinks - links from other websites to your own - are a key factor in SEO. They can significantly improve your site's visibility in search results. However, not all backlinks are created equal. High-quality backlinks from reputable websites are much more valuable than low-quality backlinks from obscure sites. ChatGPT can assist in your backlink building efforts. You can use it to generate ideas for guest posts, which can earn you backlinks from other websites. You can also use it to draft outreach emails, asking other websites to link to your content. Remember, while ChatGPT can assist in these tasks, building high-quality backlinks often requires a human touch. It's important to build relationships with other website owners and provide value in exchange for backlinks.   Conclusion SEO is a crucial component of digital marketing, and ChatGPT can be a valuable tool in your SEO efforts. From keyword research and optimization to content creation and backlink building, ChatGPT can assist in a variety of tasks. However, while ChatGPT can generate high-quality, SEO-friendly content, it's important to remember that it is a tool, not a replacement for human creativity and insight. Always review and edit the content generated by ChatGPT to ensure it meets your standards and accurately represents your brand. By leveraging the power of ChatGPT and following SEO best practices, you can create content that not only engages your audience but also ranks well in search engine results, driving traffic and potential business opportunities to your website." By the way, this article is also made by ChatGPT :)

Testing