What do I need to be reminded of today?

An app for a Daily Dose of Inspiration

We often self-sabotage through automatic patterns in our brain that dictate how we feel, think, and respond.

This can lead to stress, anxiety, self-doubt, frustration, restlessness, and unhappiness.

A step in conquering your saboteurs is having a daily affirmation routine, where you remind yourself not to believe in your negative emotions as you handle life’s everyday challenges.

Wouldn't it be great if someone could inspire you every morning with a fresh and genuine affirmation about a theme you struggle with lately?

Discover Your Daily Dose of Inspiration

Step 1: Select from a variety of themes such as confidence, motivation, gratitude, stress relief and relationships to receive personalized affirmations that resonate with your current needs.

Step 2: Using OpenAI's powerful language model, the app generates unique and meaningful affirmations every day, accompanied by AI-generated images that visually reinforce the positive messages.

Step 3: Take a moment to reflect on your personalized message

Key Technologies Used

• OpenAI's GPT-4: Leveraging the power of OpenAI's advanced GPT-4 model to generate a unique affirmation message along with an inspirational image for the selected theme.

• Next.js: I needed a backend solution to securely handle the OpenAI API key without exposing it. With Next.js, I can build the entire project without requiring a separate backend, as it allows me to manage both the frontend and backend seamlessly.

Here’s a code snippet showcasing the OpenAI integration that generates affirmation text based on the user's selected category.

// the server side:
// app/api/generateAffirmation/route.ts
import OpenAI from "openai";

const openai = new OpenAI({
  apiKey: process.env.API_KEY_OPENAI,
});

export async function POST(request: Request) {
  const body = await request.json();

  const result = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      {
        role: "system",
        content:
          "You are a helpful assistant that generates positive and uplifting daily affirmations. These affirmations should be tailored to the user's selected theme and should focus on personal growth, self-improvement, and well-being. Ensure that each affirmation is encouraging, motivational, and supportive.",
      },
      {
        role: "user",
        content: [
          {
            type: "text",
            text: body.meditationPrompt,
          },
        ],
      },
    ],
    temperature: 1,
    max_tokens: 256,
    top_p: 1,
    frequency_penalty: 0,
    presence_penalty: 0,
  });

  return Response.json({ message: result.choices[0].message.content });
}

And use the endpoint created in a client component:

// the client side:
// app/theme/[category]/page.tsx

export default function Category({ params }: { params: { category: string } }) {
  const categoryName = decodeURIComponent(params.category);
  const [affirmation, setAffirmation] = useState<string | null>(null);
  const [loadingAffirmation, setLoadingAffirmation] = useState(true);
  ...

  const generateAI = async () => {
    setLoadingAffirmation(true);

    try {  
      const response = await fetch("/api/generateAffirmation", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          meditationPrompt: meditationPrompts[categoryName],
          categoryName: categoryName,
        }),
      });

      const data = await response.json();

      setAffirmation(data.message);
      ...
    } catch (error) {
      console.error("Error fetching data:", error);
    }

    setLoadingAffirmation(false);
  };  

  useEffect(() => {
   generateAI();
  }, []);

  return (
    <>
      <h1>Today's {categoryName} Boost Just for You</h1>
      <h2>Take this moment to reflect on your personalized message</h2>
      ...
      <div className={vollkorn.className}>
        <MessageCard message={affirmation} loading={loadingAffirmation} />
      </div>
    </>
  );
}

Demo 🎉

Check out the live demo of the Daily Affirmation App here.

Please note that for demonstration purposes, the demo provides responses that were previously generated with OpenAI.

Getting Started 🚀

Follow these steps to get the project up and running locally:

Clone the Repository

git clone https://github.com/davidschinteie/daily-affirmation
cd daily-affirmation

Install Dependencies

npm install

Set Up Your OpenAI API Key:

• you can sign up for an account and generate an API key from the OpenAI website.

• Create a .env.local file in your project root.

• Add your OpenAI API key in the following format:

API_KEY_OPENAI=your_api_key_here

Run the Application

npm run dev

Detailed instructions and access to the complete codebase are available on GitHub.

If you enjoyed the article and found it helpful, please consider giving it a like 😊

Thank you for reading!