I build (not really, Google AI studio did) an app to track babies sleep

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

Building A Cute, AI-Powered Baby Sleep App with Google's AI Studio

I created "Nap Catcher," a simple app to track my baby's sleep and get AI-powered predictions for their next nap. The goal was to build a tool that makes life easier for new parents, offering smart predictions for a happier baby and a more rested you. Of course I can't promise that it works, every baby is different, but it was fun to build prompt.

What I Built AI built

I used Google's AI Studio to generate a simple, cute mobile app. My key prompts were to "create a cute and simple app to track a baby's sleep patterns" and "predict their next nap time with a touch of AI magic." I also asked for features like logging sleep times and displaying smart predictions.

Demo

You can play with the demo here!

The app features a clean, calming home screen with a large button to start and stop the sleep timer. A sleep log tracks all past naps, and the AI's prediction for the next nap time is displayed prominently. The interface is designed to be intuitive and easy to use, even when you're sleep-deprived.

My Experience

I was surprised that the AI picked React and Tailwind CSS as the libraries and not Angular, especially since AI Studio and Angular are both built by Google. I had explicitly asked the AI to make a "cute" app, because I wanted to avoid the look of a standard dashboard. Fortunately, the result was exactly what I had hoped for: an app with a reassuring and easy-to-use interface that feels perfect for a new parent. This project showed me how powerful and accessible AI development tools have become.

However, I see AI cheating sometimes 👀

useEffect(() => {
    const fetchPrediction = async () => {
      setIsLoading(true);
      const message = await getPredictionMessage(predictedNapTime, avgSleepDuration);
      setPredictionMessage(message);
      setIsLoading(false);
    };
    if (avgWakeDuration > 0) {
      fetchPrediction();
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lastWakeUpTime, avgWakeDuration, avgSleepDuration]); // We only want to refetch if the core data changes.

I wouldn't disable eslint, but fix the code to have a cleaner and 100% bug free approach.

But I am very impressed and happy for the result!