ClientProject #3059
open[Details Module]: Car Details Page Design & API Integration
100%
Description
Scope¶
Design and implement the Truck Stock Car Details Page with product information, specifications, and image gallery integration.
Tasks¶
-
Product Details API
- Design and prepare the Truck Stock Product Details API.
- Ensure proper response structure with product details, specifications, and images.
-
API Integration
- Integrate product details API into the car details page.
- Handle loading, error, and empty states gracefully.
-
Product Specification Section
- Design product specification UI section.
- Fetch and display specification data from the API.
- Ensure responsive layout for desktop, tablet, and mobile.
-
How to Buy Section
- Implement a reusable “How to Buy” component.
- Integrate it into the product details page for consistency.
-
Product Showcase (React Gallery)
- Use React Gallery library for displaying product images.
- Add carousel/slider functionality for multiple images.
- Ensure zoom and swipe support for better UX.
-
** Related Products **
- Create seperate RelatedProducts.tsx file
- Hanlde all stocks products with title and image.
- Currently comment out the related product component for required API.
Updated by Md.Sajib Ahmed 7 months ago
- % Done changed from 0 to 80
Here is the github commit message
Updated by Md.Sajib Ahmed 7 months ago
- Status changed from In Progress to Complete
- % Done changed from 90 to 100
Here is the github issue link
Car details integration for order, bulk, truck and korean stock.
Also UI and API integration with inquere modal.
Updated by Md.Sajib Ahmed 7 months ago
I felt a bit depressed about this layout issue since it took more time than I originally estimated.
GitHub Commit 1
GitHub Commit 2
I changed the layout approach — replaced the table with a grid to dynamically handle all screen sizes.
On 1440px screens, the layout was badly broken, and I fixed that in the commits.
Now, I’m happy with the result.