codex-lv3-may-2025

GitHub Kanban Board for Capstone Project

Overview

A GitHub Project board is a Kanban-style board that helps you track your work and progress. Using a project board for your capstone will help you:

Why Use a GitHub Kanban Board?

🎯 Professional Experience

📊 Visual Progress

🔗 Code Integration

📝 Documentation

Creating Your Kanban Board

Step 1: Create a New Project

  1. Go to your capstone repository on GitHub
  2. Click on the “Projects” tab in your repo
  3. Click “New project”
  4. Choose “Board” as the template
  5. Name it “Capstone Project” and click “Create”

Step 2: Set Up Your Columns

Your board should have these columns (in this order):

📋 To Do          → Ideas and tasks that aren't started yet
🔧 In Progress    → Tasks currently being worked on
⚠️  Blocked         → Tasks stuck waiting on something
🧪 Review         → Completed code awaiting testing
✅ Done            → Completed and tested features

Creating Your Roadmap

Phase 1: Planning Tasks

Create these issues to track your planning work:

Issue 1: “Complete Planning Worksheet”

Issue 2: “Review Code.org Datasets”

Issue 3: “Create Wireframes”

Issue 4: “Design Database Schema”

Phase 2: Setup Tasks

Issue 5: “Set Up Supabase Project”

Issue 6: “Import External Data from Code.org”

Issue 7: “Create React App with Vite”

Issue 8: “Set Up Git Repository”

Phase 3: Core Development Tasks

Issue 9: “Create Navigation Bar Component”

Issue 10: “Build Supabase Client Configuration”

Issue 11: “Create Home/Splash Page”

Issue 12: “Implement Report Page - Fetch Data”

Issue 13: “Implement Map Pattern”

Issue 14: “Implement Filter Pattern”

Issue 15: “Implement Reduce Pattern”

Issue 16: “Add For-Loop Implementation”

Issue 17: “Create Form Page”

Issue 18: “Add Form Validation”

Phase 4: Styling & Polish

Issue 19: “Implement CSS Styling”

Issue 20: “Responsive Design Testing”

Phase 5: Bonus Features

Issue 21: “Implement Login Page”

Issue 22: “Add Data Visualization Charts”

Phase 6: Deployment

Issue 23: “Deploy to Netlify/Vercel”

Issue 24: “Write README.md”

Issue 25: “Final Testing & Bug Fixes”

Linking Code to Issues

Automatic Issue Closing

GitHub automatically closes issues when you include keywords in your commit messages:

# Close a single issue
git commit -m "Add report page Fixes #12"

# Close multiple issues
git commit -m "Complete list patterns implementation
- Add map pattern
- Add filter pattern  
- Add reduce pattern
Fixes #13 Fixes #14 Fixes #15"

# Other closing keywords
git commit -m "Resolve #18"      # Close issue
git commit -m "Closes #12"       # Close issue
git commit -m "Implement form page Closes #17"

Manual Linking

  1. Go to the issue
  2. Click “Development” section on the right sidebar
  3. Use “Link a pull request” button
  4. Or use the issue number in your PR: Fixes #12

Tracking Progress

Progress Indicators

Your board will show:

Using Milestones

Create milestones to group related issues:

Milestone 1: “Planning Phase”

Milestone 2: “Setup Phase”

Milestone 3: “Core Features”

Milestone 4: “Polish & Deploy”

Burndown Charts

GitHub shows progress automatically:

Daily Workflow

Starting Work on an Issue

  1. Drag issue from “To Do” → “In Progress”
  2. Assign yourself to the issue
  3. Create a new branch: git checkout -b issue-12-report-page
  4. Start coding!

Completing Work

  1. Commit with issue reference: git commit -m "Add report page Fixes #12"
  2. Push to GitHub
  3. Drag issue from “In Progress” → “Review”
  4. Test your code
  5. Drag to “Done” when complete

If You Get Stuck

  1. Drag issue to “Blocked”
  2. Add a comment explaining why
  3. Create a new issue for the blocking problem
  4. Update when unblocked

Example Issue Template

Title: Create Report Page

Labels: feature, ui

Milestone: Core Features

Assignee: [Your Name]

Description:

## Goal
Display records from both external and user data tables.

## Requirements
- Fetch data from Supabase
- Display in table or list format
- Show all columns
- Use list patterns (map, filter, reduce)

## Acceptance Criteria
- [ ] Data displays from external table
- [ ] Data displays from user table  
- [ ] Map pattern implemented
- [ ] Filter pattern implemented
- [ ] Reduce pattern implemented

## Technical Notes
- Use Supabase JS client library
- Async/await for API calls
- Error handling included

Advanced Features

Automation

GitHub Projects can:

Project Views

Create different views:

Insights

Track metrics like:

Tips for Success

✅ Create Issues Early

✅ Keep Issues Small

✅ Write Good Commit Messages

✅ Update Regularly

✅ Use Labels Consistently

Resources

Sample Workflow

Monday Morning:

  1. Look at “To Do” column
  2. Pick an issue (e.g., Issue #9: Create Navigation)
  3. Drag to “In Progress”
  4. Branch: git checkout -b issue-9-navigation

Monday Afternoon:

  1. Complete the work
  2. Commit: git commit -m "Add navigation bar Fixes #9"
  3. Push to GitHub
  4. Drag issue to “Review”

Monday Evening:

  1. Test the navigation
  2. Confirm it works
  3. Drag to “Done”

GitHub automatically:

Using a Kanban board makes you look more professional and helps you stay organized. It’s an optional tool, but highly recommended! 🚀