Web Design AI Header

Duplication 1: Build Your Own Blueprint Application with API Integration

Create a Flask application with at least one working blueprint that integrates with an external API you haven't used before in this course.

Assignment Objectives

  • Create a Flask application with at least one working blueprint
  • Integrate with ONE external API not previously used in the course
  • Set up proper project structure with blueprints and templates folders
  • Configure environment variables for secure API key management
  • Display your name in the header and Module 6 branding
  • Test your feature to ensure it works correctly
  • Submit your GitHub repository URL for grading

Assignment Instructions

Your Task: Recreate the Demo

Your goal is to duplicate the demonstration project you just watched. This is a hands-on assignment where you'll build the same project independently.

Requirements:
  • Follow the same steps shown in the demonstration
  • Implement all the features demonstrated
  • Use similar code structure and naming conventions
  • Test your implementation thoroughly
  • Submit your completed project

Important: This is independent work. Try to complete it without looking back at the demo unless absolutely necessary.

Assignment Details

Assignment Requirements

Your application MUST include at least ONE working blueprint with API integration:

Key Requirement: Choose ONE external API that you have NOT previously used in this course.

Examples of APIs NOT to use: Any API you've already integrated in previous modules (stock tickers, weather, movies, Groq chatbot if already used).

Your Blueprint Must Include:

  • ✓ Form to accept user input
  • ✓ Database table to store data with auto-incrementing ID
  • ✓ Button to fetch live data from your chosen API
  • ✓ Display fetched data in a clean, organized format
  • ✓ At least basic CRUD operations (Create, Read, Update or Delete)

API Suggestions (choose ONE you haven't used):

  • News API: Fetch latest news articles by topic or keyword
  • NASA API: Get astronomy picture of the day or Mars rover photos
  • CoinGecko API: Cryptocurrency prices and market data
  • OpenLibrary API: Book information and search
  • Recipe API (Spoonacular): Recipe search and nutritional info
  • Sports API (TheSportsDB): Sports teams, players, scores
  • Dad Jokes API: Random jokes (simple but functional)
  • Quotes API (ZenQuotes): Inspirational quotes
  • IP Geolocation API: Location data from IP addresses
  • Or any other free API that interests you!

Tip: Choose an API that interests you personally - it will make the project more enjoyable to build!

Technical Requirements

Make it look like the demo example:

  • Move the header to match the demo layout
  • Rename the site title to your name + "Module 6"
  • Add a professional footer at the bottom

Minimum Project Structure:

lastname-demo6/  (e.g., marshall-demo6)
├── app.py
├── database.db
├── .env
├── .gitignore
├── requirements.txt
├── README.md
├── templates/
│   ├── base.html
│   ├── index.html
│   └── your_feature.html  # Your blueprint's template(s)
└── blueprints/
    └── your_feature.py    # Your blueprint file

IMPORTANT: All templates go in the main templates/ folder. Do NOT create subfolders for each blueprint's templates.

Header & Branding:

  • ✓ Your name must be displayed in the header
  • ✓ "Module 6" must be clearly visible
  • ✓ Professional footer included
  • ✓ Navigation bar with links to Home and your feature

API Key Requirements:

  • 📍 ONE API key for your chosen external API
  • 📍 API must be one you have NOT used before in this course

SECURITY: Store your API key in .env file and add .env to .gitignore. Never commit API keys to GitHub!

Heroku Deployment: If deploying to Heroku, remember to update any passwords/API keys from your .env file into the Heroku settings Config Vars section!

Optional Enhancement:

You may implement additional blueprints or features if you wish, but only ONE working API integration is required.

Database Requirements

Create at least ONE table in SQLite for your feature:

Your table must include:

  • ✓ Auto-incrementing Primary Key (INTEGER PRIMARY KEY AUTOINCREMENT)
  • ✓ At least 3-4 columns for storing API data
  • ✓ Appropriate data types (TEXT, INTEGER, REAL, etc.)

Example table structure:

# Example for a News API feature
article_id (INTEGER PRIMARY KEY AUTOINCREMENT)
title (TEXT)
author (TEXT)
source (TEXT)
url (TEXT)
published_date (TEXT)

Note: Design your table based on what data your chosen API returns. Not all APIs require the same fields!

Grading Criteria

Your assignment will be graded on the following:

  • API Integration (40%):
  • • Uses an API NOT previously used in the course
    • API integration works correctly and returns data
    • Properly handles API responses and errors
    • API key stored securely in .env file
  • Blueprint & Database (30%):
  • • Blueprint properly structured and registered
    • Database table created with appropriate schema
    • At least basic CRUD operations work
    • Forms validate and handle user input
  • Code Organization (15%):
  • • Clean, readable code
    • Proper file structure
    • Templates in main templates folder
    • Error handling implemented
  • User Interface (10%):
  • • Professional appearance
    • Bootstrap styling
    • Your name and Module 6 branding
    • Clear navigation
  • GitHub Repository (5%):
  • • Proper .gitignore (excludes .env, database.db)
    • README with setup instructions and API info
    • Repository named correctly (lastname-demo6)

Testing Checklist

Before submitting, test your feature thoroughly:

  • ☐ Form accepts user input correctly
  • ☐ Data saves to database with auto-incrementing ID
  • ☐ "Fetch" or "Update" button successfully calls the API
  • ☐ API data displays correctly on the page
  • ☐ At least one CRUD operation (Create, Read, Update, or Delete) works
  • ☐ Error handling works (test with invalid input)
  • ☐ Your name appears in the header
  • ☐ "Module 6" branding is visible
  • ☐ Navigation works properly
  • ☐ No API keys are committed to GitHub
  • ☐ README includes which API you chose and why

Remember: Test your API integration thoroughly! Try different inputs and make sure it handles errors gracefully.

Submission Instructions

Step 1: Create a private GitHub repository named lastname-demo6

Step 2: Add your instructor (bamarshall06) as a collaborator

Step 3: Ensure your .gitignore includes:

.env
database.db
__pycache__/
*.pyc
.DS_Store

Step 4: Create a README.md with:

  • • Project description
  • • Which API you chose and why
  • • What your blueprint does
  • • Setup instructions (how to get API key, install dependencies)
  • • How to run the application

Step 5: Commit and push all code to GitHub

Step 6: Submit your repository URL

⚠️ IMPORTANT: Double-check that your .env file is NOT committed to GitHub. If you accidentally committed it, remove it immediately and rotate your API key!

Pro Tip: In your README, explain why you chose your particular API and what you found interesting or challenging about integrating it. This shows thoughtful engagement with the assignment!

Back to Demo Continue to Module 7