React Frontend: Build E-commerce UI Components

by Alex Johnson 47 views

This article provides a comprehensive guide to building a React-based frontend for an e-commerce application. We'll focus on creating the basic structure and essential UI components, leveraging tools like shadcn/ui and Tailwind CSS to ensure a modern and responsive design. This is a level 0 task, meaning it can be done in parallel with backend tasks, allowing for efficient development.

📋 Quick Summary

Create basic frontend structure and components for the application.

📊 Metadata

  • Priority: Medium
  • Dependencies: None
  • Status: Pending
  • Workflow Run: play-project-workflow-template-6jqsc
  • Started: 2025-11-11 15:28:20 UTC

📖 Full Task Details

Overview

Build a React-based frontend with shadcn/ui for the e-commerce application, including all major UI components and routing. We will focus on implementing a robust and scalable component structure.

Context

This is a Level 0 task (no dependencies) - Can run in parallel with backend tasks. Creates the user interface independently of backend implementation.

Objectives

  1. Set up React project with shadcn/ui and Tailwind CSS
  2. Implement routing with React Router
  3. Create Header, Footer, and layout components
  4. Build HomePage, ProductList, Cart, Login, and Register pages
  5. Establish component structure for future API integration

Dependencies

None - Independent frontend task

Implementation Plan

Step 1: Initialize Project Structure

First, navigate to the frontend directory and install the necessary dependencies:

cd frontend
npm install

Create package.json with dependencies:

  • react, react-dom (18.2.0)
  • react-router-dom (6.14.2)
  • tailwindcss, autoprefixer, postcss
  • axios (1.4.0)
  • @radix-ui/react-* components (installed via shadcn/ui)
  • class-variance-authority, clsx, tailwind-merge

Step 2: Initialize shadcn/ui

Next, initialize shadcn/ui to streamline UI component development:

cd frontend
npx shadcn@latest init

Configure shadcn/ui with:

  • TypeScript: No (using JavaScript)
  • Style: Default
  • Base color: Slate
  • CSS variables: Yes

Step 3: Create App Shell

Set up the main application component, frontend/src/App.js, to handle routing and global styles:

frontend/src/App.js with:

  • Router configuration
  • Route definitions for all pages
  • Tailwind CSS global styles

Step 4: Add shadcn/ui Components

Add required components to enhance the user interface:

npx shadcn@latest add button
npx shadcn@latest add card
npx shadcn@latest add badge
npx shadcn@latest add input
npx shadcn@latest add form
npx shadcn@latest add navigation-menu

Step 5: Build Layout Components

Create layout components such as the header and footer to ensure consistency across the application. The Header component should include navigation links, a cart badge, and a login button. The Footer component should provide a simple copyright notice.

  • Header.js: Navigation header with links, cart badge, login button
  • Footer.js: Simple copyright footer

Step 6: Implement Page Components

Develop page components for various sections of the e-commerce application. This includes the HomePage with a call-to-action, the ProductList displaying product cards, a ProductDetail page for single product views, a Cart to manage the shopping cart, and Login and Register pages for user authentication.

  • HomePage.js: Landing page with call-to-action
  • ProductList.js: Grid of product cards
  • ProductDetail.js: Single product view
  • Cart.js: Shopping cart display
  • Login.js: Login form
  • Register.js: Registration form

Testing Strategy

Implement a testing strategy to ensure the application functions correctly and is free of errors. This involves installing dependencies, launching the app, running React tests, and verifying the production build. Use the following commands for testing:

npm install
npm start  # Verify app launches
npm test   # Run React tests
npm run build  # Verify production build

Success Criteria

To ensure the project is successful, the following criteria must be met:

  • [ ] npm install completes without errors
  • [ ] npm start launches app on localhost:3000
  • [ ] All routes accessible via navigation
  • [ ] Components render without errors
  • [ ] Responsive design works on mobile/desktop
  • [ ] shadcn/ui components render correctly
  • [ ] Tailwind CSS styles applied consistently

Files Created

  • frontend/package.json
  • frontend/src/App.js
  • frontend/src/components/*.js (8 components)

✅ Acceptance Criteria

Requirements

  • [ ] package.json with all React, Tailwind CSS, and shadcn/ui dependencies
  • [ ] App.js with routing configured
  • [ ] 8 components created in components/ directory
  • [ ] All routes navigate correctly
  • [ ] shadcn/ui components render correctly
  • [ ] Tailwind CSS styles applied consistently
  • [ ] Responsive design works
  • [ ] npm install succeeds
  • [ ] npm start launches app
  • [ ] npm run build creates production build
  • [ ] No console errors in browser

Component Checklist

  • [ ] Header with navigation
  • [ ] Footer
  • [ ] HomePage
  • [ ] ProductList
  • [ ] ProductDetail
  • [ ] Cart
  • [ ] Login
  • [ ] Register

Navigation Test

  • [ ] / → HomePage
  • [ ] /products → ProductList
  • [ ] /products/:id → ProductDetail
  • [ ] /cart → Cart
  • [ ] /login → Login
  • [ ] /register → Register

Visual Validation

  • [ ] Header displays correctly
  • [ ] Footer at bottom of page
  • [ ] Product cards display in grid
  • [ ] Buttons and links styled with shadcn/ui and Tailwind CSS
  • [ ] Cart icon shows badge
  • [ ] Responsive on mobile (< 768px)

🎯 Implementation Notes (from tasks.json)

Set up the basic frontend structure and components for the application:

  1. Create frontend/package.json with necessary dependencies:
{
  "name": "parallel-task-execution-test-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.2",
    "axios": "^1.4.0",
    "tailwindcss": "^3.4.0",
    "autoprefixer": "^10.4.16",
    "postcss": "^8.4.32",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.0",
    "lucide-react": "^0.309.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "react-scripts": "5.0.1"
  }
}
  1. Create frontend/src/App.js as the main application component:
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import './index.css'; // Tailwind CSS imports

// Import components
import Header from './components/Header';
import Footer from './components/Footer';
import HomePage from './components/HomePage';
import ProductList from './components/ProductList';
import ProductDetail from './components/ProductDetail';
import Cart from './components/Cart';
import Login from './components/Login';
import Register from './components/Register';

function App() {
  return (
    <Router>
        <Header />
        <main style={{ padding: '20px', minHeight: 'calc(100vh - 130px)' }}>
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/products" element={<ProductList />} />
            <Route path="/products/:id" element={<ProductDetail />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="/login" element={<Login />} />
            <Route path="/register" element={<Register />} />
          </Routes>
        </main>
        <Footer />
      </Router>
  );
}

export default App;
  1. Create basic components in the frontend/src/components/ directory:
  • frontend/src/components/Header.js:
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { ShoppingCart } from 'lucide-react';

const Header = () => {
  // In a real app, this would come from a context or state management
  const isLoggedIn = false;
  const cartItemCount = 0;

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center">
        <Link to="/" className="mr-6 flex items-center space-x-2">
          <span className="font-bold">E-Commerce Demo</span>
        </Link>
        <nav className="flex items-center space-x-6 ml-auto">
          <Button variant="ghost" asChild>
            <Link to="/products">Products</Link>
          </Button>
          <Button variant="ghost" size="icon" asChild>
            <Link to="/cart" className="relative">
              <ShoppingCart className="h-5 w-5" />
              {cartItemCount > 0 && (
                <Badge className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center p-0">
                  {cartItemCount}
                </Badge>
              )}
            </Link>
          </Button>
          {isLoggedIn ? (
            <Button variant="ghost">Logout</Button>
          ) : (
            <Button variant="ghost" asChild>
              <Link to="/login">Login</Link>
            </Button>
          )}
        </nav>
      </div>
    </header>
  );
};

export default Header;
  • frontend/src/components/Footer.js:
import React from 'react';


const Footer = () => {
  return (
    <footer className="border-t py-6 md:py-0">
      <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
        <p className="text-center text-sm text-muted-foreground">
          © {new Date().getFullYear()} Parallel Task Execution Test
        </p>
      </div>
    </footer>
  );
};

export default Footer;
  • frontend/src/components/HomePage.js:
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';

const HomePage = () => {
  return (
    <div className="container mx-auto px-4 py-16">
      <div className="flex flex-col items-center text-center space-y-4">
        <h1 className="text-4xl font-bold tracking-tighter sm:text-5xl md:text-6xl">
          Welcome to Our Store
        </h1>
        <p className="max-w-[700px] text-lg text-muted-foreground md:text-xl">
          Browse our catalog of products
        </p>
        <Button size="lg" asChild>
          <Link to="/products">Shop Now</Link>
        </Button>
      </div>
    </div>
  );
};

export default HomePage;
  • frontend/src/components/ProductList.js (placeholder):
import React from 'react';
import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

const ProductList = () => {
  // In a real app, this would fetch from the API
  const products = [
    { id: 1, name: 'Product 1', price: 19.99, description: 'Description for product 1' },
    { id: 2, name: 'Product 2', price: 29.99, description: 'Description for product 2' },
    { id: 3, name: 'Product 3', price: 39.99, description: 'Description for product 3' },
  ];

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">Products</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {products.map((product) => (
          <Card key={product.id}>
            <CardHeader>
              <div className="aspect-square w-full bg-muted rounded-t-lg mb-4"></div>
              <CardTitle>{product.name}</CardTitle>
              <CardDescription>${product.price.toFixed(2)}</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">{product.description}</p>
            </CardContent>
            <CardFooter className="flex gap-2">
              <Button variant="outline" size="sm" asChild>
                <Link to={`/products/${product.id}`}>View Details</Link>
              </Button>
              <Button size="sm">Add to Cart</Button>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default ProductList;
  1. Create placeholder components for the remaining pages:
  • frontend/src/components/ProductDetail.js
  • frontend/src/components/Cart.js
  • frontend/src/components/Login.js
  • frontend/src/components/Register.js

These can be simple components with basic structure similar to the ones above, using shadcn/ui components and Tailwind CSS for styling, with placeholders for functionality that would be implemented in a real application. Before creating components, run npx shadcn@latest init to set up shadcn/ui, then add the necessary components.

🧪 Test Strategy (from tasks.json)

  1. Verify that all required files are created in the frontend directory structure
  2. Check that package.json contains all necessary dependencies
  3. Run npm install to ensure dependencies can be resolved
  4. Start the development server with npm start to verify the application loads without errors
  5. Test basic navigation between pages
  6. Verify that the component structure follows React best practices
  7. Check that the UI is responsive and displays correctly on different screen sizes
  8. Verify that placeholder components render correctly even without backend integration

🔗 Task Master Integration

This issue is automatically synchronized with TaskMaster.

Task File: .taskmaster/tasks/tasks.json Task Details: .taskmaster/docs/task-6/ Service: cto-parallel-test Workflow: play-project-workflow-template-6jqsc

Agent Pipeline

  1. Rex - Implementation
  2. Cleo - Code Quality Review
  3. Cipher - Security Analysis (if enabled)
  4. Tess - QA Testing
  5. Atlas - Integration & Merge
  6. Bolt - Production Deployment

📡 Live Status

This issue is monitored by Morgan PM. Status updates are posted automatically as agents progress through the workflow.

Current Status: View the Project board for real-time updates Feedback: Comment with @morgan to request scope changes or clarifications

This issue is managed by Morgan (Project Manager) for workflow play-project-workflow-template-6jqsc.

For more information on React, visit the official React documentation.