Getting Started with HubLab

1. Node.js and npm

Node.js is the JavaScript runtime that powers React and Next.js. You'll need version 18.0 or higher installed on your computer.

node --version
npm --version

If you don't have Node.js installed, download it from nodejs.org

2. Next.js Project

HubLab components work best with Next.js 14 or higher. If you don't have a project yet, create one using the following command:

npx create-next-app@latest my-hublab-project
cd my-hublab-project

When prompted, select: Yes for TypeScript, Yes for ESLint, Yes for Tailwind CSS, No for src/ directory, Yes for App Router, and No for import alias customization.

3. Tailwind CSS

All HubLab components are styled with Tailwind CSS. If you created your project with create-next-app and selected Tailwind CSS, you're all set! Otherwise, follow the Tailwind installation guide for Next.js.

# Check if tailwind.config.js exists
ls tailwind.config.js

4. AI Assistant Account

Choose at least one AI assistant to work with. Each has its own strengths:

• Grok:Best for creative customizations and rapid prototyping (requires X Premium+)
• Claude:Ideal for production code with best practices (free and paid tiers available)
• ChatGPT:Great for learning and detailed explanations (free and paid tiers available)
• Copilot:Perfect for IDE integration and inline suggestions (subscription required)

Building a Landing Page

1. 1.Start with a Hero component for your main message
2. 2.Add a Features section to showcase benefits
3. 3.Include Testimonials for social proof
4. 4.Add a Pricing Table to display plans
5. 5.End with a CTA Section and Contact Form

Creating an Admin Dashboard

1. 1.Implement a Sidebar Navigation for main menu
2. 2.Add Stats Cards to display key metrics
3. 3.Include Charts for data visualization
4. 4.Add Data Tables for managing records
5. 5.Include Activity Feed for recent events

Building an Online Store

1. 1.Create a Product Grid to display items
2. 2.Add Product Filters for easy searching
3. 3.Implement Shopping Cart with item management
4. 4.Build Checkout Flow with forms and validation
5. 5.Add Order Confirmation and tracking pages

Issue: Tailwind Classes Not Working

Symptoms: Components appear unstyled or missing CSS.

Solution: Make sure Tailwind CSS is properly configured:

// Check tailwind.config.js includes your component paths
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // ...
}

Issue: TypeScript Errors

Symptoms: Red squiggly lines, type errors, "cannot find module" errors.

Solution: Make sure all imports are correct and types are defined:

// Install missing type definitions
npm install --save-dev @types/react @types/node

// Restart your TypeScript server in VS Code
// Cmd+Shift+P > "TypeScript: Restart TS Server"

Issue: Component Not Rendering

Symptoms: Component doesn't appear on the page, no errors.

Solution: Check for common mistakes:

• •Ensure you're using 'use client' directive for client components
• •Check that component is properly exported (export default)
• •Verify import path is correct
• •Look for JavaScript errors in browser console

Issue: AI Assistant Misunderstands Requirements

Symptoms: Generated code doesn't match what you wanted.

Solution: Improve your prompts:

• •Be more specific about requirements
• •Mention "HubLab components" explicitly
• •Provide examples of what you want
• •Ask the AI to clarify if it's unsure