/** * ============================================================================= * HOME PAGE COMPONENT * ============================================================================= * * Landing page showcasing the boilerplate features. * * INTERVIEW NOTES: * - This page demonstrates responsive layout with Tailwind * - Features section shows what's included in the boilerplate * - Good starting point for interview tasks */ import { Link } from 'react-router-dom'; const features = [ { title: 'Mistral AI Chatbot', description: 'Full-featured chat with streaming, personas, and conversation history', path: '/demo/mistral-chat', icon: ( ), }, { title: 'React + TypeScript', description: 'Type-safe development with modern React patterns and hooks', path: '/demo/react', icon: ( ), }, { title: 'Supabase Backend', description: 'PostgreSQL database with real-time subscriptions and auth', path: '/demo/supabase', icon: ( ), }, { title: 'Redux Toolkit', description: 'Global state management with slices, thunks, and selectors', path: '/demo/redux', icon: ( ), }, { title: 'Redis Caching', description: 'Server-side caching for optimal performance and cost reduction', path: '/demo/redis', icon: ( ), }, { title: 'Tailwind CSS', description: 'Utility-first CSS framework with custom design system', path: '/demo/tailwind', icon: ( ), }, { title: 'Process Management', description: 'Subprocess utilities for running background tasks and scripts', path: '/demo/process', icon: ( ), }, ]; export default function HomePage() { return (
{/* Hero section */}

Mistral React Boilerplate

A production-ready React starter with TypeScript, Supabase, Redux, Redis caching, and more. Built for your Mistral interview.

View Demo Mistral Docs
{/* Features grid */}
{features.map((feature) => (
{feature.icon}

{feature.title}

{feature.description}

))}
{/* Interview prep section */}

Interview Preparation

Before the Interview

  • ✓ Review Mistral's Completion API documentation
  • ✓ Familiarize yourself with this project structure
  • ✓ Test the dev server and ensure everything builds
  • ✓ Practice common React patterns (hooks, state, effects)

During the Interview

  • ! AI autocompletion (Copilot) is allowed
  • ✗ Coding agents are NOT allowed
  • ✓ You may use Google for reference
  • ✓ Be ready to share your screen
); }