Frontend Dashboard Fundamentals

1. Setting Up Your React Frontend

First, we'll initialize a new React project inside our main project directory and configure it with Tailwind CSS. This combination provides a powerful and efficient development experience.

In your project's root directory (the one containing your backend folder and .git), create a new directory named frontend. We will initialize our React app here.

The following video provides an excellent guide on setting up a React project using Vite and then integrating Tailwind CSS.

By the end of this step, you should have a frontend directory containing a basic React application that you can run locally using npm run dev.

2. Structuring the Dashboard

A well-structured application is built from reusable components. For our dashboard, we will create a simple layout with a header, a main content area for our products, and a sidebar that we can use for filters later.

The article "Build a Full-Stack E-Commerce React App from Scratch" provides a great overview of a standard project structure for an e-commerce application, which is very similar to what we are building.

3. Building the Core Components

Now, let's build the visual components: the main layout, the product cards, and the grid that will contain them.

The Overall Layout

The video "Responsive Dashboard with Sidebar & Dark Mode" that you referenced for setup also contains excellent guidance for building a responsive layout with a sidebar and main content area. We can adapt this for our dashboard.

The Product Card

The most important component for our app is the ProductCard. This will display an item's image, name, and price. For now, we'll use placeholder content.

The video below gives a fantastic, detailed walkthrough of creating stylish and responsive product cards with a hover effect. This is directly applicable to our needs.

Your Task: Build the Frontend Skeleton

Now it's time to put all the pieces together. Follow these steps to build and run your frontend dashboard skeleton.

1. Initialize Project: If you haven't already, create the frontend directory. Inside it, run npm create vite@latest . -- --template react (the . will create it in the current frontend directory). Then, follow the video guide to install and configure Tailwind CSS.

2. Create Component Files: Inside frontend/src/, create a new directory named components. Inside src/components/, create the following files:

   • Header.jsx
   • Sidebar.jsx
   • ProductCard.jsx

3. Implement ProductCard.jsx:

   • Using the video guide, build your product card component. Use a placeholder image from a service like placeholder.com (e.g., https://via.placeholder.com/150).
   • The card should display a placeholder title, price, and a button.

   Here's some starter JSX for ProductCard.jsx to guide you:

   // src/components/ProductCard.jsx
   import React from 'react';
   
   const ProductCard = ({ product }) => {
     return (
       <div className="w-full max-w-sm mx-auto rounded-md shadow-md overflow-hidden transform hover:scale-105 duration-300">
         <div className="flex items-end justify-end h-56 w-full bg-cover" style={{ backgroundImage: `url(${product.imageUrl})` }}>
           <button className="p-2 rounded-full bg-blue-600 text-white mx-5 -mb-4 hover:bg-blue-500 focus:outline-none focus:bg-blue-500">
             {/* Icon placeholder */}
             <svg className="h-5 w-5" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" stroke="currentColor"><path d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
           </button>
         </div>
         <div className="px-5 py-3">
           <h3 className="text-gray-700 uppercase">{product.name}</h3>
           <span className="text-gray-500 mt-2">${product.price}</span>
         </div>
       </div>
     );
   };
   
   export default ProductCard;
   

4. Assemble the Layout in App.jsx:

   • Clear the default content from frontend/src/App.jsx.
   • Import your Header, Sidebar, and ProductCard components.
   • Use Tailwind CSS classes (flex, grid, grid-cols-*) to create the main layout: a Header at the top, a Sidebar on the left, and a main content area on the right.
   • In the main content area, create a "Recommendations" panel. This can be as simple as a div with a heading (h2) that says "Our Top Picks for You".
   • Inside this panel, create a responsive grid and map over a small, hardcoded array of product data to render several ProductCard components.

5. Run the Application:

   • From your frontend directory, run npm run dev in the terminal.
   • Open your browser to the local address provided (usually http://localhost:5173). You should see your dashboard skeleton.

Verification

To confirm you've successfully built the skeleton, please provide the following:

1. The final directory structure of your frontend/src folder.
2. The complete code from frontend/src/App.jsx.
3. The complete code from frontend/src/components/ProductCard.jsx.

Great job! You've now scaffolded the frontend of our application. This component-based structure is scalable and ready to be integrated with our backend.

In the next lesson, we will make these two separate parts—frontend and backend—talk to each other for the first time by having our React app call the /health endpoint on our Flask server.