Project: Creative Apps - Starter Kit - Spark-Story-Generator

Track

Creative Apps (GitHub Copilot)

Project Name

spark-story-generator

GitHub Username

@dtdrupasinghe

Repository URL

https://github.com/dtdrupasinghe/spark-story-generator.git

Project Description

Spark is an AI-powered short story generator that transforms simple user prompts into engaging, imaginative stories in seconds. Built for the Microsoft Agents League 2026 Creative Apps track, Spark demonstrates the power of AI-assisted development using GitHub Copilot in VS Code.

The application allows users to:

• Enter a creative story prompt (e.g. "A lonely astronaut finds a cat on Mars")
• Select from 7 genres: General, Mystery, Comedy, Romance, Horror, Sci-Fi, and Fantasy
• Choose a story length: Flash (~100 words), Short (~300 words), or Full (~600 words)
• Generate a unique AI-written story instantly
• Remix the same prompt to get a completely different story
• Copy the generated story to clipboard with one click

Spark was built using Python and Flask for the backend, with a clean HTML/CSS/JavaScript frontend featuring smooth animations and a polished dark UI. The AI story generation is powered by Groq's LLaMA 3.3 70B model, delivering fast and creative results.

GitHub Copilot played a central role throughout development — from generating Flask route structures and API integrations, to autocompleting JavaScript fetch calls and suggesting CSS animations. Copilot Chat was used extensively for debugging API errors and explaining best practices for secure environment variable handling.

The project follows security best practices with API keys stored in environment variables, never committed to the repository. Spark is open source under the MIT License and designed to be easy to run locally by anyone.

Demo Video or Screenshots

Demo Video : https://1drv.ms/f/c/08648271E6F61099/IgDBgUj6DcRxSKvwFvNX4soXAaAOTHz03d5MKkaJkPNs9QI?e=zKWIxy

Primary Programming Language

Python

Key Technologies Used

• Python — Backend programming language
• Flask — Lightweight web framework for the backend API
• HTML, CSS, JavaScript — Frontend user interface
• Groq API — AI inference engine (free tier)
• LLaMA 3.3 70B — Large language model for story generation
• GitHub Copilot — AI-assisted development in VS Code
• Animate.css — UI animations and effects
• python-dotenv — Secure environment variable management
• Git & GitHub — Version control and code hosting

Submission Type

Individual

Team Members

No response

Submission Requirements

• My project meets the track-specific challenge requirements
• My repository includes a comprehensive README.md with setup instructions
• My code does not contain hardcoded API keys or secrets
• I have included demo materials (video or screenshots)
• My project is my own work with proper attribution for any third-party code
• I agree to the Code of Conduct
• I have read and agree to the Disclaimer
• My submission does NOT contain any confidential, proprietary, or sensitive information
• I confirm I have the rights to submit this content and grant the necessary licenses

Quick Setup Summary

1. Clone the repository: git clone https://github.com/dtdrupasinghe/spark-story-generator.git
2. Create a virtual environment: python -m venv venv && source venv/bin/activate
3. Install dependencies: pip install flask groq python-dotenv
4. Create a .env file with your Groq API key: GROQ_API_KEY=your-key-here
5. Run the app: python app.py
6. Open browser at http://127.0.0.1:5000

Technical Highlights

Technical Highlights:

• Full-stack architecture — Built a complete web application from scratch with a
  Python Flask backend serving a REST API and a pure HTML/CSS/JavaScript frontend,
  with no frameworks like React needed

• Structured prompt engineering — The app dynamically constructs AI prompts by
  combining the user's input, selected genre, and word count target into a single
  optimized system prompt, producing consistently better story quality

• Secure API design — Sensitive credentials are never exposed to the frontend;
  all AI API calls are made server-side through Flask, with keys stored safely
  in environment variables

• Smooth UX without frameworks — Achieved polished animations (glow effects,
  fade-ins, loading spinner) using only Animate.css and pure CSS keyframes,
  keeping the app lightweight with zero JavaScript framework dependencies

• Real-time feedback — Implemented character counter, word count display after
  generation, and a loading spinner to keep users informed at every step

• Remix functionality — The one-click Remix feature reuses the same prompt with
  a new AI call, giving users creative variation without retyping, which required
  careful state management in vanilla JavaScript

• GitHub Copilot integration — Used Copilot throughout the entire development
  process for code generation, debugging, and problem solving, significantly
  accelerating development as a beginner developer

Challenges & Learnings

Challenges:

• API compatibility — Navigated multiple AI API providers (OpenAI, Google Gemini, Groq)
  due to billing and regional restrictions, learning how each service works differently.
• Environment setup — Learned how to properly structure a Flask project with virtual
  environments and secure API key management using .env files.
• Model deprecation — Encountered deprecated AI models mid-development and learned
  how to quickly adapt to newer model versions.
• Debugging API errors — Faced 401 (invalid key), 429 (quota exceeded), and 404
  (model not found) errors and learned to systematically debug each one.

Learnings:

• How to build a full-stack web app with Python Flask from scratch.
• How to securely manage API keys using environment variables.
• How to integrate third-party AI APIs into a web application.
• How GitHub Copilot accelerates development by suggesting code completions,
  helping debug errors, and explaining unfamiliar concepts.
• The importance of error handling on both frontend and backend.
• How to use Git for version control and collaborate via GitHub.

Contact Information

inkedin.com/in/thisararupasinghe/

Country/Region

Sri Lanka

This issue is a project submission rather than a request for a specific change. Start with the linked repository's README.md and app.py, then review the setup steps and frontend assets; no concrete acceptance criteria or definition of done is provided in the issue.