Feature Request: Display Consumer Details on Project Detail View

[ankitbisen28]

Description

When a maker clicks on any project's detail, they should be able to see the basic details of the consumer who posted the project. This information should appear below the project details.

Requirements

1. Project Detail View:

   • When a maker clicks on a project, they should be taken to the project detail view.
   • The project detail view should display all relevant information about the project.

2. Consumer Details Display:

   • Below the project details, display a section with the consumer's basic details.
   • The consumer details should include:
     • Name
     • Profile picture
     • Contact information (e.g., email, phone number)
     • Brief bio or description
   • Ensure the consumer details section is visually distinct and easy to locate.

Acceptance Criteria

• Makers can navigate to a project's detail view.
• The project detail view includes a section with the consumer's basic details.
• The consumer details are displayed accurately and are easy to read.
• The interface is responsive and works well on various devices.

Additional Information

• Ensure the component is responsive and accessible.
• Provide clear error messages for any issues in fetching or displaying the consumer details.

Mockups / Examples

Provide any mockups or examples of the desired component if available.

Technical Requirements

• Ensure compatibility with the existing tech stack of the project.
• Utilize efficient algorithms to fetch and display consumer details without significant performance degradation.

Steps to Implement

1. Update Backend Endpoint:

   • Modify the project detail endpoint to include consumer information.

   const express = require('express');
   const router = express.Router();
   const Project = require('../models/project');
   const User = require('../models/user');
   
   router.get('/projects/:id', async (req, res) => {
       try {
           const project = await Project.findById(req.params.id).lean();
           if (!project) {
               return res.status(404).json({ message: 'Project not found' });
           }
           const consumer = await User.findById(project.consumerId).lean();
           res.status(200).json({ project, consumer });
       } catch (error) {
           res.status(500).json({ message: 'Failed to fetch project details', error });
       }
   });
   
   module.exports = router;

2. Update Frontend Component:

   • Fetch and display the consumer details in the project detail view.

3. Integrate and Test:

   • Ensure the backend and frontend components are integrated correctly.
   • Test the feature thoroughly to ensure the consumer details are displayed as expected.

Tasks

• [ ] Update the backend endpoint to include consumer information.
• [ ] Update the frontend component to display consumer details.
• [ ] Integrate the backend and frontend components.
• [ ] Test the feature thoroughly.