Context engineering competition one

DASHBOARD.md

Section 1 Project: Personal Dashboard Builder

Project Overview

Teams will build a simple personal dashboard web application using Cursor IDE and GPT 4.1. This project is designed to demonstrate the critical importance of context in AI-assisted development.

Learning Objectives

• Practice prompt engineering fundamentals
• Get comfortable with Cursor IDE features
• Understand LLM capabilities and limitations
• Learn to provide proper context for professional development

Feature Requirements

1. Weather Widget

• Display current temperature and weather condition
• Show location name
• Include weather icon/graphic
• Handle API errors gracefully (show error message if weather can't be loaded)
• Use a free weather API (OpenWeatherMap recommended)

2. Todo List

• Add new tasks using text input
• Mark tasks as complete/incomplete with visual indication
• Delete individual tasks
• Display task count (total and completed)
• Save tasks to browser storage so they persist between sessions

3. Quick Notes Section

• Provide a text area for writing notes
• Automatically save notes as the user types
• Show character count
• Notes should persist between browser sessions

4. Time/Date Display

• Show current time in 12-hour format (with AM/PM)
• Display current date in readable format (Month Day, Year)
• Update the time display every second

5. Theme Selector

• Toggle between light and dark color schemes
• Remember user's theme preference
• Smooth visual transitions when switching themes
• Apply theme to all dashboard components

Technical Requirements

• Use vanilla HTML, CSS, and JavaScript only (no frameworks)
• Responsive design that works on both mobile and desktop
• Clean, professional styling with good visual hierarchy
• Proper error handling for all user interactions
• Store data locally in the browser (localStorage)
• At least one API integration for live data

Project Structure

dashboard/
├── index.html
├── styles/
│   ├── main.css
│   └── themes.css
├── scripts/
│   ├── app.js
│   ├── weather.js
│   ├── todos.js
│   └── notes.js
└── README.md

Instructions for Teams:

1. Create a simple, minimal prompt asking for a personal dashboard
2. Use this prompt in Cursor and observe what the AI generates
3. Document the results and any issues you encounter
4. Note what's missing or unclear in the generated code

Resources

APIs to Use

• Weather: OpenWeatherMap API (free tier)
• Alternative: WeatherAPI.com (free tier)

Getting API Keys

1. Sign up at openweathermap.org
2. Get free API key from dashboard
3. Use in your weather widget

Cursor IDE Tips

• Use Ctrl+K (Cmd+K on Mac) for inline AI suggestions
• Use the chat panel for longer conversations
• Select code before prompting to give AI context
• Use "Explain this code" feature to understand generated code