Skip to content

Latest commit

 

History

History
378 lines (279 loc) · 17.8 KB

html-css-hackthon-implementation-guide.md

File metadata and controls

378 lines (279 loc) · 17.8 KB
Raw

AI Augmented Static Front End Hackathon Project Implementation Guide

Table of Contents

  1. Introduction
  2. Team Collaboration and Roles
  3. Phased Approach to the Project
  4. Fair and Equal Contribution Guide
  5. Continuous Documentation
  6. Sample Retrospective Report
  7. Plagiarism Guidelines for Learners

Introduction

Welcome to the AI-Augmented Pair Programming Hackathon Project Implementation Guide. This guide will help your team navigate through the stages of your hackathon project, from planning and pre-implementation to final presentation and judging. You will be using AI tools like GitHub Copilot and DALL-E to enhance your development process. The guide aligns with the hackathon judging guide to ensure that you meet all the necessary criteria for a successful project.

Team Collaboration and Roles

Team Members

Form a team of 3 members. Each team member should have a primary role to ensure efficient collaboration and task management, with the possibility of secondary roles for flexibility.

Roles

  1. Project Manager: Oversees the project, ensures milestones are met, and coordinates between team members.
    • Secondary Role: Assist in development tasks as needed.
  2. Lead Developer: Focuses on coding and implementing the core functionalities of the project.
    • Secondary Role: Support UX design and documentation.
  3. Designer: Creates wireframes, UX designs, and ensures the visual aspects of the project are polished.
    • Secondary Role: Assist with coding and implementation.

Collaboration Tools

  • Communication: Use platforms like Slack, Microsoft Teams, or Zoom for real-time communication.
  • Version Control: Use GitHub for code collaboration and version control.
  • Project Management: Use GitHub Projects to manage tasks and track progress.

Regular Check-ins and Meetings

  • Schedule regular check-ins.
  • Hold mid-day and end-of-day meetings during the hackathon.

Pair Programming and Collaborative Coding

  • Use online collaboration tools like VSCode Live Share, GitHub Codespaces, or Google Meet for screen sharing.

Version Control and Code Reviews

  • Use GitHub for version control with regular commits and detailed commit messages.
  • Conduct code reviews for each pull request.

Contribution Logs and Reports

  • Each team member maintains a contribution log detailing their work.
  • Submit individual reports along with the final project submission.

Phased Role Rotation

Instead of rotating roles continuously, rotate roles based on specific tasks or phases of the project. This approach ensures continuity within each phase and reduces disruptions.

Phased Approach to the Project

To ensure a smooth workflow and avoid last-minute panic, follow this phased approach. Your team will work full-time over a period of 21 hours, with dedicated time for project creation, presentation, and judging.

Phase 1: Initial Planning (Hours 0-2)

Tasks:

  • Define user stories, acceptance criteria, and project plan.
  • Assign roles and responsibilities within the team.
  • Set up communication channels and project management tools.

Outputs:

  • Documented user stories and project plan.
  • Defined roles and responsibilities.
  • Established communication and project management tools.

Milestones:

  • User stories defined with priorities.
  • Project plan created and documented.

Documentation Task:

  • Record user stories, acceptance criteria, and initial project plan.

Role Assignment:

  • All team members collaborate on planning. Rotate the role of Project Manager after this phase if needed.

Phase 2: Design and Documentation (Hours 2-4)

Tasks:

  • Create wireframes and UX design documentation.
  • Consider accessibility and user interaction in the design.
  • Set up GitHub repository and initial commits.

Outputs:

  • Detailed wireframes, notes on layout, navigation, and accessibility.
  • Initial setup of GitHub repository with initial commits.

Milestones:

  • Wireframes for each page created.
  • UX design documentation completed.

Documentation Task:

  • Update documentation with wireframes and UX design details.

Role Assignment:

  • Designer: Leads the wireframe and UX design creation.
  • Lead Developer: Assists with technical feasibility and initial GitHub setup.
  • Project Manager: Ensures the design aligns with the project plan and documents the process.

Phase 3: Initial Implementation (Hours 4-8)

Tasks:

  • Start coding the basic structure of the application using HTML and CSS.
  • Implement initial features based on user stories.

Outputs:

  • Initial HTML structure and CSS styles.
  • Basic functional elements of the web application.

Milestones:

  • Basic HTML structure created.
  • Initial CSS styles applied.

Documentation Task:

  • Document the initial code structure and styling decisions.

Role Assignment:

  • Lead Developer: Focuses on coding the basic structure.
  • Designer: Assists with styling and ensures visual consistency.
  • Project Manager: Tracks progress and updates the project plan.

Phase 4: AI Integration and Enhancement (Hours 8-12)

Tasks:

  • Integrate AI-generated code and enhance design using GitHub Copilot and DALL-E.
  • Review and optimize AI-generated content.

Outputs:

  • Enhanced HTML/CSS code with AI-generated improvements.
  • Documented integration and customization of AI-generated code.

Milestones:

  • AI-generated code integrated and optimized.
  • Design enhancements completed.

Documentation Task:

  • Record the integration of AI-generated code and enhancements made.

Role Assignment:

  • Lead Developer: Integrates AI-generated code and reviews for quality.
  • Designer: Enhances visual elements using AI-generated images.
  • Project Manager: Documents the integration process and ensures alignment with user stories.

Phase 5: Functional Implementation and Testing (Hours 12-18)

Tasks:

  • Complete all functional elements and test the application.
  • Ensure all user stories' acceptance criteria are met.

Outputs:

  • Fully functional web application.
  • Documented testing outcomes and bug fixes.

Milestones:

  • All features implemented and tested.
  • Functional application verified.

Documentation Task:

  • Update documentation with functional implementation details and testing outcomes.

Role Assignment:

  • Lead Developer: Finalizes coding and conducts initial testing.
  • Designer: Assists with UI/UX testing and bug fixing.
  • Project Manager: Coordinates testing efforts and documents outcomes.

Phase 6: Final Review, Presentation, and Judging (Hours 18-21)

Tasks:

  • Finalize documentation and write retrospective report.
  • Prepare and practice project presentation.
  • Present the project to judges and attend the judging session.

Outputs:

  • Complete documentation and retrospective report.
  • Prepared presentation materials.
  • Presented project and received feedback from judges.

Milestones:

  • Documentation and retrospective report completed.
  • Project presented to judges.

Documentation Task:

  • Complete the final project documentation and write the retrospective report.

Role Assignment:

  • Project Manager: Leads the preparation of presentation materials.
  • Lead Developer: Supports presentation with technical explanations.
  • Designer: Ensures presentation visuals are polished and professional.

Fair and Equal Contribution Guide

Honour Code

As members of a team, each individual is expected to contribute fairly and equitably to the project. By participating in this hackathon, all team members agree to the following Honour Code:

  1. Active Participation: Each member will actively participate in all phases of the project.
  2. Equal Effort: Efforts and responsibilities will be distributed equally among team members.
  3. Collaboration: Members will collaborate openly, share knowledge, and support each other.
  4. Integrity: All contributions will be original and properly attributed.
  5. Accountability: Members will hold themselves and each other accountable for their work and conduct.

Evidence of Contribution

To ensure transparency and accountability, each team member should document their contributions throughout the project. The following methods will help in evidencing individual contributions:

  1. Version Control Commits:

    • Make regular commits to the GitHub repository.
    • Include detailed commit messages that describe the changes made.
    • Ensure that commits are made under individual GitHub accounts.

  2. Contribution Logs:

    • Maintain a personal log detailing daily contributions and tasks completed.
    • Logs should include date, time spent, and a brief description of the work done.

  3. Task Management:

    • Use GitHub Projects to assign tasks.
    • Ensure tasks are marked complete with comments on contributions.

  4. Code Reviews:

    • Participate in code reviews and provide constructive feedback.
    • Document reviews and responses in pull requests.

  5. Meeting Minutes:

    • Document decisions and action items from daily check-ins and other meetings.
    • Rotate the responsibility of taking minutes among team members.

  6. Individual Reports:

    • Each member should submit a brief report summarizing their contributions, challenges faced, and learnings at the end of the project.

Continuous Documentation

Ensure that you continuously document your progress throughout the project phases. This documentation should include the following sections:

  • Project Overview
  • Project Scope and Objectives
  • User Stories
  • Wireframes
  • UX Design
  • Version Control Practices
  • AI Tool Usage
  • Code Quality and Standards
  • Functional Implementation
  • Final Project Submission
  • Retrospective

Sample Retrospective Report

Retrospective Report

Reflection on Development Process

Successes:

  • Effective Use of AI Tools:
    • GitHub Copilot significantly sped up the initial coding process by providing useful HTML and CSS snippets.
    • DALL-E generated high-quality images that enhanced the visual appeal of the website.
  • Accessibility:
    • Implemented ARIA labels and keyboard navigation, making the website accessible to a wider audience.
  • Responsive Design:
    • The website layout adapted well to different screen sizes, ensuring a good user experience on both desktop and mobile devices.

Challenges:

  • Integration of AI-Generated Code:
    • Some AI-generated code snippets required significant modification to meet project requirements.
    • Ensuring consistency in the design and coding style when integrating AI-generated elements was challenging.
  • Time Management:
    • Balancing time between coding, testing, and documentation was a learning curve. Initially, too much time was spent on design, which caused a rush during the implementation phase.

Learnings:

  • Better Planning:
    • Breaking down tasks into smaller, more manageable chunks and setting mini-deadlines helped in better tracking progress.
  • Code Reviews:
    • Regularly reviewing AI-generated code for quality and consistency is crucial.
  • Continuous Testing:
    • Frequent testing during the development phase helps in identifying and fixing issues early, reducing last-minute stress.

Proposed Improvements:

  • Enhanced AI Tool Usage:
    • Explore more advanced features of GitHub Copilot for code optimization.
    • Use AI tools for automated testing and validation in future projects.
  • Improved Documentation:
    • Maintain a more detailed and continuous log of decisions and changes made during the project.
  • Time Management:
    • Allocate specific time slots for each phase and stick to the schedule more rigorously.

Final Thoughts:

  • The project was a valuable learning experience in integrating AI tools with web development.
  • The challenges encountered provided significant learning opportunities that will inform future projects.
  • Overall, the project outcomes met the initial objectives, and the use of AI tools added efficiency and innovation to the development process.

Plagiarism Guidelines for Learners

Project Overview Section

Guidelines on AI Tool Usage:

  • Use Responsibly: While using AI tools like GitHub Copilot, ensure that the code you submit is your own. You should be able to explain all AI-generated content.
  • Document Usage: Clearly document where and how AI tools were used in your project, specifying the contributions made by AI versus your own work.

Pre-Implementation Artefacts Section

Progress Submissions:

  • Intermediate Deliverables: Submit drafts of your project plan, wireframes, and initial code. These should show the evolution of your project and your understanding at each stage.

Documentation Section

Version Control Analysis:

  • Regular Commits: Make regular commits to your version control system (e.g., GitHub) to document your progress. Each commit should have a clear message detailing the changes made.
  • Detailed Contribution Reports: Include a report explaining your contributions at each stage of the project. Clearly differentiate between AI-generated code and your own work.

Plagiarism Detection:

  • Use of Tools: Be aware that plagiarism detection tools will be used to scan your code and documentation for similarities with other sources. Ensure that all content is original or properly cited.

Implementation Guidelines

Project Plan and User Stories

  • Original Content: Your project plan and user stories must be your own work. Avoid copying from other sources without proper attribution.
  • Specificity and Detail: Ensure that your user stories are specific to your project scenario and not generic templates from the internet.

Design Documentation

  • Create Your Own Designs: Wireframes and UX design documentation should be original. If you use design tools or templates, customize them significantly to reflect your unique project requirements.
  • Accessibility Considerations: Document how you have considered accessibility in your design. This should be based on your understanding and application of accessibility standards.

Version Control Setup

  • Consistent Use: Use your version control system consistently. Regular, descriptive commits will help demonstrate your ongoing work and understanding.
  • Branching Strategy: While branching is not required, document any strategies used to manage different parts of your project.

AI Tool Usage Plan

  • Clear Usage Plan: Document your plan for using AI tools. Specify which parts of the project will use AI-generated code and how you will ensure the quality and originality of this code.

Code Quality and Standards

  • Adhere to Standards: Ensure your code meets HTML5/CSS3 standards and follows best practices for readability and maintainability.
  • Review and Optimize: Review and optimize AI-generated code. Clearly document any modifications or optimizations you make.

AI-Generated Code Integration

  • Document AI Use: Clearly document where AI-generated code is used. Include comments in the code to highlight AI-generated sections.
  • Critical Assessment: Critically assess AI-generated code for quality and relevance. Make necessary adjustments to ensure it fits your project requirements.

Functional Implementation

  • Meet Acceptance Criteria: Ensure your implementation meets all user stories' acceptance criteria. Document any challenges and how you addressed them.
  • Original Implementation: Avoid copying implementation details from other sources. Your solution should be unique to your project scenario.

Final Project Submission

  • Complete Submission: Ensure your final project submission includes a fully functional web application, source code repository, and deployment link.
  • Proper Attribution: If you use any external resources or libraries, provide proper attribution and documentation.

Retrospective Report

  • Reflect Honestly: Your retrospective report should honestly reflect your development process, challenges faced, and lessons learned. It should be your own analysis and not copied from other sources.

Plagiarism Guidelines Summary

  1. Use AI Tools Responsibly: Ensure you understand and can explain all AI-generated content.
  2. Document Everything: Clearly document the use of AI tools, progress, and contributions.
  3. Submit Original Work: Your project plan, user stories, designs, code, and retrospective report must be original and specific to your project.
  4. Use Version Control: Make regular, descriptive commits to document your progress and contributions.
  5. Attribute Properly: Properly cite any external resources or libraries used in your project.

By following these guidelines, you can ensure that your work is original, demonstrates your understanding, and adheres to academic integrity standards. Judges will use these documented processes and tools to verify the originality and authenticity of your work.