Contributing to CPU & Data Science Learning App

This guide explains how to add new content to the app, including glossary terms, how-to guides, and learning topics.

The main content files are located in:

• lib/content-data.ts - Contains all learning topics and how-to guides
• app/(tabs)/glossary.tsx - Contains glossary terms and definitions

Open app/(tabs)/glossary.tsx and find the glossaryData array. Add new terms following this format:

{ 
  term: "TERM_NAME", 
  full: "Full Name (if acronym)", 
  definition: "Detailed definition explaining the term. Include context, examples, and practical applications. Aim for 3-5 sentences.", 
  category: "Category" 
}

Available categories: "CPU", "Data Science", "File Types", "GIS"

Example:

{ 
  term: "API", 
  full: "Application Programming Interface", 
  definition: "A set of protocols and tools that allows different software applications to communicate with each other. APIs define the methods and data formats for requesting and exchanging information. Common examples include REST APIs for web services and library APIs for programming languages.", 
  category: "Data Science" 
}

Open lib/content-data.ts and find the topicContents array. Add new topics following this format:

{
  id: "unique-topic-id",
  title: "Topic Title",
  emoji: "📚",
  category: "Category",  // "CPU", "Data Science", or "GIS"
  description: "Brief one-line description shown in topic list",
  content: [
    "First paragraph of content...",
    "Second paragraph of content...",
    "Third paragraph of content...",
    // Add 5-7 paragraphs for comprehensive coverage
  ],
  diagram: require("@/assets/images/your-diagram.png"),  // or null if no image
  keyTerms: ["Term1", "Term2", "Term3"]
}

Tips for writing content:

• Write in clear, educational prose
• Each paragraph should cover one concept
• Include practical examples and real-world applications
• Define technical terms when first introduced

In lib/content-data.ts, find the howToGuides array. Add new guides following this format:

{
  id: "unique-guide-id",
  title: "How to Do Something",
  emoji: "🔧",
  steps: [
    {
      title: "Step 1 Title",
      content: "Detailed explanation of this step. Include specific instructions, tips, and what to expect.",
      screenshot: require("@/assets/images/step1-screenshot.png")  // optional
    },
    {
      title: "Step 2 Title",
      content: "Detailed explanation of step 2..."
    },
    // Add 5-7 steps for comprehensive guides
  ]
}

1. Add image files to assets/images/
2. Reference them using require("@/assets/images/filename.png")
3. Recommended formats: PNG for diagrams, JPG for screenshots
4. Recommended size: 800-1200px width for good mobile display

To add a new category (e.g., "Networking"):

1. In glossary.tsx: Add the category to the categories array:

   const categories = ["All", "CPU", "Data Science", "File Types", "GIS", "Networking"];

2. In learn.tsx: Add a new section for the category:

   const networkingTopics = topicContents.filter((t) => t.category === "Networking");

   Then add the JSX to display the section.

3. In content-data.ts: Update the TopicContent type:

   category: "CPU" | "Data Science" | "GIS" | "Networking";

After making changes:

1. Save the file
2. The app should hot-reload automatically
3. Check the relevant screen (Learn, How-To, or Glossary) to verify your content appears correctly
4. Test on both light and dark modes

If you need help adding content or have questions about the structure, feel free to open an issue on GitHub.