WDD 430: Web Full-Stack Development

W02 Team Project

Overview

This week, your team will select one of the project proposals submitted in Week 01, create a comprehensive formal project specification using Spec-Kit, and establish development workflows and coding standards. By the end of this week, your team will have an agreed project direction, a GitHub repository with a project board, and be ready for Week 03 onboarding and implementation.

Before the Meeting

Individually complete the following before the meeting:

1. Complete the learning activities for this week.
2. Review the project description and all project proposals submitted by your team members in Week 01. Read each proposal and think about the merits, feasibility, and your excitement level of each idea.
3. If you are this week's Team Lead:
   • Send a meeting reminder to all team members at least one day before the meeting.
   • Prepare a meeting agenda based on the objectives below.
   • Create a shared document in your MS Teams channel to capture decisions and action items.
   • Consider having team members rank the proposals or discuss favorites async before the meeting.

During the Meeting

1. Invite the Spirit: Be on time and open the group meeting with prayer and invite the Spirit into your discussion.
2. Select the Project Proposal: Discuss and vote on which project proposal your team will develop by considering the strengths, feasibility, and excitement level of each idea. Aim for consensus but be prepared to vote if needed.
3. Repository Setup: The group leader or assigned member sets up the team's GitHub repository and Next.js project.
   • Run npx create-next-app@latest and select TypeScript, Tailwind CSS, and App Router when prompted — this generates the correct folder structure automatically.
   • Push the initialized project to a new public GitHub repository.
   • Confirm the .gitignore for Node.js is present (create-next-app includes this automatically).
   • Update the README.md to list all team members and a one-line project description.
   • Invite all team members as collaborators.
4. Branching Strategy: Establish how your team will use Git before anyone writes code.
   • Protect the main branch — no direct pushes.
   • All work happens on feature branches named by feature or task (For example, feature/user-auth).
   • Pull requests are required to merge into main and must be reviewed by at least one other team member.
5. Code Standards: Agree on formatting rules before writing any code.
   • Confirm ESLint is configured (create-next-app includes this).
   • Install and configure Prettier or another agreed-upon formatter.

     npm install --save-dev prettier eslint-config-prettier

   • Add a .prettierrc file to the repo so all team members use identical formatting.
6. Create a Project Specification Document: Use GitHub's Spec-Kit AI tool to generate a project specification document. Because time is limited, follow these steps to generate and review the document efficiently.

   Details on using the Spec-Kit AI tool can be found in the README.md. The purpose of this tool is to assist in creating comprehensive project specifications to use while developing an application.

   1. Download and install the Spec-Kit template for GitHub Copilot:
      • Windows: spec-kit-template-copilot-ps-v0.0.90.zip
      • Mac/Linux: spec-kit-template-copilot-sh-v0.0.90.zip
   2. Extract the ZIP file and open it in VS Code
   3. Run the /speckit.constitution command with a prompt that reflects the required tech stack. Here is a starting point example you can modify as needed:

      /speckit.constitution Define the governing principles for a [brief app description]. 
                Required stack: Next.js (App Router) with TypeScript and Tailwind CSS. Include:
                TypeScript standards (strict mode, no use of `any`), Tailwind conventions (utility-first, 
                no custom CSS unless necessary), Next.js patterns (server vs. client components, 
                file-based routing), testing expectations, naming conventions, and team 
                collaboration guidelines.

   4. Run the /speckit.specify command to generate your project specification. Use this as your starting point:

      /speckit.specify Create a project specification for a [brief app description]. 
                Include: a project title and description, the purpose and target audience, user stories 
                for core workflows (sign up, create, read, update, delete), acceptance criteria for 
                each story, API endpoints, and implementation priority.

   5. Review, edit, and refine all generated content to ensure accuracy and appropriateness for your project.
   6. Save the final specification document to your team's project repository.
   Example Specification Document

   Your team's document will reflect your own project, but it should resemble this shortened example in structure, level of detail, and clarity:

   # StudyCircle
   
   ## Project Title & Description
   StudyCircle is a web app that helps university students create and manage study groups for specific courses. Students can discover groups, join sessions, and coordinate meeting times without relying on scattered text messages or informal spreadsheets.
   
   The initial release focuses on core collaboration workflows: account creation, group discovery, group management, and meeting coordination.
   
   ## Purpose & Target Audience
   - Audience: College students who want to form or join study groups
   - Purpose: Make it easier to organize academic collaboration around courses and schedules
   
   ## User Stories
   1. As a student, I want to create an account so that I can join and manage study groups.
   2. As a student, I want to browse groups by course so that I can find one relevant to my classes.
   3. As a group leader, I want to create a study group so that other students can join it.
   4. As a student, I want to join a group so that I can participate in upcoming sessions.
   5. As a group leader, I want to post meeting times so that members know when to attend.
   
   ## Acceptance Criteria
   ### Story 1: Create an account
   - Given a new user, when they submit valid registration information, then the system creates an account and signs them in.
   - Given an invalid email address, when the form is submitted, then the system shows a validation message and prevents submission.
   
   ### Story 2: Browse groups by course
   - Given a signed-in user, when they open the groups page, then they can filter results by course code.
   - Given no matching groups, when a filter is applied, then the system displays an empty-state message.
   
   ### Story 3: Create a study group
   - Given a group leader, when they submit the create-group form, then a new group is saved with a title, course, description, and meeting preference.
   - Given missing required fields, when the form is submitted, then the system blocks submission and highlights the missing fields.
   
   ## Technical Requirements
   - Framework: Next.js App Router
   - Language: TypeScript in strict mode
   - Styling: Tailwind CSS
   - Data: PostgreSQL with Prisma ORM
   - Auth: NextAuth or Clerk for sign-in and session management
   - Performance: Server components by default; client components only where interactivity is needed
   
   ## Core API Endpoints
   - GET /api/groups
   - GET /api/groups/:id
   - POST /api/groups
   - POST /api/groups/:id/join
   - GET /api/courses
   - POST /api/meetings
   
   ## Implementation Priority
   - P0: Sign up, sign in, browse groups, create group, join group
   - P1: Edit group details, leave group, meeting reminders
   - P2: Group chat, attendance tracking, calendar sync

   Spec-Kit gives you a starting point, not a finished document. Read every section critically, correct anything that does not reflect your actual project, and fill in what the AI could not know. Your team is accountable for the final specification content.

7. GitHub Project Board: Set up a GitHub Project Board for tracking work as a team.

   Use your Spec-Kit specification to create clear, well-defined issues. Break each user story into implementation tasks (backend, frontend, database).

   • Create the project board: GitHub Projects Setup Instructions.
   • Create user stories for major features based on your specification.
   • Convert the highest priority stories into GitHub Issues with acceptance criteria.
   • Add issues to your project board (at least 7 issues).
   • Begin to assign issues to team members based on interest and expertise.

   You will want to backlog some issues without full details for later prioritization.

8. Group Leader: Select a new group leader for the next meeting.

Submission Instructions

Each team member submits the following sections in Canvas:

Team Meeting Summary

This brief, written summary must include:

1. The names of the team members who were present at the synchronous meeting and the name of the team leader.
2. The title and description of the selected proposal and why it was chosen.

Project Setup

1. A link to your team's public GitHub repository that contains the initial project files.
2. A link to your team's GitHub Project Board that contains issues.

Project Specification Document

1. A link to the team's specification document saved in the GitHub repository.
2. A brief reflection (2-3 sentences) on the process of creating the specification document using the Spec-Kit AI tool. What worked well? What challenges did you encounter? How did your team ensure the final document accurately reflected your project?

W02 Team: Code Review Report

This content comes from your Week 02 Team: Code Review assignment.

1. GitHub Issue Evidence: Submit one URL to a substantive issue you created on your assigned teammate's repository. The issue must be labeled as must-fix or should-fix and include the problem, impact, and a suggested fix.
2. Rendered Site Review Report: Submit the rendered site URL and a short written report (6-10 bullet points) that includes: minimum requirements check, responsive behavior check, links check, /api/hello check, Lighthouse mobile scores (Performance, Accessibility, Best Practices, SEO), CSS Overview findings, one project strength, and one actionable improvement.