Weekend Project: Create a Development Workspace

Module 1: Development Environment Foundations

Introduction

Congratulations on completing the first module of our Full Stack Web Development course! Over the past week, you've learned about development environment setup, code editors, browser tools, project organization, Agile principles, and productivity tools. Now it's time to put it all together in a comprehensive weekend project.

In this project, you'll create a fully customized development workspace that incorporates all the elements we've discussed. This workspace will serve as your foundation for all future development work, so it's worth taking the time to set it up thoughtfully.

flowchart TD A[Development Workspace] --> B[Customized Editor] A --> C[Browser Development Setup] A --> D[Project Organization] A --> E[Task Management System] A --> F[Problem-Solving Framework] B --> B1[Extensions] B --> B2[Snippets] B --> B3[Settings] C --> C1[DevTools Configuration] C --> C2[Bookmarks] C --> C3[Extensions] D --> D1[Templates] D --> D2[Scripts] D --> D3[Documentation] E --> E1[Backlog] E --> E2[In Progress] E --> E3[Done] F --> F1[Understand] F --> F2[Plan] F --> F3[Execute] F --> F4[Review] style A fill:#f9f9f9,stroke:#333,stroke-width:2px style F fill:#e8f5e9,stroke:#43a047,stroke-width:2px style F1 fill:#e8f5e9,stroke:#43a047 style F2 fill:#e8f5e9,stroke:#43a047 style F3 fill:#e8f5e9,stroke:#43a047 style F4 fill:#e8f5e9,stroke:#43a047

Polya's Problem-Solving Framework

Before diving into the project, let's introduce a powerful framework that will guide our development process: George Polya's 4-Step Problem Solving Procedure. While originally developed for mathematical problem-solving, it's remarkably applicable to software development challenges.

Polya's framework consists of four fundamental steps:

flowchart LR A[1. Understand the Problem] --> B[2. Devise a Plan] B --> C[3. Carry Out the Plan] C --> D[4. Look Back] D -.-> A style A fill:#e1f5fe,stroke:#0288d1 style B fill:#e8f5e9,stroke:#43a047 style C fill:#fff3e0,stroke:#ff9800 style D fill:#f3e5f5,stroke:#8e24aa

Step 1: Understand the Problem

In this step, you thoroughly analyze what you're trying to achieve:

For a developer, this might involve:

Step 2: Devise a Plan

After understanding the problem, you develop a strategy to solve it:

For a developer, this might involve:

Step 3: Carry Out the Plan

This is where you implement your solution:

For a developer, this might involve:

Step 4: Look Back

After implementing your solution, you reflect on both the result and the process:

For a developer, this might involve:

Throughout our weekend project, we'll apply Polya's framework to guide our approach. This systematic process will not only help us create a better development workspace but also establish a valuable problem-solving mindset for all your future development work.

Project Requirements

Your weekend project is to create a comprehensive development workspace with the following components:

  1. Customized Code Editor Setup: Configure VS Code (or your preferred editor) with useful extensions, settings, and snippets
  2. Browser Development Environment: Set up your browser with developer-focused bookmarks, extensions, and DevTools configurations
  3. Project Organization System: Create templates and scripts for consistent project structures
  4. Task Management System: Implement a workflow for tracking and prioritizing development tasks
  5. Project Documentation: Create standardized templates for project documentation
  6. Problem-Solving Workflow: Integrate Polya's 4-step method into your development process

Each component will be described in detail below, along with specific requirements and suggestions. Remember to apply Polya's framework as you work through each part of the project.

Part 1: Customized Code Editor Setup

Let's apply Polya's framework to set up your code editor:

Understand the Problem

Devise a Plan

Carry Out the Plan

Install and configure the following (or equivalents for your chosen editor):

Essential Extensions

Custom Settings

Configure editor settings in settings.json (for VS Code):

{
  "editor.fontSize": 14,
  "editor.fontFamily": "Your preferred font, 'Fira Code', Consolas, 'Courier New', monospace",
  "editor.wordWrap": "on",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "terminal.integrated.fontSize": 14,
  "workbench.colorTheme": "Your preferred theme",
  "workbench.iconTheme": "material-icon-theme",
  // Add at least 5 additional customizations
}

Custom Snippets

Create at least 5 custom snippets for code patterns you frequently use. For example, in HTML:

{
  "HTML5 Boilerplate": {
    "prefix": "html5",
    "body": [
      "",
      "<html lang=\"en\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <title>${1:Document}</title>",
      "    <link rel=\"stylesheet\" href=\"${2:styles.css}\">",
      "</head>",
      "<body>",
      "    $0",
      "    <script src=\"${3:script.js}\"></script>",
      "</body>",
      "</html>"
    ],
    "description": "HTML5 boilerplate"
  }
}

Keyboard Shortcuts

Customize at least 5 keyboard shortcuts for operations you perform frequently

Look Back

After setting up your editor:

Part 2: Browser Development Environment

Let's apply Polya's framework to set up your browser for development:

Understand the Problem

Devise a Plan

Carry Out the Plan

Browser Extensions

Install and configure the following (or equivalents for your chosen browser):

DevTools Configuration

Configure Chrome DevTools (or equivalent):

Development Bookmarks

Create a bookmark folder structure with at least the following categories:

Add at least 5 bookmarks to each category

Look Back

After setting up your browser:

Part 3: Project Organization System

Let's apply Polya's framework to create a project organization system:

Understand the Problem

Devise a Plan

Carry Out the Plan

Project Templates

Create at least 2 of the following project templates:

Frontend Template (e.g., React, Vue, or vanilla):

frontend-project/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── assets/
├── src/
│   ├── components/
│   ├── pages/
│   ├── services/
│   ├── utils/
│   ├── styles/
│   ├── App.js
│   └── index.js
├── tests/
├── .gitignore
├── package.json
├── README.md
└── [Framework-specific config files]

Backend Template (e.g., Node.js, Express):

backend-project/
├── src/
│   ├── controllers/
│   ├── models/
│   ├── routes/
│   ├── middleware/
│   ├── services/
│   ├── utils/
│   └── app.js
├── config/
├── tests/
├── .env.example
├── .gitignore
├── package.json
└── README.md

Full-Stack Template:

fullstack-project/
├── client/ (Frontend structure from above)
├── server/ (Backend structure from above)
├── .gitignore
├── package.json
├── docker-compose.yml
└── README.md

Configuration Templates

Create templates for at least 5 of the following configuration files:

Automation Scripts

Create at least one script to automate project initialization. For example, a bash script that:

#!/bin/bash
# project_init.sh
# Usage: ./project_init.sh project_name [frontend|backend|fullstack]

PROJECT_NAME=$1
TYPE=${2:-fullstack}
TEMPLATES_DIR="~/dev/templates"

if [ -z "$PROJECT_NAME" ]; then
  echo "Error: Please provide a project name"
  echo "Usage: ./project_init.sh project_name [frontend|backend|fullstack]"
  exit 1
fi

mkdir -p $PROJECT_NAME
cd $PROJECT_NAME

case $TYPE in
  frontend)
    echo "Creating frontend project structure..."
    cp -r $TEMPLATES_DIR/frontend/* .
    ;;
  backend)
    echo "Creating backend project structure..."
    cp -r $TEMPLATES_DIR/backend/* .
    ;;
  fullstack)
    echo "Creating full-stack project structure..."
    cp -r $TEMPLATES_DIR/fullstack/* .
    ;;
  *)
    echo "Error: Invalid project type"
    echo "Valid types: frontend, backend, fullstack"
    exit 1
    ;;
esac

# Replace template placeholders with project name
find . -type f -name "*.json" -o -name "*.md" -o -name "*.html" | xargs sed -i "s/PROJECT_NAME/$PROJECT_NAME/g"

# Initialize git repository
git init
git add .
git commit -m "Initial commit"

# Install dependencies if package.json exists
if [ -f "package.json" ]; then
  npm install
fi

echo "$TYPE project '$PROJECT_NAME' created successfully!"

Look Back

After creating your project organization system:

Part 4: Task Management System

Let's apply Polya's framework to set up your task management system:

Understand the Problem

Devise a Plan

Carry Out the Plan

Set up a task management system using one of the tools we discussed (Trello, GitHub Projects, Notion, Todoist, etc.):

Kanban Board Structure

If using a Kanban-style tool (like Trello or GitHub Projects), set up the following columns:

Task Categories

Create a labeling or tagging system with at least the following categories:

Task Template

Create a template for task descriptions that includes:

Problem-Solving Integration

Explicitly incorporate Polya's 4-step procedure into your task workflow:

flowchart LR A[Task Creation] --> B[Understand Phase] B --> C[Plan Phase] C --> D[Execute Phase] D --> E[Review Phase] E --> F[Task Completion] style B fill:#e1f5fe,stroke:#0288d1 style C fill:#e8f5e9,stroke:#43a047 style D fill:#fff3e0,stroke:#ff9800 style E fill:#f3e5f5,stroke:#8e24aa

Look Back

After setting up your task management system:

Part 5: Project Documentation

Let's apply Polya's framework to create documentation templates:

Understand the Problem

Devise a Plan

Carry Out the Plan

Create templates for at least 4 of the following documentation types:

README Template

# Project Name

Brief description of the project.

## Features

- Feature 1
- Feature 2
- Feature 3

## Installation

```bash
# Clone the repository
git clone https://github.com/username/project.git

# Navigate to the project directory
cd project

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env
# Edit .env with your configuration
```

## Usage

```bash
# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm test
```

## API Documentation

[Link to API documentation if applicable]

## Technologies

- List of key technologies and frameworks used

## Project Structure

Brief explanation of the project organization.

## Contributing

Guidelines for contributing to the project.

## License

[License information]

## Contact

[Contact information]

API Documentation Template

# API Documentation

Base URL: `https://api.example.com`

## Authentication

[Authentication details]

## Endpoints

### Resource Name

#### Get all resources

`GET /resources`

**Query Parameters**

| Parameter | Type | Description |
|-----------|------|-------------|
| param1    | string | Description |
| param2    | number | Description |

**Response**

```json
{
  "data": [
    {
      "id": 1,
      "name": "Example",
      "property": "value"
    }
  ],
  "meta": {
    "total": 1
  }
}
```

#### Get a specific resource

`GET /resources/:id`

[And so on for other endpoints...]

Code Documentation Guidelines

Create a template for code-level documentation, including:

Architecture Documentation Template

Create a template for documenting system architecture, including:

Commit Message Format

Establish a standard format for git commit messages, such as:

type(scope): subject

body

footer

With guidelines for each component

Look Back

After creating your documentation templates:

Part 6: Integrating Polya's Problem-Solving Framework

Finally, let's explicitly integrate Polya's 4-step problem-solving procedure into your development workflow:

Problem-Solving Templates

Create a template document or note for approaching development problems:

# Problem-Solving Worksheet

## 1. Understand the Problem

### Problem Statement
[Clear description of the problem]

### Requirements
- [Requirement 1]
- [Requirement 2]

### Constraints
- [Constraint 1]
- [Constraint 2]

### Examples/Test Cases
- [Example 1]
- [Example 2]

### Questions to Ask
- [Question 1]
- [Question 2]

## 2. Devise a Plan

### Approach
[Describe your planned approach]

### Alternatives Considered
- [Alternative 1]
- [Alternative 2]

### Steps
1. [Step 1]
2. [Step 2]
3. [Step 3]

### Resources Needed
- [Resource 1]
- [Resource 2]

## 3. Carry Out the Plan

### Implementation Notes
[Notes on the implementation]

### Challenges Encountered
- [Challenge 1]
- [Challenge 2]

### Adjustments Made
- [Adjustment 1]
- [Adjustment 2]

## 4. Look Back

### Solution Summary
[Brief description of the solution]

### Verification
- [Verification method 1]
- [Verification method 2]

### Lessons Learned
- [Lesson 1]
- [Lesson 2]

### Improvements for Next Time
- [Improvement 1]
- [Improvement 2]

Integrate with Your Task Management System

Modify your task workflow to explicitly include Polya's steps:

Problem-Solving Journal

Create a template for a development journal that helps you track how you solve problems:

Review Questions

Create a set of review questions for each step of Polya's method, tailored to software development:

Understand Phase Questions

Plan Phase Questions

Execute Phase Questions

Look Back Phase Questions

Project Submission

To complete this weekend project, you'll need to:

  1. Implement all six parts as described above
  2. Create a GitHub repository containing all your templates, configurations, and scripts
  3. Write a README that explains your workspace setup and how you've integrated Polya's problem-solving framework
  4. Include screenshots of your editor and browser setup
  5. Prepare a brief (3-5 minute) demonstration of your workspace

Submission is due by the start of next week's first session. Be prepared to share your approach and what you learned in the process.

Evaluation Criteria

Your project will be evaluated based on:

  1. Completeness: Implementation of all required components
  2. Customization: Adaptation to your specific development needs and preferences
  3. Integration: How well the different parts work together as a cohesive system
  4. Problem-Solving: Effective incorporation of Polya's 4-step framework
  5. Usability: Practicality and ease of use in actual development work
  6. Documentation: Clear explanation of your setup and choices

Tips for Success

Additional Resources

Editor Configuration

Problem-Solving Resources

Project Management and Documentation