COMP 305: Object-Oriented Software Design

Course Project

The course project is a domain-driven CRUD application using vanilla web technologies, demonstrating modern software engineering practices while following user-focused principles.

Project Overview

This project serves as a practical application of the concepts covered throughout the course, bringing together:

• User-Focused Principles - Accessibility, usability, and responsive design
• Domain-Driven Design - Modeling the application around business logic and domain concepts
• Intentional Architectural - Applying patterns at multiple levels appropriately
  • MVC - Model View Controller to organize the application
  • CRUD - Create, Read, Update, and Delete pattern on the app's data
  • Components - Decomposition of interface into web components
  • Minimalism - Using core technologies and avoiding dependencies where and when appropriate
  • Multi-Paradigm Thinking - Use of procedural, OOP, functional, and declarative thinking where appropriate
• Modern Software Engineering Practices - Clean code, testing, version control, and documentation

Key Learning Objectives

• Apply software design principles in a real-world context
• Demonstrate proficiency with multiple programming paradigms
• Implement clean, maintainable, and well-documented code
• Create accessible and user-friendly interfaces
• Practice version control and collaborative development workflows
• Write meaningful tests to ensure code quality

Technology Stack

Core Technologies

• HTML - Semantic markup and structure
• CSS - Styling, layout, and responsive design with accessibility in mind
• JavaScript (ES6+) - Application logic and interactivity
• DOM - Interaction when appropriate to modify HTML/CSS with JS
• Web Components - Native component model

No Frameworks Required

This project emphasizes understanding the fundamentals by building with vanilla web technologies. You'll gain a deeper appreciation for what frameworks do by implementing functionality from scratch.

Project Requirements

Functional Requirements

• Implement full CRUD functionality for various domain entities
• Persist data (localStorage, sessionStorage, or similar client-side storage) with remote backing if appropriate
• Provide form validation with helpful error messages
• Include search, filter, or sort capabilities
• Implement responsive design for mobile and desktop

Technical Requirements

• Use valid and semantic HTML
• Modern responsive CSS with variables, nesting, layers, and relative values
• Write clean, well-commented JavaScript using JSDocs, fully united tested, and cleanly linted
• Follow a consistent code style enforced as it one person wrote it
• Follow defensive design thinking including proper error handling, input santiziation, and network awareness including offline.
• Ensure accessibility (WCAG guidelines)
• Add observability to track usage, performance, and error conditions

Engineering Practices

• Use Git for version control with meaningful commit messages
• Write comprehensive developer and user documentation
• Include code comments that generate developer documentation for code modifications
• Demonstrate architectural and code design patterns
• Write unit tests for critical functionality
• Write E2E testing for integration testing
• Document your design decisions in ADRs
• Use a continuous integration (CI) service to automate testing and deployment
• Employ Agile practices working in a small team setting including:
  • User stories
  • Sprint planning
  • Daily standups
  • Code reviews
  • Retrospectives

Example Project Domains

Choose a domain that interests you. Some examples include:

• Event Planner - Schedule and manage events with attendees
• Habit Tracker - Track daily habits and visualize progress
• Collection Manager - Track your collectibles and watch for prices and purchases

Assessment Criteria

Projects will be evaluated based on:

• Functionality (25%) - Does it work as expected? Are all requirements met?
• Code Quality and Architecture (30%) - Is the code clean, organized, and maintainable?
• Design & UX (20%) - Is it user-friendly, accessible, and well-designed?
• Engineering Practices (25%) - Are best practices followed (Git, testing, documentation)?

Getting Started

1. Choose Your Domain - Pick a domain that interests you or propose your own
2. Plan Your Design - Sketch out the user interface and data model BEFORE you get going
3. Set Up Repo and Pipeline Early - Make sure your repo and build process accelerates you
4. Build Incrementally - Start with basics and add features
5. Test as You Go - Write tests for new functionality (TDD or test near coding)
6. Document Your Work As You Go - Keep your README and code comments up to date
7. Refactor Regularly - Improve code quality throughout development

Resources

• MDN Web Docs - Comprehensive reference for HTML, CSS, and JavaScript
• Web.dev - Best practices for modern web development
• WCAG Guidelines - Accessibility standards and techniques
• JavaScript.info - In-depth JavaScript tutorials
• CSS-Tricks - CSS techniques and examples

Tips for Success

• Start Simple - Get basic functionality working before adding complexity
• Focus on the User - Always consider the user experience
• Write Tests First - Try test-driven development for critical features
• Commit Often - Make small, focused commits with clear messages
• Ask for Feedback - Get input from peers and the instructor early
• Document Decisions - Explain why you made certain design choices
• Iterate and Improve - Don't be afraid to refactor and enhance