Feature Request: Project Detail Component with Bidding and User Card

[ankitbisen28]

Description

Create a Project Detail Component with the following features:

• Display project images.
• Use a Markdown to HTML converter to show the project requirements.
• Provide a save option to store user preferences.
• Allow users to apply for bidding on the project.
• Display a user card with details of the project poster.

Requirements

1. Project Images Display:

   • Users should be able to see all related project images in a gallery or carousel format.
   • Support for multiple image formats (JPEG, PNG, GIF).

2. Markdown to HTML Converter:

   • Integrate a Markdown to HTML converter to display project requirements.
   • Ensure proper rendering of Markdown elements such as headings, lists, code blocks, etc.
   • Handle large Markdown files efficiently.

3. Save User Preferences:

   • Implement a save button that allows users to save their viewing preferences.
   • Preferences might include layout settings, selected images, and markdown viewing modes.
   • Store preferences in local storage or a user-specific backend endpoint.

4. Apply for Bidding:

   • Provide an "Apply for Bidding" button for users to express interest in the project.
   • Include a form to capture necessary information for the bid.
   • Ensure secure submission and storage of bid information.

5. User Card for Project Poster:

   • Display a user card at the bottom of the project detail page.
   • The user card should show basic details about the project poster, such as:
     • Name
     • Profile picture
     • Contact information
     • Brief bio or description
   • Ensure the user card is visually appealing and accessible.

Acceptance Criteria

• Users can navigate through project images smoothly.
• Markdown requirements are correctly converted and displayed as HTML.
• User preferences are saved and persist across sessions.
• Users can apply for bidding with a straightforward form.
• The user card accurately displays the project poster's details.

Additional Information

• Ensure the component is responsive and works well on various devices.
• Provide clear error messages for any issues in loading images, converting Markdown, or submitting bids.
• Consider accessibility features such as keyboard navigation and screen reader compatibility.

Mockups / Examples

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

Technical Requirements

• Use a popular Markdown to HTML library like marked.js or showdown.js.
• Ensure compatibility with the existing tech stack of the project.

Tasks

• [ ] Create the Project Detail Component.
• [ ] Implement the image gallery/carousel.
• [ ] Integrate the Markdown to HTML converter.
• [ ] Add save functionality for user preferences.
• [ ] Implement the "Apply for Bidding" feature with a submission form.
• [ ] Create and integrate the user card for the project poster.
• [ ] Test the component thoroughly.