Fish Data - Copy this React, Tailwind Component to your project
Objective: Build a responsive, clean homepage for BanglaFrost, showcasing different types of fish in multiple containers, with an upload page for adding fish details. Use conditional rendering for tabs and object mapping for efficient rendering of fish containers. Requirements: 1. Homepage: • Design a homepage with a modern UI. • The homepage will contain multiple containers for different fish types (but no categories, just individual fish items). • Each fish container will display: • Image of the fish • Name of the fish • Price per kg • “Add to Cart” button • Object mapping should be used to render fish containers dynamically based on data. • Include a simple header with the website name “BanglaFrost” and a footer. • Use conditional rendering for tab based components to avoid unnecessary page reloads. (For example, tabs for “New Arrivals” and “Best Sellers” that load based on the selected view without routing). 2. Backend (Upload Page): • Create a simple backend page (accessible via /admin) to upload fish details. • The upload page should allow the admin to: • Upload an image of the fish. • Add a name, price, and description. • This data should be saved and displayed dynamically on the homepage. • Ensure conditional rendering for handling the form and submission confirmation. Technical Keywords to Incorporate: • Render fish containers using object mapping to ensure scalability. • Conditional rendering for tabs on the homepage to switch between views (like “New Arrivals” and “Best Sellers”) without page reloads. • Use grid layout for arranging fish containers uniformly across the homepage. • Focus on responsive design, ensuring the homepage adapts well on mobile and desktop views. • Backend upload form should include fields for image, name, price, and description. • State management: Use state to manage uploaded fish data and dynamically render it on the homepage. • Prioritize performance optimization by minimizing unnecessary re renders and using efficient data structures. • Avoid routing for tab navigation; prefer conditional rendering for efficiency. Additional Notes for Performance Optimization: • Use lazy loading for images to optimize the page load time. • Ensure that the fish containers only re render when necessary by using React.memo or a similar approach. • Keep the upload form modular and reusable in case new fish types or attributes are added in the future.
