Build a Meditation Timer App with Rork — Your First Mindfulness App from Scratch

Why Build a Meditation App?

Health and wellness apps are one of the most consistently popular categories on both the App Store and Google Play. Meditation and mindfulness apps, in particular, offer an ideal combination for indie developers: the core features are straightforward to build, yet users tend to come back day after day.

Below, we build a meditation timer app from scratch using Rork. Even if you're relatively new to app development, Rork's AI assistant can help you get a functional app up and running in about 30 minutes to an hour.

What you'll learn:

• How to implement a countdown timer with visual progress
• Adding ambient sound playback during meditation sessions
• Saving and displaying session history
• Designing a calming, intuitive UI

Prerequisites and Setup

Before diving in, here's what you'll need.

Required:

• A Rork account (the free plan works for development)
• A web browser (Chrome recommended)
• A vision for the meditation experience you want to create

Helpful but not required:

• Basic understanding of app screen structure (home, settings, etc.)
• Familiarity with React Native or Expo concepts (Rork handles most of it for you)

If you're brand new to Rork, check out the "Getting Started with Rork" guide first.

Designing the App — Planning Your Screens

The first step is mapping out what screens your app needs. When working with Rork, giving the AI a clear picture of the overall structure leads to much better results.

The Three Essential Screens

1. Home Screen (Timer): The main countdown timer with start/pause/reset controls
2. History Screen: A record of past meditation sessions
3. Settings Screen: Timer duration presets, sound selection, and notification preferences

Sample Prompt for Rork

Type something like this into Rork's chat to get started:

Build a meditation timer app with the following features:
 
1. Home screen
   - Circular countdown timer with a progress ring
   - Preset buttons for 5, 10, 15, and 20 minutes
   - Start/pause/reset controls
   - Calm, dark blue color scheme
 
2. History screen
   - Session records with date, duration, and completion status
   - Weekly total meditation time summary
 
3. Settings screen
   - Custom timer duration input
   - End-of-session sound selection (bell, chime, or silent)
 
Use bottom tab navigation.
Color theme: calming dark navy + white.

With just this prompt, Rork will generate the screen layouts, navigation structure, and core components automatically.

Implementing the Countdown Timer

The timer is the heart of any meditation app. Let's look at how the core timer logic works, building on what Rork generates for you.

Core Timer Logic

// Timer state management (example of Rork-generated code)
import { useState, useEffect, useRef } from 'react';
 
const useMeditationTimer = (initialMinutes: number) => {
  const [timeLeft, setTimeLeft] = useState(initialMinutes * 60);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
  useEffect(() => {
    if (isRunning && timeLeft > 0) {
      intervalRef.current = setInterval(() => {
        setTimeLeft((prev) => prev - 1);
      }, 1000);
    } else if (timeLeft === 0) {
      // Timer completed
      setIsRunning(false);
      // Play completion sound
      // Save session record
    }
 
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [isRunning, timeLeft]);
 
  // Format as MM:SS
  const formatTime = () => {
    const minutes = Math.floor(timeLeft / 60);
    const seconds = timeLeft % 60;
    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  };
 
  return { timeLeft, isRunning, setIsRunning, setTimeLeft, formatTime };
};

Circular Progress Ring

The visual progress ring is a key UI element for meditation apps. Ask Rork to "show the timer as a circular progress bar," and it will generate a react-native-svg implementation for you.

// Circular progress calculation
// progress: 0 (start) to 1 (complete)
const progress = 1 - (timeLeft / totalTime);
const circumference = 2 * Math.PI * radius;
const strokeDashoffset = circumference * (1 - progress);
// Apply to SVG circle element

Adding Ambient Sound Playback

Background sounds during meditation significantly enhance the user experience.

Follow-Up Prompt for Rork

Add ambient sound playback to the timer screen:
- Options: rain, ocean waves, birdsong, and silence
- Sound starts when the timer begins and stops when it ends
- Add a volume slider control
- Use expo-av for audio playback

Sound Playback Basics

// Ambient sound with expo-av (example of Rork-generated code)
import { Audio } from 'expo-av';
 
const sounds = {
  rain: require('../assets/sounds/rain.mp3'),
  waves: require('../assets/sounds/waves.mp3'),
  birds: require('../assets/sounds/birds.mp3'),
};
 
const playAmbientSound = async (soundKey: string) => {
  const { sound } = await Audio.Sound.createAsync(
    sounds[soundKey],
    {
      isLooping: true,    // Loop playback
      volume: 0.5,        // Default volume
    }
  );
  return sound;
};

With Rork, you can add audio features simply by asking — no need to manually configure audio sessions or handle platform-specific setup.

Saving and Displaying Session History

Tracking meditation history encourages users to stick with their practice and keeps them coming back to the app.

Storing Session Data

The simplest approach in a Rork-built app is using AsyncStorage for local persistence.

// Session data type
interface MeditationSession {
  id: string;
  date: string;           // ISO 8601 format
  duration: number;       // In seconds
  completed: boolean;     // Whether the session was completed
  soundUsed: string;      // Ambient sound selection
}
 
// Save a session
import AsyncStorage from '@react-native-async-storage/async-storage';
 
const saveSession = async (session: MeditationSession) => {
  const existing = await AsyncStorage.getItem('meditation_sessions');
  const sessions = existing ? JSON.parse(existing) : [];
  sessions.push(session);
  await AsyncStorage.setItem('meditation_sessions', JSON.stringify(sessions));
};

Building the History Screen

Ask Rork to refine the history display with a prompt like this:

Improve the history screen:
- Group sessions by date
- Show meditation duration and a completion icon for each session
- Display "Total meditation time this week" as a card at the top
- Add a streak badge showing consecutive days of practice

Streaks and weekly totals add a gamification element that can significantly improve retention. Users love seeing their consistency visualized.

Polishing the UI and UX

Meditation apps demand a calming visual design and intuitive interactions. Here are some refinements to consider.

Color Palette

A color palette that works well for mindfulness apps:

Animations

Adding gentle fade-in and fade-out animations when the timer starts and ends gives the app a more polished, meditative feel. Tell Rork something like "add a soft fade animation when the timer starts" and it'll handle the implementation.

Wrapping Up — From Meditation App to App Developer

A meditation timer is one of the best starter projects for new app developers. It's simple enough to build in a single session, yet it covers a wide range of fundamental skills: timers, local data storage, audio playback, and thoughtful UI design.

With Rork, you can go from an idea to a working prototype just by describing what you want. Start with the basics — a timer and a start button — then layer on features like ambient sounds, streaks, and session history as you get comfortable.

If you're ready to take your app's design to the next level, check out "Design Techniques for Higher-Quality Rork Apps" for more advanced tips.

Health and wellness apps enjoy steady demand and offer plenty of monetization paths. This meditation timer can be your first step toward building something people genuinely use every day.