⚛️ React Frontend Setup

The main focus of this course is building AI features—not spending weeks on UI styling. That’s why we’re using Tailwind CSS for rapid, beautiful styling without writing a single CSS file from scratch.

---

🚀 Step 1: Create Your React App

Important: Make sure you’re in your main project folder (not inside the backend folder).

npm create vite@latest openai-frontend --template react
cd openai-frontend

---

📦 Step 2: Install Essential Packages

Install the core dependencies:

npm install

Add chat-specific packages:

npm install lucide-react react-markdown

Add Tailwind CSS:

npm install -D tailwindcss @tailwindcss/vite

What each package does:

• lucide-react → Beautiful, lightweight icons (great for send buttons, loaders, etc.)
• react-markdown → Renders AI responses with proper formatting
• tailwindcss → Utility-first CSS framework for styling without writing custom CSS

---

⚙️ Step 3: Configure Clean Imports

Instead of messy imports like ../../../components/Button, let’s set up a shortcut so we can write @/components/Button.

Update vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  plugins: [react(), tailwindcss()],
})

Now you can do:

import Button from '@/components/Button'  // ✅ Clean
// Instead of: import Button from '../../../components/Button'  ❌ Messy

---

🎨 Step 4: Set Up Tailwind CSS

Replace the contents of src/index.css with:

@import "tailwindcss";

That’s all! Tailwind’s latest version makes setup incredibly simple.

---

🧪 Step 5: Test Your Setup

Run your frontend:

npm run dev

You should see:

Local: http://localhost:5173

Test Tailwind by editing src/App.jsx:

function App() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl p-8 max-w-md w-full">
        <div className="text-center">
          <div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full flex items-center justify-center mx-auto mb-4">
            <span className="text-2xl">🤖</span>
          </div>
          <h1 className="text-2xl font-bold text-gray-800 mb-2">
            AI Chat Frontend
          </h1>
          <p className="text-gray-600">
            Ready to connect to your intelligent backend!
          </p>
          <div className="mt-6">
            <div className="inline-flex items-center px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm">
              ✅ Frontend Ready
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

💡 Expected result:
You should see a clean, centered card with a gradient background, an AI emoji, and a “Frontend Ready” badge.

---

📂 Your Project Structure

After setup, your frontend should look like this:

openai-frontend/
├── src/
│   ├── App.jsx          # Main React component
│   ├── index.css        # Tailwind imports
│   └── main.jsx         # React entry point
├── vite.config.js       # Vite configuration with path alias
├── package.json         # Dependencies and scripts
└── index.html           # HTML template

---

🔧 Common Issues & Fixes

❌ “Vite command not found”
✅ Make sure Node.js is installed and try:

npx create vite@latest

❌ “Tailwind styles not working”
✅ Check that src/index.css contains:

@import "tailwindcss";

✅ Restart the dev server:

npm run dev

❌ “Import alias not working”
✅ Restart the dev server after changing vite.config.js.
✅ Ensure imports start with @/.

❌ “Port already in use”
✅ Vite will pick the next port automatically (5174, 5175, etc.).
✅ Or manually specify:

npm run dev -- --port 3000

---

🌐 Development Workflow

We’ll have two servers running during development:

Backend (Port 8000):

# In openai-backend folder
npm run dev

Frontend (Port 5173):

# In openai-frontend folder
npm run dev

💡 Pro Tip: Use two terminal tabs or split your terminal so both servers run side-by-side.

---

✅ You now have:

• ⚡ Lightning-fast dev environment with Vite
• 🎨 Beautiful UI with Tailwind CSS
• 🧹 Clean imports with path aliases
• 🤖 React app ready for AI chat integration

👉 Next: Building the Chat Interface — Let’s create the actual chat UI!