Revamp Your Listing Detail Page: A Frontend Redesign

Hey guys! Get ready to dive into a major facelift for our listing detail pages. This is all about making things smoother and more intuitive for our buyers. We're talking a complete overhaul of the layout and UI to give you a modern, well-organized experience. Buckle up, because we're about to make your listings shine!

User Story: Why This Matters

As a buyer, I want a modern, well-organized listing detail page with better visual hierarchy and information architecture, so that I can quickly understand the item details and take action. That's the heart of it! We want to empower buyers to effortlessly find what they need and take action without any fuss. It’s all about speed, clarity, and a user-friendly vibe.

Acceptance Criteria: What We're Aiming For

• [ ] Implement the Figma design. (This is our North Star!)

Two-Column Layout (Desktop)

Desktop users, get ready for a sleek two-column design! This layout is designed to maximize screen real estate and present information in a clear, digestible format. The key is to strike a balance between visual appeal and functional information delivery. We're aiming for a design that not only looks great but also enhances the user's ability to quickly grasp the details of each listing. Here's the breakdown:

• [ ] Implement two-column grid layout: 60% image gallery (left), 40% details sidebar (right), or 7:3.
• [ ] Image gallery section: This is where the item truly shines. We want to provide a visually engaging experience, allowing users to thoroughly examine the product from multiple angles. Here's what's included:
  • [ ] Large primary image display (min 500px height)
  • [ ] Thumbnail strip below main image (clickable thumbnails): These thumbnails offer quick access to different views of the item. Each click should smoothly transition to the corresponding image in the main display, providing a seamless browsing experience. The layout should be intuitive, allowing users to easily navigate through the available images.
  • [ ] Navigation arrows (left/right) overlay on image: These provide a straightforward way to cycle through the images. The overlay ensures that the arrows are always visible without obstructing the main image, enhancing the user's ability to explore the item's visual details effortlessly.
  • [ ] Image counter badge (e.g., "3 / 7"): This badge gives users a clear indication of how many images are available and their current position in the sequence. This is particularly useful for listings with multiple images, helping users stay oriented and encouraging them to view all available visuals.
  • [ ] Click image to open lightbox/fullscreen view (from Task 4): Clicking the main image opens a lightbox or fullscreen view, providing an even more detailed look at the item. This feature is crucial for allowing users to examine the product closely, inspect its condition, and appreciate its features in greater detail. The lightbox should offer a high-resolution display that maximizes the visual impact of the images.
  • [ ] Smooth transitions between images: Smooth transitions are essential for maintaining a fluid and engaging user experience. Whether navigating through thumbnails or using the navigation arrows, the transition between images should be seamless and visually appealing. This helps prevent jarring changes and keeps the user focused on the content.
  • [ ] Lazy loading for images: Lazy loading improves page performance by loading images only as they come into view. This optimization technique reduces initial load times, resulting in a faster and more responsive user experience. By prioritizing the loading of visible content, lazy loading ensures that users can quickly access and interact with the most important elements of the page.
• [ ] Details sidebar includes (in order): This is where all the crucial information about the item lives. We need to present it in a way that's easy to scan and understand. It includes:
  • [ ] Title (h1, large, bold): A clear and concise title helps users quickly identify the item they are viewing. Using <h1> tags ensures that the title is prominently displayed and conveys the item's identity effectively.
  • [ ] Price (prominent, large, purple): Highlighting the price in a prominent color like purple makes it immediately visible to potential buyers. This design choice draws attention to the cost, helping users quickly assess whether the item fits their budget.
  • [ ] Status badge (Active/Sold/Inactive): This badge clearly indicates the current status of the item, whether it's available for purchase, already sold, or inactive. This instant status update helps users avoid wasting time on unavailable items and ensures a smooth browsing experience.
  • [ ] Category badge: The category badge provides context by indicating the item's category, helping users understand its type and intended use. This categorization aids in quick identification and enables users to easily find similar items within the same category.
  • [ ] Location (dorm name with icon): Displaying the item's location, specifically the dorm name, along with an icon, provides essential information for potential buyers. This helps them determine proximity and availability for pickup or viewing.
  • [ ] Posted date/time ("Posted 2 days ago"): Showing the posting date and time gives users an idea of how recent the listing is, helping them gauge its relevance. Listings that are recently posted often generate more interest, making this information valuable to buyers.
  • [ ] Description section with proper spacing: A well-formatted description section, complete with proper spacing, is crucial for providing detailed information about the item. This allows sellers to highlight key features, condition, and any other relevant details, empowering buyers to make informed decisions.
  • [ ] Seller information card: The seller information card provides transparency and builds trust by displaying relevant details about the seller. This may include their name, rating, and other information that helps buyers assess the seller's credibility.
  • [ ] Action buttons section: This section houses essential action buttons that allow users to interact with the listing, such as "Contact Seller," "Make Offer," or "Add to Wishlist." These buttons should be prominently displayed and easily accessible, encouraging users to take the next step.

Mobile Responsive Layout

Mobile users, we've got you covered! We know a lot of you are browsing on your phones, so we're making sure the experience is top-notch. Here's how it's going to work:

• [ ] Stack layout vertically on mobile (< 768px): For smaller screens, the layout will stack vertically, ensuring that all content is easily accessible without requiring horizontal scrolling. This arrangement optimizes readability and usability on mobile devices.
• [ ] Full-width image gallery at top: The image gallery will take up the full width of the screen at the top, allowing users to fully appreciate the visuals. This arrangement maximizes the impact of the images, ensuring that they are prominently displayed and easily viewed on mobile devices.
• [ ] Details section below: All the essential details about the item will be displayed below the image gallery. This includes the title, price, status, category, location, description, and seller information. By placing these details below the images, users can easily scroll through all the relevant information without having to navigate multiple screens.
• [ ] Sticky footer with primary action button: A sticky footer with the primary action button will remain visible at the bottom of the screen, making it easy for users to take immediate action. This ensures that the most important action, such as "Contact Seller" or "Make Offer," is always readily available, regardless of how far down the page the user has scrolled.
• [ ] Thumbnails scroll horizontally on mobile: The thumbnails in the image gallery will scroll horizontally on mobile, allowing users to easily browse through all available images. This touch-friendly approach makes it simple to navigate the gallery and view all the item's details.
• [ ] Touch-friendly swipe gestures for image navigation: Users can swipe left or right on the main image to navigate through the image gallery. This intuitive gesture-based navigation makes it easy to explore all the available images on mobile devices, providing a seamless and engaging user experience.

Visual Design: Polishing the Look

Let's talk aesthetics! We want this page to look modern, clean, and inviting. Here's the plan:

• [ ] Remove centered card layout - use full-width with max-width constraint: This change provides a more expansive and immersive viewing experience. Utilizing the full width of the screen while maintaining a maximum width ensures that the content is both visually striking and easily readable.
• [ ] Background: white(?) instead of purple: Switching to a white background provides a cleaner and more neutral canvas for the content. This helps the items on display stand out and reduces visual clutter, enhancing the overall aesthetic appeal.
• [ ] White content areas with subtle shadows: White content areas, complemented by subtle shadows, create depth and dimension, making the information feel more tangible and engaging. This design technique elevates the user experience by adding a touch of sophistication.
• [ ] Consistent border radius (12px for cards, 8px for buttons): Maintaining a consistent border radius throughout the design provides a cohesive and polished look. Rounded corners on cards and buttons soften the interface, making it more inviting and visually appealing.
• [ ] Use NYU purple (#56018D) for primary actions: Incorporating NYU purple (#56018D) for primary actions reinforces brand identity and provides visual cues for important interactions. This consistent branding helps users quickly identify and engage with key elements on the page.
• [ ] Add visual separators between sections: Visual separators, such as lines or spacing, help delineate different sections of the page, improving organization and readability. This makes it easier for users to scan the content and find the information they need.
• [ ] Improve typography hierarchy (font sizes, weights, spacing): Enhancing the typography hierarchy involves carefully adjusting font sizes, weights, and spacing to create a clear and logical structure. This ensures that the most important information stands out and that the overall reading experience is smooth and intuitive.

CSS File Restructure: Cleaning Up the Code

Time to get our CSS in order! A well-structured CSS file is crucial for maintainability and scalability. Here's the plan:

• [ ] Update ListingDetail.css with new layout styles
• [ ] Use CSS Grid for two-column layout: CSS Grid offers a powerful and flexible way to create the two-column layout for desktop screens. This modern approach simplifies the structure and makes it easier to maintain responsiveness.
• [ ] Add media queries for responsive breakpoints: Media queries are essential for adapting the layout to different screen sizes and devices. By defining breakpoints, we can ensure that the page looks great on everything from large desktop monitors to small mobile phones.
• [ ] Use CSS variables for consistent theming: CSS variables, also known as custom properties, allow us to define reusable values for colors, fonts, and other design elements. This ensures consistency across the site and makes it easy to update the theme in the future.
• [ ] Remove outdated purple background styles: Removing outdated purple background styles helps streamline the CSS and ensures that the new design elements are not overshadowed by legacy code. This cleanup step is essential for maintaining a clean and efficient codebase.

Definition of Done: How We Know We're There

• [ ] Create unit tests for responsive layout: Rigorous testing ensures that the responsive layout functions correctly across different screen sizes and devices. This step helps identify and address any potential issues early in the development process.
• [ ] Pass all tests: Passing all unit tests confirms that the code meets the required standards and functions as expected. This provides confidence in the stability and reliability of the new design.
• [ ] Ensure coverage > 85%: Code coverage above 85% indicates that a significant portion of the code has been tested, reducing the risk of undiscovered bugs. This comprehensive testing approach ensures that the majority of the codebase has been validated.
• [ ] Linted with eslint: Linting the code with ESLint ensures that it adheres to consistent coding standards, improving readability and maintainability. This automated process helps catch common errors and enforce best practices.
• [ ] Deployable to AWS Elastic Beanstalk: Ensuring that the code is deployable to AWS Elastic Beanstalk means it can be easily integrated into the existing infrastructure. This simplifies the deployment process and ensures that the new design can be quickly rolled out to users.
• [ ] Pass CI/CD pipeline: A successful CI/CD pipeline automates the testing and deployment process, ensuring that changes are thoroughly vetted before being released. This streamlined approach minimizes the risk of errors and allows for faster iteration.
• [ ] Code reviewed and approved: A thorough code review by experienced developers ensures that the code is well-written, efficient, and adheres to best practices. This collaborative process helps identify potential issues and ensures that the code is of high quality.

Alright, team! Let's get this done and make our listing detail pages awesome!