Make My Plan Documentation

Welcome to the comprehensive documentation for Make My Plan, an AI-powered goal planning web application. This guide will walk you through everything you need to know about installing, customizing, and deploying your Make My Plan application.

Note: This documentation assumes you have basic knowledge of HTML, CSS, and JavaScript. If you're new to web development, we recommend familiarizing yourself with these technologies before proceeding.

What is Make My Plan?

Make My Plan is an innovative web application designed to help users transform their aspirations into actionable plans. By leveraging advanced AI technology, Make My Plan provides personalized guidance, structured planning, and ongoing support to help users achieve their goals effectively.

The application combines the power of artificial intelligence with intuitive user interfaces to create a seamless experience for goal setting, planning, and execution. Whether you're looking to improve your fitness, advance your career, learn a new skill, or achieve any other personal or professional goal, Make My Plan provides the tools and guidance you need to succeed.

Getting Started

This section will guide you through the process of obtaining, installing, and setting up your Make My Plan application.

Prerequisites

Before you begin, ensure you have the following:

  • A modern web browser (Chrome, Firefox, Safari, Edge)
  • Basic knowledge of HTML, CSS, and JavaScript
  • An OpenRouter API key (for production use)
  • A web server or hosting service (for deployment)

System Requirements

Make My Plan is a lightweight web application that can run on most modern web servers. The minimum requirements are:

  • Web server with PHP 7.4+ or any static file hosting
  • At least 10MB of storage space
  • Modern web browser with JavaScript enabled

Installation

Follow these steps to install and set up your Make My Plan application:

Step 1: Download the Template

After purchasing, you'll receive a download link for the Make My Plan template. The template is provided as a ZIP file containing all necessary files.

Step 2: Extract the Files

Extract the ZIP file to your local development environment or directly to your web server. The extracted files should maintain the following structure:

Make My Plan-html/
├── index              # Main application page
├── custom             # Chat interface page
├── grab-opportunity   # Opportunity page
├── contact            # Contact page
├── css/               # Stylesheets
│   └── style.css      # Main stylesheet
├── js/                # JavaScript files
│   ├── main.js        # Core application logic
│   ├── custom.js      # Chat and UI functionality
│   └── pdf.js         # Download functionality
└── assets/            # Images and other assets

Step 3: Set Up a Local Development Environment

For local development, you can use any of the following methods:

Using Python's Built-in Server

python -m http.server

Using Node.js's http-server

npx http-server

Using PHP's Built-in Server

php -S localhost:8000

After starting the server, access your application at http://localhost:8000 (or the port specified by your server).

Step 4: Configure API Keys

For production use, you need to obtain and configure your own API keys:

  1. Sign up for an account at OpenRouter
  2. Generate an API key from your dashboard
  3. Open the js/main.js and js/custom.js file and replace the API key in the constants section:
// API Configuration
const API_KEY = "YOUR_API_KEY_HERE"; // Replace with your OpenRouter API key
const AI_MODEL = "meta-llama/llama-3-8b-instruct";
const API_ENDPOINT = "https://openrouter.ai/api/v1/chat/completions";
Important: The API key included in the code is for demonstration purposes only. For production use, you must obtain and implement your own API key.

Customization

Make My Plan is designed to be easily customizable to match your brand and requirements. This section covers the main areas you can customize:

Changing the Branding

To change the branding elements of your application:

  1. Replace the logo images in the assets/ directory with your own
  2. Update the site title in the HTML files
  3. Modify the color scheme in the CSS file

Updating the Logo

Replace the following files with your own logo:

  • images/logo.jpg - Light mode logo
  • images/logo-dark.jpg - Dark mode logo

Changing the Site Title

Update the title tag in each HTML file:

<title>Your Brand Name - Goal Planning</title>

Customizing the Color Scheme

The application uses Tailwind CSS for styling. You can customize the color scheme by modifying the following:

  1. Open the css/style.css file
  2. Look for color-related classes and modify them to match your brand colors
  3. Pay special attention to the primary color (blue-500) which is used throughout the application

Modifying the Chat Interface

The chat interface can be customized in the following ways:

  1. Open the custom file
  2. Modify the welcome message in the chat messages area
  3. Customize the chat header, including the title and avatar

Customizing the Goal Planning Process

To modify how the application generates and processes goals:

  1. Open the js/main.js file
  2. Locate the generatePrompt function
  3. Modify the prompt templates to change how goals are processed

Adding Custom Pages

To add new pages to your application:

  1. Create a new HTML file in the root directory
  2. Copy the structure from an existing page
  3. Modify the content to match your requirements
  4. Update the navigation links in other pages to include your new page

Features

Make My Plan comes with a comprehensive set of features designed to help users achieve their goals. This section provides an overview of the main features and how they work.

AI-Powered Goal Planning

The core feature of Make My Plan is its AI-powered goal planning system. When a user enters their goal, the application:

  1. Analyzes the goal using advanced AI
  2. Generates a structured plan with actionable steps
  3. Organizes tasks into daily, weekly, and monthly categories
  4. Provides personalized guidance based on the user's specific goal

Interactive AI Chat

The chat interface allows users to:

  • Ask questions about their goal and plan
  • Receive personalized advice and guidance
  • Get clarification on specific tasks
  • Request adjustments to their plan

Task Management

Make My Plan organizes tasks in a structured way:

  • Tasks are categorized by timeframe (daily, weekly, monthly)
  • Each task includes a clear description and actionable steps
  • Users can view their tasks in an accordion-style interface
  • Tasks are presented in a logical sequence for optimal progress

Plan Export

Users can export their personalized plans:

  • Plans are exported as text files
  • The exported file includes all tasks and guidance
  • Users can share their plans with others
  • Plans can be printed or saved for offline reference

Responsive Design

Make My Plan is designed to work seamlessly on all devices:

  • Fully responsive layout that adapts to any screen size
  • Optimized for mobile, tablet, and desktop devices
  • Touch-friendly interface for mobile users
  • Consistent experience across all devices

Theme Customization

The application includes both light and dark modes:

  • Users can switch between light and dark themes
  • Theme preference is saved in localStorage
  • Theme automatically adapts to system preferences
  • All UI elements are optimized for both themes

API Integration

Make My Plan uses the OpenRouter API to access the Llama 3 AI model. This section explains how the API integration works and how to customize it.

API Configuration

The API configuration is defined in the js/main.js file:

// API Configuration
const API_KEY = "YOUR_API_KEY_HERE"; // Replace with your OpenRouter API key
const AI_MODEL = "meta-llama/llama-3-8b-instruct";
const API_ENDPOINT = "https://openrouter.ai/api/v1/chat/completions";

Making API Requests

The application makes API requests using the makeApiRequest function in js/main.js:

async function makeApiRequest(prompt) {
    try {
        const response = await fetch(API_ENDPOINT, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${API_KEY}`,
                'HTTP-Referer': window.location.href,
                'X-Title': 'Make My Plan - Goal Planning'
            },
            body: JSON.stringify({
                model: AI_MODEL,
                messages: [
                    { role: 'system', content: 'You are a helpful goal planning assistant.' },
                    { role: 'user', content: prompt }
                ],
                temperature: 0.7,
                max_tokens: 1000
            })
        });

        if (!response.ok) {
            throw new Error(`API request failed with status ${response.status}`);
        }

        const data = await response.json();
        return data.choices[0].message.content;
    } catch (error) {
        console.error('API request error:', error);
        throw error;
    }
}

Customizing the AI Model

You can change the AI model by modifying the AI_MODEL constant. OpenRouter supports various models, including:

  • meta-llama/llama-3-8b-instruct (default)
  • meta-llama/llama-3-70b-instruct
  • anthropic/claude-3-opus
  • anthropic/claude-3-sonnet
  • google/gemini-pro

Adjusting API Parameters

You can customize the API request parameters to change how the AI responds:

  • temperature: Controls randomness (0.0 to 1.0)
  • max_tokens: Maximum length of the response
  • top_p: Controls diversity via nucleus sampling
  • frequency_penalty: Reduces repetition
  • presence_penalty: Encourages new topics

Error Handling

The application includes comprehensive error handling for API requests:

  • Network errors are caught and displayed to the user
  • API errors are logged for debugging
  • Users are redirected to the homepage on critical errors
  • Fallback responses are provided when the API is unavailable

Deployment

This section covers how to deploy your Make My Plan application to a web server for production use.

Choosing a Hosting Provider

Make My Plan can be hosted on any web server that supports static files. Some popular options include:

  • Shared Hosting: Affordable option for small to medium websites
  • VPS (Virtual Private Server): More control and resources
  • Cloud Hosting: Scalable solution for growing applications
  • Static Site Hosting: Optimized for static websites (GitHub Pages, Netlify, Vercel)

Preparing for Deployment

Before deploying your application, make sure to:

  1. Replace the demo API key with your own OpenRouter API key
  2. Test the application thoroughly in a staging environment
  3. Optimize images and assets for production
  4. Update any hardcoded URLs to match your production domain

Uploading Files to Your Server

To upload your files to a web server:

  1. Connect to your server using FTP, SFTP, or the hosting provider's file manager
  2. Upload all files and directories to the appropriate location (usually the public_html or www directory)
  3. Ensure file permissions are set correctly (typically 644 for files and 755 for directories)
  4. Verify that the file structure matches the expected layout

Configuring Your Domain

To connect your domain to your hosting:

  1. Log in to your domain registrar's control panel
  2. Update the DNS settings to point to your hosting provider's nameservers
  3. Alternatively, add an A record pointing to your server's IP address
  4. Wait for DNS propagation (can take up to 48 hours)

Setting Up HTTPS

For security, it's recommended to use HTTPS:

  1. Obtain an SSL certificate (many hosting providers offer free Let's Encrypt certificates)
  2. Install the certificate on your server
  3. Configure your server to redirect HTTP traffic to HTTPS
  4. Update any hardcoded URLs to use HTTPS

Deployment Checklist

Use this checklist to ensure a smooth deployment:

  • ✅ Replace API keys with production keys
  • ✅ Test all features in a staging environment
  • ✅ Optimize assets for production
  • ✅ Update hardcoded URLs
  • ✅ Set correct file permissions
  • ✅ Configure domain and DNS settings
  • ✅ Set up HTTPS
  • ✅ Test the deployed application

Troubleshooting

This section covers common issues you might encounter when using Make My Plan and how to resolve them.

Common Issues

API Requests Failing

If API requests are failing, check the following:

  • Verify that your API key is correct and active
  • Check your internet connection
  • Ensure that the OpenRouter API is operational
  • Check the browser console for error messages

Chat Interface Not Working

If the chat interface is not functioning properly:

  • Check that JavaScript is enabled in your browser
  • Verify that all JavaScript files are loading correctly
  • Check the browser console for error messages
  • Try clearing your browser cache and cookies

Theme Switching Issues

If the theme switching is not working:

  • Check that localStorage is enabled in your browser
  • Verify that the light-switch element is present in the HTML
  • Check the browser console for error messages
  • Try manually toggling the dark-mode class on the html element

Debugging Tips

To debug issues with your Make My Plan application:

  1. Open the browser's developer tools (F12 or right-click > Inspect)
  2. Check the Console tab for error messages
  3. Use the Network tab to verify that all resources are loading
  4. Add console.log statements to your JavaScript code to track execution

Getting Help

If you're still experiencing issues, you can get help from the following sources:

  • Contact the developer at praneetbrar7@gmail.com
  • Check the FAQ section for common questions
  • Search for similar issues in online forums
  • Consult the documentation for your hosting provider

Frequently Asked Questions

This section answers common questions about Make My Plan.

General Questions

What is Make My Plan?

Make My Plan is an AI-powered goal planning web application that helps users transform their aspirations into actionable plans. It provides personalized guidance, structured planning, and ongoing support to help users achieve their goals effectively.

How does Make My Plan work?

Make My Plan uses advanced AI technology to analyze user goals and generate personalized plans with actionable tasks. Users can interact with the AI through a chat interface to get guidance and support throughout their goal-achievement journey.

Do I need an API key to use Make My Plan?

Yes, for production use, you need an OpenRouter API key. The template includes a demo key for testing, but for a live website, you should obtain your own key from OpenRouter.

Technical Questions

Can I customize the AI model used by Make My Plan?

Yes, you can change the AI model by modifying the AI_MODEL constant in the js/main.js file. OpenRouter supports various models, including Llama 3, Claude, and Gemini.

How do I change the color scheme of Make My Plan?

You can customize the color scheme by modifying the CSS classes in the css/style.css file. The application uses Tailwind CSS, so you can change colors by updating the corresponding classes.

Can I add custom pages to Make My Plan?

Yes, you can add custom pages by creating new HTML files in the root directory and updating the navigation links in other pages to include your new pages.

Deployment Questions

What hosting providers are compatible with Make My Plan?

Make My Plan can be hosted on any web server that supports static files. This includes shared hosting, VPS, cloud hosting, and static site hosting services like GitHub Pages, Netlify, and Vercel.

Do I need a domain name to use Make My Plan?

While not strictly required, having a domain name is recommended for a professional appearance. You can use a subdomain provided by your hosting provider for testing.

How do I set up HTTPS for my Make My Plan installation?

Most hosting providers offer free SSL certificates through Let's Encrypt. You can install these through your hosting control panel or by following the provider's instructions for SSL setup.

Support Questions

How can I get help with Make My Plan?

If you need help with Make My Plan, you can contact the developer at praneetbrar7@gmail.com. You can also check the troubleshooting section of this documentation for common issues and solutions.

Is there a community or forum for Make My Plan users?

Currently, there is no official community or forum for Make My Plan users. However, you can join general web development communities to ask questions and share experiences.

Can I request custom features for Make My Plan?

Yes, you can request custom features by contacting the developer. Custom development may incur additional charges depending on the complexity of the requested features.