WDD 430: Web Full-Stack Development

Project Support Links

Team Project Description

Overview

You will work in your team to design, develop, and deploy a full-stack web application using Next.js. This project will demonstrate your ability to apply contemporary workflows, use a modern framework, collaborate effectively using agile methods, conduct peer code reviews, build relevant technical documentation, and build a production-ready application.

This is a block-long project, with incremental deliverables each week. You will apply concepts learned in class while exploring additional features independently. By the end of the course, you will have a deployed, functional web application that showcases your full-stack development skills.

Specifications

The final application must include the following technical requirements and features:

Technical Requirements

• Framework: Next.js using App Router
• Database: MongoDB, PostgreSQL, or a managed platform such as Supabase
• Authentication: Auth.js v5 (NextAuth.js) or Clerk. Auth.js is the default recommendation, but Clerk is an approved alternative if your team wants a lower-risk setup.
• Version Control: GitHub Repository with feature branch workflow
• Hosting: Vercel or similar hosting service
• Design System: Defined palette, type scale, and component library
• API Route Handler: a route that performs a database operation and is consumed by the client component, demonstrating the full client - server - database request cycle
• Code Quality: Adherence to best practices and coding standards

Minimum Features and Functionality

• A clear user purpose, target audience, and value proposition (a problem statement and solution). This does not have to be unique, however it should be well-defined and clearly communicated.
• At least 3 distinct user interfaces or views.
• Users and authentication (For example, sign-up, login, profile management, logout).
• CRUD operations for managing content (Create, Read, Update, Delete) for at least two different data models. Minimal implementations are acceptable; for example, a profile update can count as Update for one model, and a soft delete can count as Delete when it is the intended way that record is removed from normal use.
• Responsive design that works well on both desktop and mobile devices.
• Proper error handling and user feedback for actions (For example, form validation, loading states, error messages).
• Use of both server-side and client-side rendering where appropriate.
• At least 5 components used across multiple pages.
• Proper TypeScript typing for props, state, and API responses.
• Consistent code formatting.
• Consistent branding with a cohesive design.
• A project README file with clear descriptions of the project, team members, instructions for setup and deployment, API documentation, and known issues or opportunities for improvement.

Team Workflow

• Hold weekly live team meetings to discuss sprint goals, progress, blockers, and next steps. Rotate the responsibility of leading meetings.
• Use Git and GitHub effectively for version control and collaboration.
• Use GitHub Projects/Boards to manage tasks and track progress.
• Follow a feature branch workflow, with regular commits and pull requests for code reviews. Each team member must make regular, meaningful contributions.
• Use code reviews to maintain code quality and share knowledge among team members.
• Communicate effectively and professionally with teammates, and resolve conflicts constructively.

Professional Application: Managing the Project Effectively

This project is designed to simulate professional team development in an accelerated timeline. The practices below help teams stay organized, reduce risk, and deliver meaningful progress throughout the block.