Skip to content

Latest commit

 

History

History
332 lines (242 loc) · 7.29 KB

HOWTO.md

File metadata and controls

332 lines (242 loc) · 7.29 KB

How to Use This Repository

This guide explains how to work with the coursera-gen-ai repository using VSCode Profiles and Workspace configuration.

Prerequisites

  • VSCode installed
  • code command available in terminal (see setup below)
  • Node.js v16+ (for JavaScript projects)
  • Python v3.8+ (for Python projects)
  • Java v11+ (for Java projects)

Enable code Command (Mac)

If code command is not available:

  1. Open VSCode
  2. Press Cmd+Shift+P (Command Palette)
  3. Type: Shell Command: Install 'code' command in PATH
  4. Press Enter
  5. Restart your terminal

Repository Structure

coursera-gen-ai/
├── .coursera-gen-ai.code-workspace   # Workspace configuration
├── .gitignore                        # Root-level git ignore rules
├── .editorconfig                     # Shared editor settings
├── README.md                         # Repository overview
├── HOWTO.md                          # This file
├── .env.example                      # Environment variables template
│
├── gemini-chatbot-node/              # Node.js + Express project
│   ├── .env.example
│   ├── .vscode/settings.json
│   ├── package.json
│   └── ...
│
└── chatgpt-chatbot/                  # Node.js + Express project
    ├── .env.example
    ├── .vscode/settings.json
    ├── package.json
    └── ...

VSCode Profiles

This repository uses three VSCode Profiles for stack-specific development:

  • JavaScript Profile: Extensions for Node.js/Express projects (ESLint, Prettier, Thunder Client)
  • Python Profile: Extensions for Python projects (Pylance, Black, Pylint)
  • Java Profile: Extensions for Spring Boot projects (Language Support, Debugger, Maven)

Available Profiles

Manage → Profiles

You should see:

  • Default (VSCode default)
  • JavaScript
  • Python
  • Java

How to Use This Workspace File

Option 1: Open Entire Workspace (Recommended for Portfolio)

Open all projects in a single VSCode window:

cd ~/dev/workspace/coursera/coursera-gen-ai
code .coursera-gen-ai.code-workspace

What you'll see:

  • Explorer sidebar with both project folders
  • Easy navigation between projects
  • Workspace-level settings applied

When to use: Portfolio review, viewing all projects at once

Pros:

  • See all projects simultaneously
  • Easy file navigation
  • Workspace-level configurations apply

Cons:

  • Multiple folders in sidebar
  • Extensions from all profiles load (slight overhead)

Option 2: Open Individual Projects with Profile

Open a single project with a specific profile (cleaner, focused):

# Open gemini-chatbot-node with JavaScript profile
cd ~/dev/workspace/coursera/coursera-gen-ai
code gemini-chatbot-node --profile JavaScript

# Open chatgpt-chatbot with JavaScript profile
code chatgpt-chatbot --profile JavaScript

When to use: Active development on one project

Pros:

  • Minimal sidebar clutter
  • Only relevant extensions load
  • Faster, cleaner workspace

Cons:

  • Need to open projects individually
  • Workspace file not used

Option 3: Manual Profile Switching

If you have the workspace open and want to switch profiles:

  1. Go to Manage → Profiles → Select Profile
  2. Choose the desired profile
  3. Reload VSCode (or restart)

Environment Variables Setup

Each project requires a .env file with API keys and configuration. These are git-ignored for security.

Setup for Each Project

# Navigate to project
cd gemini-chatbot-node

# Copy template
cp .env.example .env

# Edit .env with your credentials
# For gemini-chatbot-node:
#   GEMINI_API_KEY=your_key_here
#   PORT=3000
#   NODE_ENV=development

# For chatgpt-chatbot:
#   OPENAI_API_KEY=your_key_here
#   PORT=3000
#   NODE_ENV=development

Important: Never commit .env files. They are automatically ignored by .gitignore.

Running Projects

JavaScript Projects (Node.js + Express)

cd gemini-chatbot

# Install dependencies
npm install

# Start development server
npm start

The server runs on http://localhost:3000 (or your configured PORT).

Adding New Projects

When you add a new project (Python, Java, etc.):

  1. Create project folder in repository root:

    mkdir python-project
cd python-project
# ... create project files

  2. Create .env.example with required variables

  3. Create .vscode/settings.json with project-specific settings

  4. Update .coursera-gen-ai.code-workspace:

    "folders": [
  {
    "path": "gemini-chatbot",
    "name": "Gemini Chatbot (Node.js)"
  },
  {
    "path": "chatgpt-chatbot",
    "name": "ChatGPT Chatbot (Node.js)"
  },
  {
    "path": "python-project",
    "name": "Python Project"
  },
  {
    "path": "java-spring-project",
    "name": "Java Spring Boot"
  }
]

  5. Create corresponding VSCode Profile if using a new stack:

    • Go to Manage → Profiles → Create Profile
    • Install stack-specific extensions
    • Name it (e.g., Python, Java)

Workflow Examples

Scenario 1: Working on Gemini Chatbot

# Option A: Using workspace (see all projects)
code .coursera-gen-ai.code-workspace
# Switch to JavaScript profile (Manage → Profiles → JavaScript)

# Option B: Direct project open (focused)
code gemini-chatbot --profile JavaScript

Scenario 2: Adding a Python Project Later

# Create project structure
mkdir python-project
cd python-project
# ... create Python files

# Copy environment template
cp ../.env.example .env.example
# Edit .env.example with Python-specific vars

# Create VSCode settings
mkdir -p .vscode
cat > .vscode/settings.json << 'EOF'
{
  "[python]": {
    "editor.defaultFormatter": "ms-python.python",
    "editor.formatOnSave": true
  },
  "files.exclude": {
    "__pycache__": true,
    ".env": true
  }
}
EOF

# Update workspace file (add to "folders" array)
# Create/switch to Python profile in VSCode
# Open with: code python-project --profile Python

Scenario 3: Switching Between Profiles

# Currently working in JavaScript profile
# Switch to Python:

# 1. Via VSCode UI:
#    Manage → Profiles → Python

# 2. Or restart with new profile:
#    code another-project --profile Python

Troubleshooting

code command not found

See "Enable code Command" section above.

Extensions not loading in profile

  • Ensure you're in the correct profile: Manage → Profiles → [Your Profile]
  • Verify extensions are installed in that profile (they're profile-specific)
  • Reload VSCode: Cmd+Shift+P → "Reload Window"

.env file appearing in VSCode sidebar

This means .env is not in .gitignore. Check:

cat .gitignore | grep ".env"

Should show .env as ignored. Restart VSCode if recently added.

Port already in use

If PORT 3000 is busy:

# Edit .env
PORT=3001

# Or kill process using port
lsof -i :3000
kill -9 <PID>

Additional Resources

Last Updated: January 23, 2026