This report outlines the progress, achievements, challenges, and reflections from the third and final milestone of our project. It also includes documentation, release notes, and individual contributions of team members.

• Completed Features:
  • User authentication and authorization
  • Question creation, editing, and viewing with code snippets
  • Tag system with following/unfollowing functionality
  • Bookmarking questions and bookmarked questions page
  • Question difficulty rating and filtering
  • Profile pages with reputation points and activity history
  • Search and filtering capabilities
  • Mobile application with core features
  • Accessibility improvements meeting WCAG AA standards
  • Deployment infrastructure with CI/CD pipelines
• Challenges:
  • API inconsistencies between frontend and backend requiring significant refactoring
  • Performance optimization for large datasets and concurrent users
  • Mobile-web feature parity maintenance
• Deviations:
  • Simplified recommendation system implementation due to time constraints
  • Postponed email verification to focus on core functionality
  • Modified feed implementation to focus on top-rated and recent content
  • Adjusted tag system to include basic Wikidata integration instead of full semantic search

• Release Version: 0.9.0
• Tag Name: customer-presentation-3
• Key Changes:
  • Added difficulty level filtering and rating for questions
  • Implemented code block preview and execution with timing information
  • Added bookmarking functionality and bookmarked questions page
  • Enhanced profile pages with reputation points, followed tags, questions and answers
  • Added tag following/unfollowing functionality
  • Implemented question search and filtering capabilities
  • Added glossary page and tag type pages
  • Enhanced question creation with code snippets and previews
  • Improved accessibility with screen reader support
  • Added default profile pictures
  • Implemented question editing functionality
  • Enhanced mobile experience with home page, profile page and question cards
  • Added sorting by followed users and recommended order
  • Fixed various bugs in tag details, bookmarks, and API responses
  • Improved overall UX with loading states and navigation

• Improved API Consistency and Functionality: As the group noticed some API behavior inconsistencies, the backend team focused on refining endpoints to ensure proper alignment with system requirements. These changes significantly reduced API errors and streamlined the frontend and mobile integrations. Examples include:

  • Fixing the GetTagDetails endpoint to ensure accurate "following" status (Issue #667).
  • Resolving issues with user-specific data retrievals, such as bookmarks and follower counts (Issues #630, #681).

• Focus on User Experience (UX) and Accessibility: The frontend team prioritized addressing UX and accessibility issues identified during testing and demo sessions. These efforts brought the application closer to compliance with WCAG 2.2 standards, improving user usability. Key improvements include:

  • Adding fallback images for missing profile pictures (Issue #679).
  • Fixing accessibility-related issues such as tab navigation and image alt text (Issue #644).
  • Implementing UX enhancements like code snippet previews and a smoother tag badge navigation experience (Issues #631, #687).

• Data-Driven Enhancements: To improve user engagement and personalization, the team introduced features leveraging backend capabilities. These changes provided a more tailored and functional user experience during demos:

  • Sorting questions based on top-rated or recent activity (Issue #662).
  • Implementing personalized question recommendations by prioritizing questions from followed users and tags (Issues #689, #627).
  • Adding mock data to simulate a realistic user experience (Issue #683).

• Improved Development and Testing Workflow: The team addressed critical workflow challenges, especially in testing and deployment. These improvements minimized bugs and provided clearer visibility into project status for all stakeholders:

  • Enhanced Test Coverage: Unit, integration, and system-level tests were generated for backend, frontend, and mobile components (Issue #686).
  • Final Release Notes: A structured process for summarizing updates and known issues was introduced for the final release (Issue #684).

• Streamlined Documentation The team adopted a more structured approach to documentation to ensure all artifacts were complete and accessible:

  • Documented all UX design decisions and user scenarios to highlight core functionalities (Issues #658, #689).

• Comments on Changes: These process improvements mainly had impact on the listed aspects of the project:

  • Reduced Integration Issues: Backend fixes and improved testing reduced friction for frontend and mobile teams.
  • Enhanced Customer Satisfaction: UX improvements addressed critical customer feedback from the previous demo.
  • Faster Development Cycles: A cleaner workflow and focused documentation minimized delays caused by unclear requirements or technical debt.

Customer feedback can be reached from here.

• What Went Well:
  • Summarize successful aspects of the demo.
• Challenges and Improvements:
  • Describe challenges faced during the demo and lessons learned.
• What Could Be Done Differently:
  • Highlight areas where changes at the start could have streamlined the process.

• API Documentation: Link to API Docs
• Link to API: Link to API
• Example Endpoints:

Endpoint: POST /api/v1/auth/login URL: https://programming-languages-forum-psrb6.ondigitalocean.app/api/v1/auth/login Content-Type: application/json

Request Body:

{
    "usernameOrEmail": "[email protected]",
    "password": "yourpassword123"
}

Sample Response (200 OK):

{
    "status": 200,
    "data": {
        "token": "eyJhbGciOiJIUzI1NiIs..."
    }
}

How to test: Using cURL

curl -X POST \
  https://programming-languages-forum-psrb6.ondigitalocean.app/api/v1/auth/login \
  -H 'Content-Type: application/json' \
  -d '{
    "usernameOrEmail": "[email protected]",
    "password": "yourpassword123"
}'

Endpoint: POST /api/v1/questions URL: https://programming-languages-forum-psrb6.ondigitalocean.app/api/v1/questions Content-Type: application/json Authorization: Bearer Token (obtained from login)

Request Body:

{
    "title": "How to implement a binary search tree in Python?",
    "content": "I'm trying to implement a binary search tree in Python but struggling with the insertion method. Can someone explain the basic approach?",
    "tagIds": [1, 2]  // Tag IDs for relevant topics (e.g., "python", "data-structures")
}

Sample Response (201 Created):

{
  "status": 200,
  "message": "Question created successfully",
  "data": {
    "id": 42,
    "title": "How to implement a binary search tree in Python?",
    "content": "Im trying to implement a binary search tree in Python but struggling with the insertion method. Can someone explain the basic approach?",
    "difficulty": null,
    "author": {
      "id": 2,
      "username": "mmtftr",
      "reputationPoints": 0,
      "profilePicture": null,
      "name": "Mehmet Efe Akca"
    },
    "createdAt": "2024-12-20 13:59:31",
    "updatedAt": "2024-12-20 13:59:31",
    "tags": [
      {
        "id": 1,
        "name": "Kotlin"
      },
      {
        "id": 2,
        "name": "Pharo"
      }
    ],
    "upvoteCount": 0,
    "downvoteCount": 0
  },
  "error": null
}

How to test: Using cURL

curl -X POST \
  https://programming-languages-forum-psrb6.ondigitalocean.app/api/v1/questions \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer eyJhbGciOiJIUzI1NiIs...' \
  -d '{
    "title": "How to implement a binary search tree in Python?",
    "content": "I'\''m trying to implement a binary search tree in Python but struggling with the insertion method. Can someone explain the basic approach?",
    "tagIds": [1, 2]
}'

Endpoint: GET /api/v1/questions/{questionId}/answers URL: https://programming-languages-forum-psrb6.ondigitalocean.app/api/v1/questions/10/answers Method: GET

Sample Response (200 OK):

{
    "status": 200,
    "data": {
        "items": [
            {
                "id": 456,
                "content": "Here's how you can implement a binary search tree...",
                "createdAt": "2024-03-20T11:00:00Z",
                "author": {
                    "id": 789,
                    "username": "pythonexpert"
                }
            }
        ],
        "totalPages": 1
    }
}

How to test: Using cURL

curl -X GET \
  https://programming-languages-forum-psrb6.ondigitalocean.app/api/v1/questions/10/answers

Note: Replace the following placeholder values with actual data:

• [email protected] and yourpassword123 with valid login credentials
• The Bearer token in the authorization header with the token received from login
• Question ID (123) with an actual question ID
• Tag IDs [1, 2] with actual tag IDs from the system

You may find the Postman collections in the backend directory.

• Link to Documentations: We have documentation on how to use the collections here

• Frontend UI Code
• Mobile UI Code

Our team placed a strong emphasis on meeting W3C standards, particularly focusing on accessibility and usability to ensure a seamless user experience. Key improvements aligned with WCAG 2.2 guidelines included:

• Improved Screen Reader Compatibility: All web components now include proper ARIA attributes to enhance accessibility for users relying on assistive technologies. For instance, form inputs and buttons have descriptive labels to ensure navigation clarity.
• Keyboard Navigation: The navigation flow has been optimized for keyboard-only users. Users can now efficiently navigate between interactive components using Tab and Shift+Tab without loss of focus.
• Color Contrast Adjustments: Text contrast and button designs were adjusted to meet WCAG's minimum contrast ratio requirements. This improves readability for users with visual impairments.
• Fallback Mechanisms: Visual content, such as profile pictures and tag badges, includes fallback options (e.g., placeholder images or text alternatives) when primary resources fail to load.
• Responsive Design: The UI adheres to responsive design principles, ensuring a consistent and accessible experience across web, mobile, and tablet devices. This includes proper viewport handling and content scaling.

We created many scenarios throughout the semester, The first one was to showcase the functionalities we were planning to implement, and the second document was to showcase the domain-specificity of our application. The scenarios capture the seamless integration of frontend, backend, and mobile components while emphasizing accessibility improvements. Each step was validated with test cases to ensure consistency and performance. Scenarios can be found on the links:

• Scenario & Mockups
• Additional Scenario & Mockups

The Programming Languages Forum usage guide is as follows:

• Account Management

  • Register with username, email, password, name, surname, country and experience level here
  • Sign in with email and password here
  • Edit profile information including bio and profile picture in your profile page

• Listings

  • Browse the home page here with recommended questions, tags and exercises
  • Browse the glossary here for information on tag types
  • Search questions and tags in search page (also accessible from the navbar)
  • View user profiles showing reputation points, followers, questions and answers in user profile page

• Content Interaction

  • Create questions with title, description, difficulty level, optional photos and code snippets in create question page
  • Answer questions with formatted text and code snippets in the question page
  • Upvote/downvote questions and answers in the question page
  • Follow tags to stay updated on topics in the tag page

• Code Features

  • Write executable code snippets in C and C#
  • Preview and run code before posting
  • Copy links to questions

Web Application:

• Git for version control
• Docker Desktop 2.20.0+ (required for both development and production)
  • Minimum 4GB RAM allocated to Docker
  • 10GB free disk space
• Node.js v20.12.1+ (optional, for local development without Docker)
• DigitalOcean CLI (for deployment)

Mobile Application:

• Node.js v20.12.1+ and npm 10.2.0+
• Expo CLI (npm install -g expo-cli)
• Android Studio (for Android development)
  • Minimum 8GB RAM
  • Android SDK Platform 34
  • Android SDK Build-Tools 34.0.0
  • Android Emulator with API 34 image
• Xcode 15+ (for iOS development, macOS only)
  • Minimum macOS 13.0+
  • iOS Simulator 17.0+
• Expo Go app on physical devices (for testing without emulators)

Prerequisites Installation:

1. Install Docker Desktop 2.20.0+
2. Install Node.js v20.12.1+
3. Install DigitalOcean CLI

Web Application Setup:

1. Clone the repository: bash git clone https://github.com/bounswe/bounswe2024group1.git cd bounswe2024group1

2. Development Mode: bash docker compose -f dev.yml up --watch Access the application at http://localhost:5173

3. Production-like Mode: bash docker compose up -d Access the application at http://localhost:80

Mobile Application Setup:

1. Navigate to the mobile directory: bash cd mobile

2. Install dependencies: bash npm install

3. Start the development server: bash npx expo start

4. Choose your preferred method to run the app:

   • Press 'a' for Android emulator
   • Press 'i' for iOS simulator (macOS only)
   • Scan QR code with Expo Go app on your device

Android Emulator Setup:

1. Open Android Studio
2. Go to Tools > Device Manager
3. Click "Create Device"
4. Select a device definition (e.g., Pixel 7)
5. Download and select API 34 system image
6. Complete the device creation
7. Launch emulator before running the app

iOS Simulator Setup:

1. Install Xcode from the Mac App Store
2. Open Xcode > Preferences > Locations
3. Install Command Line Tools if prompted
4. Open Simulator app (Xcode > Open Developer Tool > Simulator)
5. Choose desired iOS device (Hardware > Device)

1. Docker Compose Installation Error ("yarn install --immutable")

   • Error: "lockfile would have been modified by this install"
   • Solution: Run yarn install in the frontend/ folder

2. Port Allocation Conflicts

   • Error: "port is already allocated"
   • Solution:
     • Check running containers with docker ps
     • Stop conflicting services
     • Required ports: 8081, 8080, 80 (production), 5173 (development)

3. File Path Issues

   • Error: "no such file or directory"
   • Solution: Ensure all docker compose commands are run from the root folder
   • Run yarn commands from the frontend folder

• Frontend documentation: Frontend README
• Backend documentation: Backend README
• Mobile documentation: Mobile README
• API Documentation: Available at localhost:8081 when running the development setup

The Software Requirement Specification is available in our wiki here

• Scenario: Describe how a user interacts with the system to achieve a specific goal.

Our initial scenarios and mockups are here

We also have some additional scenarios and mockups here

The project plan is available in Github Projects but we've also documented it in our wiki here

Up-to-date unit test coverage and test report can be found here

• Responsibilities:

  • Worked on backend development & maintenance for the project..

• Main Contributions:

  • Reviewed all backend related issues, pull requests and unit tests. Managed backend service flows and reviewed new endpoints and maintained quality of previous endpoints..

• Code-Related Significant Issues:

  • • (Backend) Question difficulty rating endpoint 🔗 PR
    • (Backend) Fix incorrect question count in GET /search/tagst 🔗 PR
    • (Backend) Retrieve questions and answers in user profile 🔗 PR
    • (Backend) Fix Code Execution results returning 200 🔗 PR
    • (Backend) GET /users/{id}/followed-tags returning tags a user follows 🔗 PR
    • (Backend) Return difficulty of questions in searchQuestions and getQuestionById 🔗 PR
    • (Backend) Implement Reputation Point Feature 🔗 PR
    • (Backend) Retrieve tags in sorted order based on question count linked to that tag 🔗 PR
    • (Backend) Tag Creation will be limited 🔗 PR

• Management-Related Significant Issues:

  • Dealed with testing strategy of backend and tools in order to generate test coverage report.

• Pull Requests:

  • Personal Pull Requests linked with related issues above.

• Unit Tests: Unit tests are implemented for the backend services as follows :

  • Authentication Service
  • User Service
  • Question Service
  • Also integrated the test report tool into backend to see visual content of test coverage result in proper format.

• Additional Contributions:

• Responsibilities My main responsibility was in the front-end team. I was also responsible for updating most of the documentation to keep up with our decisions.

• Main Contributions In the front-end part, I implemented many features in the Question Page, namely the code snippets, previews, difficulty rating, and Question edit functionality. I was also responsible for Accessibility issues in the Web and Mobile application design. I manually checked every page we had, and fixed the related accessibility issues. For the documentation, I added due dates on our project roadmap right when we got the feedback related to it. I created some additional [Scenarios & Mockups] to showcase our domain-specific features and updated our requirements to have our newly made decisions properly documented.

• Code-Related Significant Issues

  • Issues that resolved:

    • [Frontend] Tag Badge Link Issue #687🔗PR
    • [Frontend] Add Fallback for Missing Profile Pictures #679🔗PR
    • [Frontend] Accessibility Issues #644🔗PR
    • [Frontend] Implement Edit Question Functionality #641🔗PR
    • [Frontend] Add Preview to Questions #633🔗PR
    • [Frontend] Add Code Snippets to Questions #631🔗PR
    • [Frontend] Implement Question Difficulty Rating UI #606🔗PR

  • Issues that reviewed

    • [Backend] Retrieve tags in sorted order based on question count linked to that tag #653
    • [Frontend] Implement Glossary Page for Tag Subtypes #652
    • [Frontend] Show Author for Programming Language Tags #636

• Management-Related Significant Issues

  • Add Due Dates to Roadmap #690
  • Create Scenarios to Depict Domain-Specifity #629
  • Update Requirements #610

• Pull Requests

  • All merged PR links
  • 🔗 Frontend/feature/fix tag badge routing
  • 🔗 Added default profile picture
  • 🔗 Implement Question Edit
  • 🔗 Fix Accessibility Issues
  • 🔗 Add Difficulty Rating to Questions
  • 🔗 Add Preview to Question
  • 🔗 Add Code Snippets to Question

• Unit Tests

  1. Question Difficulty Voting
  • want: updates difficulty counts when voting. Step by step explanation is provided below, for full implementation, see Related PR
  • Mock Authentication Store:

vi.mocked(useAuthStore).mockReturnValue({
  selfProfile: { id: 2 },
  token: "mock-token",
});

Render DifficultyBar Component:

render(
  <MemoryRouter initialEntries={["/question/1"]}>
    <Routes>
      <Route
        path="/question/:questionId"
        element={
          <DifficultyBar
            questionId={1}
            easyCount={5}
            mediumCount={3}
            hardCount={2}
          />
        }
      />
    </Routes>
  </MemoryRouter>,
);

Simulate Voting:

const mediumButton = screen.getByText("Medium");
fireEvent.click(mediumButton);

Verify Updated Counts:

expect(await screen.findByText("Easy: 0 votes")).toBeInTheDocument();
expect(await screen.findByText("Medium: 1 votes")).toBeInTheDocument();
expect(await screen.findByText("Hard: 0 votes")).toBeInTheDocument();

2. Question Edit Related PR

Responsibilities: Backend, DevOps, Frontend

Throughout this milestone, I served as a full-stack developer with a strong focus on DevOps. My primary responsibilities included:

• Managing and migrating our deployment infrastructure on DigitalOcean
• Implementing and maintaining CI/CD pipelines
• Fixing key backend bugs like missing data in tag details and incorrect data schemas in question-related endpoints
• Contributing to frontend development with a focus on search functionality and UX improvements
• Serving as the lead code reviewer for frontend pull requests, ensuring code quality and consistency
• Coordinating cross-team efforts by working closely with both backend and frontend teams
  • In particular, I had a major role in planning for milestone 3. My tasks included coordinating the creation of issues and their completion by team members. Consistently checking the progress of the issues and ensuring that the team was on track for the final product.

I played a crucial role in ensuring our application remained stable and performant while new features were continuously integrated and deployed. My position as the frontend code reviewer helped maintain high standards across our codebase and facilitated knowledge sharing among team members.

1. Backend Development

   • #667 - GetTagDetails Endpoint Always Returns following false
   • #619 - Make QuestionDTOs consistent

2. Frontend Implementation

   • #617 - Implement Question Search
   • #605 - Add difficulty level display to Question card
   • #602 - Show followed tags in profile
   • #601 - Implement Difficulty Level Filter on the Search Page
   • #600 - Implement Difficulty Filter on the Tag Page
   • #588 - Improve User Guiding for Code Block Syntax

3. DevOps

   • #622 - Migrate to new DigitalOcean account
   • #614 - Run type-checking in CI

• #710 - Milestone 3 Report
• #649 - Document Final Presentation Plan
• #587 - Document Testing Strategies
• #583 - Document Primary Features
• #577 - Milestone 2 Report

1. Infrastructure & Deployment

   • #708 - Deploy
   • #699 - [Deploy] Test deploy
   • #678 - [Deploy] Test deploy
   • #671 - [Deploy] Test deploy
   • #670 - [DevOps] Migrate DigitalOcean account
   • #647 - [Deploy] Deploy to main
   • #623 - [Deploy] Deploy to Production
   • #616 - [Devops] Add Frontend type checking to CI
   • #714 - [Devops] Add Frontend Tests, Fix Coverage, Update API Docs

2. Backend Implementation

   • #707 - [Backend] Fix related questions
   • #682 - [Backend] Fix follower count in Tags
   • #677 - [Backend] Fix Self Following Field in Tag Details
   • #676 - fix(backend): fix incompatible question type returned from TagDetails
   • #620 - [Backend] Fix question DTO field

3. Frontend Implementation

   • #703 - [Hotfix] Fix some backend/frontend bugs
   • #698 - [Frontend] Implement some UX improvements
   • #696 - [Frontend] Fix Bookmarks Page
   • #646 - [Frontend] Followed tags in profile
   • #621 - [Frontend] Implement Difficulty Filter in the Question Search Page
   • #618 - [Frontend] Add Difficulty Level in Question Card
   • #615 - [Frontend] Implement Question search
   • #613 - [Frontend] Implement Code Block Popover
   • #612 - [Frontend] Add difficulty filter to Tag Page

4. Documentation

   • #582 - [Lab] Lab 8

I have implemented comprehensive test suites for several frontend components:

1. Tag Component Tests (Tag.test.tsx)

   • Renders tag information correctly (name, description, logo)
   • Shows 'See all questions' link with correct href
   • Shows create question link when authenticated
   • Hides create question link when not authenticated
   • Renders image with correct alt and title attributes

2. Tags Page Tests (Tags.test.tsx)

   • Renders tags list correctly
   • Displays loading state
   • Displays error state
   • Shows create tag button
   • Loads more tags when scrolling
   • Handles empty tags list
   • Updates search results when query changes

3. CustomAnchor Component Tests (CustomAnchor.test.tsx)

   • Renders a span when no href is provided
   • Renders an anchor with correct href when provided
   • Navigates to tag page when tag link is clicked
   • Navigates to question page when question link is clicked
   • Sets correct title for tag links
   • Sets correct title for question links
   • Sets loading title for invalid href patterns

4. SearchQuestionsList Component Tests (SearchQuestionsList.test.tsx)

   • Renders search results correctly
   • Displays loading state
   • Displays error state
   • Displays empty state message when no results
   • Handles difficulty filter change

Each test suite follows best practices:

• Uses React Testing Library for DOM testing
• Implements proper mocking of dependencies
• Tests both success and error states
• Verifies component behavior in different authentication states
• Ensures proper rendering of UI elements and user interactions

I served as the main code reviewer for the frontend team during this milestone. The following is a list of PRs I've reviewed:

1. Frontend Improvements

   • #706 - [Frontend] UX improvements
   • #697 - [Frontend] Add loading screen to TagType Page
   • #694 - [FE] Implement Glossary Page and Tag Type Pages
   • #692 - [Frontend] Use sr-only text
   • #688 - Frontend/feature/fix tag badge routing
   • #686 - [Frontend] Show reputation points in profile page
   • #684 - [Frontend] Implement Bookmark Page
   • #680 - Added default profile picture
   • #675 - Implement Question Edit
   • #674 - [Frontend] Implement Bookmark button
   • #673 - [Frontend] Show Execution Time
   • #672 - [Frontend] Follow/Unfollow Tags
   • #669 - [FE] Display Author Field in the Tag Page

2. Mobile Development

   • #705 - Enhance New Question and New Answer Screens
   • #665 - [Mobile] Filter Questions By Difficulty
   • #640 - [Mobile] Bookmarked Questions Page and Bookmark Button on Questions

3. Backend Development

   • #685 - [BACKEND] GET users/{userid} should return answers, questions, and followed tags
   • #656 - GET users/{userid} should return answers, questions, and followed tags
   • #643 - Implemented reputationPoints flow
   • #637 - Add rating for level of difficulty of a question
   • #628 - Add followed tags to users' profile responses
   • #626 - Fix question related endpoints to retrieve difficulty level

Responsibilities: Frontend

I was a member of frontend team, I was responsible for implementing Glossary page, Tag Type pages, a custom react markdown component for references of tags and questions during question and answer creations, fixing some bugs within frontend, writing unit tests for these components. In the documentation part, I was responsible for writing user tests, updating the requirements for ensuring the consistency between the SRS and application, writing some parts of the Milestone 3 report.

For the final milestone I focused on the implementation of newly requested domain-specific features of the application, those requests were made by customer after the 2nd milestone presentation, @NazireAta created new scenarios & mockups for these features and we clarified them together with the instructor during lab 8 hours, then I implemented these new features in frontend with the guidance of @mmtftr. These were : i. Glossary page that displays the tag types (fetched from Wikidata in the backend) within the application ii. Tag type pages that display the description and tags belonging to that tag type iii. A custom component for referencing tags and questions in the question/answer creation forms I have also written tests for these components.

In the documentation part, I have written user tests, some parts of the milestone 3 report. After @ozdentarikcan and @mmtftr created the scenarios for the final presentation, we worked on the content that will be shown before the presentation.

• [Frontend] References to Tags and Questions #589, Merged PR 🔗
• [Frontend] Show Author for Programming Language Tags #636, Merged PR 🔗
• [Frontend] Implement Glossary Page for Tag Subtypes #652, Merged PR 🔗

• [Documentation] Lab 9 Report #661
• [Documentation] Document Customer Feedback for Final Milestone Demo Presentation #709
• [Documentation] Write User Tests for the Project #655
• Milestone 3 Report #710

• [FE] Implement Tag and Question References for Answer Creation #624
• [FE] Display Author Field in the Tag Page #669
• [FE] Implement Glossary Page and Tag Type Pages #694

• Unit tests check the listed conditions for that component under the specified file names. I have 2 examples here :

  • glossary.test.tsx :

    • renders glossary title correctly
    • renders tag counts and descriptions for tag types correctly
    • renders error alert when there is an error

  • CreateTagForm.test.tsx :

    • renders form elements correctly
    • submits form with valid data when 'Create Tag' is clicked

    // Simulate user input
    fireEvent.change(nameInput, { target: { value: "NewTag" } });
    fireEvent.change(descriptionInput, {
      target: { value: "A description for NewTag" },
    });
    

    • disables submit button when form is empty
    • shows loading state while creating the tag
    • clears form inputs after successful submission
    • does not submit if fields are empty

Responsibilities: Backend

• In the third milestone, I have contributed to the backend development by implementing endpoints and ensuring their functionality with unit tests.

Main Contributions My contributions to the project's third milestone include writing endpoints for the backend, documenting Domain-Specific Features for the project.

API Contributions

• Endpoint: > GET /api/v1/users/{userid}

• Purpose: Improve the GET users/{userid} endpoint to return answers, questions, and followed tags for the related user.

• Implementation:

@GetMapping(value = EndpointConstants.UserEndpoints.USER_ID)
        public ResponseEntity<GenericApiResponse<UserProfileResponseDto>> getUserById(
                        @PathVariable(name = "id") Long id) {
                Optional<User> user = userService.getUserById(id);
                if (user.isPresent()) {
                        UserProfileResponseDto userProfileResponseDto = modelMapper.map(user.get(),
                                        UserProfileResponseDto.class);
                        userProfileResponseDto.setReputationPoints(userService.calculateReputation(user.get()));
                        userProfileResponseDto.setSelfFollowing(userService.selfFollowing(user.get()));
                        List<QuestionSummaryDto> questions = questionService.findByAuthorId(id);
                        userProfileResponseDto.setQuestions(questions);
                        userProfileResponseDto.setQuestionCount((long) questions.size());
                        List<GetAnswerDtoForProfile> answers = answerService.findByAnsweredBy(id);
                        userProfileResponseDto.setAnswers(answers);
                        userProfileResponseDto.setAnswerCount((long) answers.size());
                        userProfileResponseDto.setFollowedTags(tagService.getFollowedTags(id));

                        GenericApiResponse<UserProfileResponseDto> response = ApiResponseBuilder.buildSuccessResponse(
                                        userProfileResponseDto.getClass(),
                                        "User retrieved successfully",
                                        HttpStatus.OK.value(),
                                        userProfileResponseDto);
                        return buildResponse(response, HttpStatus.valueOf(response.getStatus()));

                } else {
                        ErrorResponse errorResponse = ErrorResponse.builder()
                                        .errorMessage("User not found")
                                        .build();
                        GenericApiResponse<UserProfileResponseDto> response = ApiResponseBuilder.buildErrorResponse(
                                        UserProfileResponseDto.class,
                                        "User not found",
                                        HttpStatus.NOT_FOUND.value(),
                                        errorResponse);
                        return buildResponse(response, HttpStatus.valueOf(response.getStatus()));
                }

        }

Code-Related Significant Issues

• Implement GET 627 users/{userid} #627

Management-Related Significant Issues

• Documenting Domain-Specific Features #584

Non-code related Significant Issues

• Documenting Domain-Specific Features #584

Unit Tests

• Vote Service
• Tag Service
• Bookmark Service
• Customer User Details Service

Pull Requests

• Implement GET users/{userId}(#685)

• Developed and enhanced various mobile components, including the New Question and New Answer screens, Profile Page, and Home Page.
• Designed mobile-specific UI elements, such as the Question Card and Difficulty Filter for Questions.
• Implemented the Follow/Unfollow Tag feature and the functionality to bookmark questions, ensuring unique bookmarks for each user and question.
• Enhanced the backend by fixing bugs related to bookmarks and implementing APIs for fetching bookmarked questions.
• Worked on the sorting of questions in a recommended order in mobile for improved user experience.
• Contributed to the overall customer milestone by delivering key features for the mobile app.

• #705 - [Mobile] Enhance New Question and New Answer Screens
• #700 - [Mobile] Sort Questions in Recommended Order
• #666 - [Mobile] Create Profile Page
• #663 - [Mobile] Design Question Card for Mobile
• #660 - [Mobile] Difficulty Filter For Questions
• #651 - [Mobile] Implement Home Page
• #650 - [Mobile] Follow/Unfollow Tag
• #638 - [Backend] Bookmarks Should Be Unique to User and Question
• #630 - [Backend] GET /questions/bookmarked - Should Get User's bookmarks

• #705 - [Mobile] Enhance New Question and New Answer Screens
• #701 - [Mobile] Sort Recommended Order
• #695 - [Mobile] Profile Page
• #668 - [Mobile] Follow/Unfollow Tag
• #665 - [Mobile] Filter Questions By Difficulty
• #664 - [Mobile] Design Question Card
• #659 - [Mobile] Home Page
• #640 - [Mobile] Bookmarked Questions Page and Bookmark Button on Questions
• #639 - [BE] Fix/638-bookmark
• #635 - [BE] Feature/630 get bookmarked questions

• #638 - [Backend] Bookmarks Should Be Unique to User and Question: Fixed issue with bookmarks being non-unique across users and questions.
• #630 - [Backend] GET /questions/bookmarked - Should Get User's bookmarks: Implemented API to fetch a user's bookmarked questions.

• See the commit for #630

Responsibilities: Backend & Frontend

Throughout this milestone, I worked on backend and frontend. My primary responsibilities were:

• Implementing personal recommendation in backend through search queries
• Implementing new or missing features in frontend
• Fixing and improving frontend compontents.
• Documenting reports, feedbacks and scenarios.

1. Backend Development

   • #689 - [Backend] Sort Questions by Users Followed for Personal Recommendation

2. Frontend Development

   • #609 - [Frontend] Accessibility: Use-sr only text on non-interactive elements
   • #596 - [Frontend] Implement Tag Follow/Unfollow
   • #595 - [Frontend] Implement Bookmark button
   • #594 - [Frontend] Implement Bookmark page
   • #593 - [Frontend] Show execution time in Code Execution block
   • #592 - [Frontend] Show reputation points in Profile

• #710 - Milestone 3 Report
• #709 - [Documentation] Customer Feedback for Final Milestone
• #661 - [Documentation] Lab 9 Report
• #658 - Scenario for Final Milestone
• #586 - Document Project Standards

1. Backend Implementation

   • #691 - [Frontend] Sort Questions by Followed Users

2. Frontend Implementation

   • #706 - [Frontend] UX Improvements
   • #697 - [Frontend] Add loading screen to TagType Page
   • #692 - [Frontend] Use sr-only text
   • #686 - [Frontend] Show reputation points in profile page
   • #684 - [Frontend] Implement Bookmark Page
   • #674 - [Frontend] Implement Bookmark button
   • #673 - [Frontend] Show Execution Time
   • #672 - [Frontend] Follow/Unfollow Tags

I have implemented unit tests for several frontend components:

1. Follow Button Test (Tag.test.tsx)
   • Renders follow button for authenticated users:

    it("renders 'Follow' button for authenticated users", () => {
    vi.mocked(useAuthStore).mockReturnValue({
      selfProfile: { id: 1, username: "testuser", profilePicture: "test.jpg" },
      token: "mock-token",
    });

     render(
       <MemoryRouter initialEntries={["/tag/javascript"]}>
         <Routes>
           <Route path="/tag/:tagName" element={<TagPage />} />
         </Routes>
       </MemoryRouter>,
     );

     expect(screen.getByRole("button", { name: /follow/i })).toBeInTheDocument();
   });

2. Bookmark Button Test (question.test.tsx)
   • Renders bookmark button for authenticated users:

   it("renders bookmark button", () => {
    vi.mocked(useAuthStore).mockReturnValue({
      selfProfile: { id: 1},
      token: "mock-token",
    });
    render(
      <MemoryRouter initialEntries={["/question/1"]}>
        <Routes>
          <Route path="/question/:questionId" element={<QuestionPage />} />
        </Routes>
      </MemoryRouter>,
    );

    expect(screen.getByRole("button", { name: /bookmark/i })).toBeInTheDocument();
  });

3. Bookmarks Page Tests (bookmarks.test.tsx)
   • Renders bookmarked questions
   • No accessibility violations

   it("should have no accessibility violations", async () => {
      const router = createMemoryRouter(routeConfig, {
        initialEntries: ["/bookmarks"],
      });

      await testAccessibility(<RouterProvider router={router} />);
    });

    it("renders bookmarked questions correctly", () => {
      vi.mocked(useGetBookmarkedQuestions).mockReturnValue({
        isLoading: false,
        error: null,
        data: {
          data: { items: mockQuestions, totalItems: mockQuestions.length },
        },
      } as QueryObserverSuccessResult<unknown, GetBookmarkedQuestionsError>);

      render(
        <MemoryRouter initialEntries={["/bookmarks"]}>
          <Routes>
            <Route path="/bookmarks" element={<BookmarkedQuestions />} />
          </Routes>
        </MemoryRouter>,
      );

      expect(
        screen.getByText(`You have ${mockQuestions.length} bookmarked questions.`),
      ).toBeInTheDocument();

      mockQuestions.forEach((question) => {
        expect(screen.getByText(question.title)).toBeInTheDocument();
      });
    });

• #708 - Deploy
• #703 - [Hotfix] Fix some backend/frontend bugs
• #698 - [Frontend] Implement some UX improvements