Activity 12: Development Workflow Essentials

Objective

Master npm, semantic versioning, and Git workflows by transforming your Spelling Bee project into a professionally managed repository with proper dependency tracking and version control.

Prerequisites

Concept 12 completed | Node.js/npm installed | Terminal access | Text editor | Spelling Bee project folder

---

Exercise	Objective	Steps	Success Criteria
One.1: Initialize Project	Create package.json	One. cd spelling-bee-project 2. npm init -y 3. Edit metadata (name, description, keywords)	package.json exists with project metadata
One.2: Add Scripts	Configure dev workflow	One. Edit "scripts" section 2. Add "start": "python3 -m http.server 8000" 3. Test with npm start	Server runs on localhost:8000
One.3: Install Dependencies	Manage packages	One. npm install axios 2. npm install --save-dev live-server 3. Run npm list --depth=0	node_modules/, package-lock.json created; both packages listed
One.4: Semantic Versioning	Decode version ranges	One. Study package.json dependencies 2. Run npm outdated 3. Identify Current/Wanted/Latest	Understand ^ (minor), ~ (patch), exact (no symbol)
One.5: Update Packages	Maintain dependencies	One. npm outdated 2. npm update 3. Verify with npm list	Packages update to "Wanted" versions without breaking changes

Version Range Reference:

• ^1.4.0 -> Allows 1.4.x, 1.5.x (not 2.0.0) - Minor + Patch updates
• ~1.4.0 -> Allows 1.4.x only - Patch updates only
• 1.4.0 -> Exact version - No auto-updates

---

Exercise	Objective	Steps	Success Criteria
2.1: Initialize Repository	Start version control	One. git init 2. Create .gitignore (add node_modules/, .env, OS files) 3. git status to verify	.git/ folder created; node_modules/ ignored
2.2: First Commit	Capture project snapshot	One. git status 2. git add . 3. git commit -m "Initial commit: Set up Spelling Bee with npm"	Commit created; node_modules/ not tracked
2.3: Track Changes	Practice add-commit workflow	One. Edit script.js (add header comment) 2. git diff to see changes 3. git add + git commit -m "docs: Add file header"	Changes committed; diff shows additions
2.4: View History	Navigate commit timeline	One. git log --oneline 2. Count commits 3. Note commit hashes	See chronological list of all commits

---

Conventional Commits

Format: type: description (max 50 chars)

Type	Use Case	Example
feat:	New feature	feat: Add hint system revealing first letter
fix:	Bug fix	fix: Prevent crash on empty input
docs:	Documentation	docs: Add README with setup steps
chore:	Dependencies/config	chore: Update npm packages to latest
refactor:	Code cleanup	refactor: Simplify scoring algorithm
style:	Formatting only	style: Format JS files with Prettier

Practice Quiz:

1. Refactored scoring algorithm -> refactor: Simplify scoring for performance
2. Fixed crash on empty input -> fix: Prevent crash on empty submission
3. Added countdown timer -> feat: Add countdown timer for challenges
4. Formatted with Prettier -> style: Format JavaScript files

---

Submission

Screenshots Required (4 total):

1. package.json showing scripts, dependencies, devDependencies
2. git log --oneline with 5+ conventional commits
3. npm list --depth=0 showing installed packages
4. .gitignore excluding node_modules/

Reflection (3-5 sentences):

• What was most challenging?
• How will npm/Git help future projects?
• What questions remain?

---

Troubleshooting

Problem	Solution
npm: command not found	Install Node.js from nodejs.org
git: command not found	Install Git from git-scm.com
EACCES npm errors	Never use sudo. Run: mkdir ~/.npm-global && npm config set prefix '~/.npm-global'
"Nothing to commit"	Check git status; if files unstaged, run git add .
Undo last commit (keep changes)	git reset --soft HEAD~1

---

Extension Challenges

1. Pre-commit Hooks: Install Husky to run tests before commits
2. AI Commit Messages: Ask AI to generate conventional messages from change descriptions
3. .npmrc Configuration: Force exact versions with save-exact=true
4. Git Aliases: Shorten commands (st = status, co = checkout)