Add onboarding

backend/app/Http/Controllers/Api/V1/OnboardingController.php

@@ -0,0 +1,222 @@
+<?php
+
+namespace App\Http\Controllers\Api\V1;
+
+use App\Http\Requests\StoreFeedRequest;
+use App\Http\Resources\FeedResource;
+use App\Http\Resources\PlatformAccountResource;
+use App\Http\Resources\PlatformChannelResource;
+use App\Models\Feed;
+use App\Models\Language;
+use App\Models\PlatformAccount;
+use App\Models\PlatformChannel;
+use App\Models\PlatformInstance;
+use App\Services\Auth\LemmyAuthService;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\ValidationException;
+
+class OnboardingController extends BaseController
+{
+    public function __construct(
+        private readonly LemmyAuthService $lemmyAuthService
+    ) {}
+
+    /**
+     * Get onboarding status - whether user needs onboarding
+     */
+    public function status(): JsonResponse
+    {
+        $hasPlatformAccount = PlatformAccount::where('is_active', true)->exists();
+        $hasFeed = Feed::where('is_active', true)->exists();
+        $hasChannel = PlatformChannel::where('is_active', true)->exists();
+
+        $needsOnboarding = !$hasPlatformAccount || !$hasFeed || !$hasChannel;
+
+        // Determine current step
+        $currentStep = null;
+        if ($needsOnboarding) {
+            if (!$hasPlatformAccount) {
+                $currentStep = 'platform';
+            } elseif (!$hasFeed) {
+                $currentStep = 'feed';
+            } elseif (!$hasChannel) {
+                $currentStep = 'channel';
+            }
+        }
+
+        return $this->sendResponse([
+            'needs_onboarding' => $needsOnboarding,
+            'current_step' => $currentStep,
+            'has_platform_account' => $hasPlatformAccount,
+            'has_feed' => $hasFeed,
+            'has_channel' => $hasChannel,
+        ], 'Onboarding status retrieved successfully.');
+    }
+
+    /**
+     * Get onboarding options (languages, platform instances)
+     */
+    public function options(): JsonResponse
+    {
+        $languages = Language::where('is_active', true)
+            ->orderBy('name')
+            ->get(['id', 'short_code', 'name', 'native_name', 'is_active']);
+
+        $platformInstances = PlatformInstance::where('is_active', true)
+            ->orderBy('name')
+            ->get(['id', 'platform', 'url', 'name', 'description', 'is_active']);
+
+        return $this->sendResponse([
+            'languages' => $languages,
+            'platform_instances' => $platformInstances,
+        ], 'Onboarding options retrieved successfully.');
+    }
+
+    /**
+     * Create platform account for onboarding
+     */
+    public function createPlatform(Request $request): JsonResponse
+    {
+        $validator = Validator::make($request->all(), [
+            'instance_url' => 'required|url|max:255',
+            'username' => 'required|string|max:255',
+            'password' => 'required|string|min:6',
+            'platform' => 'required|in:lemmy',
+        ]);
+
+        if ($validator->fails()) {
+            throw new ValidationException($validator);
+        }
+
+        $validated = $validator->validated();
+
+        try {
+            // Create or get platform instance
+            $platformInstance = PlatformInstance::firstOrCreate([
+                'url' => $validated['instance_url'],
+                'platform' => $validated['platform'],
+            ], [
+                'name' => parse_url($validated['instance_url'], PHP_URL_HOST) ?? 'Lemmy Instance',
+                'is_active' => true,
+            ]);
+
+            // Authenticate with Lemmy API
+            $authResponse = $this->lemmyAuthService->authenticate(
+                $validated['instance_url'],
+                $validated['username'],
+                $validated['password']
+            );
+
+            // Create platform account with the current schema
+            $platformAccount = PlatformAccount::create([
+                'platform' => $validated['platform'],
+                'instance_url' => $validated['instance_url'],
+                'username' => $validated['username'],
+                'password' => $validated['password'],
+                'api_token' => $authResponse['jwt'] ?? null,
+                'settings' => [
+                    'display_name' => $authResponse['person_view']['person']['display_name'] ?? null,
+                    'description' => $authResponse['person_view']['person']['bio'] ?? null,
+                    'person_id' => $authResponse['person_view']['person']['id'] ?? null,
+                    'platform_instance_id' => $platformInstance->id,
+                ],
+                'is_active' => true,
+                'status' => 'active',
+            ]);
+
+            return $this->sendResponse(
+                new PlatformAccountResource($platformAccount),
+                'Platform account created successfully.'
+            );
+
+        } catch (\Exception $e) {
+            return $this->sendError('Failed to create platform account: ' . $e->getMessage(), [], 422);
+        }
+    }
+
+    /**
+     * Create feed for onboarding
+     */
+    public function createFeed(Request $request): JsonResponse
+    {
+        $validator = Validator::make($request->all(), [
+            'name' => 'required|string|max:255',
+            'url' => 'required|url|max:500',
+            'type' => 'required|in:website,rss',
+            'language_id' => 'required|exists:languages,id',
+            'description' => 'nullable|string|max:1000',
+        ]);
+
+        if ($validator->fails()) {
+            throw new ValidationException($validator);
+        }
+
+        $validated = $validator->validated();
+
+        $feed = Feed::create([
+            'name' => $validated['name'],
+            'url' => $validated['url'],
+            'type' => $validated['type'],
+            'language_id' => $validated['language_id'],
+            'description' => $validated['description'] ?? null,
+            'is_active' => true,
+        ]);
+
+        return $this->sendResponse(
+            new FeedResource($feed->load('language')),
+            'Feed created successfully.'
+        );
+    }
+
+    /**
+     * Create channel for onboarding
+     */
+    public function createChannel(Request $request): JsonResponse
+    {
+        $validator = Validator::make($request->all(), [
+            'name' => 'required|string|max:255',
+            'platform_instance_id' => 'required|exists:platform_instances,id',
+            'language_id' => 'required|exists:languages,id',
+            'description' => 'nullable|string|max:1000',
+        ]);
+
+        if ($validator->fails()) {
+            throw new ValidationException($validator);
+        }
+
+        $validated = $validator->validated();
+
+        $channel = PlatformChannel::create([
+            'platform_instance_id' => $validated['platform_instance_id'],
+            'channel_id' => $validated['name'], // For Lemmy, this is the community name
+            'name' => $validated['name'],
+            'display_name' => ucfirst($validated['name']),
+            'description' => $validated['description'] ?? null,
+            'language_id' => $validated['language_id'],
+            'is_active' => true,
+        ]);
+
+        return $this->sendResponse(
+            new PlatformChannelResource($channel->load(['platformInstance', 'language'])),
+            'Channel created successfully.'
+        );
+    }
+
+    /**
+     * Mark onboarding as complete
+     */
+    public function complete(): JsonResponse
+    {
+        // In a real implementation, you might want to update a user preference
+        // or create a setting that tracks onboarding completion
+        // For now, we'll just return success since the onboarding status
+        // is determined by the existence of platform accounts, feeds, and channels
+        
+        return $this->sendResponse(
+            ['completed' => true],
+            'Onboarding completed successfully.'
+        );
+    }
+}

backend/app/Services/Auth/LemmyAuthService.php

@@ -6,6 +6,7 @@
 use App\Exceptions\PlatformAuthException;
 use App\Models\PlatformAccount;
 use App\Modules\Lemmy\Services\LemmyApiService;
+use Exception;
 use Illuminate\Support\Facades\Cache;
 
 class LemmyAuthService
@@ -38,4 +39,36 @@ public static function getToken(PlatformAccount $account): string
 
         return $token;
     }
+
+    /**
+     * Authenticate with Lemmy API and return user data with JWT
+     * @throws PlatformAuthException
+     */
+    public function authenticate(string $instanceUrl, string $username, string $password): array
+    {
+        try {
+            $api = new LemmyApiService($instanceUrl);
+            $token = $api->login($username, $password);
+
+            if (!$token) {
+                throw new PlatformAuthException(PlatformEnum::LEMMY, 'Login failed for user: ' . $username);
+            }
+
+            // Get user info with the token
+            // For now, we'll return a basic response structure
+            // In a real implementation, you might want to fetch user details
+            return [
+                'jwt' => $token,
+                'person_view' => [
+                    'person' => [
+                        'id' => 0, // Would need API call to get actual user info
+                        'display_name' => null,
+                        'bio' => null,
+                    ]
+                ]
+            ];
+        } catch (Exception $e) {
+            throw new PlatformAuthException(PlatformEnum::LEMMY, 'Authentication failed: ' . $e->getMessage());
+        }
+    }
 }

backend/routes/api.php

@@ -5,11 +5,11 @@
 use App\Http\Controllers\Api\V1\DashboardController;
 use App\Http\Controllers\Api\V1\FeedsController;
 use App\Http\Controllers\Api\V1\LogsController;
+use App\Http\Controllers\Api\V1\OnboardingController;
 use App\Http\Controllers\Api\V1\PlatformAccountsController;
 use App\Http\Controllers\Api\V1\PlatformChannelsController;
 use App\Http\Controllers\Api\V1\RoutingController;
 use App\Http\Controllers\Api\V1\SettingsController;
-use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
 /*
@@ -27,23 +27,29 @@
     // Public authentication routes
     Route::post('/auth/login', [AuthController::class, 'login'])->name('api.auth.login');
     Route::post('/auth/register', [AuthController::class, 'register'])->name('api.auth.register');
-    
+
     // Protected authentication routes
     Route::middleware('auth:sanctum')->group(function () {
         Route::post('/auth/logout', [AuthController::class, 'logout'])->name('api.auth.logout');
         Route::get('/auth/me', [AuthController::class, 'me'])->name('api.auth.me');
     });
 
-    // For demo purposes, making most endpoints public. In production, wrap in auth:sanctum middleware
+    // Onboarding
-    // Route::middleware('auth:sanctum')->group(function () {
+    Route::get('/onboarding/status', [OnboardingController::class, 'status'])->name('api.onboarding.status');
+    Route::get('/onboarding/options', [OnboardingController::class, 'options'])->name('api.onboarding.options');
+    Route::post('/onboarding/platform', [OnboardingController::class, 'createPlatform'])->name('api.onboarding.platform');
+    Route::post('/onboarding/feed', [OnboardingController::class, 'createFeed'])->name('api.onboarding.feed');
+    Route::post('/onboarding/channel', [OnboardingController::class, 'createChannel'])->name('api.onboarding.channel');
+    Route::post('/onboarding/complete', [OnboardingController::class, 'complete'])->name('api.onboarding.complete');
+
     // Dashboard stats
     Route::get('/dashboard/stats', [DashboardController::class, 'stats'])->name('api.dashboard.stats');
-    
+
     // Articles
     Route::get('/articles', [ArticlesController::class, 'index'])->name('api.articles.index');
     Route::post('/articles/{article}/approve', [ArticlesController::class, 'approve'])->name('api.articles.approve');
     Route::post('/articles/{article}/reject', [ArticlesController::class, 'reject'])->name('api.articles.reject');
-    
+
     // Platform Accounts
     Route::apiResource('platform-accounts', PlatformAccountsController::class)->names([
         'index' => 'api.platform-accounts.index',
@@ -54,7 +60,7 @@
     ]);
     Route::post('/platform-accounts/{platformAccount}/set-active', [PlatformAccountsController::class, 'setActive'])
         ->name('api.platform-accounts.set-active');
-    
+
     // Platform Channels
     Route::apiResource('platform-channels', PlatformChannelsController::class)->names([
         'index' => 'api.platform-channels.index',
@@ -65,7 +71,7 @@
     ]);
     Route::post('/platform-channels/{channel}/toggle', [PlatformChannelsController::class, 'toggle'])
         ->name('api.platform-channels.toggle');
-    
+
     // Feeds
     Route::apiResource('feeds', FeedsController::class)->names([
         'index' => 'api.feeds.index',
@@ -75,7 +81,7 @@
         'destroy' => 'api.feeds.destroy',
     ]);
     Route::post('/feeds/{feed}/toggle', [FeedsController::class, 'toggle'])->name('api.feeds.toggle');
-    
+
     // Routing
     Route::get('/routing', [RoutingController::class, 'index'])->name('api.routing.index');
     Route::post('/routing', [RoutingController::class, 'store'])->name('api.routing.store');
@@ -83,14 +89,11 @@
     Route::put('/routing/{feed}/{channel}', [RoutingController::class, 'update'])->name('api.routing.update');
     Route::delete('/routing/{feed}/{channel}', [RoutingController::class, 'destroy'])->name('api.routing.destroy');
     Route::post('/routing/{feed}/{channel}/toggle', [RoutingController::class, 'toggle'])->name('api.routing.toggle');
-    
+
     // Settings
     Route::get('/settings', [SettingsController::class, 'index'])->name('api.settings.index');
     Route::put('/settings', [SettingsController::class, 'update'])->name('api.settings.update');
-    
+
     // Logs
     Route::get('/logs', [LogsController::class, 'index'])->name('api.logs.index');
-    
+});
-    // Close the auth:sanctum middleware group when ready
-    // });
-});

frontend/src/App.tsx

@@ -5,19 +5,50 @@ import Dashboard from './pages/Dashboard';
 import Articles from './pages/Articles';
 import Feeds from './pages/Feeds';
 import Settings from './pages/Settings';
+import OnboardingWizard from './pages/onboarding/OnboardingWizard';
+import { OnboardingProvider, useOnboarding } from './contexts/OnboardingContext';
+
+const AppContent: React.FC = () => {
+  const { isLoading } = useOnboarding();
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Routes>
+      {/* Onboarding routes - outside of main layout */}
+      <Route path="/onboarding/*" element={<OnboardingWizard />} />
+      
+      {/* Main app routes - with layout */}
+      <Route path="/*" element={
+        <Layout>
+          <Routes>
+            <Route path="/" element={<Navigate to="/dashboard" replace />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/articles" element={<Articles />} />
+            <Route path="/feeds" element={<Feeds />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="*" element={<Navigate to="/dashboard" replace />} />
+          </Routes>
+        </Layout>
+      } />
+    </Routes>
+  );
+};
 
 const App: React.FC = () => {
   return (
-    <Layout>
+    <OnboardingProvider>
-      <Routes>
+      <AppContent />
-        <Route path="/" element={<Navigate to="/dashboard" replace />} />
+    </OnboardingProvider>
-        <Route path="/dashboard" element={<Dashboard />} />
-        <Route path="/articles" element={<Articles />} />
-        <Route path="/feeds" element={<Feeds />} />
-        <Route path="/settings" element={<Settings />} />
-        <Route path="*" element={<Navigate to="/dashboard" replace />} />
-      </Routes>
-    </Layout>
   );
 };
 

frontend/src/contexts/OnboardingContext.tsx

@@ -0,0 +1,68 @@
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { apiClient, type OnboardingStatus } from '../lib/api';
+
+interface OnboardingContextValue {
+  onboardingStatus: OnboardingStatus | undefined;
+  isLoading: boolean;
+  needsOnboarding: boolean;
+}
+
+const OnboardingContext = createContext<OnboardingContextValue | null>(null);
+
+interface OnboardingProviderProps {
+  children: ReactNode;
+}
+
+export const OnboardingProvider: React.FC<OnboardingProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const { data: onboardingStatus, isLoading } = useQuery({
+    queryKey: ['onboarding-status'],
+    queryFn: () => apiClient.getOnboardingStatus(),
+    retry: 1,
+  });
+
+  const needsOnboarding = onboardingStatus?.needs_onboarding ?? false;
+  const isOnOnboardingPage = location.pathname.startsWith('/onboarding');
+
+  // Redirect logic
+  React.useEffect(() => {
+    if (isLoading) return;
+
+    if (needsOnboarding && !isOnOnboardingPage) {
+      // User needs onboarding but is not on onboarding pages
+      const targetStep = onboardingStatus?.current_step;
+      if (targetStep) {
+        navigate(`/onboarding/${targetStep}`, { replace: true });
+      } else {
+        navigate('/onboarding', { replace: true });
+      }
+    } else if (!needsOnboarding && isOnOnboardingPage) {
+      // User doesn't need onboarding but is on onboarding pages
+      navigate('/dashboard', { replace: true });
+    }
+  }, [onboardingStatus, isLoading, needsOnboarding, isOnOnboardingPage, navigate]);
+
+  const value: OnboardingContextValue = {
+    onboardingStatus,
+    isLoading,
+    needsOnboarding,
+  };
+
+  return (
+    <OnboardingContext.Provider value={value}>
+      {children}
+    </OnboardingContext.Provider>
+  );
+};
+
+export const useOnboarding = () => {
+  const context = useContext(OnboardingContext);
+  if (!context) {
+    throw new Error('useOnboarding must be used within an OnboardingProvider');
+  }
+  return context;
+};

frontend/src/lib/api.ts

@@ -127,6 +127,59 @@ export interface DashboardStats {
   current_period: string;
 }
 
+// Onboarding types
+export interface Language {
+  id: number;
+  short_code: string;
+  name: string;
+  native_name: string;
+  is_active: boolean;
+}
+
+export interface PlatformInstance {
+  id: number;
+  platform: 'lemmy';
+  url: string;
+  name: string;
+  description: string | null;
+  is_active: boolean;
+}
+
+export interface OnboardingStatus {
+  needs_onboarding: boolean;
+  current_step: 'platform' | 'feed' | 'channel' | 'complete' | null;
+  has_platform_account: boolean;
+  has_feed: boolean;
+  has_channel: boolean;
+}
+
+export interface OnboardingOptions {
+  languages: Language[];
+  platform_instances: PlatformInstance[];
+}
+
+export interface PlatformAccountRequest {
+  instance_url: string;
+  username: string;
+  password: string;
+  platform: 'lemmy';
+}
+
+export interface FeedRequest {
+  name: string;
+  url: string;
+  type: 'rss' | 'website';
+  language_id: number;
+  description?: string;
+}
+
+export interface ChannelRequest {
+  name: string;
+  platform_instance_id: number;
+  language_id: number;
+  description?: string;
+}
+
 // API Client class
 class ApiClient {
   constructor() {
@@ -205,6 +258,36 @@ class ApiClient {
     const response = await axios.put<ApiResponse<Settings>>('/settings', data);
     return response.data.data;
   }
+
+  // Onboarding endpoints
+  async getOnboardingStatus(): Promise<OnboardingStatus> {
+    const response = await axios.get<ApiResponse<OnboardingStatus>>('/onboarding/status');
+    return response.data.data;
+  }
+
+  async getOnboardingOptions(): Promise<OnboardingOptions> {
+    const response = await axios.get<ApiResponse<OnboardingOptions>>('/onboarding/options');
+    return response.data.data;
+  }
+
+  async createPlatformAccount(data: PlatformAccountRequest): Promise<PlatformAccount> {
+    const response = await axios.post<ApiResponse<PlatformAccount>>('/onboarding/platform', data);
+    return response.data.data;
+  }
+
+  async createFeedForOnboarding(data: FeedRequest): Promise<Feed> {
+    const response = await axios.post<ApiResponse<Feed>>('/onboarding/feed', data);
+    return response.data.data;
+  }
+
+  async createChannelForOnboarding(data: ChannelRequest): Promise<PlatformChannel> {
+    const response = await axios.post<ApiResponse<PlatformChannel>>('/onboarding/channel', data);
+    return response.data.data;
+  }
+
+  async completeOnboarding(): Promise<void> {
+    await axios.post('/onboarding/complete');
+  }
 }
 
 export const apiClient = new ApiClient();

frontend/src/pages/onboarding/OnboardingLayout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+interface OnboardingLayoutProps {
+  children: React.ReactNode;
+}
+
+const OnboardingLayout: React.FC<OnboardingLayoutProps> = ({ children }) => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="max-w-lg w-full bg-white rounded-lg shadow-md p-8">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default OnboardingLayout;

frontend/src/pages/onboarding/OnboardingWizard.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import OnboardingLayout from './OnboardingLayout';
+import WelcomeStep from './steps/WelcomeStep';
+import PlatformStep from './steps/PlatformStep';
+import FeedStep from './steps/FeedStep';
+import ChannelStep from './steps/ChannelStep';
+import CompleteStep from './steps/CompleteStep';
+
+const OnboardingWizard: React.FC = () => {
+  return (
+    <OnboardingLayout>
+      <Routes>
+        <Route index element={<WelcomeStep />} />
+        <Route path="platform" element={<PlatformStep />} />
+        <Route path="feed" element={<FeedStep />} />
+        <Route path="channel" element={<ChannelStep />} />
+        <Route path="complete" element={<CompleteStep />} />
+        <Route path="*" element={<Navigate to="/onboarding" replace />} />
+      </Routes>
+    </OnboardingLayout>
+  );
+};
+
+export default OnboardingWizard;

frontend/src/pages/onboarding/steps/ChannelStep.tsx

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { apiClient, type ChannelRequest, type Language, type PlatformInstance } from '../../../lib/api';
+
+const ChannelStep: React.FC = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState<ChannelRequest>({
+    name: '',
+    platform_instance_id: 0,
+    language_id: 0,
+    description: ''
+  });
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
+
+  // Get onboarding options (languages, platform instances)
+  const { data: options, isLoading: optionsLoading } = useQuery({
+    queryKey: ['onboarding-options'],
+    queryFn: () => apiClient.getOnboardingOptions()
+  });
+
+  const createChannelMutation = useMutation({
+    mutationFn: (data: ChannelRequest) => apiClient.createChannelForOnboarding(data),
+    onSuccess: () => {
+      navigate('/onboarding/complete');
+    },
+    onError: (error: any) => {
+      if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors);
+      } else {
+        setErrors({ general: [error.response?.data?.message || 'An error occurred'] });
+      }
+    }
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrors({});
+    createChannelMutation.mutate(formData);
+  };
+
+  const handleChange = (field: keyof ChannelRequest, value: string | number) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    // Clear field error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: [] }));
+    }
+  };
+
+  if (optionsLoading) {
+    return <div className="text-center">Loading...</div>;
+  }
+
+  return (
+    <div className="text-center mb-8">
+      <h1 className="text-2xl font-bold text-gray-900 mb-2">Configure Your Channel</h1>
+      <p className="text-gray-600">
+        Set up a Lemmy community where articles will be posted
+      </p>
+      
+      {/* Progress indicator */}
+      <div className="flex justify-center mt-6 space-x-2">
+        <div className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+        <div className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+        <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">3</div>
+        <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">4</div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6 mt-8 text-left">
+        {errors.general && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-md">
+            <p className="text-red-600 text-sm">{errors.general[0]}</p>
+          </div>
+        )}
+        
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+            Community Name
+          </label>
+          <input 
+            type="text" 
+            id="name" 
+            value={formData.name}
+            onChange={(e) => handleChange('name', e.target.value)}
+            placeholder="technology"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          />
+          <p className="text-sm text-gray-500 mt-1">Enter the community name (without the @ or instance)</p>
+          {errors.name && (
+            <p className="text-red-600 text-sm mt-1">{errors.name[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="platform_instance_id" className="block text-sm font-medium text-gray-700 mb-2">
+            Platform Instance
+          </label>
+          <select 
+            id="platform_instance_id" 
+            value={formData.platform_instance_id}
+            onChange={(e) => handleChange('platform_instance_id', parseInt(e.target.value))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          >
+            <option value="">Select platform instance</option>
+            {options?.platform_instances.filter(instance => instance.is_active).map((instance: PlatformInstance) => (
+              <option key={instance.id} value={instance.id}>
+                {instance.name} ({instance.url})
+              </option>
+            ))}
+          </select>
+          {errors.platform_instance_id && (
+            <p className="text-red-600 text-sm mt-1">{errors.platform_instance_id[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="language_id" className="block text-sm font-medium text-gray-700 mb-2">
+            Language
+          </label>
+          <select 
+            id="language_id" 
+            value={formData.language_id}
+            onChange={(e) => handleChange('language_id', parseInt(e.target.value))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          >
+            <option value="">Select language</option>
+            {options?.languages.map((language: Language) => (
+              <option key={language.id} value={language.id}>
+                {language.name}
+              </option>
+            ))}
+          </select>
+          {errors.language_id && (
+            <p className="text-red-600 text-sm mt-1">{errors.language_id[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-2">
+            Description (Optional)
+          </label>
+          <textarea 
+            id="description" 
+            rows={3}
+            value={formData.description || ''}
+            onChange={(e) => handleChange('description', e.target.value)}
+            placeholder="Brief description of this channel"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+          {errors.description && (
+            <p className="text-red-600 text-sm mt-1">{errors.description[0]}</p>
+          )}
+        </div>
+        
+        <div className="flex justify-between">
+          <Link 
+            to="/onboarding/feed"
+            className="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200"
+          >
+            ← Back
+          </Link>
+          <button 
+            type="submit" 
+            disabled={createChannelMutation.isPending}
+            className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
+          >
+            {createChannelMutation.isPending ? 'Creating...' : 'Continue'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ChannelStep;

frontend/src/pages/onboarding/steps/CompleteStep.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { apiClient } from '../../../lib/api';
+
+const CompleteStep: React.FC = () => {
+  const navigate = useNavigate();
+
+  const completeOnboardingMutation = useMutation({
+    mutationFn: () => apiClient.completeOnboarding(),
+    onSuccess: () => {
+      navigate('/dashboard');
+    },
+    onError: (error) => {
+      console.error('Failed to complete onboarding:', error);
+      // Still navigate to dashboard even if completion fails
+      navigate('/dashboard');
+    }
+  });
+
+  const handleFinish = () => {
+    completeOnboardingMutation.mutate();
+  };
+
+  return (
+    <div className="text-center">
+      <div className="mb-6">
+        <div className="w-16 h-16 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-4">
+          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path>
+          </svg>
+        </div>
+        <h1 className="text-3xl font-bold text-gray-900 mb-2">Setup Complete!</h1>
+        <p className="text-gray-600 mb-6">
+          Great! You've successfully configured FFR. Your feeds will now be monitored and articles will be automatically posted to your configured channels.
+        </p>
+      </div>
+      
+      {/* Progress indicator */}
+      <div className="flex justify-center mb-8 space-x-2">
+        <div className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+        <div className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+        <div className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+        <div className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+      </div>
+      
+      <div className="space-y-4 mb-8">
+        <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <h3 className="font-semibold text-blue-900 mb-2">What happens next?</h3>
+          <ul className="text-sm text-blue-800 space-y-1 text-left">
+            <li>• Your feeds will be checked regularly for new articles</li>
+            <li>• New articles will be automatically posted to your channels</li>
+            <li>• You can monitor activity in the Articles and other sections</li>
+          </ul>
+        </div>
+        
+        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+          <h3 className="font-semibold text-yellow-900 mb-2">Want more control?</h3>
+          <p className="text-sm text-yellow-800 text-left mb-2">
+            You can add more feeds, channels, and configure settings from the dashboard.
+          </p>
+        </div>
+      </div>
+      
+      <div className="space-y-3">
+        <button 
+          onClick={handleFinish}
+          disabled={completeOnboardingMutation.isPending}
+          className="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
+        >
+          {completeOnboardingMutation.isPending ? 'Finishing...' : 'Go to Dashboard'}
+        </button>
+        
+        <div className="text-sm text-gray-500">
+          <Link to="/articles" className="hover:text-blue-600">View Articles</Link>
+          {' • '}
+          <Link to="/feeds" className="hover:text-blue-600">Manage Feeds</Link>
+          {' • '}
+          <Link to="/settings" className="hover:text-blue-600">Settings</Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CompleteStep;

frontend/src/pages/onboarding/steps/FeedStep.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { apiClient, type FeedRequest, type Language } from '../../../lib/api';
+
+const FeedStep: React.FC = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState<FeedRequest>({
+    name: '',
+    url: '',
+    type: 'rss',
+    language_id: 0,
+    description: ''
+  });
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
+
+  // Get onboarding options (languages)
+  const { data: options, isLoading: optionsLoading } = useQuery({
+    queryKey: ['onboarding-options'],
+    queryFn: () => apiClient.getOnboardingOptions()
+  });
+
+  const createFeedMutation = useMutation({
+    mutationFn: (data: FeedRequest) => apiClient.createFeedForOnboarding(data),
+    onSuccess: () => {
+      navigate('/onboarding/channel');
+    },
+    onError: (error: any) => {
+      if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors);
+      } else {
+        setErrors({ general: [error.response?.data?.message || 'An error occurred'] });
+      }
+    }
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrors({});
+    createFeedMutation.mutate(formData);
+  };
+
+  const handleChange = (field: keyof FeedRequest, value: string | number) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    // Clear field error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: [] }));
+    }
+  };
+
+  if (optionsLoading) {
+    return <div className="text-center">Loading...</div>;
+  }
+
+  return (
+    <div className="text-center mb-8">
+      <h1 className="text-2xl font-bold text-gray-900 mb-2">Add Your First Feed</h1>
+      <p className="text-gray-600">
+        Add a RSS feed or website to monitor for new articles
+      </p>
+      
+      {/* Progress indicator */}
+      <div className="flex justify-center mt-6 space-x-2">
+        <div className="w-6 h-6 bg-green-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">✓</div>
+        <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">2</div>
+        <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">3</div>
+        <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">4</div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6 mt-8 text-left">
+        {errors.general && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-md">
+            <p className="text-red-600 text-sm">{errors.general[0]}</p>
+          </div>
+        )}
+        
+        <div>
+          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
+            Feed Name
+          </label>
+          <input 
+            type="text" 
+            id="name" 
+            value={formData.name}
+            onChange={(e) => handleChange('name', e.target.value)}
+            placeholder="My News Feed"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          />
+          {errors.name && (
+            <p className="text-red-600 text-sm mt-1">{errors.name[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="url" className="block text-sm font-medium text-gray-700 mb-2">
+            Feed URL
+          </label>
+          <input 
+            type="url" 
+            id="url" 
+            value={formData.url}
+            onChange={(e) => handleChange('url', e.target.value)}
+            placeholder="https://example.com/rss.xml"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          />
+          {errors.url && (
+            <p className="text-red-600 text-sm mt-1">{errors.url[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-2">
+            Feed Type
+          </label>
+          <select 
+            id="type" 
+            value={formData.type}
+            onChange={(e) => handleChange('type', e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          >
+            <option value="">Select feed type</option>
+            <option value="rss">RSS Feed</option>
+            <option value="website">Website</option>
+          </select>
+          {errors.type && (
+            <p className="text-red-600 text-sm mt-1">{errors.type[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="language_id" className="block text-sm font-medium text-gray-700 mb-2">
+            Language
+          </label>
+          <select 
+            id="language_id" 
+            value={formData.language_id}
+            onChange={(e) => handleChange('language_id', parseInt(e.target.value))}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          >
+            <option value="">Select language</option>
+            {options?.languages.map((language: Language) => (
+              <option key={language.id} value={language.id}>
+                {language.name}
+              </option>
+            ))}
+          </select>
+          {errors.language_id && (
+            <p className="text-red-600 text-sm mt-1">{errors.language_id[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-2">
+            Description (Optional)
+          </label>
+          <textarea 
+            id="description" 
+            rows={3}
+            value={formData.description || ''}
+            onChange={(e) => handleChange('description', e.target.value)}
+            placeholder="Brief description of this feed"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+          {errors.description && (
+            <p className="text-red-600 text-sm mt-1">{errors.description[0]}</p>
+          )}
+        </div>
+        
+        <div className="flex justify-between">
+          <Link 
+            to="/onboarding/platform"
+            className="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200"
+          >
+            ← Back
+          </Link>
+          <button 
+            type="submit" 
+            disabled={createFeedMutation.isPending}
+            className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
+          >
+            {createFeedMutation.isPending ? 'Creating...' : 'Continue'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default FeedStep;

frontend/src/pages/onboarding/steps/PlatformStep.tsx

@@ -0,0 +1,138 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+import { apiClient, type PlatformAccountRequest } from '../../../lib/api';
+
+const PlatformStep: React.FC = () => {
+  const navigate = useNavigate();
+  const [formData, setFormData] = useState<PlatformAccountRequest>({
+    instance_url: '',
+    username: '',
+    password: '',
+    platform: 'lemmy'
+  });
+  const [errors, setErrors] = useState<Record<string, string[]>>({});
+
+  const createPlatformMutation = useMutation({
+    mutationFn: (data: PlatformAccountRequest) => apiClient.createPlatformAccount(data),
+    onSuccess: () => {
+      navigate('/onboarding/feed');
+    },
+    onError: (error: any) => {
+      if (error.response?.data?.errors) {
+        setErrors(error.response.data.errors);
+      } else {
+        setErrors({ general: [error.response?.data?.message || 'An error occurred'] });
+      }
+    }
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setErrors({});
+    createPlatformMutation.mutate(formData);
+  };
+
+  const handleChange = (field: keyof PlatformAccountRequest, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    // Clear field error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: [] }));
+    }
+  };
+
+  return (
+    <div className="text-center mb-8">
+      <h1 className="text-2xl font-bold text-gray-900 mb-2">Connect Your Lemmy Account</h1>
+      <p className="text-gray-600">
+        Enter your Lemmy instance details and login credentials
+      </p>
+      
+      {/* Progress indicator */}
+      <div className="flex justify-center mt-6 space-x-2">
+        <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center text-xs font-semibold">1</div>
+        <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">2</div>
+        <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">3</div>
+        <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center text-xs font-semibold">4</div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6 mt-8 text-left">
+        {errors.general && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-md">
+            <p className="text-red-600 text-sm">{errors.general[0]}</p>
+          </div>
+        )}
+        
+        <div>
+          <label htmlFor="instance_url" className="block text-sm font-medium text-gray-700 mb-2">
+            Lemmy Instance URL
+          </label>
+          <input 
+            type="url" 
+            id="instance_url" 
+            value={formData.instance_url}
+            onChange={(e) => handleChange('instance_url', e.target.value)}
+            placeholder="https://lemmy.world"
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          />
+          {errors.instance_url && (
+            <p className="text-red-600 text-sm mt-1">{errors.instance_url[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-2">
+            Username
+          </label>
+          <input 
+            type="text" 
+            id="username" 
+            value={formData.username}
+            onChange={(e) => handleChange('username', e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          />
+          {errors.username && (
+            <p className="text-red-600 text-sm mt-1">{errors.username[0]}</p>
+          )}
+        </div>
+        
+        <div>
+          <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+            Password
+          </label>
+          <input 
+            type="password" 
+            id="password" 
+            value={formData.password}
+            onChange={(e) => handleChange('password', e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            required
+          />
+          {errors.password && (
+            <p className="text-red-600 text-sm mt-1">{errors.password[0]}</p>
+          )}
+        </div>
+        
+        <div className="flex justify-between">
+          <Link 
+            to="/onboarding"
+            className="px-4 py-2 text-gray-600 hover:text-gray-800 transition duration-200"
+          >
+            ← Back
+          </Link>
+          <button 
+            type="submit" 
+            disabled={createPlatformMutation.isPending}
+            className="bg-blue-600 text-white py-2 px-6 rounded-md hover:bg-blue-700 transition duration-200 disabled:opacity-50"
+          >
+            {createPlatformMutation.isPending ? 'Connecting...' : 'Continue'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default PlatformStep;

frontend/src/pages/onboarding/steps/WelcomeStep.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+const WelcomeStep: React.FC = () => {
+  return (
+    <div className="text-center">
+      <h1 className="text-3xl font-bold text-gray-900 mb-2">Welcome to FFR</h1>
+      <p className="text-gray-600 mb-8">
+        Let's get you set up! We'll help you configure your Lemmy account, add your first feed, and create a channel for posting.
+      </p>
+      
+      <div className="space-y-4">
+        <div className="flex items-center text-sm text-gray-600">
+          <div className="w-6 h-6 bg-blue-500 text-white rounded-full flex items-center justify-center mr-3 text-xs font-semibold">1</div>
+          <span>Connect your Lemmy account</span>
+        </div>
+        <div className="flex items-center text-sm text-gray-600">
+          <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">2</div>
+          <span>Add your first feed</span>
+        </div>
+        <div className="flex items-center text-sm text-gray-600">
+          <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">3</div>
+          <span>Configure a channel</span>
+        </div>
+        <div className="flex items-center text-sm text-gray-600">
+          <div className="w-6 h-6 bg-gray-300 text-gray-600 rounded-full flex items-center justify-center mr-3 text-xs font-semibold">4</div>
+          <span>You're ready to go!</span>
+        </div>
+      </div>
+      
+      <div className="mt-8">
+        <Link 
+          to="/onboarding/platform"
+          className="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition duration-200 inline-block"
+        >
+          Get Started
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomeStep;