Skip to content

Quick Start Tutorial

Jump to bottom
Dinesh Dawonauth edited this page Jul 22, 2025 · 1 revision

Get up and running with My Progress Planner in just 5 minutes! This tutorial will walk you through setting up the application and logging your first meal.

⏱️ 5-Minute Setup Guide

Step 1: Clone & Install (2 minutes)

# Clone the repository
git clone https://github.com/dinesh-git17/my-progress-planner.git
cd my-progress-planner

# Install dependencies
npm install

Step 2: Environment Setup (2 minutes)

  1. Copy environment template:

    cp .env.example .env.local

  2. Get your Supabase credentials:

    • Go to supabase.com and create a new project
    • Navigate to Settings → API
    • Copy your URL and anon key

  3. Get your OpenAI API key:

  4. Update .env.local:

    NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key_here
OPENAI_API_KEY=your_openai_api_key_here

Step 3: Database Setup (30 seconds)

# Set up database schema
npm run db:setup

Step 4: Start Development (30 seconds)

# Start the development server
npm run dev

Visit http://localhost:3000 - you should see the welcome screen! 🎉

🍽️ Your First Meal Log

1. Sign Up/Login

  • Click "Get Started" on the homepage
  • Choose "Sign in with Google" or create an account with email
  • Complete the authentication flow

2. Log Your First Breakfast

  • You'll see the main dashboard with three meal cards
  • Click on the Breakfast card
  • Enter what you had for breakfast (e.g., "Oatmeal with berries and honey")
  • Click "Log Meal"

3. Get AI Response

  • Wait a moment for GPT-4 to generate a personalized response
  • You'll see an encouraging message like: "What a nutritious start to your day! Oatmeal with berries is such a perfect combination of fiber and antioxidants. Hope your morning is as sweet as you are! 💕"

4. Check Your Streak

  • Notice the streak counter showing "1 day"
  • This will grow as you consistently log meals!

5. Explore Features

  • Try logging lunch and dinner
  • Check the Summaries page for daily recaps
  • Test the offline functionality by disconnecting internet

🎯 What You've Just Built

Congratulations! You now have a fully functional meal tracking app with:

  • ✅ AI-Powered Responses - Every meal gets personalized encouragement
  • ✅ Streak Tracking - Motivation through consistency
  • ✅ Offline Support - Works without internet connection
  • ✅ Daily Summaries - AI-generated progress recaps
  • ✅ Secure Authentication - Your data is private and protected

🚀 Next Steps

Customize Your Experience

  1. Set Your Name:

    # Go to profile settings
http://localhost:3000/profile

  2. Generate Friend Code:

    # Share progress with friends
http://localhost:3000/friends

  3. Enable Push Notifications:

    • Set up VAPID keys (optional)
    • Configure meal reminders

Development Workflow

Making Changes

# Create a feature branch
git checkout -b feature/my-improvement

# Make your changes
# Test thoroughly

# Commit and push
git commit -m "feat: add awesome feature"
git push origin feature/my-improvement

Testing Your Changes

# Run tests
npm test

# Type checking
npm run type-check

# Linting
npm run lint

Build for Production

# Create production build
npm run build

# Test production build locally
npm start

💡 Quick Tips

Development Tips

  • Hot Reload: Changes to code automatically refresh the browser
  • Database Reset: Use npm run db:reset if you need to start fresh
  • Clear Cache: Run npm run clean if you encounter build issues

UI Customization

// Change the app's primary color in tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          500: '#your-color-here', // Change this
        }
      }
    }
  }
}

Adding Your Own AI Prompts

// Customize AI responses in src/lib/ai-prompts.ts
export const mealPrompts = {
  breakfast: "Your custom breakfast encouragement template...",
  lunch: "Your custom lunch encouragement template...",
  dinner: "Your custom dinner encouragement template..."
};

🛠️ Common First-Time Issues

Port Already in Use

# Kill process on port 3000
lsof -ti:3000 | xargs kill -9

# Or use different port
npm run dev -- -p 3001

Database Connection Issues

# Verify Supabase URL format
https://your-project-id.supabase.co

# Check if keys are correctly set
echo $NEXT_PUBLIC_SUPABASE_URL

OpenAI API Issues

# Verify API key format (should start with sk-)
echo $OPENAI_API_KEY | grep "^sk-"

# Test API key
curl https://api.openai.com/v1/models \
  -H "Authorization: Bearer $OPENAI_API_KEY"

📱 Test PWA Features

Install as App

  1. Chrome/Edge:

    • Click the install icon in the address bar
    • Or go to Settings → "Install My Progress Planner"

  2. Safari (iOS):

    • Tap the Share button
    • Select "Add to Home Screen"

  3. Test Offline:

    • Disconnect from internet
    • Try logging a meal
    • Reconnect - data should sync automatically

Push Notifications (Optional)

# Generate VAPID keys for push notifications
npx web-push generate-vapid-keys

# Add to .env.local
VAPID_PUBLIC_KEY=your_public_key
VAPID_PRIVATE_KEY=your_private_key

🎨 Customization Ideas

Change the App Theme

/* Add to src/app/globals.css */
:root {
  --color-primary: #your-color;
  --color-background: #your-bg-color;
}

Add Custom Meal Types

// Modify src/types/meal.ts
export type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';

Customize AI Personality

// Edit src/lib/ai-config.ts
export const AI_PERSONALITY = {
  tone: "encouraging", // supportive, playful, professional
  style: "boyfriend", // friend, coach, parent
  emojis: true // false to disable emojis
};

✅ Success Checklist

By the end of this tutorial, you should have:

  • App running on localhost:3000
  • Successfully logged in with authentication
  • Logged at least one meal
  • Received an AI response
  • Seen your streak counter
  • Tested offline functionality
  • Installed the app as PWA (optional)

🚨 Need Help?

If you get stuck at any point:

  1. Check the logs in your terminal for error messages
  2. Review the Installation Guide for detailed setup
  3. Search GitHub Issues for similar problems
  4. Ask for help in GitHub Discussions
  5. Contact directly: [email protected]

🎉 Congratulations!

You've successfully set up My Progress Planner! You now have a powerful, AI-enhanced meal tracking application that will provide supportive encouragement on your wellness journey.

What's Next?

Happy meal tracking! Remember, every meal logged is a step towards building healthier habits. You've got this! 💕

Clone this wiki locally