AiderCraft: Conduit Roster Feature Implementation

Project Overview

The objective of this project is to extend the existing codebase by implementing a feature that displays a rank-ordered list of authors. This enables users to discover and follow popular authors on the site. The implementation requires modifications to both the backend (to expose a new API endpoint) and the frontend (to present the data in a user-friendly format).

Technologies

• Backend: NestJS (Node.js framework) with TypeScript
• Frontend: Angular with TypeScript
• Database: MySQL
• AI Tool: Aider CLI

Setup and Configuration

• Development and testing are performed in GitHub Codespaces, which automatically installs dependencies, seeds the database, and starts both backend and frontend servers.
• The frontend is accessible at http://localhost:4200.
• In the event of a "502 Bad Gateway" error, toggle port visibility in Codespaces to resolve the issue.
• Backend API documentation is available at http://localhost:3000/docs and should be referenced for details on available endpoints and data structures.

Feature Implementation: Conduit Roster

The Conduit Roster feature presents a list of users with the following information:

• Username and profile link
• Total articles authored
• Total favorites received on their articles
• Date of first posted article

The roster is accessible via a new "Roster" link in the top navigation.

Implementation Steps

1. Project Setup and Analysis
   • Review the project structure, focusing on the apps/frontend and apps/backend directories.
   • Analyze the existing data model and determine necessary extensions.
   • Consult the API documentation to understand endpoint exposure and frontend data consumption.
   • Clarify feature requirements and evaluation criteria.
2. Feature Implementation with Aider
   • Backend: Implement data retrieval logic to calculate required user statistics and create a new API endpoint (/roster).
   • Frontend: Create an Angular component (RosterComponent) to display user data, fetch data from the backend API, and add the "Roster" link to the top navigation.
   • Aider-Assisted Development: Use Aider to generate code for each task, providing clear and specific instructions. Example prompt: Aider, add a new API endpoint /roster to apps/backend/src/app.controller.ts that returns a list of users with their article count and favorite count, ordered by favorite count.
   • Testing and Debugging: Manually test the Roster page, verify data accuracy and ordering, and use browser/NestJS debugging tools.
   • Code Review and Refactoring: Review all generated and modified code for quality, style, and adherence to best practices. Refactor code to improve readability and maintainability.
3. Integration and Documentation
   • Ensure seamless integration between the frontend and backend.
   • Document any new code or modifications.
   • Capture the screenshot as specified in the acceptance test criteria.

Key Considerations

• Code Quality: Code must be clean, efficient, and maintainable.
• Correctness: The feature must function exactly as specified.
• AI Usage: The Aider AI tool should be effectively guided and utilized.
• Mandatory Rules: All mandatory rules outlined in the assessment instructions must be followed (e.g., working on the correct branch, using Aider exclusively for AI interactions).

Evaluation Criteria

• Code Quality: Code cleanliness, efficiency, and maintainability.
• Correctness: Functionality of the implemented feature.
• AI Usage: Effectiveness in guiding and using the Aider AI tool.