Skip to content

Latest commit

Β 

History

History
389 lines (268 loc) Β· 6.69 KB

File metadata and controls

389 lines (268 loc) Β· 6.69 KB

Week 1: Professional Development & AI-Assisted Coding


Welcome to CTP Web Development!

Your Journey Starts Today

  • πŸš€ From student to professional developer
  • πŸ’Ό Industry-ready skills in 10 weeks
  • 🀝 Team collaboration on real projects
  • 🎯 Individual portfolio development

Today's Agenda

Professional Developer Transformation

  1. Agile Development - How teams really work
  2. Documentation Excellence - READMEs & ADRs
  3. AI-Assisted Coding - GitHub Copilot best practices
  4. Cloud Development - CodeSpaces environment
  5. Team Pitches - Start Working On Pitches for Next Week

Think-Write-Pair-Share

Reflection Questions (2 min)

  • What makes code "professional" vs "functional"?
  • How could AI tools help or hinder your learning?
  • What project would you build with a skilled team?

Share your thoughts!


Agile Development Fundamentals


How Professional Teams Work

The Agile Methodology

  • Sprint Planning - Define 2-week deliverables
  • Daily Standups - 15-minute progress sync
  • Retrospectives - Continuous improvement
  • User Stories - Customer-focused features

Sprint Planning

Breaking Down Work

Epic: Expense Tracking Application
β”œβ”€β”€ Sprint 1: Basic UI Components
β”œβ”€β”€ Sprint 2: State Management
β”œβ”€β”€ Sprint 3: Backend Integration
└── Sprint 4: Deployment & Polish

Estimation & Commitment

  • Story points, not hours
  • T-Shirt Sizing issues
  • Team capacity planning
  • Definition of done

Daily Standups

The Three Questions

  1. βœ… What did I complete yesterday?
  2. 🚧 What am I working on today?
  3. 🚫 What blockers do I have?

Why It Matters

  • Accountability
  • Early problem detection
  • Team synchronization

User Stories

Customer-Focused Development

Format:

As a [type of user]
I want [feature/functionality]
So that [benefit/value]

Example:

As a college student
I want to categorize my expenses
So that I can see where I'm overspending

Professional Documentation


Documentation = Team Success

The Hidden Multiplier

  • πŸ“‰ Poor docs = Slower Onboarding
  • πŸ“ˆ Good docs = New developers are productive more quickly
  • πŸ”„ Self-documenting code is not enough
  • πŸ’‘ "Good documentation is the difference between legacy code and maintainable systems"

README Excellence

Essential Sections

# Project Name

## 🎯 Overview
What problem does this solve?

## πŸš€ Quick Start
How to run in < 5 minutes

## πŸ“š Documentation
Architecture, API, decisions

## 🀝 Contributing
How to help

Architecture Decision Records (ADRs)

Document the "Why"

# ADR-001: Use TypeScript

## Context
We need type safety for financial data...

## Decision
Use TypeScript with strict mode

## Consequences
βœ… Catch errors at compile time
❌ Initial learning curve

## Related Decisions
- [Title of ADR](ADR-002)

CodeSpaces & Cloud Development


Welcome to the Cloud IDE

No More "Works on My Machine"

  • ☁️ Consistent development environment
  • πŸš€ Zero setup time
  • πŸ‘₯ Same tools for entire team
  • πŸ”§ Pre-configured with everything you need

Live Demo Time!


CodeSpaces Benefits

  • Instant Onboarding

    • New team member coding in 5 minutes
    • Not 5 days of setup
  • Consistency

    • Same Node version
    • Same extensions
    • Same configuration
    • Work from any device

GitHub Copilot


AI as Your Pair Programmer

The Right Mental Model

"Copilot is your pair programmer, not your replacement"


What It's Great For:

  • βœ… Boilerplate code
  • βœ… Test generation
  • βœ… Learning new APIs
  • βœ… Syntax reminders

What It's NOT For:

  • ❌ Critical business logic
  • ❌ Security-sensitive code
  • ❌ Avoiding learning

Copilot Best Practices

Write Intent First

// Good: Clear intent, then let Copilot help
// TODO: Create a function that validates email format
// Requirements: Check for @ symbol, domain, and valid characters

// Copilot assists with implementation details
function validateEmail(email) {
  // AI helps here...
}

Always Verify

  • Understand every line
  • Check edge cases
  • Validate against requirements

Live Copilot Demo

Good Usage Example

// TODO: Create Express server with middleware
// Requirements:
// - JSON parsing
// - CORS enabled
// - Port from environment variable

// Watch Copilot suggest...

Poor Usage Example

// Create user authentication system

// DON'T blindly accept complex security code!

Individual Project


Expense Tracker Application

Your Portfolio Piece

10-Week Journey:

  • Week 1-3: React UI
  • Week 4-6: Full features
  • Week 7-9: Backend & API
  • Week 10: Deploy to AWS

Expense Tracker Application

Requirements:

  • Professional documentation
  • Git history showing progress
  • Test coverage
  • Production deployment

Project Setup Checklist

Start Professional from Day 1

  • GitHub repository created
  • README with clear vision
  • First ADR documented
  • Project board setup
  • Initial commit pushed

Your Roadmap

## Week 1-3: Foundation
- [ ] Initial Documentation
- [ ] React components
- [ ] TypeScript setup
- [ ] Basic styling

Team Formation


Project Pitch Lightning Round

1 Minute to Change the World

Your README Pitch:

# StudyBuddy

## 🎯 Problem
Students struggle to find study partners

## πŸ’‘ Solution  
Match by course, availability, and style

## ✨ Key Features
- Smart matching algorithm
- Calendar integration
- Progress tracking

Week 1 Recap


You've Accomplished So Much!

Technical Skills βœ…

  • CodeSpaces environment ready
  • GitHub Copilot configured responsibly
  • First React components built
  • Professional documentation created

Professional Skills βœ…

  • Agile methodology understanding
  • Team formation and charter
  • Project planning started
  • Git workflow established

Homework & Next Week

Before Week 2:

  1. Complete expense tracker setup

    • Finish basic components
    • Push to GitHub
  2. Pitch Ideas if you have one

    • Fill in the README template (briefly)
    • You'll have 1 Minute to share your screen and pitch

Week 2 Preview: React Fundamentals Deep Dive!

  • What is React, and the problem it solves
  • Declarative vs. Imperative Architecture
  • Component patterns
  • React hooks documentation

Exit Ticket

Please share in the post-meeting Slack Thread!

  1. 🎯 One thing you learned about professional development
  2. πŸ€– How you plan to use GitHub Copilot responsibly
  3. ❓ One question for next week

Thank you! See you next week! πŸš€