arctic-steel
MIHIR DOSHIbuild my mild steel pipe business website
Comments (0)
Sign in to leave a comment
Project Tasks12
Implement Inquiry Submission API
As a user I want to use a backend API to submit an inquiry. Implement FastAPI endpoint: POST /inquiries — accepts name, company (optional), email, phone, product_id (optional), quantity_estimate, inquiry_type (bulk/individual/general), message, attachment_url (optional). Stores to MySQL with status defaulting to 'new'. Validates required fields, sanitizes input for XSS/injection security. Returns confirmation response with inquiry ID. Per SRD: no automated responses; all handled manually by business owner.
Implement Theme & Global Styles
As a user I want to see a consistent visual theme across all Arctic-Steel pages. Set up global CSS variables, typography, color palette (#F4F4F4 bg, #FFFFFF surface, #333333 text, #0074D9 accent, #B0B0B0 muted), font family (Inter), and shared component styles (buttons, cards, inputs, links) based on the Arctic-Steel design system. Remove scaffold pages not needed (welcome page, signup, generic dashboard pages not in the user flow). This task must be completed first and is independent of all other tasks.
Implement Products Catalog API
As a user I want to use a backend API to fetch the product catalog. Implement FastAPI endpoints: GET /products (list all products with optional category filter and pagination), GET /products/{id} (product detail). Data model includes: id, name, category (ERW/Seamless/Hollow/GI/Structural), description, specifications (JSON blob for diameter, wall thickness, length, grade, finish), image_url, is_active, created_at. MySQL storage with Alembic migration. Supports Catalog and Product detail pages.
Build Inquiry Form Page
As a user I want to submit an inquiry form on the Inquiry page to contact Arctic-Steel. Implement the Inquiry page based on the existing JSX design (v2). Includes: NavBar, PageHero ('Submit an Inquiry'), BreadcrumbBar (Home / Catalog / Inquiry), two-column layout with InquiryForm card (name, company optional, email, phone, product of interest dropdown, quantity, inquiry type pill-toggles, message textarea, file attachment zone, pulsing 'Send Inquiry' submit button) on the left, and ContactInfoPanel + WhyChooseUsPanel sidebar on the right, TrustBar, and Footer. Client-side validation, success confirmation state, secure POST to inquiry API. Navigated to from Landing CTAs and Product detail page. Fully responsive.
Build Landing Page
As a user I want to view the Arctic-Steel landing page. Implement the Landing page based on the existing JSX design (v2). Includes: NavBar, Hero section with interactive 3D steel pipe visualization and pulsing CTAs ('View Catalog', 'Submit Inquiry'), TrustBar, ProductHighlights (ERW Pipes, Seamless Pipes, Hollow Sections cards with metallic sheen hover), InteractivePipeShowcase (scroll-driven pipeline with clickable category nodes), HowItWorks (3-step order flow), WhyChooseUs (2-col USP grid), Testimonials (auto-play carousel), InquiryCallToAction (steel blue full-bleed CTA), and Footer. Brushed-steel animated gradient background. Fully responsive (mobile-first). Links out to Catalog and Inquiry pages.
Build Admin Login Page
As a business owner I want to sign in via the Admin Login page to access the management dashboard. Implement the Admin Login page based on the existing JSX design (v2). Includes: centered login card with Arctic-Steel logo/wordmark, email and password fields (48px height, #0074D9 focus ring), 'Sign In' primary CTA button, error messaging for invalid credentials, and a subtle brushed-steel background. On success, redirects to Dashboard. Minimal, professional design aligned with Arctic-Steel theme. Leverages existing basic auth infrastructure.
Build Catalog Page
As a user I want to browse all available mild steel pipe products on the Catalog page. Implement the Catalog page based on the existing JSX design (v2). Includes: NavBar, CatalogHero banner, FilterToolbar (search, quick-filter chips, sort dropdown, view toggle), FacetSidebar (collapsible accordion filters: type, standard, diameter, wall thickness, length, application), ResultsMeta bar (result count, active filter dismissible tags), ProductGrid (responsive 3-col/2-col/1-col card grid with metallic sheen on hover, spec badges, View Details ghost button, empty state), Pagination, InquiryCTA band, and Footer. Each product card links to Product detail page. Navigated to from Landing 'View Catalog' CTA and Dashboard.
Implement Inquiries Management API
As a business owner I want to use a backend API to view and manage inquiries. Implement FastAPI endpoints: GET /admin/inquiries (list all with status filter, search, and pagination), GET /admin/inquiries/{id} (full detail including message and attachment), PATCH /admin/inquiries/{id}/status (update status: new/in-progress/resolved). All endpoints protected by admin authentication middleware (JWT). Supports Inquiries management page and Dashboard summary metrics.
Build Product Detail Page
As a user I want to view detailed information about a specific pipe product on the Product page. Implement the Product page based on the existing JSX design (v2). Includes: NavBar, breadcrumb trail, product image gallery (with metallic sheen hover animation), product name, category badge, specifications table (diameter, wall thickness, length, standard, grade, finish), short description, related products strip, prominent 'Submit Inquiry' CTA button linking to the Inquiry page, and Footer. No pricing information displayed per SRD constraints. Navigated to from the Catalog page product cards. Fully responsive.
Build Dashboard Overview Page
As a business owner I want to view a Dashboard overview page after logging in. Implement the Dashboard page based on the existing JSX design (v2). Includes: sidebar navigation (Arctic-Steel logo, nav links: Dashboard, Inquiries, Catalog, Logout), top header bar, summary metric cards (total inquiries, new/unread inquiries, product count, recent activity) with steel-blue accents, recent inquiries table preview, quick-access navigation links to Inquiries management and Catalog management. Entry point after Admin Login. Fully responsive with clean data layout.
Build Inquiries Management Page
As a business owner I want to view and manage all submitted inquiries on the Inquiries page. Implement the Inquiries page based on the existing JSX design (v2). Includes: sidebar navigation, top header, searchable and filterable inquiries table (columns: customer name, company, product interest, inquiry type, date submitted, status badge), expandable row or side-panel to read full message, status update controls (mark as new/in-progress/resolved via PATCH API), pagination. Navigated to from Dashboard. Supports efficient inquiry handling without automated responses per SRD.
Integrate Frontend with Backend APIs
As a user I want the frontend pages to fetch and display real data from backend APIs. Wire up: Catalog page to GET /products (with category filter), Product detail page to GET /products/{id}, Inquiry form to POST /inquiries, Dashboard to GET /admin/inquiries summary stats, Inquiries management page to GET /admin/inquiries (with filters/pagination) and PATCH /admin/inquiries/{id}/status. Use axios or fetch with proper error handling, loading skeletons, and empty states. Environment-based API base URL config (.env). Replace all static mock data in JSX pages with live API responses.
No comments yet. Be the first!