Mastering GitHub Projects with a Toy Project

Moodle

Objective:

To provide student teams with practical experience in setting up and managing GitHub Projects by working through a small, manageable software project. By the end of this activity, students will demonstrate their ability to use GitHub Projects for task management, collaboration, and project tracking.

Prerequisites:

  • Basic GitHub Knowledge: Students should be familiar with creating repositories, committing code, and basic GitHub operations.
  • GitHub Accounts: Each student must have an active GitHub account.
  • Access to Communication Tools: Such as Slack or Discord for team coordination (optional but recommended).

Activity Steps

1. Group Formation and Repository Setup (10 minutes)

a. Teams:

  • This activity will be done together by each new course project team.

b. Create a Repository:

  1. Team Leader (or designated member) creates a new private repository on GitHub for the toy project.
    • Repository Name: toy-project
    • Description: “Toy Project for GitHub Projects Activity”
    • Initialize Repository:
      • Check “Add a README file”.
      • (Optional) Add a .gitignore file appropriate for the chosen technology stack.
  2. Add Professor Skon as a Collaborator:
    • Navigate to the repository’s Settings > Manage access.
    • Click “Invite a collaborator”.
    • Enter Professor Skon’s GitHub username: jimskon.
    • Send the invitation. (Ensure Professor Skon accepts the invitation before proceeding.)

c. Clone the Repository:

  • Each team member clones the repository to their local machine:
    git clone https://github.com/your-organization/toy-project.git

2. Defining the Toy Project (10 minutes)

a. Project Selection:

  • Toy Project Idea: Develop a Simple To-Do List Web Application with the following basic features:
    • Add Task: Users can add new tasks.
    • View Tasks: Display a list of all tasks.
    • Mark as Completed: Users can mark tasks as completed.
    • Delete Task: Users can remove tasks from the list.

b. Document the Project:

  • Update the README.md with the project description and objectives.
# Toy Project: Simple To-Do List Web Application

## Description A simple web application that allows users to manage their to-do tasks. Features include adding, viewing, completing, and deleting tasks.

## Objectives

- Practice using GitHub Projects for task management.
- Collaborate effectively within the team. -
- Deliver a functional and maintainable web application.
Code language: PHP (php)

3. Setting Up GitHub Projects (20 minutes)

a. Create a GitHub Project Board:

  1. Navigate to the “Projects” tab in the repository.
  2. Click “New Project”.
  3. Project Name: Development Board
  4. Template: Select “Kanban” for simplicity.
  5. Visibility: Ensure it’s Private.
  6. Click “Create Project”.

b. Customize Columns:

  • Default Columns: Backlog, Ready, In Progress, In Review, Done
  • (Optional) Add additional columns if needed, such as Documentation.

c. Populate the Project Board with Issues:

  1. Navigate to the “Issues” tab.
  2. Click “New issue” for each of the following tasks:
    • Add Task Feature: “Implement Add Task functionality”
    • View Tasks Feature: “Implement View Tasks functionality”
    • Mark as Completed Feature: “Implement Mark as Completed functionality”
    • Delete Task Feature: “Implement Delete Task functionality”
    • UI Design: “Design user interface for the to-do app”
    • Setup Backend: “Set up backend server and database”
    • Testing: “Write unit tests for features”
    • Documentation: “Document project setup and usage”
  3. Assign Labels:
    • Use labels such as feature, frontend, backend, design, testing, documentation for categorization.
  4. Assign Issues to Team Members:
    • Assign each issue to a relevant team member based on their role or interest.

d. Add Issues to Project Board:

  • For each issue created, link it to the Development Board:
    1. Open the issue.
    2. Click on “Projects” in the right sidebar.
    3. Select the “Development Board” and add it to the “To Do” column.

4. Assigning Roles and Responsibilities (10 minutes)

a. Define Team Roles:

  • Project Manager (PM): Oversees the project timeline and task assignments.
  • Frontend Developer(s): Focus on the user interface and client-side functionality.
  • Backend Developer(s): Handle server-side logic and database management.
  • Tester (QA): Responsible for writing and executing test cases.
  • Designer (Optional): Focus on UI/UX design elements.

b. Assign Issues Accordingly:

  • Based on the roles, assign each issue to the appropriate team member.

5. Workflow Simulation (30 minutes)

a. Move Tasks Through Columns:

  1. To Do: All newly created issues reside here initially.
  2. In Progress: Team members move issues to this column when they start working on them.
  3. Done: After completing a task, move the issue to Done.
  4. (Optional) Review: Move to this column if code review or testing is required.

b. Example Activity Flow:

  1. Frontend Developer:
    • Moves “Design user interface for the to-do app” to In Progress.
    • Once completed, moves it to Done.
  2. Backend Developer:
    • Moves “Set up backend server and database” to In Progress.
    • Completes the task and moves it to Done.
  3. Project Manager:
    • Monitors progress, ensures tasks are on track, and facilitates communication.

c. Creating Pull Requests:

  1. Implement a Feature:
    • For example, “Implement Add Task functionality”
  2. Create a Branch:bash
    git checkout -b feature/add-task
  3. Develop the Feature:
    • Code the feature locally.
  4. Commit and Push Changes:
    git add . git commit -m "Implement Add Task functionality" git push origin feature/add-task
  5. Open a Pull Request:
    • Navigate to the repository on GitHub.
    • Click “Compare & pull request” for the feature/add-task branch.
    • Assign the PR to a team member for review.
  6. Code Review:
    • The assigned reviewer reviews the code, provides feedback, and approves the PR.
  7. Merge the Pull Request:
    • Once approved, merge the PR into the main branch.
  8. Update Project Board:
    • Move the corresponding issue to Done.

d. Documenting Progress:

  • Use comments within issues and pull requests to communicate progress and feedback.

6. Deliverables

At the end of the activity, each team should submit the following on Moodle to demonstrate their mastery of GitHub Projects:

  1. Screenshots of GitHub Project Board:
    • To Do Column: Display remaining tasks.
    • In Progress Column: Show tasks currently being worked on.
    • Done Column: Show completed tasks.
    • (Optional) Review Column: If used, display tasks awaiting review.
  2. List of Issues Created:
    • Include titles, descriptions, labels, and assignees.
    • Example:
      • Issue #1: Implement Add Task functionality
        • Label: feature, frontend
        • Assignee: [Student Name]
  3. Pull Request Documentation:
    • Link to at least one pull request demonstrating the code review and merge process.
    • Include comments from code reviews.
  4. Project Charter (Optional):
    • A brief document outlining project objectives, team roles, and workflow.
  5. README.md Update:
    • Ensure the repository’s README reflects the progress made during the activity.
  6. Repository Access:
    • Confirm that Professor Skon (https://github.com/jimskon) has access to the repository and project board.

Submission Instructions:

  • Provide the repository link.
  • Attach the screenshots and documentation as separate files or include them in the repository.

Assessment Criteria

  • Project Board Setup: Correct creation and customization of the GitHub Project board.
  • Issue Management: Effective creation, labeling, assigning, and movement of issues through the workflow.
  • Collaboration: Demonstrated use of pull requests and code reviews.
  • Documentation: Clear and comprehensive documentation of tasks and progress.
  • Completion of Deliverables: All required screenshots and documentation submitted accurately.

Example Walkthrough

Step-by-Step Example for a Team Member

  1. Creating an Issue:
    • Navigate to the “Issues” tab.
    • Click “New issue”.
    • Title: Implement Add Task functionality
    • Description: Develop the frontend form to add new tasks and connect it to the backend API.
    • Labels: feature, frontend
    • Assignee: [Your Name]
    • Click “Submit new issue”.
    • Link the issue to the “Development Board” in the “To Do” column.
  2. Starting the Task:
    • Once ready to work on the issue, drag it from “To Do” to “In Progress”.
    • Create a new branch:
      git checkout -b feature/add-task
    • Develop the feature, commit changes, and push to GitHub:
      git add . git commit -m "Add Task functionality with frontend form and backend API integration" git push origin feature/add-task
    • Open a Pull Request on GitHub:
      • Compare feature/add-task with main.
      • Assign a team member for review.
      • Add a description linking it to the issue (e.g., “Closes #1”).
  3. Code Review and Merge:
    • The assigned reviewer reviews the code, provides feedback if necessary.
    • Upon approval, merge the pull request.
    • Move the issue to “Done” on the Project Board.
  4. Updating Documentation:
    • Update README.md to reflect the new feature.
    • Document any important decisions or changes made during development.

Additional Tips for Students

  • Regular Updates: Keep the project board updated to reflect the current status of tasks.
  • Effective Communication: Use team communication tools to discuss progress and resolve issues promptly.
  • Time Management: Allocate specific times each week to work on tasks to ensure steady progress.
  • Seek Feedback: Regularly consult with Professor Skon and organization collaborators to ensure alignment with project goals.
  • Stay Organized: Maintain a clean and well-documented codebase to facilitate maintainability.

Conclusion

This GitHub Projects Classroom Activity is designed to equip student teams with the practical skills needed to effectively manage software development projects using GitHub Projects. By simulating a real-world project scenario, students will gain confidence in organizing tasks, collaborating efficiently, and tracking progress, all of which are crucial for the successful delivery of their semester-long projects.

Happy Coding and Project Management!

If you have any questions or need further assistance, feel free to reach out to Professor Skon at GitHub Profile or via email.

Scroll to Top