Skip to content

Customer Milestone 2 Report of CMPE 451 Fall 2025

Jump to bottom
hasancankeles edited this page Nov 28, 2025 · 39 revisions

Customer Milestone 2 Report of CMPE 451 Fall 2025

1. Deliverables

2. Milestone Review

2.1. Summary of Customer Feedback and Reflections

Summarize the feedback received during Milestone 1 and previous meetings. Reflect on how this feedback influenced your current direction. You can check the feedback in meeting notes

1. User Experience & Visualization (UI/UX)

  • Food Quantity Safety Warnings (Source: Başak)
    • Requirement: The Food Catalog must actively warn the user if a selected portion size (grams/quantity) exceeds established healthy limits.
    • Alternative: Consider implementing this as a "Safe View" mode or a toggleable option.
  • Data Visualization (Source: Suzan Hoca)
    • Requirement: Increase the use of Spider Web (Radar) charts specifically for nutrition comparisons to better display multi-variable data.

2. Core Features & Logic

  • Future-Oriented Meal Planner (Source: Suzan Hoca)
    • Requirement: The Advanced Meal Planner needs to support planning ahead—allowing users to schedule their micronutrition values for future dates, and a system supporting "what if"s (What if I have not eaten a specific amount of food today, what would be my other options).
  • Nutrition Score Algorithm (Source: Berk)
    • Requirement: The "Nutrition Score" calculation must now include Water Intake as a weighted variable.
  • Search & Filtering (Source: Berk)
    • Requirement: Add filtering capabilities by Micronutrient Range (e.g., "Show foods with > 20mg Vitamin C").
  • Personalization Validation (Source: Suzan Hoca)
    • Status: POSITIVE. The implementation of personalizing advice based on user fitness metrics and the domain-specific implementations was explicitly praised.

3. Technical Architecture & Refactoring

  • RecipeModel Refactor (Source: Furkan)
    • Issue: Current recipe handling is hardcoded/local.
    • Action Item: Refactor RecipeModel. Recipes must be fetched from a larger, central database to support dynamic updates.
  • Admin Panel Capabilities (Source: Arda)
    • Requirement: Admins must have the ability to edit food proposals submitted by users or scrapers before they are published.

4. Documentation

  • Diagram Clarity (Source: Furkan)
    • Action Item: Use Case diagrams need to be revised for clarity regarding actors and system boundaries.

The feedback from the Customer 2 meeting has catalyzed a shift from a passive tracking tool to a proactive health guidance system. Our direction has evolved in four critical dimensions:

1. From Reactive Logging to Proactive Planning

  • Previous: Focus on retrospective data entry.
  • New Direction: Triggered by the Advanced Meal Planner feedback, we are pivoting to allow users to architect their nutrition days or weeks in advance.

2. From "Data Display" to "Data Intelligence"

  • Previous: Presenting raw numbers.
  • New Direction: We are moving toward visual synthesis and active interpretation.
    • Visuals: Adopting Spider Web charts for complex nutrient profiles.
    • Safety: Moving from a neutral observer to a safety-first stance with Warning Systems for portion sizes.

3. From Prototype to Scalable Systems

  • Previous: Local data handling for recipes.
  • New Direction: Furkan’s review forces architectural maturity. We are shifting to a centralized database architecture for RecipeModel, ensuring the client remains lightweight.

4. Holistic Scoring Definition

  • Previous: Nutrition defined strictly by solid food.
  • New Direction: Incorporating Water Intake acknowledges hydration as a pillar of nutrition, making "The Score" medically accurate.

Action Plan (Final Milestone)

  1. High Priority: Begin refactoring RecipeModel (Central Database Integration).
  2. High Priority: Implement "Future Date" logic in the Meal Planner.
  3. Medium Priority: Integrate Warning Modal for food quantities and servings (user should be able to select servings).
  4. Medium Priority: Update Nutrition Score algorithm to include Water Intake.

2.2. List and Status of Deliverables

List all project deliverables and their current status. You can check previous lab reports

Deliverable Name Status Notes
Web Application Completed Deployed via Docker; forum, recipes, profiles, food catalog; personalized feed (1.4.19).
Mobile Application (Dockerized) Completed Dockerfile present; Expo/Gradle APK CI pipeline ready and released.
Backend API Completed Django REST; CI for tests; follow/feed/report endpoints; nutrition tracking implemented.
Documentation Completed Wiki updated (Requirements, Design, Plans, Policies); SRS reflects new sections (1.9, 1.1.6).
CI/CD (Backend Tests) Completed GitHub Actions running Django unit tests on PRs/push.
Frontend - Selenium Tests Completed
CI (Mobile APK Build) Completed Manual-trigger workflow builds APK and publishes artifact.
Data Integration (FNDDS) Completed Food DB enriched; enables micronutrient display, serving toggles, comparison.

2.3. Evaluation of Status and Impact (Reflection)

Current Status Overview

Customer Milestone 2 represents substantial progress in delivering core platform functionality across web, mobile, and backend systems. The team achieved significant milestones in data integration, user-facing features, and infrastructure stability, positioning the project strongly for final release.

Database & Core Infrastructure

The team successfully integrated the FNDDS (USDA Food and Nutrient Database) into the food database (1.1), establishing a comprehensive foundation with nutritional data for common food items. This integration was a critical achievement that enabled advanced features including food comparison capabilities (1.1.6), comprehensive micronutrient display (1.1.7), and serving-based nutrition calculations (1.1.8). The database now supports both per-100g and per-serving nutritional views, providing users with flexible and accurate nutrition information.

Feature Completion Highlights

Nutrition Tracking (1.9) was fully implemented and demonstrated successfully during the milestone demo. Users can now log meals across breakfast, lunch, dinner, and snacks, with the system automatically computing daily totals and providing visual progress indicators through graphical visualizations. This feature includes color-coded feedback (green/yellow/red) and personalized targets based on user profiles.

Forum & Community Features (1.4) are now functional across all platforms with complete support for post creation, commenting, liking, and tagging capabilities. The team delivered important social features including user following (1.2.18) and personalized feeds (1.4.19), significantly enhancing community engagement and user interaction patterns.

Recipe Management (1.3) is operational with ingredient tracking, nutritional aggregation from linked food items, and nutrition score calculations based on ingredient quality and macronutrient balance. User Profile Management (1.2) supports comprehensive allergen tracking (both predefined and custom), profession tags with verification workflows, and impact metrics display showing total recipes shared, posts created, and community engagement.

Platform-Specific Achievements

The mobile application achieved significant UX enhancements through the implementation of a dedicated food comparison screen with side-by-side nutritional displays and refined micronutrient information panels. The mobile platform now provides users with powerful decision-making tools for comparing food items directly within their workflow.

The backend infrastructure was strengthened with reporting functionality (1.4.8), badge system support for recognizing helpful users (1.2.19), and complete follow/feed endpoints (1.2.18, 1.4.19). The Django CI pipeline implementation ensures all backend changes are automatically tested, significantly improving code quality and reducing regression risks. Deployment remains stable via Docker with web, mobile, and backend services operational and accessible.

Areas Under Active Development

Recipe cost calculation (1.3.5-1.3.6) is currently in development, dependent on completing the price model refinements and establishing the base price infrastructure for food items. The moderation reporting queue for processing user-submitted reports is being developed to support the full moderation workflow. Email services for password recovery (1.7.5) and account verification (1.7.6) are planned for completion in the final milestone. These features have minimal impact on current demo scenarios but are prioritized for production readiness and complete user account lifecycle support.

Impact on Project Plan

The current deliverable status positions the project well for final release. Core user journeys—food discovery, recipe exploration, nutrition tracking, and community engagement—are functional, tested, and deployed. The foundation established through FNDDS integration, social features, and automated testing enables rapid completion of remaining requirements. The successful implementation of complex features like nutrition tracking and food comparison demonstrates the team's capability to deliver sophisticated functionality on schedule.

Looking forward, the team will focus on completing price-based filtering and recipe costing, automating moderation workflows with the reporting queue and appeals system, and achieving full feature parity across web and mobile platforms. The strong foundation in place supports confident progression toward final milestone objectives and production deployment.

2.4. Evaluation of Tools and Processes

During this milestone, the team strengthened its development workflow by introducing structured coordination roles and expanding automation through CI pipelines. These changes improved integration quality, reduced manual workload, and increased overall development efficiency.

Version Control & Project Coordination

A new Issue and PR Coordinator role was introduced to streamline workflow management.
Nuri Baş assumed responsibility for:

  • Tracking open issues and pending PRs

  • Ensuring timely reviews and merges

  • Following progress toward milestone deadlines

This role improved visibility across the team and prevented bottlenecks caused by unreviewed or stalled work.

Continuous Integration (CI) Enhancements

Two GitHub Actions pipelines were implemented this milestone, significantly improving reliability and consistency across backend and mobile development.

Django Backend CI Pipeline

Implemented by Yusuf Akın, this workflow runs automatically on each push or pull request affecting the backend/ directory. It:

  • Sets up the Python environment

  • Installs dependencies

  • Executes all Django unit tests

All PRs must now include relevant tests and pass CI before merging, ensuring code quality and preventing regressions.

Mobile APK Build Pipeline

A manual-trigger workflow was added to streamline mobile development. It:

  • Builds the Android application using Expo/Gradle

  • Generates a downloadable APK artifact

This enables quick distribution of mobile builds without requiring local build environments.

Testing Requirements

A new project-wide policy was introduced:
PRs cannot be merged unless they include appropriate unit tests.

This requirement reinforces test-driven development practices and ensures long-term maintainability.

Reflection

What Worked Well

  • CI pipelines reduced manual testing and improved integration stability

  • Introducing the PR/Issue Coordinator increased organization and reduced delays

  • Automated APK builds simplified mobile testing and improved demo readiness

Summary

This milestone introduced:

  • Structured oversight for issues and PRs

  • Automated backend CI testing

  • Automated mobile APK builds

  • Mandatory test coverage for all PRs

These improvements collectively enhanced code quality, coordination, and development efficiency, establishing a more reliable workflow for the upcoming milestones.

2.5. Requirements Addressed

Provide progress according to requirements. Note: "Completed" means implemented, tested, documented, and deployed.

2.5.1 Functional Requirements (1.x)

1.1 Food Database
  • 1.1.1 Common food items (≥500): Completed (100%)
  • 1.1.2.1 Propose new food (mandatory fields): Completed (100%)
  • 1.1.2.2 Optional micronutrients submission: Completed (100%)
  • 1.1.3 Nutrition score (tooltip, per 100 g & per serving): Completed (100%)
  • 1.1.4 Dietary options (a–g): Completed (100%)
  • 1.1.5 Manual Price & Budget Category (Base Price, tertiles, overrides): In Progress (100%)
  • 1.1.6 Compare Food Items (radar chart, per 100 g/serving toggle): Completed (100%)
  • 1.1.7 Micronutrient Presentation (per 100 g & per serving, DV% & tooltips): Completed (100%)
  • 1.1.8 Serving Definition (labels, toggle): Completed (100%)
  • 1.1.9 Data Entry & Validation (Base Price + Serving Size validation): In Progress (60%) – validation on proposal approve done; currency/price_unit UI hint & moderator correction history view pending.
1.2 User Profile Management
  • 1.2.1 Predefined allergens: Completed (100%)
  • 1.2.2 Custom allergens: Completed (100%)
  • 1.2.3 Personal recipes list: Completed (100%)
  • 1.2.4 Contact info update: Completed (100%)
  • 1.2.5 Profile photo upload/update/remove (≤5 MB): Completed (100%)
  • 1.2.6 View other users’ profiles: Completed (100%)
  • 1.2.7 View liked posts: Completed (100%)
  • 1.2.8 View liked recipes: In Progress (70%) – backend endpoint + web UI implemented; mobile view pending.
  • 1.2.9 Profession tags with Unverified → Verified: Completed (100%)
  • 1.2.10 Certificate upload: Completed (100%)
  • 1.2.11 Report other users (options + description): In Progress (55%) – form & reasons implemented; moderation queue detail panel refinement & notification feedback pending.
  • 1.2.12 See warnings/removals/bans: Completed (100%)
  • 1.2.13 Contributions dashboard: In Progress (40%) – metrics backend aggregation partially; UI badges panel incomplete.
  • 1.2.14 Impact metrics (≤60 s update): In Progress (35%) – events captured; real-time push & SLA timer enforcement pending.
  • 1.2.15 Helped count for meal plans (≤60 s): In Progress (30%) – action stored; counter display on meal-plan post list pending.
  • 1.2.16 Impact Summary badge: In Progress (25%) – rule draft + placeholder icon; issuance job & profile render pending.
  • 1.2.17 Optional nutrition profile for DV tailoring: In Progress (30%) – profile fields stored; DV recalculation in tooltips pending.
  • 1.2.18 User Following: Completed (100%)
  • 1.2.19 Badges for helpful users: In Progress (65%) – backend badge assignment & display on posts done; profile consolidation & mobile rendering pending.
1.3 Recipe Management
  • 1.3.1 Ingredient list: Completed (100%)
  • 1.3.2 Link ingredient nutrition to food item: Completed (100%)
  • 1.3.3 Preparation steps: Completed (100%)
  • 1.3.4 Ingredient references food with stored price: In Progress (50%) – price fields available; quantity × unit cost calc wired; missing per-serving price normalization.
  • 1.3.5 Recipe cost estimation (sum of ingredient costs): In Progress (40%) – basic sum implemented; geographic scope & fallback logic not started.
  • 1.3.6 Filter by cost (a–c): In Progress (20%) – placeholder sorting hook; cost-to-nutrition ratio formula pending.
  • 1.3.7 Aggregated nutrition score: Completed (100%)
  • 1.3.8 Sort/filter by nutrition score & ranking: Completed (100%)
1.4 Forum & Nutrition Tips
  • 1.4.1 Tags editable by owner: Completed (100%)
  • 1.4.2 Free-text posts: Completed (100%)
  • 1.4.3 Nutrition tips: Completed (100%)
  • 1.4.4 Browse/search by title/food keyword: Completed (100%)
  • 1.4.5 Filter by tags, sort by rating: Completed (100%)
  • 1.4.6 Interactions (like/unlike/comment/share): Completed (100%)
  • 1.4.7 Categorization tags: Completed (100%)
  • 1.4.8 Report posts (reasons): Completed (100%)
  • 1.4.9 Acknowledged & triaged ≤48 h: In Progress (45%) – queue + timestamp logged; SLA checker & dashboard aging visualization pending.
  • 1.4.10 Moderation actions (warn/remove/ban): In Progress (35%) – warning & removal via admin; API endpoints for ban + structured action codes pending.
  • 1.4.11 Reporter can track status: In Progress (40%) – status list basic; history & filtering pending.
  • 1.4.12 Moderator actions on reported posts/users: In Progress (50%) – approve/remove flows; ban escalation & rationale recording pending.
  • 1.4.13 Limit post frequency: In Progress (20%) – backend rate data captured; enforcement & UI messaging pending.
  • 1.4.14 Responsibility prompt before sharing: In Progress (10%) – text drafted; modal integration pending.
  • 1.4.15 Anonymous posting: In Progress (25%) – flag stored; anonymized display & privacy audit pending.
  • 1.4.16 “This helped me” for meal plans: In Progress (30%) – counter stored; aggregation & sorting integration pending.
  • 1.4.17 Top this week (top 5, refresh 15 min): In Progress (15%) – query draft; scheduler & caching pending.
  • 1.4.18 Extended sorting (≤5 s for ≤100k posts): In Progress (25%) – indexes added; performance test & ratio sort pending.
  • 1.4.19 Personalized feed (followed users and liked-by-followed): Completed (100%)
1.5 Meal Planner
  • 1.5.1 Optional budget: In Progress (30%) – field present; UI input + over-budget warning not implemented.
  • 1.5.2 Share meal plans as post: Completed (100%)
  • 1.5.3 Deterministic generation (seeded, filters, ±10% targets): Completed (100%)
  • 1.5.4 Save & reuse plans: Completed (100%)
  • 1.5.5 Nutritional summaries: Completed (100%)
1.7 Account Management
  • 1.7.1 Sign up (email, username, password): Completed (100%)
  • 1.7.2 Log in (username/password): Completed (100%)
  • 1.7.3 Log out: Completed (100%)
  • 1.7.4 Change password: Completed (100%)
  • 1.7.5 Account recovery via email: In Progress (10%) – endpoint skeleton; email service integration & token flow pending.
  • 1.7.6 Email authentication on signup: In Progress (15%) – verification model drafted; dispatch + activation workflow pending.
1.8 Moderation
  • 1.8.1 Assign admin/mod privileges: Completed (100%)
  • 1.8.2 Role definitions (GA/SA/CA/DA/CM): In Progress (40%) – conceptual mapping; Django groups & granular perms partially applied.
  • 1.8.3 GA inherits all privileges: In Progress (35%) – superuser covers; explicit inheritance doc & role tests pending.
  • 1.8.4 Review/approve/reject food submissions: Completed (100%)
  • 1.8.5 Verify profession tags & certificates: Completed (100%)
  • 1.8.6 Moderation dashboard: Completed (100%)
  • 1.8.7 Report detail display: In Progress (45%) – core fields shown; multi-filter & pagination pending.
  • 1.8.8 Actions (remove/warn/ban): In Progress (30%) – remove/warn; ban endpoint & escalation audit pending.
  • 1.8.9 Moderation history: In Progress (25%) – action logs stored; chronological viewer & export pending.
  • 1.8.10 Automated detection (pre-publish): In Progress (20%) – model stub; integration & confidence threshold tuning pending.
  • 1.8.11 Immediate user notification on flag: In Progress (15%) – backend event hook stub; UI toast/email pending.
  • 1.8.12 Appeal submission: In Progress (10%) – data model; form & workflow processing pending.
  • 1.8.13 Appeal status tracking: In Progress (10%) – status enum; user dashboard view pending.
  • 1.8.14 Override flags (approve/enforce): In Progress (15%) – admin flag override stub; audit record expansion pending.
  • 1.8.15 Fair & transparent resolution: In Progress (5%) – policy draft only.
  • 1.8.16 Inclusive appeal review: In Progress (5%) – guidelines draft only.
  • 1.8.17 Price/serving set during approval + audit: Completed (100%)
1.9 Nutrition Tracking
  • 1.9.1 Nutrition Tracking Page (meal categories, logs): Completed (100%)
  • 1.9.2 Daily totals & meal-level breakdowns (macro/micro): Completed (100%)
  • 1.9.3 Personalized targets & thresholds + warnings: Completed (100%)
  • 1.9.4 Visualizations (charts, bars, color-coded, tooltips): Completed (100%)
  • 1.9.5 Historical data & persistence (web/mobile sync): Completed (100%)
  • 1.9.6 Editing/updating with real-time totals: Completed (100%)
  • 1.9.7 Integration with Food Database (canonical data, serving): Completed (100%)
  • 1.9.8 Testing & validation (≥80% unit test coverage, integration tests): In Progress (65%) – unit tests substantial; integration + edge cases & coverage threshold pending.

2.5.2 Non-Functional Requirements (2.x)

  • 2.1 Performance & Scalability: In Progress (30%) – baseline tests + indexing; load test & stress scenarios pending.
  • 2.2 Usability & Accessibility: In Progress (25%) – semantic landmarks & alt text; keyboard trap audit & contrast matrix pending.
  • 2.3 Reliability & Availability: In Progress (40%) – docker restart + health checks; backup automation & uptime monitoring pending.
  • 2.4 Security, Data Protection & Ethics: In Progress (45%) – bcrypt & HTTPS; multi-source nutrition validation, anonymization review pending.
  • 2.5 Compliance & Regulations: In Progress (35%) – ToS acceptance & manual cert upload; allergen manual info & audit display pending.
Section ID Range Total Completed Avg % Brief Note
1.1 Food Database 1.1.1–1.1.9 10 9 96% Data coverage & comparisons done; validation fine-tuning ongoing.
1.2 User Profile Management 1.2.1–1.2.19 19 11 76% Core profile flows ready; impact & badge metrics missing.
1.3 Recipe Management 1.3.1–1.3.8 8 5 76% Recipe nutrition & steps complete; cost & filter logic in development.
1.4 Forum & Nutrition Tips 1.4.1–1.4.19 19 9 63% Forum core ready; SLA & moderation automation lagging.
1.5 Meal Planner 1.5.1–1.5.5 5 4 86% Engine ready; budget warnings & UI missing.
1.7 Account Management 1.7.1–1.7.6 6 4 71% Auth flows complete; email recovery & verification early-stage.
1.8 Moderation 1.8.1–1.8.17 17 5 44% Dashboard & basic approvals in place; automated detection & appeals just starting.
1.9 Nutrition Tracking 1.9.1–1.9.8 8 7 96% Tracking & visualization complete; test coverage threshold to be finalized.
Total (1.x) 1.1–1.9 92 54 71% Overall progress solid; priority: moderation & forum quality metrics.

3. Planning and Team Process

3.1. Process Changes

After the milestone meeting and the customer meeting on November 10, we changed our requirements and planning for the next milestones drastically. We decided to focus more on domain specific features such as Nutrition tracking, meal planning and food comparison. We decided to leave other tasks such as employing W3C standards or non-domain specific features such as "Forgot my password" to the final milestone.

These changes impacted the project positively, as we received positive feedback in the MVP milestone presentation. For the next milestone, we plan to achieve

  • bug fixing for the current features
  • reflecting feedback and suggestions to our design
  • implementing the missing non-domain-specific features
  • enhance our codebase with standards

3.2. Project Plan

For the details of our planning for the final milestone, you can visit the detailed project plan below.

Detailed Project Plan: Final Milestone Planning: Spring 1 & 2

3.3. GitHub Projects Board

GitHub Projects

Screenshot 2025-11-28 at 13 46 36

4. Utilized Standards

Document key W3C standards applied (e.g., WCAG 2.1, Activity Streams 2.0, i18n).

4.1 WCAG 2.1 — Accessibility Compliance

Standard Followed: WCAG 2.1 Level AA

Relevant MVP Issues:

Summary:
These features improved UI visibility, clarity, and perceived responsiveness (e.g., skeleton loading, content discoverability, enhanced layout). All improvements help fulfill WCAG principles of Perceivable, Operable, and Understandable, essential for MVP usability.

4.2 W3C Mobile Web Best Practices (MWBP 1.0)

Standard Followed: Mobile-first design, responsive layout, efficient media delivery

Relevant MVP Issues:

Summary:
The MVP required robust mobile support. These tasks ensured proper scaling, image handling, gesture compatibility, and smooth mobile feed/nutrition tracking experiences in line with MWBP recommendations.

4.3 W3C Activity Streams 2.0 — Social Feed Modeling

Standard Followed: Activity Streams (Actor–Object–Activity data model)

Relevant MVP Issues:

Summary:
The MVP feed (likes, posts, mobile feed, personalized content) uses the Activity Streams model to maintain consistent representation of user actions across backend and frontend.

4.4 W3C Internationalization (i18n)

Standard Followed: Locale-aware formatting, timezone-safe dates, UTF-8 encoding

Relevant MVP Issues:

Summary:
Correct local date rendering, consistent asset encoding, and timezone handling were essential for accurate nutrition logs and mobile UI consistency.

4.5 RESTful API Best Practices (Industry Standard)

Standard Followed: Consistent HTTP status codes, resource modeling, idempotent operations

Relevant MVP Issues:

Summary:
These issues strengthened the consistency and reliability of the API endpoints powering the MVP (nutrition entries, food search, proposal system, etc.), aligning with modern REST practices.

5. UX Design

5.1. Key Use Case Description

Scenario: Managing a Rare Metabolic Condition (Wilson's Disease)

Hasancan, a user diagnosed with Wilson's Disease, requires a diet strictly limited in Copper while ensuring adequate Zinc intake to block copper absorption.

  1. Profile Update: Hasancan returns to the app and updates his body weight. The system automatically recalculates his metabolic needs, ensuring his daily goals are current.
  2. Social Engagement: He visits the community forum, reads a nutrition professional's advice, and engages (likes) to stay motivated.
  3. Decision Making & Comparison: Feeling hungry, he sees a "Pumpkin Seeds" post in his feed. He searches for it but notices a high nutrition score. Curious, he clicks the Info Icon to understand the calculation. He then goes into the full nutrient display for pumpkin seeds. He clicks on the Copper entry, which triggers a Daily Recommendation pop-up modal. The modal instantly displays his copper target and, in a warning box, shows that "This serving would exceed his daily target by over 100%. Seeing this immediate, crucial feedback, he realizes the food is too dangerous.. He considers an alternative, Sunflower Seeds, and uses the Food Comparison Feature to view them side-by-side. The visual charts reveal that both seeds exceed his safety threshold.
  4. Crowdsourcing & Inclusivity: He pivots to a safer option in his fridge: "Honey and Yoghurt." He searches the database, but the specific combination isn't found. He utilizes the Propose Food feature to input the nutritional values.
  5. Validation & Tracking: An admin reviews and approves the proposal to ensure data safety. Once approved, Hasancan verifies the safe Copper/Zinc ratio, consumes the snack, logs it, and checks his daily progress dashboard, confirming he is safe for the day.

5.2. Analysis: Connecting Use Case to Principles

  • Accessibility:

    • Visualizing Complex Data: In the Food Comparison step, the system uses Macro Radar Charts and circular progress bars rather than dense tables of numbers. This reduces cognitive load, allowing Hasancan to instantly grasp that both seed options were "unsafe" without performing mental math.
    • Transparency (Explainable AI): When Hasancan questioned the "Nutrition Score," the system provided an immediate explanation via the information tooltip. This ensures the system is not a "black box," making the logic accessible to users who are not nutrition experts.

  • Inclusivity:

    • Beyond Standard Diets: Most apps focus on Calories, Protein, or Carbs. By allowing Hasancan to track and filter specifically for Micronutrients (Copper and Zinc), the system accommodates users with specific medical conditions (Wilson's Disease), catering to a diverse range of health backgrounds beyond generic fitness goals.
    • Crowdsourcing Database: The ability to Propose New Foods (Honey and Yoghurt) acknowledges that a static database cannot contain every cultural or personal food combination. This feature allows the system to adapt to diverse user contexts and eating habits, rather than forcing the user to fit the system.

  • Ethical Considerations:

    • Data Integrity vs. Safety: Allowing users to add food creates a risk of misinformation (e.g., entering wrong copper values could be dangerous for Hasancan). We mitigated this by implementing an Admin Approval Mechanism. The user's proposal is not public/verified until reviewed, balancing user autonomy with the ethical responsibility of providing accurate health data.
    • Autonomy vs. Nudging: While the system flagged the Pumpkin Seeds with high copper values, it did not "block" the action or force a decision. It presented the data and the comparison, preserving Hasancan's User Autonomy to make the final dietary choice himself.

6. Testing

6.1. Overview

Our testing strategy for NutriHub employs a four-layered approach that validates functionality from the database level to real-world user interactions. This section documents over 270 automated tests plus extensive task-based usability testing that directly improved our product.

Testing Layers:

  1. Unit Tests (~80+ tests): Backend business logic (Django), frontend components (React), and mobile services (React Native)
  2. Integration Tests (~40+ tests): Full API request/response cycles, database transactions, and external API integrations
  3. End-to-End Tests (177 Selenium tests): Complete user workflows tested in real browsers across 17 test suites
  4. UI/UX Tests (8 task-based sessions): External user testing for UI/UX features

6.2. Unit Tests

6.2.1. Backend Unit Tests (Django)

Location: backend/*/tests/ and backend/*/tests.py

Test Count: ~40+ test cases

Coverage Areas:

  • Foods Module (foods/tests.py - 1,084 lines)

    • Food catalog filtering and pagination
    • Price calculation and categorization
    • Food proposal submission and approval
    • External API integration (FatSecret, Open Food Facts)
    • Recipe suggestions and random meal generation

  • Forum Module (forum/tests/)

    • Post creation, editing, and deletion
    • Comment functionality
    • Like/unlike interactions
    • Tag-based filtering
    • Recipe-specific features

  • Accounts Module (accounts/tests/)

    • User authentication and authorization
    • Profile management
    • Password change functionality
    • Follow/unfollow system
    • Feed generation
    • Allergen tags and food proposal badges
    • Profile media uploads

  • Meal Planner Module (meal_planner/tests.py)

    • Meal planning CRUD operations
    • Calendar integration
    • Nutrition tracking
    • Meal scheduling

  • API Module (api/tests.py)

    • JWT token authentication
    • API endpoint access control
    • Request/response validation
Why These Tests?

Rationale: Backend unit tests form the foundation of our testing strategy because they validate the core business logic that powers the entire application. By testing at the service and model level, we ensure data integrity, proper API behavior, and correct authentication/authorization before any frontend interaction occurs.

User Scenarios Validated:

  • Users can search and filter foods by category, allergens, and dietary preferences without receiving invalid or inconsistent data
  • Food proposals submitted by users are properly validated and stored with correct nutrition scores
  • Authentication prevents unauthorized access to protected resources (meal planning, posting, profile editing)
  • External API failures (FatSecret, Open Food Facts) are gracefully handled without crashing the application

Potential Failure Points Addressed:

  • Data Validation: Invalid nutrition values, negative prices, missing required fields—all caught by serializer and model validation tests
  • Edge Cases: Empty search results, non-existent categories, duplicate proposals, zero serving sizes
  • API Integration: Network timeouts, malformed responses, missing API fields
  • Security: Unauthenticated access attempts, invalid tokens, expired sessions
  • Performance: Pagination correctness, efficient database queries (tested via ORM query validation)

Example Test Cases:

# foods/tests.py
def test_category_filtering(self):
    """Test that filtering by category returns only foods in that category."""
    response = self.client.get(reverse("get_foods"), {"category": "Fruit"})
    self.assertEqual(response.status_code, status.HTTP_200_OK)
    for food in response.data["results"]:
        self.assertEqual(food["category"], "Fruit")

def test_submit_food_proposal_no_auth(self):
    """Test that unauthenticated users cannot submit proposals"""
    response = self.client.post(self.proposal_url, data, format='json')
    self.assertEqual(response.status_code, status.HTTP_401_UNAUTHORIZED)

6.2.2. Frontend Unit Tests (React)

Location: frontend/src/test/components/ and frontend/src/test/pages/

Test Count: ~15+ component tests

Coverage Areas:

  • Component Tests:

    • Navbar.test.tsx: Authentication state rendering, navigation links
    • ThemeToggle.test.tsx: Dark/light mode switching
    • Logo.test.tsx: Logo rendering and navigation
    • ProtectedRoute.test.tsx: Route access control
    • MainLayout.test.tsx: Layout structure
    • Footer.test.tsx: Footer content and links
    • FoodSelector.test.tsx: Food search and selection interface

  • Page Tests:

    • Login.test.tsx: Login form validation
    • Signup.test.tsx: Registration form validation
    • Home.test.tsx: Home page rendering
    • Foods.test.tsx: Food catalog display
    • Forum.test.tsx: Forum browsing interface
Why These Tests?

Rationale: Frontend unit tests ensure that individual React components render correctly, handle props appropriately, and manage state as expected. These tests run quickly and catch rendering bugs early in development, before integration with the backend.

User Scenarios Validated:

  • Authenticated users see personalized navigation (Home, Foods, Forum, Profile), while unauthenticated users only see Login/Signup
  • Form validation provides immediate feedback before submission (password strength, required fields, email format)
  • Theme preferences persist across page reloads
  • Protected routes redirect unauthenticated users to login

Potential Failure Points Addressed:

  • State Management: Components don't re-render when props change, authentication context not propagating
  • Conditional Rendering: Wrong UI elements shown based on authentication state
  • Event Handlers: Click handlers not firing, form submissions failing
  • Accessibility: Missing ARIA labels, improper focus management

Example Test Cases:

// Navbar.test.tsx
it('renders login and signup links when user is not authenticated', () => {
  vi.mocked(useAuth).mockReturnValue({
    isAuthenticated: false,
    ...otherMocks
  });
  render(<BrowserRouter><Navbar /></BrowserRouter>);
  
  expect(screen.getByText('Login')).toBeInTheDocument();
  expect(screen.getByText('Sign Up')).toBeInTheDocument();
  expect(screen.queryByText('Home')).not.toBeInTheDocument();
});

6.2.3. Mobile Unit Tests (React Native)

Location: mobile/nutrihub/__tests__/

Test Count: ~28 test files

Coverage Areas:

  • Component Tests:

    • Button.test.tsx: Button rendering and interactions
    • TextInput.test.tsx: Text input validation and formatting
    • MacronutrientCard.test.tsx: Nutrition display components
    • MicronutrientPanel.test.tsx: Detailed nutrition panels
    • FoodDetailMicronutrients.test.tsx: Food detail nutrition rendering

  • Screen Tests:

    • HomeScreen.test.tsx: Home screen rendering and navigation
    • LoginScreen.test.tsx: Login screen functionality
    • NutritionTrackingScreen.test.tsx: Nutrition tracking interface
    • FoodCompareScreen.test.tsx: Food comparison features
    • FollowersListScreen.test.tsx / FollowingListScreen.test.tsx: Social features
    • ProposeFoodModal.test.tsx: Food proposal submission

  • Service Tests:

    • api-client.test.ts: API client implementation
    • auth.service.test.ts: Authentication service
    • forum.service.test.ts: Forum service
    • feed.service.test.ts: Feed service
    • user.service.test.ts: User management service
    • nutrition.service.test.ts: Nutrition tracking service

  • Utility Tests:

    • nutritionHelpers.test.ts: Nutrition calculation helpers
    • priceUtils.test.ts: Price formatting and category utilities
    • useForm.test.ts: Form validation hooks
    • useFoodFilters.priceCategory.test.ts: Food filtering logic

  • Context Tests:

    • AuthContext.test.tsx: Authentication state management
Why These Tests?

Rationale: Mobile unit tests are critical because mobile apps operate in unpredictable network conditions and device environments. These tests ensure the app handles offline states, network errors, and device-specific quirks gracefully. Service layer tests are particularly important as they mock API responses, allowing us to test error handling without relying on backend availability.

User Scenarios Validated:

  • Users can log in and authentication tokens are securely stored in AsyncStorage
  • Food comparison shows accurate nutritional differences between two foods
  • Nutrition tracking calculations correctly sum daily macros/micros across meals
  • Food filters by price category ($, $$, $$$) work correctly
  • Error states display helpful messages when network requests fail

Potential Failure Points Addressed:

  • Network Failures: API timeouts, connection errors, malformed responses
  • State Persistence: AsyncStorage failures, token expiration
  • Device Compatibility: Different screen sizes, font scaling, accessibility settings
  • Data Transformation: Incorrect mapping of API responses to UI models
  • Offline Behavior: App crashes when offline, data not cached

Example Test Cases:

// auth.service.test.ts
it('should handle login and store tokens in AsyncStorage', async () => {
  const mockResponse = { access: 'token123', refresh: 'refresh123' };
  (axios.post as jest.Mock).mockResolvedValueOnce({ data: mockResponse });
  
  await authService.login('user', 'pass');
  
  expect(AsyncStorage.setItem).toHaveBeenCalledWith('access_token', 'token123');
});

// priceUtils.test.ts
it('should categorize price correctly as $ when below budget threshold', () => {
  const price = 1.50;
  const category = getPriceCategory(price);
  expect(category).toBe('$');
});

6.3. Integration Tests

6.3.1. Backend API Integration Tests

Location: backend/*/tests/

Test Count: ~40+ integration tests (within the same test files as unit tests)

Coverage Areas:

  • Authentication Flow: Login → Token generation → Protected endpoint access
  • Food Proposal Workflow: Submit proposal → Admin review → Approval → Entry in catalog
  • Forum Interactions: Create post → Add comments → Like/unlike → Delete
  • Follow System: Follow user → View follower feed → Unfollow
  • Meal Planner: Add food to meal plan → Calculate daily nutrition → Update targets
  • External API Integration: FatSecret API search, Open Food Facts nutrition lookup, TheMealDB random meals
Why These Tests?

Rationale: Integration tests verify that multiple components work together correctly. In the backend, this means testing entire API request/response cycles, database transactions, and third-party service interactions. These tests catch issues that unit tests miss, such as serialization errors, database constraint violations, and incorrect API contracts.

User Scenarios Validated:

  • A user can register, log in, propose a food, have it approved, and then find it in the catalog (full user journey)
  • Creating a post with tags correctly associates those tags and makes the post searchable by tag
  • Following a user updates both the follower's "following" list and the followed user's "followers" list atomically
  • Adding a food to the meal planner correctly fetches nutrition data and updates daily totals
  • External API failures don't cause data corruption or partial state

Potential Failure Points Addressed:

  • Transaction Integrity: Database rollbacks on errors, orphaned records
  • API Contract Violations: Frontend expects field X, backend returns field Y
  • Race Conditions: Concurrent likes/unlikes, simultaneous post edits
  • External Dependencies: Third-party API rate limits, schema changes, downtime

Example Test Cases:

# foods/tests.py
def test_success_fetch_creates_and_returns_food(self, mock_image_url, mock_extract, mock_make):
    """When the FatSecret API returns valid data, create a new FoodProposal."""
    mock_make.side_effect = [
        {"foods": {"food": [{"food_id": "123"}]}},
        {"food": {"food_url": "http://example.com"}},
    ]
    parsed_data = {
        "food_name": "Banana",
        "calories": 89.0,
        # ... nutrition data
    }
    mock_extract.return_value = parsed_data
    
    response = self.client.get(self.url, {"name": "Banana"})
    
    self.assertEqual(response.status_code, status.HTTP_201_CREATED)
    food = FoodProposal.objects.get(name="Banana")
    self.assertEqual(food.proposedBy, self.user)

6.4. End-to-End (E2E) Tests

6.4.1. Frontend Selenium E2E Tests

Location: frontend/src/test/selenium/

Test Count: ~177 test cases across 17 test files

Execution Time: ~3-5 minutes (full suite)

Framework: Vitest + Selenium WebDriver + Chrome (headless)

Coverage Areas:

6.4.1.1. Authentication & Authorization (2 files, 10 tests)

  • Login.selenium.test.ts

    • Login form validation (empty fields, incorrect credentials)
    • Password visibility toggle
    • Successful login redirects to home
    • Sign-up navigation link

  • Signup.selenium.test.ts

    • Registration form validation
    • Password strength indicators
    • Password match validation
    • Successful registration flow
6.4.1.2. Social Features (1 file, 10 tests)
  • FollowSystem.selenium.test.ts
    • Follow/unfollow button display on user profiles
    • Follower count updates after following
    • Success messages after follow/unfollow
    • No follow button on own profile
    • Navigation to user profile from post author link
6.4.1.3. Forum & Posts (5 files, 58 tests)
  • Forum.selenium.test.ts: Forum browsing, search, filters, pagination
  • CreatePost.selenium.test.ts: Post creation form, validation, recipe vs regular posts
  • PostDetail.selenium.test.ts: Post detail view, comments, author info, tags
  • PostInteraction.selenium.test.ts: Like/unlike, comment count, share functionality
  • RecipeCreation.selenium.test.ts: Recipe-specific fields (ingredients, instructions, cooking time)
6.4.1.4. Foods (3 files, 38 tests)
  • Foods.selenium.test.ts: Food catalog browsing, search, filters
  • FoodDetail.selenium.test.ts: Food detail page, nutrition info, serving sizes
  • FoodProposal.selenium.test.ts: Food proposal submission form
  • FoodCompare.selenium.test.ts: Side-by-side food comparison
6.4.1.5. Nutrition Tracking (2 files)
  • NutritionTracking.selenium.test.ts: Daily nutrition log, target tracking
  • NutrientHelpButtons.selenium.test.ts: Nutrition information tooltips
6.4.1.6. Meal Planner (2 files, 31 tests)
  • MealPlanner.selenium.test.ts: Calendar view, meal sections, nutrition summaries
  • MealPlannerActions.selenium.test.ts: Adding/removing meals, copying meals to other days
6.4.1.7. Profile (1 file, 10 tests)
  • Profile.selenium.test.ts: Profile viewing, editing, image upload, user stats
6.4.1.8. Navigation & UI (2 files, 13 tests)
  • Navigation.selenium.test.ts: Navbar links, logo navigation, footer
  • ThemeToggle.selenium.test.ts: Dark/light mode toggle, persistence
6.4.1.9. User Flows (1 file, 14 tests)
  • UserFlow.selenium.test.ts: Multi-page journeys (signup → login → browse → create post)
Why These Tests?

Rationale: E2E tests simulate real user interactions in an actual browser, catching issues that unit and integration tests miss. They validate the entire stack working together—frontend JavaScript, backend APIs, database, authentication, and third-party services. These tests are our highest-confidence validation that the application works as users will experience it.

User Scenarios Validated:

  • New User Onboarding: A user can register, log in, browse foods, create a meal plan, and post in the forum without encountering broken links or error pages
  • Content Creation Flow: A user can create a recipe post with ingredients, publish it, and see it appear in the forum with correct formatting
  • Social Interactions: A user can follow another user, like their posts, comment, and see real-time updates
  • Food Discovery: A user can search for a food, compare it with alternatives, view detailed nutrition, and add it to their meal plan
  • Nutrition Tracking: A user can set nutrition targets, log meals, and see daily progress visualizations

Potential Failure Points Addressed:

  • Client-Side Routing: Broken navigation links, incorrect redirects, missing route guards
  • State Management: Component state not syncing with URL params, lost state on page refresh
  • Asynchronous Loading: Loading states not shown, race conditions in data fetching
  • Form Submissions: Forms successfully validate client-side but fail on server-side
  • Cross-Page Interactions: Data created on one page not visible on another

Example Test Cases:

// UserFlow.selenium.test.ts
it('should complete signup to login flow', async () => {
  await driver.get(`${defaultConfig.baseUrl}/signup`);
  // Fill registration form
  await driver.findElement(By.id('username')).sendKeys('newuser');
  await driver.findElement(By.id('password')).sendKeys('TestPass123!');
  await driver.findElement(By.id('submit')).click();
  
  await driver.sleep(1500); // Wait for redirect
  
  // Verify redirect to login
  const currentUrl = await driver.getCurrentUrl();
  expect(currentUrl).toContain('/login');
}, 15000);

// FoodDetail.selenium.test.ts
it('should add food to meal planner from detail page', async () => {
  await driver.get(`${defaultConfig.baseUrl}/foods`);
  const foodCard = await driver.findElement(By.css('.food-card'));
  await foodCard.click();
  
  const addButton = await driver.findElement(By.xpath("//button[contains(., 'Add to Meal Planner')]"));
  await addButton.click();
  
  // Meal planner modal should open
  const modal = await driver.findElements(By.css('.meal-planner-modal'));
  expect(modal.length).toBeGreaterThan(0);
});

Test Execution Strategy:

  • Headless Mode: Tests run in headless Chrome for CI/CD pipelines
  • Visual Mode: Non-headless mode available for debugging (set headless: false in selenium.config.ts)
  • Parallel Execution: Tests designed to run independently for potential parallelization
  • Graceful Handling: Lenient assertions account for dynamic content and asynchronous operations

6.5. UI/UX Tests

6.5.1. Task-Based Usability Testing

Participant: Fatih (Computer Engineering student, Boğaziçi University)

Method: Task-based testing with think-aloud protocol

Format: Dialogue-based observation

Platforms Tested: Web application and mobile app

Test Sessions Overview

We conducted comprehensive usability testing sessions where Fatih, an external user unfamiliar with NutriHub, was given specific tasks to complete while we observed his interactions, documented friction points, and recorded his verbal feedback. This testing method uncovered critical UX issues that automated tests cannot detect. Here are some example sessions for our UX tests.

Session 1: Navigation and Feature Discovery

Task: "Explore the NutriHub platform and describe what you think each feature does."

Observations:

Tester (Us): "Welcome to NutriHub. Please take a moment to explore the interface and tell us what you see."

Fatih: "Okay, I see a homepage with... let me see... there's a navbar at the top. I can see 'Foods', 'Forum', and 'Meal Planner'. Pretty straightforward. The layout looks clean."

Tester: "What do you think each of these sections does?"

Fatih: "Well, 'Foods' is probably where I can browse different foods and their nutrition info. 'Forum' must be for community discussions, maybe recipes? And 'Meal Planner' is likely for planning my meals for the week."

Tester: "Great. Can you tell us your first impressions of the design?"

Fatih: "It looks modern. I like the color scheme. The cards for foods are visually appealing with the images. The dark mode toggle is nice—I prefer dark themes. Overall, it feels premium, not like a basic student project."

Key Findings:

  • ✅ Success: Feature discovery was intuitive; Fatih immediately understood the purpose of major sections
  • ✅ Success: Visual design received positive feedback; felt "modern" and "premium"
  • ✅ Success: Dark mode toggle was discovered and appreciated
  • 🟡 Observation: Fatih initially didn't notice the nutrition tracking feature (addressed in Session 2)
Session 2: Nutrition Tracking Discovery

Task: "You want to track your daily nutrition intake. Where would you go to do this?"

Observations:

Fatih: "Hmm, nutrition tracking... I'd probably check the 'Meal Planner' first since that's related to food planning."

Fatih navigates to Meal Planner

Fatih: "Okay, I can add meals here, but I don't see a place to track nutrition specifically. Let me check..."

Fatih looks around the navbar and experiences difficulty in locating the Nutrition Tracker

Tester: "Wait, is it in my profile maybe?"

Fatih clicks on his profile after a while

Fatih: "Ah, here it is! 'Nutrition Tracker' is inside the profile page. Interesting... I wouldn't have expected it here."

Key Findings:

  • ❌ Critical Issue: Nutrition tracking was difficult to discover
  • ❌ UX Flaw: Placement in profile felt "unnatural" and "hidden". Nutrition tracking is a core feature, not a profile setting, we should reflect that in the UI placement as well.
  • 📊 Impact: Users may not use nutrition tracking if they can't find it easily

Action Taken: Based on this feedback, we made significant changes:

  • Web App (Completed): Moved nutrition tracking to the top navigation bar, making it a first-class feature alongside Foods, Forum, and Meal Planner
  • Mobile App (Planned): Moving nutrition tracking from profile tab to the bottom navigation menu for easier access

Post-Change Validation: After implementing the change on web, we asked Fatih to repeat the task:

Fatih: "Oh wow, now it's right there in the navbar! That's way better. I would definitely find this immediately now. Much more intuitive."

Session 3: Food Search and Comparison

Task: "Find a food item with high protein content and compare it with alternatives."

Observations:

Fatih: "Alright, I'll go to 'Foods'. There's a search bar here... let me search for 'chicken breast'."

Fatih types "chicken breast" in the search

Fatih: "Good, several results came up. I can see the protein content on the cards—nice! This one has 31g of protein per 100g. Now, how do I compare it with others?"

Fatih looks for a comparison feature

Fatih: "I don't see a 'Compare' button on the cards. Let me click on the food detail first."

Fatih clicks on a food card

Fatih: "Okay, detailed nutrition info. This is great—I can see macros, it says 165 calories, 31g protein. But still no comparison button. Let me go back."

Fatih returns to the food list

Fatih: "Wait, I see checkboxes on the food cards! Are these for selecting items to compare?"

Fatih selects two food items

Fatih: "Ah yes! A 'Compare Selected Foods' button appeared at the bottom. Nice, that's intuitive once you know it's there."

Fatih clicks the compare button

Fatih: "Perfect! Side-by-side comparison with all the nutritional differences highlighted. This is really useful. I can see chicken breast has more protein but turkey breast has fewer calories."

Key Findings:

  • ✅ Success: Food search worked immediately without confusion
  • ✅ Success: Nutrition information was clear and well-presented on cards
  • ✅ Success: Comparison feature was discoverable with checkbox selection pattern
  • 🟡 Minor Issue: Fatih didn't initially notice the checkboxes; a brief tooltip or onboarding message could help
  • ✅ Success: Side-by-side comparison view was praised as "really useful"

6.5.2. UI/UX Testing Summary

Why Task-Based Testing?

Rationale: Automated tests can verify that buttons click and forms submit, but they cannot evaluate whether the user interface is intuitive, whether features are discoverable, or whether the user experience feels natural. Task-based testing with an external participant (Fatih) provided invaluable insights into real-world usability that no amount of Selenium testing could reveal.

User Scenarios Validated:

  • First-Time User Experience: Can a new user navigate the app without training or documentation?
  • Feature Discoverability: Are core features visible and easy to find?
  • Workflow Completion: Can users complete common tasks (create post, plan meals, track nutrition) without confusion?
  • Cross-Platform Consistency: Do web and mobile feel like the same product?

6.6. Testing Metrics and Coverage

Test Suite Statistics

Test Category Platform Test Count Execution Time
Backend Unit Tests Django ~40+ ~2-3 minutes
Backend Integration Tests Django ~40+ ~3-4 minutes
Frontend Unit Tests React ~15+ ~10-15 seconds
Frontend E2E Tests Selenium ~177 ~3-5 minutes
Mobile Unit Tests React Native ~28 files ~30-40 seconds
UI/UX Tests Manual ~8 sessions ~2 hours total

6.7. Testing Workflow

Our tests are integrated into our development workflow:

  1. Pre-Commit Hooks: Backend code formatting (Black) runs before commits
  2. Pull Request Validation: All unit and integration tests must pass before PR merge
  3. Automated E2E Tests: Selenium tests run in headless mode on staging deployments
  4. Manual UI/UX Testing: Conducted periodically with external users before major releases

Test Execution Commands

# Backend Tests
cd backend
python manage.py test                    # All backend tests
python manage.py test foods              # Foods module tests
python manage.py test accounts.tests.test_follow  # Specific test file

# Frontend Unit Tests
cd frontend
npm test                                 # All unit tests
npm test -- src/test/components/Navbar.test.tsx  # Specific test

# Frontend E2E Tests
npm run dev                              # Start dev server
npm test -- src/test/selenium            # All E2E tests
npm test -- src/test/selenium/Login.selenium.test.ts  # Specific E2E test

# Mobile Tests
cd mobile/nutrihub
npm test                                 # All mobile tests
npm test -- --coverage                   # With coverage report

7. The Software (Pre-Release)

Release Name: 0.2.0-beta Tag Name: customer-milestone-2_cmpe451-fall2025 Release Description: [Brief description of requirements covered]

  • Web App Instructions: [Link to README section or Docker-compose file]
  • Mobile App Instructions: [Link to README section or Dockerfile location]

Note: Ensure root README contains step-by-step instructions for building both Web and Mobile apps using Docker.

8. Individual Contributions

This section includes personal contributions between Customer Milestone 1 and Customer Milestone 2. Please substantiate all reported work with necessary references (e.g., Pull Requests, Issues) on GitHub. Subsections are sorted by surname.

Akın, Yusuf

Responsibilities:

  1. DevOps and deployment:

    • Managed the deployment of both web and mobile applications.
    • Implemented CI/CD workflows to improve development safety and reliability, including Django unit tests and APK build automation.
    • Handled database migrations carefully to keep production data intact while applying updates.
    • Dockerized mobile builds and maintained docker-compose configuration with environment variables for reproducible deployments.

  2. Backend-Frontend Coordination:

    • Coordinated backend and frontend interaction, reporting frontend bugs, pointing missing endpoints, and addressing optimization problems.
    • Implemented new management endpoints and fixed access restrictions issues using token-based authentication for certificates and other sensitive media.

Main Contributions:

  1. Implemented a moderation backend and integrated it with the web frontend to allow content management for accounts, foods, and forum posts.

  2. Redesigned the backend for media file access (profile images, foods, certificates), enabling:

    • Food image caching to improve frontend performance.
    • Access control for sensitive media like certificates.
    • Better scalability and maintainability for media storage.

Significant Issues:

Pull Requests Created, Merged, or Reviewed:

  • Created:
  • #548 – Fixed certificate verification logic with new user-tag relationship.
  • #564 – Added token-based access control for media files (profile pictures and certificates), closing #550.
  • #612 – Implemented food image caching system, closing #551 and #556.
  • #605 – Removed redundant hooks slowing down food load times.
  • #570 – Fixed missing badges field in profile serializer, closing #569.
  • #624 – Implemented moderation endpoints for accounts, foods, and forum; refactored frontend to use these endpoints.
  • #626 – Added Django test CI workflow.
  • #672 – Dockerized mobile app build.
  • #660 – Refactored docker-compose.yaml to use environment variables with .env.example file and updated README instructions.
  • Reviewed:
  • #625 – Reviewed and pointed out failing tests, later fixed.
  • #619 & #618 – Code reviews.
  • #568 – Reviewed backend integration issues; later addressed in #624.
  • #652 – Reviewed new FNDDS DB integration, fixing migration issues.

Conflict Summary:

  • Mainly migration issues occurred, as two PRs made changes to the same model. These were resolved easily because the features were generally exclusive. Maintaining a linear history and separating parallel, workable tasks also reduced the number of conflicts.
  • No significant merge conflicts were encountered except for #570 (closing #569), which involved a minor issue with the badge serializer, likely introduced after a previous merge.

Additional Information:

  • Conducted performance profiling for web frontend and optimized image and API requests.
  • Provided mentorship and guidance to frontend team on integrating backend endpoints efficiently.
  • Ensured all deployments and CI/CD processes adhered to best practices for production stability.

Başar, Nuri

  • Responsibilities: As a member of the team, I took charge of tracking issues and PRs, coordinated requirements updates, oversaw the moderation interface development and price‑and‑budget logic, and ensured issues and pull requests were properly created, documented and tracked. I also wrote the “Project Deliverables List and Requirements Progress” section of the Customer Milestone 2 report. In addition, I monitored teammates’ progress and maintained the tracking report process.

  • Main contributions:

  • Requirements and design updates: Updated requirements to include budget and micronutrient details #577 and refined the food comparison feature #587 based on customer feedback; subsequently closed these issues after revisions.

  • Moderation interface: Implemented a protected web‑based moderation panel and corresponding backend endpoints #568 via PR #568, ensuring staff‑only access and consistent UI/UX.

  • Price & budget logic: Led the backend implementation for price and budget categories #608 via PR #641, extending models with price fields, computing tertile‑based categories and exposing moderator‑only API endpoints.

  • Reporting & coordination: Maintained weekly tracking reports, monitored repository activity, and ensured tasks and issues were recorded and reviewed

Significant issues:

Code‑related:

  • Implement Price & Budget Category (Backend) #608 via PR #641 – Added price fields and automatic price‑category calculation, extended models and implemented moderator‑only API endpoints
  • Implemented Protected Moderation Webpage #568 via PR #568 – Developed a staff‑only moderation panel and APIs, porting Django admin features to the React frontend.
  • Add Budget & Micronutrient Details #577 – Updated food catalog requirements and design to include budget and micronutrient information
  • Mobile improvements: Fixed the mobile feed bug through PR #708by introducing pagination to the getFeed() API and implementing infinite scroll, aligning the mobile experience with the web version.

Non‑code‑related:

  • Demo Data Strategy #636 – Designed a detailed demo data strategy for the MVP, identifying data sources and schema changes.
  • Update Food Comparison Requirements #587 – Refined requirements and design for comparing food items based on client feedback.
  • Reporting & coordination: Maintained weekly tracking reports, monitored repository activity, and ensured tasks and issues were recorded and reviewed.

Pull requests that you have created, merged or reviewed:

Created: #641 – Pricing logic and price moderation

Merged: #641.

Bilen, Berkay

Responsibilities:
Responsible for backend feature development including nutrition tracking and private food endpoints, database schema refinement, backend test maintenance, API design, and participation in moderation planning and demo preparation. Also contributed to pricing-related research and integration of external datasets with system reliability improvements.

Main contributions:
Between Customer Milestone 1 and 2, I implemented the full nutrition tracking module, private food endpoints, and contributed to test coverage improvements by fixing broken tests and adding new ones. I reviewed critical backend PRs, resolved migration and schema inconsistencies, and contributed to the initial integration work for the FNDSS dataset. Additionally, I supported moderation feature planning, researched micronutrients, and helped prepare a consistent demo data strategy.

Significant issues:
Only the most significant top 3 per category are included.

  • Code-related:

    1. Nutrition Tracking Backend Implementation (#583) — Implemented all nutrition-tracking endpoints and designed related models.
    2. Private Food Endpoints (#675) — Added private food functionality and updated associated backend structures.
    3. Fixing Broken and Missing Unit Tests (#573) — Identified failing tests after recent merges, fixed them, and added missing cases.

  • Non-code-related:

    1. Demo Data Strategy Preparation (#636) — Co-designed a demonstrable and consistent demo data strategy.
    2. Moderation Feature Planning & Acceptance Test Plan (#559) — Contributed to planning discussions and authored the acceptance test section.
    3. Micronutrient Research (#615) — Conducted research and provided input on micronutrient taxonomy and dataset alignment.

Pull requests that you have created, merged, or reviewed

  • Created:

    • Nutrition tracking implementation — #646
    • Private food endpoints — #665
    • Additional backend test cases — #625

  • Reviewed:

  • Conflict Summary (if applicable):
    Encountered schema and migration conflicts during the pricing feature integration (PR #641). These were resolved by regenerating inconsistent migrations, fixing model dependencies, and ensuring schema compatibility across updated models.

Additional information:

  • Contributed to refining database schemas and initiating the integration of the FNDSS dataset by parsing multiple CSVs and preparing a unified food database structure (Issue #615). Although, the full schema migration could not be completed before the MVP deadline due to its broad effect on the system, the effort will help us for schema refinement in final relase.

Bilsel, Fatih Furkan

Responsibilities:
Backend feature development, requirements update, report preparation.

Main Contributions:
Contributed to backend reporting, badge system, social features (follow & feed), and refinement of Nutrition Score requirements.

Significant issues:

  • Code-related:

    1. Backend Report Functionality — #561
      Implemented the full report generation and return logic on the backend.

    2. Badge System Backend Support — #563
      Added backend-level badge handling capabilities.

    3. Follow/Unfollow + Forum Feed Implementation — #618, #619
      Developed social features and feed aggregation logic.

  • Non-code-related:

    1. Nutrition Score Requirement Refinement — #588
      Created and updated issues defining serving-size vs. 100g score rules.

    2. Created Subtask for Nutrition Score Display
      Added follow-up issue for UI/logic clarification on displaying both score types.

    3. Contributed to MVP Report (Backend Testing Strategy)
      Assisted preparation of the testing section during lab.

  • Created / Merged:

    • Report functionality — #561

    • Badge backend support — #563

    • Follow/unfollow functionality — #618

    • Forum feed implementation — #619

  • Reviewed:

Additional information:

Damar, Mete

Responsibilities:

A general description of the responsibilities assigned to you

Main contributions:

The overall description of your contributions to the project until Customer Milestone 2.

Significant issues:

Only share most significant top 3 issues per category (sharing more will result in a grade penalty).

  • Code-related:

    1. [Issue Title] (#IssueNumber) - [Brief explanation]
    2. ...
    3. ... (Max 3)

  • Non-code-related:

    1. [Issue Title] (#IssueNumber) - [Brief explanation]
    2. ...
    3. ... (Max 3)

Pull requests that you have created, merged, or reviewed

  • Created: [Link #1], [Link #2]
  • Merged: [Link #1], [Link #2]
  • Reviewed: [Link #1], [Link #2]
  • Conflict Summary (if applicable): Briefly summarize conflicts along with how they were resolved.

Additional information:

Mention any additional significant task you have performed that is not listed above.

Göktaş, Berk

Responsibilities: I acted as a core Frontend Developer with a focus on two primary modules: the Social Network / Forum ecosystem and the Food/Nutrition Catalog. My responsibilities involved building the interactive user feed and follow mechanisms for the frontend, implementing proposal forms for detailed food proposals (including micronutrients), and visualizing the application's core feature—the Nutrition Score. I was also responsible for maintaining frontend code quality through urgent bug fixes and documenting the mathematical logic behind our scoring algorithms in the app.

Main contributions: Between CM1 and CM2, I focused on transforming the application from a static tracker into a social platform. I implemented the User Feed and Follow/Unfollow features, allowing users to interact with the community. On the nutrition side, I enhanced the Food Proposal flow to support granular micronutrient data, ensuring our database grows with high-quality entries. I also developed the Nutrition Score UI, creating a toggleable view for "Serving Size" vs. "100g" to improve user context. Additionally, I addressed critical technical debt by fixing duplicate imports, resolving urgent privacy issues regarding user profile data and fixing a mistake where the button feature was accidentally removed.

Significant issues:

Code-related:

  • #592 & #628 Social (Forum + Profile): User Feed and Forum Follow Frontend Implementation I implemented the frontend logic to fetch and render user activities, effectively creating the main social hub of the application.
  • [#549] Explain nutrition score calculation logic I implemented the dynamic UI that calculates and displays the nutrition score, allowing users to toggle between standard serving sizes and normalized 100g views.
  • [#596] Implement Nutrition Help Button (Frontend) I implemented the button that calculates and displays the macronutrient values considering the foods consumed in the nutrition tracker, allowing users to check the limits of their macronutrients and get warnings if they exceed their goal or daily maximum.

Non-code-related:

  • #745 Writing Milestone 2 Report - Summary of the Customer Feedback and Reflections I authored the technical documentation detailing the feedbacks and resulting reflections.
  • #746 Creating mock posts and arranging nutrition values for the demo I generated and structured mock data to populate the forum and feed, ensuring the social features were demonstrable during the milestone presentation. I also selected specific foods to add to the nutrition tracker to demonstrate our new warning system in the demo.

Pull requests that you have created, merged, or reviewed:

Conflict Resolution: I experienced minor conflicts regarding duplicate imports in the utility files, which led to build warnings (addressed in PR #722). This was caused by concurrent merges of new features that utilized similar libraries. Additionally, during a merge of the UI beautification branch, specific micronutrient selection buttons were accidentally overwritten/removed; I detected this regression and resolved it by restoring the missing components in PR #724.

Additional information: I performed a comprehensive review of the features we have, and reflected on the feedback given from the CM2 through commenting on our action steps and generating new feature ideas that are approved by Suzan Hoca.

Keleş, Hasancan

Responsibilities:
I focused on designing and implementing the multi-ingredient search experience across backend, web, and mobile platforms, enabling users to find relevant forum posts based on one or more food items. I also worked on fuzzy-matching improvements, contributed to requirement updates for accessibility and search precision, documented milestone goals, and participated in the demo preparation as one of the presenters. Additionally, I supported the team by reviewing and merging several PRs related to mobile functionality and backend–mobile integration.

Main contributions

Between CM1 and CM2, my primary contributions centered on transforming the forum search system from a simple exact-match workflow into a multi-ingredient, cross-platform search pipeline:

  • Implemented the backend logic for ingredient-based and multi-ingredient forum search (#579).
  • Integrated the feature into the web frontend, designing UI flows and updating API usage (#661).
  • Completed the mobile implementation of the multi-ingredient search for parity with the web version (#677).
  • Developed fuzzy matching to improve search relevance by accepting approximate ingredient names (#633).
  • Updated milestone documentation (MVP goals) through issue #555 and prepared the meeting notes (#554).
  • Participated in the demo presentation as one of the presenters.

Significant issues

Code-related (Top 3)

  1. Searching Forum Posts by Multiple Food Items (Web) — #661
    Implemented the complete multi-ingredient search flow on the web application.

  2. Searching Forum Posts by Multiple Food Items (Mobile) — #677
    Added mobile-side multi-ingredient search UI and filtering logic.

  3. Searching by Food Item – Backend Implementation — #579
    Implemented backend filtering, query parsing, and ingredient-matching logic.

Non-code-related (Top 3)

  1. Documenting MVP goals — #555
    Authored and organized milestone goals for CM2.

  2. Meeting Notes — #554
    Prepared detailed meeting notes that aligned CM2 development priorities.

  3. Searching by Food Item – Feature Definition — #575
    Helped define the cross-platform scope for ingredient-based search.

Pull requests that I have created, merged, or reviewed

Created

  • #678 — Multi-ingredient search for mobile.
  • #662 — Multi-ingredient search for web frontend.
  • #635 — Mobile implementation of single-ingredient search (#582).
  • #634 — Web implementation of ingredient search (#581).
  • #633 — Fuzzy matching improvements for ingredient search.

Reviewed / Merged

  • #690 — Reviewed & merged UI alignment and mobile fixes.
  • #649 — Reviewed backend–mobile integration consistency.
  • #576 — Reviewed & merged mobile enhancement PR.

Conflict Summary

Minor merge conflicts occurred during multi-ingredient search integration due to overlapping backend–frontend updates. These were resolved by unifying API parameters and consolidating shared search utilities so both web and mobile used consistent logic. No major blocking conflicts were encountered.

Additional information

  • Participated in demo presentation preparation and served as one of the presenters.
  • Ensured backend, web, and mobile search flows behaved consistently across platforms.
  • Supported teammates by reviewing related PRs and giving feedback on search-related features.

Küçük, Onur

Responsibilities:

I was mainly responsible for developing the mobile application using React Native (Expo SDK), integrating backend APIs to support mobile features, and delivering the end-to-end implementation of the Nutrition Tracking feature. I also worked on the development of the Price Categorization system, enhanced User Profile metrics, improved the testing infrastructure (including Selenium E2E tests for the frontend and Jest/unit/UI tests for mobile), and contributed to overall UI/UX improvements and feature refinements.

Main contributions:

I implemented the complete Nutrition Tracking feature on mobile, including daily and weekly views, food entry management, micronutrient tracking, and editable user metrics, supported by full test coverage. I developed the Price Category system ($, $$, $$$) for mobile, covering category assignment, filtering logic, and critical bug fixes. I enhanced the User Profile section by adding editable metrics, my posts section and improving overall navigation flow. I integrated multiple backend endpoints into the mobile app, including food catalog filtering, liked posts, and all Nutrition Tracking–related APIs. I strengthened the testing infrastructure by creating comprehensive test suites—E2E tests for the frontend (Selenium) and Jest-based unit tests for nutrition tracking, price categories, and key mobile screens. Additionally, I delivered several UI/UX improvements, such as clearer visual hierarchy, improved card layouts, informational modals for nutrition indicators, refined formatting for edge cases, and fixes for header spacing inconsistencies.

Significant issues:

Saygan, Arda

Responsibilities: Project Lead, communication with customers, food comparison in frontend, enhancing database with micronutrients

Main contributions: I found a new database that enhanced our current food catalog in terms of quantity and detail of food items. This helped us include micronutrients data to our foods. I integrated this new database and updated some of the features, such as food catalog to show micronutrients as well. I also added screens for food comparison, improved admin panel page, and fixed the logic for food proposal.

Significant issues:

Pull requests that you have created, merged, or reviewed

Additional information: I practiced on demo presentation and populated the data that will be shown in the presentation.

Yazıcı, Yusuf Anıl

Responsibilities: As the resident front-end nerd, I focused on polishing the web app's look and feel across pages, making sure our UI stayed slick on both mobile and desktop. I also jumped in on a few backend data tasks and mobile bugs when they came up.

Main contributions: Throughout this milestone, I gave the profile and feed pages a glow-up by fixing misaligned cards and tidying up unused elements. I swapped the Meal Planner link with Nutrition Tracking in the navbar so users can find tracking without digging through their profile. I squashed several mobile bugs including fixed follower counts on mobile profiles, sorted out image loading by proxying image URLs and linking images correctly, and cleaned up progress bars in the food-comparison UI. I added price-tag data to our food database so foods could be filtered by cost, writing a migration script and syncing this to the UI. I helped connect the nutrition tracking UI with the backend and built a dedicated UI for it, while also tweaking search algorithms, sorting issues, local timing bugs, log errors and rounding problems found during testing. I wrote up a front-end test coverage report and added several Selenium tests to protect the UI from regression. Finally, I supported the team during demo prep by providing UI mockups, helping testers, and polishing minor mobile layouts.

Significant issues:

  • Code-related:

    1. Fix comparison bugs - Adjusted the mobile food-comparison interface so radar charts and bars lined up correctly and added responsive styling.
    2. Beautify user page - Realigned the user profile layout and removed clutter; added proper spacing and card styling.
    3. Populate database with price tags - Added a backend migration and UI changes to assign price categories to foods, enabling cost-based sorting and filtering.

  • Non-code-related:

    1. Drafted a comprehensive test coverage report for the front-end.
    2. Participated in design feedback sessions and demo rehearsals; gathered and incorporated teammates' UX suggestions.
    3. Added notes to our planning doc on where the UI needed more polish for the final release.

Pull requests that you have created, merged, or reviewed #729, #727, #725, #717, #715, #713, #711, #707, #700, #683, #674, #671, #669, #667, #666, #657, #627, #576

Additional information:

Alongside my main front-end duties, I dabbled in backend migrations (price tags) and mobile bug-fixing. I also helped craft our demo narrative and ensured the interface matched our design guidelines.

Yüksel, Osman Selim

Responsibilities: Mobile Application Development (Frontend), User Interface (UI) Implementation, Feature Testing (Unit/Component), and ensuring high fidelity to UX design specifications. Focused on the Food and Nutrition comparison features.

Main contributions: The primary contribution during this milestone was the end-to-end implementation of the Food Comparison Feature and the enhancement of the Food Detail Modal by adding Micronutrient Display functionality on the mobile application. This involved designing and implementing several complex UI components, defining new data structures for API consumption, integrating with the backend service layer, and creating comprehensive unit tests for core logic.

Significant issues

  • Code-related:

    1. Implements Food Comparison Screen (#640): Resolved the feature request by developing the FoodCompareScreen and its complex sub-components (MacroRadarChart, NutritionCompare, FoodSelectorModal), including routing and state management for comparison logic (duplicate prevention, max-2 selection).
    2. Implements Micronutrients Display (#696): Resolved the requirement to show detailed micronutrient information in the FoodDetailModal.tsx. This required updating type definitions, service layer mapping, and implementing sorting/formatting logic for 26 priority micronutrients.
    3. Refactoring Food Navigation (#645): Resolved technical debt by restructuring the mobile application's navigation, replacing the single FoodScreen route with a dedicated FoodStackNavigator to support new features like comparison.

  • Non-code-related:

    1. Enhance Food Comparison with Micronutrients (Mobile) (#702) - Defined the requirements for full mobile comparison functionality, including specifying which vitamins/minerals to prioritize ("minerals that show significant differences") and defining the required data analysis scope (per 100g and per serving).
    2. Social (Forum + Profile): Badges for Good Tip Givers (#598) - Led the requirements definition for the Badges system, clearly outlining the acceptance criteria, badge levels/tiers (e.g., Silver, Gold, Expert), and the logic for earning/adjusting the badges before development began.

Pull requests that you have created, merged, or reviewed

  • Created:

    • Feat/629 follow mobile (#645) (Merged)
    • Feat/640 mobile for comparing food items (#644) (Merged)
    • Feat/696/mobile: Show micronutrients in food display (#701) (Merged)

  • Merged:

    • Mobile Feed Bug Solution (#708)
    • Adding price category badges (#710)

  • Reviewed:

    • Mobile Feed Bug Solution (#708)
    • Adding price category badges (#710)

  • Conflict Resolution: I encountered two conflicts while preparing pull requests. The first conflict involved changes to test coverage files generated outside the scope of my direct implementation. As these files are machine-generated and should not typically be committed manually, I resolved the conflict by strictly preserving the existing coverage file content, aligning with team practice to not submit changes on auto-generated files. The second conflict was a minor change in a comment captured by Git. This took about 15 minutes to identify as a non-substantive conflict, and I successfully resolved it by accepting the necessary comment modification.

Additional information:

  • Developed complex data visualization components, specifically the MacroRadarChart (circular progress rings) to visually represent macro comparison on the mobile platform.
  • Managed the mobile app's routing updates to allow for a scalable food navigation structure.
bounswe2025group9

📽️ Project

nutrihublogo

💻 Meeting Notes

⚙️ Lab Reports

🧱 Weekly Reports

Tracking Reports

Planning

Tracking Reports

Clone this wiki locally