DEV Community: David Tran

My Aesthetic Pomodoro Timer Got 1,000 Users in 2 Weeks – Real Numbers & Lessons

David Tran — Sat, 07 Jun 2025 15:46:00 +0000

Hey devs! Just wanted to share a quick win and some lessons learned from shipping my little side project, studyfoc.us.

Last week, I launched a minimalist Pomodoro timer with a focus on aesthetics and no-nonsense UX. To my surprise, it picked up 1,000 active users in about 14 days. Here are some quick stats and a few takeaways if you’re thinking about launching your own indie product.

Some Quick Stats

1,000 active users in the 2 weeks
1 minute average engagement per session
90% of all traffic came from social media posts

What Actually Worked

1. Competition Means You’re on the Right Path

Seeing lots of Pomodoro timers out there was intimidating, but honestly, it just proves there’s real demand. Instead of worrying, I focused on making my app unique (in my case, better visuals and simple UX).

2. Post Updates Everywhere

I posted progress updates and launch notes on Reddit, Facebook, and a few Discord channels. One Reddit post got 70 upvotes, a Facebook update hit 150 likes. Most of my users came from these posts—organic reach is still alive if you actually show your work.

3. User Feedback Is Gold

Some of the best feature ideas came straight from user feedback. Don’t just look for compliments—look for the suggestions and the criticism. It helps.

4. Use AI for Coding and Content, But Not UX

AI is great for generating code snippets, boilerplate, or SEO blog posts. But for UI/UX, don’t expect a magic prompt to get it right. You have to iterate, test, and polish by hand.

5. AI SEO Content Actually Ranks

I let AI help me write a few SEO-focused blog posts and even some images for the website. When I Google “aesthetic pomodoro timer,” my articles are already ranking on page one. If you’re launching, take the time to write a couple SEO articles—it works.

6. Don’t Waste Money on Directories

Skip the $20 “lifetime” directory listings. For me, they brought almost zero traffic. Just share your link on dev.to, IndieHackers, Medium, etc. That’s where your real audience hangs out.

If you want a clean, focused Pomodoro timer, give studyfoc.us a try. And if you’re shipping something soon, post about it early and often. Your audience is out there—you just have to show up!

Happy building! 🚀

I built another aesthetic Pomodoro timer — 800 users show up in the first week

David Tran — Tue, 03 Jun 2025 04:45:13 +0000

Yes, I know — there are way too many Pomodoro timers out there.

But most of them? Clunky UI, annoying paywalls, or just not built with Gen Z in mind. I wanted something dead simple, fast, and clean. So I built https://studyfoc.us — a minimalist Pomodoro timer that:

Requires no login
Has built-in website blocking
Beautiful and aesthetic wallpaper and animation that bring a calm and UI sense

What happened in the first 7 days?

800 users
1.9k pageviews
~1 minute avg session
$0 in ads — all organic via Reddit and word of mouth

Techstack:

NextJS
Typescript
Tailwind

What's next:
I am going to build a mobile once the web version hits 1000 daily active users. Right now it is already hit 240 users

I Built My Own Focus Tool with NextJS & Tailwind and got 300 users in 2 days

David Tran — Fri, 23 May 2025 07:52:12 +0000

At a time when everything screams “AI-powered,” I built something without a single line of AI code — and somehow it clicked.

All it does is help people stay focused using the classic Pomodoro Technique.

No login. No analytics. Just vibes and focus.

And within 48 hours of launch, 300+ users gave it a try.

🎯 Introducing StudyFoc.us

A minimal Pomodoro timer designed for deep work and zero distractions — built entirely with simplicity in mind.

✨ Features:

🍅 A clean Pomodoro timer
🎥 Background videos for a focused study vibe
🖼️ Picture-in-picture mode — pop it out like an app on desktop
🎧 Built-in white noise or bring your own music (YouTube, Spotify, Apple Music)
🧼 No sign-up, no clutter — just open and go

🛠️ Tech Stack

I kept the stack light and fast:

Frontend: React + TypeScript
Styling: Tailwind CSS
Media: HLS.js for video streaming
Deployment: Vercel
Storage/CDN: DigitalOcean Spaces (with Cloudflare CDN)
No AI, no backend, no database

📈 Launch Results

I posted the site on a few subreddits and private groups, and within 2 days:

300+ unique users
40% returning rate
20+ people reached out with feedback or thanks

All without ads, SEO, or even a login flow.

🧠 What I Learned

Simple still wins: Not everything needs to be AI-powered or gamified.
Frictionless UX = higher usage: No login → more people try it.
Distraction-free tools are underrated: Turns out many people just want a clean timer and chill background.

🚀 Try it out

If you need to focus, or just want a peaceful timer with white noise and vibes:

👉 https://studyfoc.us

Feedback is welcome! 🙌

Introducing StudyFoc.us – A Minimalist Pomodoro Timer to Help You Focus

David Tran — Wed, 21 May 2025 02:08:38 +0000

Hey Dev.to fam 👋,

I’m excited to share something I’ve been building lately — StudyFoc.us — a clean, fast, and calming Pomodoro timer designed for deep work and minimal distractions.

🌱 Why I Built It
Like many of you, I’ve tried all sorts of productivity tools. Some were too noisy, others too bloated. I just wanted something:

With a beautiful UI that felt calming

That let me track focus streaks

Had ambience options (white noise, nature, lofi, etc.)

Didn’t require logging in or signing up

So I built it.

🎯 What Is StudyFoc.us?
StudyFoc.us is a focused productivity companion powered by the Pomodoro technique. You can:

✅ Start a Pomodoro timer
✅ Track your daily streak
✅ Add tasks to keep yourself accountable
✅ Enable ambient sounds or Spotify/Youtube playlists
✅ Enjoy a distraction-free fullscreen mode

And the best part — it just works. No accounts. No ads. No nonsense.

🧠 Features At a Glance
Feature Description
⏱ Pomodoro Timer Simple 25-5-15 cycles
🌿 Ambient Sound Choose white noise, rain, forest, ocean
🔊 Spotify & YouTube Embed your favorite focus playlists
✅ Task Manager Add/track what you’re working on
🔥 Streak Tracker Stay consistent & gamify your focus

🖥 Tech Stack
Frontend: React + TailwindCSS

Animations: Framer Motion

Persistence: Jotai + Local Storage

Deployment: Static export hosted with NGINX + SSL (Let’s Encrypt)

🪄 What Makes It Special?
The feel. The fonts. The gradients. The little animations. StudyFoc.us is meant to feel like a space to think. It doesn’t ask anything from you — it just helps you get into flow.

It’s kind of like a digital sanctuary for your brain.

🚀 Try It Out
🔗 https://studyfoc.us

Just open it and start focusing. No setup required.

🤝 Feedback & Suggestions
I’d love your thoughts! If you have ideas or want to contribute, feel free to drop a comment or DM me.

Let’s build more tools that help us focus — not distract us. 💡

Thanks for reading!

— David

How I Made $14,000 with an Language Speaking with AI app

David Tran — Sun, 02 Jun 2024 12:09:30 +0000

Most software developers dream of making a business by selling their own app? I am one of them. In October 2022, I decided to try making a living by selling a mobile app. At that time, I didn't know anything about mobile app development because I had only worked on frontend development before.

Learning New Skills

To achieve my goal, I needed to learn several new skills. I started by learning design with Figma to create user-friendly and attractive interfaces. Then, I learned backend development with Node.js, which was very different from the frontend work I was used to. Finally, I learned mobile development with React Native to build apps for both iOS and Android.

You may ask why I didn't hire a freelancer designer? Well, I did hire a few freelancers but all of them doesn't give me the design that I wanted. At the end, I lost a lot of money on them so I decided to learn design by myself.

Over a few months, I created four apps and one website. Each project taught me something new, but none of them were successful. I realized that making a simple app was easy, but building a profitable business was much harder.

Facing Challenges

Quitting my job to focus on my startup was risky, especially since my wife was pregnant and we already had a child. I couldn’t afford to waste time and money on something that might not work. The pressure was intense, and I needed a breakthrough.

Finding the Right Niche

One day, a friend gave me some crucial advice: focus on a single niche. He suggested that I create an English-speaking app with AI. Taking his advice, I started working on the app, which I named FluentPal, using Node.js, React Native, OpenAI, and Azure.

It took me two months to launch FluentPal on iOS, but it was full of bugs, and I got only one subscriber. This was disappointing, but I didn’t give up. I spent three more months fixing the bugs, redesigning the app, creating new content, and launching it on the Play Store. I also worked with a Key Opinion Leader (KOL) to promote the app.

Even though I was worried about the time and money I had invested, I started to see results. By the end of December 2023, FluentPal had made $1,500. It wasn’t a lot, but it showed that the app had potential.

Improving and Growing

Encouraged by this small success, I continued to improve FluentPal. I added features like learning lessons, translation support, flashcards, and AI personalities. To get more users, I ran ads on Facebook and Google.

These efforts paid off. In the first five months of 2024, FluentPal made $13,000, bringing my total earnings to $14,000. This was a significant achievement, proving that the app could be a successful business.

What I Learned

Looking back, I learned several important lessons:

Don’t Start a Business Without Enough Resources: Starting a business requires a lot of time and money. Make sure you have enough of both before you begin.
Learn as Much as You Can: The more skills you have, the better you can manage different parts of your business. Hiring freelancers can be expensive, and they might not understand your product as well as you do.
Be Patient and Persistent: Success doesn’t happen overnight. You need to keep working hard, learning from your mistakes, and improving your product.
Listen to Your Users: Pay attention to what your users say and make changes based on their feedback. Building a product that meets their needs is crucial for success.

In conclusion, my journey from a frontend developer to a successful app creator was full of challenges and learning experiences. Despite the difficulties, seeing my app grow and make money has been incredibly rewarding. If you’re thinking about starting your own business, be prepared for the ups and downs, and remember to stay focused and persistent.

Try FluentPal

If you’ve read this article, I encourage you to download FluentPal. It is a really good app. It is not only just teach you English speaking but also six other languages: Chinese, Japanese, Korean, Spanish, French, and German.

Download FluentPal:

iOS
Android

React.ReactNode, React.ReactElement, JSX.Element là gì?

David Tran — Sun, 16 Aug 2020 10:42:30 +0000

Typing là một phần tất yếu của việc lập trình bằng typescript. Khi bạn import thư viện nào mà quên cài đặt mấy cái "@type/..." là bị VSCode complain ngay.

Tuy nhiên vì không ai viết document cho type nên chúng ta không hề biết sử dụng type nào cho từng loại biến. Developer phải từ mò mà không có hướng dẫn nào cả

Và cụ thể là khi sử dụng ReactJS với Typescript, có nhiều trường hợp bạn không biết phải sử dụng type nào để khai báo biến cho event hoặc cho các props.

Ngộ nghĩnh là việc sử dụng những type như React.ReactNode, React.ReactElement, JSX.Element đó hầu như đều mang lại kết quả như nhau, tuy nhiên thỉnh thoảng lại bị vscode báo lỗi. Vậy chúng khác nhau như thế nào và sử dụng sao cho đúng?

Để hiểu bọn này khác nhau thế nào, chúng ta sẽ làm 1 việc đơn giản là đọc source code:

Sau đây là phần định nghĩa của ReactElement:

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
   type: T;
   props: P;
   key: Key | null;
}

Và đây là định nghĩ của JSX.Element:

interface Element extends React.ReactElement<any, any> { }

Vậy thì JSX.Element và React.ReactElement đều là một, và chúng ta dùng 2 cái này khi mà bạn muốn variable của mình nhận vào 1 React component.

Đối với React.ReactNode:

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;
type ReactChild = ReactElement | ReactText;
type ReactText = string | number;

Như vậy ta có thể thấy ReactNode có thể chấp nhận ReactElement, string, text, boolean, null, undefined. Chúng ta có thể dùng ReactNode để khi muốn sử dụng render props.

Chẳng hạn:

<MyElement header={MyHeader} />

Trong trường hợp này, nếu như bạn muốn header của mình flexible, có thể nhận được cả string hoặc là nhận được cả 1 React component khác vào thì tốt nhất type của header sẽ là ReactNode :)

Form trong React - formik, final-form, react-hook-form

David Tran — Tue, 21 Jul 2020 07:33:54 +0000

Form is everywhere, form là một phần tất yếu của mọi website. Và khi xây dựng một webapp bằng React, việc xử lý form là một điều bắt buộc sẽ xảy ra.

Bạn có thể lựa chọn xử lý theo cách của riêng mình hoặc là lựa chọn một thư viện có sẵn của cộng đồng. Tuy nhiên khi lựa chọn một thư viện thứ 3 thì bạn sẽ gặp ngay vấn đề là có quá nhiều thư viện để bạn lựa chọn.

Việc lựa chọn 1 thư viện cũng rất là hóc búa, việc lựa chọn bừa một thư viện có nhiều star trên Github không phải lúc nào cũng sáng suốt. Bạn chắc chắn sẽ cần đọc document, code example và thử nghiệm nhiều lần mới có thể chắc chắn đây là thư viện bạn muốn sử dụng cho dự án của mình.
Đối với việc xử lý form, thì chúng ta sẽ có những ứng cử viên như sau:

Tên thư viện	Star Github	Lượt download	Kích thước
formik	23.4K	868k/tuần	7.22 kB
final-form	2.5K	222k/tuần	5.1 kB
react-Form	1.9K	12k/tuần	4.3 kB
react-hook-form	12.5K	270k/tuần	8.67 kB
redux-form	12.3K	389k/tuần	26.4 kB

Trong phạm vi bài viết này, mình sẽ so sánh 3 thư viện có lượt download nhiều nhất là formik, final-form và react-hook-form

Đối với redux-form thì chúng ta có thể an toàn bỏ qua, năm 2020 rồi chẳng ai lại đi lưu từng keystore của input vào trong Redux nữa, cực kỳ ảnh hướng tới performance. Đồng thời tác giả của thư viện này khuyên mọi người nên chuyển qua sử dụng final-form rồi 🙂

So sánh về cách sử dụng

Formik

Xét về các chỉ số như số lượng stars, lượt download thì formik là thư viện đang được nhiều người sử dụng nhất, nhiều lượt star trên Github nhất và số lần download nhiều nhất.

Thành thực mà nói thì tôi không thích câu sologan của formik (build form without tears). Bởi vì việc xây dựng form cũng như validation trong React chưa bao giờ là vấn đề quá phức tạp.

Để sử dụng formik, bạn sẽ cần render Form component của formik ngay trong phần render:

import React from "react";
import { Formik } from "formik";

const Basic = () => (
  <div>
    <h1>Anywhere in your app!</h1>
    <Formik
      initialValues={{ email: "", password: "" }}
      validate={(values) => {
        const errors = {};
        if (!values.email) {
          errors.email = "Required";
        } else if (
          !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
        ) {
          errors.email = "Invalid email address";
        }
        return errors;
      }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
        /* and other goodies */
      }) => (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />
          {errors.email && touched.email && errors.email}
          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />
          {errors.password && touched.password && errors.password}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  </div>
);

export default Basic;

Đoạn code trên khá là dài và có thể thấy một số điểm trừ như sau:

Bạn phải render Formik component ngay bên trong component của bạn điều này làm cho phần render của bạn tương đối rối rắm.
Bạn phải tự map những hàm như handleChange, handleBlur hoặc handleFocus vào thẻ input và công việc này khá tốn thời gian. Tuy nhiên, bạn có thể sử dụng những component của formik như Field hoặc ErrorMessage để save time làm những việc này
Formik không tích hợp sẵn validation, bạn tự viết function để validate form values, hoặc sử dụng thêm 1 thư viện như yup để hỗ trợ valiation.
Formik không hỗ trợ hook một cách đầy đầy đủ, bạn vẫn có thể sử dụng hook useFormik tuy nhiên khi sử dụng hook này thì những component như Field, ErrorMessage, FieldArray sẽ không hoạt động được.

final-form

final-form được viết bởi tác giả của redux-form do vậy cũng khá là nổi tiếng.

Để tạo 1 form bằng final-form thì bạn sẽ làm như sau:

import React from "react";
import { render } from "react-dom";
import Styles from "./Styles";
import { Form, Field } from "react-final-form";

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const onSubmit = async (values) => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const App = () => (
  <Styles>
    <h1>React Final Form Example</h1>
    <h2>Password / Confirm Validation</h2>
    <a
      href="https://final-form.org/react"
      target="_blank"
      rel="noopener noreferrer"
    >
      Read Docs
    </a>
    <Form
      onSubmit={onSubmit}
      validate={(values) => {
        const errors = {};
        if (!values.username) {
          errors.username = "Required";
        }
        if (!values.password) {
          errors.password = "Required";
        }
        if (!values.confirm) {
          errors.confirm = "Required";
        } else if (values.confirm !== values.password) {
          errors.confirm = "Must match";
        }
        return errors;
      }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <Field name="username">
            {({ input, meta }) => (
              <div>
                <label>Username</label>
                <input {...input} type="text" placeholder="Username" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="password">
            {({ input, meta }) => (
              <div>
                <label>Password</label>
                <input {...input} type="password" placeholder="Password" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <Field name="confirm">
            {({ input, meta }) => (
              <div>
                <label>Confirm</label>
                <input {...input} type="password" placeholder="Confirm" />
                {meta.error && meta.touched && <span>{meta.error}</span>}
              </div>
            )}
          </Field>
          <div className="buttons">
            <button type="submit" disabled={submitting}>
              Submit
            </button>
            <button
              type="button"
              onClick={form.reset}
              disabled={submitting || pristine}
            >
              Reset
            </button>
          </div>
          <pre>{JSON.stringify(values, 0, 2)}</pre>
        </form>
      )}
    />
  </Styles>
);

render(<App />, document.getElementById("root"));

Theo mình thì cách sử dụng final-form tương tự như formik, tuy nhiên vì sau khi render Form component, bạn bắt buộc phải sử dụng thêm component Field để có thể truyền props của final-form vào các input của bạn.

Vì lý do này nên việc tích hợp final-form với những component khác react-select sẽ hơi khó khăn.

Ngoài ra thì final-form không build-in validation, bạn phải tự viết function để validate dữ liệu của form.

Final-form cũng không hỗ trợ joi hoặc yup, bạn sẽ phải tự workaround để final form có thể sử dụng yup như sau sau: https://github.com/final-form/react-final-form/issues/116

react-hook-form

Mình tìm thấy react hook form tại (/r/reactjs)[https://www.reddit.com/r/reactjs). Dự án hiện tại cũng đang cần xử lý form và mình viết form bằng tay khá mất thời gian nên quyết định dùng react-hook-form thử xem sao.

Cách dùng react-hook-form như sau:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit, watch, errors } = useForm();
  const onSubmit = data => console.log(data);

  console.log(watch("example")); // watch input value by passing the name of it

  return (
    {/* "handleSubmit" will validate your inputs before invoking "onSubmit" */}
    <form onSubmit={handleSubmit(onSubmit)}>
    {/* register your input into the hook by invoking the "register" function */}
      <input name="example" defaultValue="test" ref={register} />

      {/* include validation with required or other standard HTML validation rules */}
      <input name="exampleRequired" ref={register({ required: true })} />
      {/* errors will return when field validation fails  */}
      {errors.exampleRequired && <span>This field is required</span>}

      <input type="submit" />
    </form>
  );
}

Trong 3 thư viện thì mình thấy react-hook-form dễ dùng nhất. Bạn chỉ cần dùng useForm để tạo form, đồng thời dùng register để đăng ký input với react-hook-form

Khi sử dụng react-hook-form với 1 thư viện form input khác, như react-select cũng rất đơn giản, bạn có thể sử dụng hàm setValue đề truyền giá trị của component đó vào react-hook-form.

React-hook-form cũng có sẵn một số hàm để validate nội dung form như sau:

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstName" ref={register({ required: true, maxLength: 20 })} />
      <input name="lastName" ref={register({ pattern: /^[A-Za-z]+$/i })} />
      <input name="age" type="number" ref={register({ min: 18, max: 99 })} />
      <input type="submit" />
    </form>
  );
}

Đồng thời bạn cũng có thể dùng 1 thư viện như joy, yup để validate nội dung form.

Về performance

Theo trang chủ của react-hook-form thì react-hook-form có performance tốt nhất do hạn được số lần render component không cần thiết, đồng thời có thời gian mounting thấp nhất.

Tuy nhiên, mình cảm thấy vấn đề re-render đối với form không quan trọng, bời vì hầu hết mỗi form trong React chỉ từ 6 field trở lại. Nếu như bạn có ý định render 100 field thì tốt nhất bạn nên chia form thành nhiều step khác nhau.

Kết luận

react-hook-form là thư viện dễ sử dụng nhất hiện tại, đồng thời có document cực kỳ tốt. Theo mình thấy, điểm hạn chế duy nhất của react-hook-form là chỉ có thể sử dụng với Function component. Do vậy, nếu dự án của bạn vẫn đang sử dụng React phiên bản cũ thì sẽ không sử dụng được.

Tuy nhiên formik vẫn là 1 sự lựa chọn tốt đối với những ai đã sử dụng quen thuộc hoặc là vẫn phải sử dụng class component.

Tác giả: David Tran (david@jslancer.com)