Building E-commerce App: Frontend Components Guide

Hey guys! Let's dive into creating a killer frontend for our e-commerce app. This article will guide you through setting up the basic structure and components using React, shadcn/ui, and Tailwind CSS. We'll cover everything from project initialization to building individual page components. Get ready to roll up your sleeves and build something awesome!

📋 Quick Summary

In a nutshell, we're going to build the basic frontend structure and components for our application. This involves setting up a React project with all the necessary dependencies, implementing routing, and creating essential UI components like headers, footers, and various page layouts.

📊 Metadata

• Priority: Medium
• Dependencies: None
• Status: Pending
• Workflow Run: play-project-workflow-template-cxpdb
• Started: 2025-11-05 02:53:25 UTC

📖 Full Task Details

Overview

Our main goal here is to construct a React-based frontend using shadcn/ui for our e-commerce application. This includes crafting all the major UI components and setting up the routing. Think of it as the visual backbone of our app – the part users will interact with directly. A well-structured frontend is crucial for a seamless user experience, so let's make it count!

Context

This task is a Level 0 task, meaning it doesn't depend on any other tasks. This allows us to work on it in parallel with the backend development. We're essentially creating the user interface independently of the backend implementation, which is super efficient. This approach lets us focus solely on the user experience without waiting for backend functionalities to be ready.

Objectives

1. Set up React project: We'll start by initializing a new React project and integrating shadcn/ui and Tailwind CSS for styling. This combo gives us a fantastic foundation for building a modern and responsive UI.
2. Implement routing: We'll use React Router to set up navigation between different pages of our application. This is crucial for creating a multi-page experience where users can easily move between different sections of the e-commerce site.
3. Create layout components: We'll build essential layout components such as Header, Footer, and a main layout component. These will provide a consistent structure across all pages, making our app feel polished and professional.
4. Build page components: We'll implement the main pages of our e-commerce app: HomePage, ProductList, Cart, Login, and Register. Each of these pages will have a specific purpose and layout, tailored to its content.
5. Establish component structure: Finally, we'll establish a clear component structure to facilitate future API integration. This means designing our components in a way that makes it easy to connect them to backend services and data sources later on.

Dependencies

No dependencies here! This is a standalone frontend task, so we can dive right in without waiting for anything else. This independence is great because it allows us to work efficiently and focus solely on the frontend aspects of the project.

Implementation Plan

Let's break down the implementation into manageable steps.

Step 1: Initialize Project Structure

First, we'll navigate to the frontend directory and run npm install to set up our project. This will install all the necessary dependencies defined in our package.json file. This initial setup is critical for ensuring we have all the tools and libraries we need to build our frontend.

cd frontend
npm install

We'll need a package.json file that includes the following 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

These dependencies are the building blocks of our frontend. React and React DOM provide the core component-based architecture, React Router handles navigation, Tailwind CSS and shadcn/ui give us styling utilities, and Axios helps with making API requests (though we won't use it extensively in this initial setup).

Step 2: Initialize shadcn/ui

Next up, we'll initialize shadcn/ui. This is a fantastic library for building beautiful and accessible UI components. It provides a set of pre-designed components that we can customize to fit our application's look and feel. Using a component library like shadcn/ui can significantly speed up our development process and ensure consistency across the UI.

cd frontend
npx shadcn@latest init

During the initialization, we'll configure shadcn/ui with the following settings:

• TypeScript: No (we're sticking with JavaScript for this project)
• Style: Default
• Base color: Slate
• CSS variables: Yes

These configurations will set up shadcn/ui to use a default style, a slate base color scheme, and CSS variables for theming. This is a good starting point, and we can always tweak these settings later if needed.

Step 3: Create App Shell

Now, let's create the main application shell in frontend/src/App.js. This file will be the entry point for our React application and will handle routing and global styles. Think of it as the conductor of our frontend orchestra, coordinating all the different parts.

In frontend/src/App.js, we'll set up:

• Router configuration using React Router to handle navigation.
• Route definitions for all the pages in our application, mapping URLs to specific components.
• Tailwind CSS global styles to ensure consistent styling across the entire app.

This step is crucial for setting up the overall structure of our application and ensuring that all the pieces fit together nicely.

Step 4: Add shadcn/ui Components

Let's add some essential shadcn/ui components that we'll use throughout our application. These components provide a solid foundation for building our UI, and we can customize them as needed to match our design. We will add button, card, badge, input, form, and navigation-menu components.

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

Now, we'll focus on building our layout components. These components will provide the structural foundation for our pages, ensuring consistency and a professional look and feel.

• Header.js: This component will contain our navigation header, including links to different pages, a cart badge to display the number of items in the cart, and a login button.
• Footer.js: A simple copyright footer that will appear at the bottom of each page.

Step 6: Implement Page Components

It's time to build the main pages of our e-commerce app! Each of these pages will have a specific purpose and layout, tailored to its content.

• HomePage.js: The landing page of our application, designed to capture users' attention and encourage them to explore further. It will include a call-to-action to guide users to the product listings.
• ProductList.js: This page will display a grid of product cards, allowing users to browse our catalog. Each card will provide a brief overview of the product, including its name, price, and a short description.
• ProductDetail.js: A single product view that provides detailed information about a specific product. This page will likely include images, descriptions, pricing, and options to add the product to the cart.
• Cart.js: This page will display the user's shopping cart, showing the items they've added and allowing them to adjust quantities or remove items.
• Login.js: A login form that allows existing users to access their accounts.
• Register.js: A registration form that allows new users to create an account.

Testing Strategy

Testing is crucial to ensure our application works as expected. Here's our testing strategy:

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

• We'll start by running npm install again to ensure all dependencies are correctly installed.
• Next, we'll use npm start to launch the application and verify that it runs without errors on localhost:3000.
• We'll run npm test to execute any existing React tests (we might need to set up some basic tests if we don't have any yet).
• Finally, we'll use npm run build to create a production build of our application and ensure that it builds successfully.

Success Criteria

To ensure we've successfully completed this task, we'll use the following success criteria:

• [ ] npm install completes without errors.
• [ ] npm start launches the app on localhost:3000.
• [ ] All routes are accessible via navigation, meaning we can navigate between different pages using the links in our application.
• [ ] Components render without errors – no nasty error messages popping up in the browser console!
• [ ] Responsive design works seamlessly on both mobile and desktop devices.
• [ ] shadcn/ui components render correctly, ensuring our UI looks consistent and professional.
• [ ] Tailwind CSS styles are applied consistently throughout the application.

Files Created

Here's a list of the files we'll create as part of this task:

• frontend/package.json
• frontend/src/App.js
• frontend/src/components/*.js (8 components: Header, Footer, HomePage, ProductList, ProductDetail, Cart, Login, Register)

✅ Acceptance Criteria

Requirements

To ensure our frontend components are up to par, here's a checklist of requirements:

• [ ] package.json with all the necessary React, Tailwind CSS, and shadcn/ui dependencies.
• [ ] App.js with routing configured to handle navigation between pages.
• [ ] 8 components created in the components/ directory: Header, Footer, HomePage, ProductList, ProductDetail, Cart, Login, and Register.
• [ ] All routes navigate correctly, meaning users can easily move between pages using the navigation links.
• [ ] shadcn/ui components render correctly, ensuring a consistent and professional UI.
• [ ] Tailwind CSS styles are applied consistently throughout the application.
• [ ] Responsive design works, so our app looks great on both desktop and mobile devices.
• [ ] npm install succeeds without any errors.
• [ ] npm start launches the app successfully.
• [ ] npm run build creates a production build of our application.
• [ ] No console errors in the browser, indicating a clean and stable frontend.

Component Checklist

Let's make sure we've got all our components in place:

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

Navigation Test

We need to ensure our routing is working correctly. Here's a navigation test to confirm:

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

Visual Validation

Let's give our UI a visual check to make sure everything looks as it should:

• [ ] Header displays correctly with navigation links and cart icon.
• [ ] Footer is positioned at the bottom of the page.
• [ ] Product cards display in a grid layout on the ProductList page.
• [ ] Buttons and links are styled with shadcn/ui and Tailwind CSS, giving them a consistent and modern look.
• [ ] Cart icon shows a badge indicating the number of items in the cart.
• [ ] Responsive design ensures the app looks great on mobile devices (less than 768px width).

🎯 Implementation Notes (from tasks.json)

Here are some implementation notes from our tasks.json file to guide us:

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"
  }
}

2. 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;

3. 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;

4. 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)

Our testing strategy, as outlined in tasks.json, includes:

1. Verifying that all required files are created in the frontend directory structure.
2. Checking that package.json contains all the necessary dependencies.
3. Running npm install to ensure dependencies can be resolved.
4. Starting the development server with npm start to verify the application loads without errors.
5. Testing basic navigation between pages.
6. Verifying that the component structure follows React best practices.
7. Checking that the UI is responsive and displays correctly on different screen sizes.
8. Verifying 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-cxpdb

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-cxpdb.