Heartship
Vinod JainMake a website of selling products like photo frame,cup, pillow of print of photo make best website make a all things a website have that make it
Comments (0)
Sign in to leave a comment
Project Tasks29
Implement Navbar for Landing
As a frontend developer, implement the Navbar section for the Landing page. Build the full Navbar component including: NAV_LINKS array routing to /Catalog, /BulkOrder, /Landing; HeartLogo component; MagneticButton component using useMotionValue/useSpring (stiffness:200, damping:18) for magnetic cursor tracking with mx/my spring values; ParticleBurst component rendered via createPortal into document.body spawning 14 particles with randomized angle/distance/size/color (blue/amber/red palette) animated via framer-motion with 0.55s easeOut transitions; click handler setting burst state with clientX/clientY; whileTap scale:0.95 on the CTA anchor. Note: this Navbar component may already exist from a previous page — check for reuse before rebuilding.
User Auth API Endpoints
As a Backend Developer, implement user authentication and registration API endpoints using FastAPI. Includes POST /api/auth/register, POST /api/auth/login, POST /api/auth/logout, GET /api/auth/me, POST /api/auth/refresh-token. Use JWT tokens, bcrypt password hashing. Supports both individual and business customer roles. Note: Basic auth setup already done — extend with role-based business/individual user types.
Products Catalog API Endpoints
As a Backend Developer, implement product catalog API endpoints using FastAPI. Includes GET /api/products (list with filters: category, price, search, pagination), GET /api/products/{id} (single product detail), GET /api/products/categories. Product model includes: id, name, description, category, base_price, images, variants (size, material, finish), stock status. Database: MySQL/MariaDB with Alembic migration. Seed with sample data for photo frames, cups, pillows.
Photo Upload & Customizer API
As a Backend Developer, implement photo upload and customization API endpoints. Includes POST /api/customizer/upload (multipart file upload, store in S3-compatible or local volume), POST /api/customizer/preview (generate product preview with photo applied), GET /api/customizer/templates/{product_id}. Validate file types (JPEG, PNG, WEBP), max size 10MB. Return preview image URL and customization metadata. Uses GPT integration for AI-assisted design suggestions per SRD AI Models requirement.
Cart & Line Items API
As a Backend Developer, implement shopping cart API endpoints. Includes POST /api/cart (create/get cart for session or authenticated user), POST /api/cart/items (add item with product_id, quantity, customization_id), PUT /api/cart/items/{id} (update quantity), DELETE /api/cart/items/{id}, GET /api/cart (get cart with computed totals, GST). Cart persists for authenticated users; session-based for guests. Supports both individual and bulk order line items.
GPT AI Design Suggestions API
As an AI Engineer, integrate GPT 5.4 for user-friendly design suggestions in the Customizer flow. Implement POST /api/ai/suggest-design (accepts product_type + occasion description, returns design style suggestions, color palette recommendations, text overlay ideas). Rate-limited to avoid abuse. Uses OpenAI-compatible API client. Fallback to static suggestions if API unavailable.
Database Models & Migrations
As a Backend Developer, create all Alembic database migrations and SQLAlchemy models for the full schema: users (id, email, password_hash, role, business_name, created_at), products (id, name, category, base_price, images JSON, variants JSON), customizations (id, user_id, product_id, photo_url, preview_url, metadata JSON), carts (id, user_id/session_id, items JSON, created_at), orders (id, user_id, items JSON, status, total_amount, shipping_address JSON, payment_id, created_at), payments (id, order_id, gateway_order_id, status, amount, created_at). Run alembic init, create initial migration, add seed data script.
Global State Management Setup
As a Frontend Developer, set up global state management for the React app. Implement React Context + useReducer (or Zustand) for: auth state (user, token, role), cart state (items, total, count badge), customizer state (uploaded photo URL, selected product, preview). Provide CartContext, AuthContext, CustomizerContext with typed hooks (useCart, useAuth, useCustomizer). Persist cart and auth token to localStorage. This is a prerequisite for Catalog, Cart, Customizer, Dashboard, and Orders pages consuming API data.
API Client & Axios Setup
As a Frontend Developer, configure the API client layer for all frontend pages. Set up Axios instance with base URL from env (REACT_APP_API_URL), request interceptor to attach JWT Bearer token from AuthContext, response interceptor to handle 401 (redirect to login) and 403 errors. Create typed service modules: authService, productsService, customizerService, cartService, ordersService, paymentService. Use React Query or SWR for server state caching on catalog and order list pages.
Implement LandingHero for Landing
As a frontend developer, implement the LandingHero section. Build the lh-root section with: splitHeadline utility that splits HEADLINE ('Personalize Your Gifts with Heartship') into character objects; per-character charVariant animation (y:30→0, opacity:0→1, scale:0.9→1) with staggered delay of i*0.04 and 0.45s duration; subheadlineVariant delayed by headlineChars.length*0.04+0.3; two CTA buttons using ctaVariant with delayOffset 0 and 0.15; trustVariant fading in at headlineChars.length*0.04+1.2; scrollIndicatorVariant at +1.5s delay. Three parallax layers: lh-parallax-bg (translateY * -0.3px) with lh-orb--blue/amber/red divs, lh-parallax-mid (translateY * -0.5px) with diamond/circle/ring/square/dot-grid shapes, and lh-content with no transform. useInView hook with once:true, amount:0.2 controls animation trigger.
Implement LandingCarousel for Landing
As a frontend developer, implement the LandingCarousel section using React Three Fiber and Three.js. Build three 3D product mesh components: ProductFrame (RoundedBox args:[2.2,2.6,0.15] radius:0.08 with MeshStandardMaterial color prop, inner planeGeometry [1.7,2.1] for photo area, Text label at y:-1.6), ProductCup (CylinderGeometry with auto-rotation delta*0.3 in useFrame), and ProductBox (pillow shape). Each mesh uses useFrame for lerped scale targeting (isActive?1.2:hovered?1.08:1 at 5*delta speed). PRODUCTS array has 3 entries (frame/cup/pillow) with id/label/icon/desc/color/shape. Canvas wrapped in Suspense with Environment and drei helpers. AnimatePresence handles card description transitions. useState tracks activeIndex. useMemo creates MeshStandardMaterial instances per product to avoid re-creation.
Implement LandingFeatures for Landing
As a frontend developer, implement the LandingFeatures section. Build FeatureCard component using lucide-react icons (Palette, Eye, Award, Truck) for 4 features (Easy Customization, Instant Preview, Premium Quality, Fast Shipping). Each card uses cardVariants with custom index prop (delay: i*0.15, duration:0.55) via whileInView/viewport once:true amount:0.25. Hover state triggers: boxShadow spring animation (stiffness:260, damping:22), borderLeftColor transition from #3B82F6 to #F59E0B (0.3s easeInOut), y:-6 spring (stiffness:300, damping:20). Icon wrapper animates background from rgba(59,130,246,0.1) to rgba(245,158,11,0.12) on hover. pulseRingKeyframes animate boxShadow from 0px rgba(59,130,246,0.6) to 12px transparent. Section header uses headerVariants (y:30→0, 0.6s). Cards alternate lf-card--surface and lf-card--bg CSS classes.
Implement LandingTrustBadges for Landing
As a frontend developer, implement the LandingTrustBadges section. Build 4 BadgeCard components for BADGES array: badge_customers (Users icon, amber, target:50000, suffix:'+'), badge_reviews (Star icon, amber, target:10000, ratingDisplay:true), badge_secure_checkout (ShieldCheck icon, red, staticText:'Secure'), badge_guarantee (BadgeCheck icon, red, target:100, suffix:'%'). Implement useCounter custom hook using requestAnimationFrame with cubic ease-out (1 - Math.pow(1-progress, 3)), 1500ms duration, cleanup via cancelAnimationFrame. RatingStars component renders '(4.8★)' inline SVG star. Each BadgeCard animates opacity:0/y:24 → opacity:1/y:0 with delay index*0.12 using useInView hook to gate shouldAnimate. tb-icon-wrap uses --amber and --red color modifier classes.
Implement LandingTestimonials for Landing
As a frontend developer, implement the LandingTestimonials section. Build a testimonial carousel with 6 testimonials (Priya Sharma, Rajesh Patel, Ananya Gupta, Vikram Desai, Meera Krishnan, Arjun Nair) each with name/role/initials/quote/stars fields. StarRating component renders 5 stars using SVG path (polygon points for star shape) with framer-motion fill animation: scaleX:0/opacity:0 → scaleX:1/opacity:1 with spring ease [0.34,1.56,0.64,1] and per-star delay animDelay+i*0.1. AnimatePresence handles slide transitions between testimonials. useAnimation controls entry/exit. Avatar uses initials string. Auto-advance implemented via useEffect interval. Navigation dots/arrows update active index via useState. useCallback wraps navigation handlers.
Implement LandingPricing for Landing
As a frontend developer, implement the LandingPricing section with two tier groups. INDIVIDUAL_TIERS: Basic (free, 5 features, ctaStyle:'amber') and Premium (₹499/mo or ₹3999/yr, 7 features, ctaStyle:'amber'). BUSINESS_TIERS: Starter (₹1999/mo, 5 features, ctaStyle:'blue'), Pro (₹4999/mo, popular:true, ctaStyle:'red', accent:'pro'), Enterprise (null price, ctaStyle:'blue-filled'). Toggle between Individual/Business tabs via useState. Monthly/Annual billing toggle via useState with AnimatePresence for price swap animation. Popular badge on Pro tier. Each tier card has accent CSS class (individual/business/pro). checkColor prop ('amber'/'blue'/'red') styles feature check icons. CTA hrefs all route to /Signup. AnimatePresence wraps price value changes for smooth number transitions between monthly and annual display.
Implement LandingFAQ for Landing
As a frontend developer, implement the LandingFAQ section with 8 FAQ items covering: photo upload process, customizable products, shipping times (5-7 days standard, 2-3 express), payment methods (cards/UPI/wallets), data security (SSL/TLS), return policy (30-day for defects), bulk/corporate orders, and design preview. Each FAQ item uses useState for open/closed state. ChevronIcon component is a motion.svg that animates rotate:0→180 when isOpen via framer-motion animate prop. AnimatePresence wraps the answer panel for enter/exit transitions with overflow:hidden and height animation. Accordion behavior: clicking an open item closes it, clicking a new item opens it (single-open pattern via activeIndex state). Section header animates in via whileInView.
Implement LandingCTA for Landing
As a frontend developer, implement the LandingCTA section. Build MagneticButton component with useMotionValue/useSpring (stiffness:400, damping:40) for sx/sy cursor tracking, handleMouseMove computing dx/dy from element center via getBoundingClientRect, handleMouseLeave resetting to 0, hovered state for underline animation. ParticleBurst via createPortal spawns 16 particles with randomized angle/distance (35-90px)/size (4-9px)/color (red/amber/blue palette) animated opacity:1→0, scale:1→0.15 over 0.8s easeOut with per-particle delay up to 0.06s, auto-cleanup via setTimeout 850ms. lc-btn-underline motion.div animates width:0→full on hover. Two CTA buttons: primary (lc-btn-primary class) and secondary with showUnderline prop. whileTap scale:0.95 on both.
Implement Footer for Landing
As a frontend developer, implement the Footer section. Build motion.footer with containerVariants (opacity:0→1, 0.6s easeOut) triggered via whileInView viewport once:true amount:0.1. Four footerColumns (Product, Company, Legal, Support) each rendered with columnVariants (y:30→0, delay i*0.1) via custom prop. ftr-bg-layer decorative div with parallax translateY * -0.2px using CSS var(--scroll). Email newsletter subscription form: controlled email useState, inputFocused state for border highlight, handleSubscribe (useCallback) prevents default, spawns 8 Particle components from button center (getBoundingClientRect cx/cy), each Particle animates x/y outward via angle=(id/8)*Math.PI*2 with random dist 30-70px, opacity:1→0 scale:1→0 over 0.6s, particleKey state incremented to re-key AnimatePresence, particles cleared after 700ms setTimeout. Note: Footer may already exist from a previous page — check for reuse.
Bulk Order Pricing Tiers API
As a Backend Developer, implement bulk order API endpoints. Includes GET /api/bulk/pricing-tiers (returns quantity brackets with per-unit pricing), POST /api/bulk/quote (calculate total for quantity + product_id), POST /api/bulk/orders (create bulk order). Pricing tiers: 1-9 units (full price), 10-49 (10% off), 50-99 (20% off), 100+ (30% off). Business accounts only. Validate business role via JWT claims.
Checkout & Orders API
As a Backend Developer, implement checkout and order management API endpoints. Includes POST /api/checkout (validate cart, create order, return payment intent), GET /api/orders (list user orders with status, pagination), GET /api/orders/{id} (order detail with tracking), PATCH /api/orders/{id}/status (admin). Order model: id, user_id, items, shipping_address, status (pending/processing/shipped/delivered/cancelled), total_amount in INR, created_at. Alembic migration for orders table.
Integrate Catalog API Frontend
As a Tech Lead, verify the end-to-end integration between the Catalog frontend page and the Products Catalog API. Ensure product listings load from GET /api/products with filters, pagination, and search query params wired to the FilterBar UI. API responses are mapped to product card components. Loading and error states display correctly. Note: frontend Catalog section tasks should depend on temp_backend_products and temp_frontend_api_client.
Integrate Customizer API Frontend
As a Tech Lead, verify the end-to-end integration between the Customizer frontend page and the Photo Upload & Customizer API. Ensure photo upload posts to POST /api/customizer/upload, preview image URL is rendered on the 3D product mockup, and AI design suggestions from POST /api/ai/suggest-design are displayed in the UI. File validation errors surface correctly.
Integrate Cart API Frontend
As a Tech Lead, verify the end-to-end integration between the Cart frontend page and the Cart API. Ensure add-to-cart actions POST to /api/cart/items, cart item counts update in Navbar badge via CartContext, quantity updates and removals are reflected in real time, and cart totals including GST are computed from API response.
Integrate Signup Auth Flow
As a Tech Lead, verify the end-to-end integration between the Signup frontend page and the User Auth API. Ensure POST /api/auth/register is called on form submission, JWT token is stored in AuthContext and localStorage, business vs individual role is correctly passed, validation errors from the API are surfaced in the form UI, and successful signup redirects to the Dashboard page.
Payment Gateway Integration API
As a Backend Developer, integrate a payment gateway (Razorpay recommended for Indian market) via FastAPI. Includes POST /api/payment/create-order (creates Razorpay order, returns order_id + key), POST /api/payment/verify (verify signature, mark order as paid), POST /api/payment/webhook (handle async payment events). Store INR amounts. Handle success/failure/pending states. Secure with HMAC signature verification.
User Dashboard API
As a Backend Developer, implement user dashboard API endpoints. Includes GET /api/dashboard/summary (total orders, pending, completed, cancelled counts, recent orders, total spend in INR), GET /api/dashboard/profile (user details, business info if applicable). Requires authenticated JWT. Powers the Dashboard and Orders pages. Note: frontend Orders page section tasks depend on this endpoint.
Integrate BulkOrder Pricing Frontend
As a Tech Lead, verify the end-to-end integration between the BulkOrder frontend page and the Bulk Order Pricing Tiers API. Ensure GET /api/bulk/pricing-tiers populates the pricing tier display, quantity input triggers POST /api/bulk/quote and updates the live price calculation, and bulk orders are submitted via POST /api/bulk/orders with business JWT. Validate that non-business users see an appropriate access restriction.
Integrate Checkout & Payment Flow
As a Tech Lead, verify the end-to-end integration of the Checkout and Payment pages with their respective APIs. Ensure POST /api/checkout creates the order and returns Razorpay order details, the Razorpay JS SDK is loaded on the Payment page, POST /api/payment/verify is called after successful payment, and the user is redirected to the Orders page with order confirmation. Test failure and pending payment states.
Integrate Orders Dashboard API
As a Tech Lead, verify the end-to-end integration between the Orders frontend page and the Dashboard/Orders API. Ensure GET /api/orders populates the OrdersTable with real order data, status filter chips and search query params are passed to the API, pagination controls map to API limit/offset params, and stat cards in OrdersHeader reflect GET /api/dashboard/summary counts.
No comments yet. Be the first!