> ## Documentation Index
> Fetch the complete documentation index at: https://docs.weventures.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# WeScale Projects

> Small to medium full-stack builds for clients

## Overview

WeScale delivers rapid, high-quality solutions for SMB/SME clients, from marketing sites to interactive 3D experiences.

<CardGroup cols={2}>
  <Card title="Marketing Sites" icon="palette">
    Stunning landing pages and brand experiences
  </Card>

  <Card title="Event Platforms" icon="calendar">
    Registration, microsites, virtual events
  </Card>

  <Card title="3D Experiences" icon="cube">
    Interactive viewers and configurators
  </Card>

  <Card title="Business Apps" icon="gauge">
    Dashboards, admin panels, workflows
  </Card>
</CardGroup>

## Project Types

### Marketing & Landing Pages

<Tabs>
  <Tab title="Framer Projects">
    **When to use Framer:**

    * Pure visual/marketing focus
    * No backend requirements
    * Fast turnaround needed
    * Heavy animations

    **Deliverables:**

    * Responsive design
    * SEO optimization
    * Analytics integration
    * CMS setup
  </Tab>

  <Tab title="Next.js Sites">
    **When to use Next.js:**

    * Custom interactions
    * Form processing
    * Dynamic content
    * API integrations

    **Deliverables:**

    * Custom components
    * Backend logic
    * Database integration
    * Admin panel
  </Tab>
</Tabs>

### Event Microsites

<Accordion title="Features">
  * Secure registration flows
  * Payment processing
  * Email confirmations
  * Attendee management
  * Virtual event streaming
  * Networking features
</Accordion>

<Accordion title="Tech Stack">
  ```javascript theme={null}
  const eventStack = {
    frontend: "Next.js + Tailwind",
    auth: "Supabase Auth",
    database: "PostgreSQL",
    payments: "Stripe",
    email: "Resend/SendGrid",
    streaming: "Mux/YouTube API"
  }
  ```
</Accordion>

### Prize Draw Platforms

<Steps>
  <Step title="Entry Collection">
    Secure form submission with validation
  </Step>

  <Step title="Verification">
    Email/SMS verification, duplicate detection
  </Step>

  <Step title="Random Selection">
    Cryptographically secure randomization
  </Step>

  <Step title="Winner Notification">
    Automated emails, dashboard updates
  </Step>

  <Step title="Audit Trail">
    Complete logs for transparency
  </Step>
</Steps>

### 3D Viewer Websites

<CodeGroup>
  ```typescript Basic Viewer theme={null}
  // components/3d/viewer.tsx
  import { Canvas } from '@react-three/fiber'
  import { OrbitControls, useGLTF } from '@react-three/drei'

  export function ModelViewer({ modelUrl }) {
    const { scene } = useGLTF(modelUrl)

    return (
      <Canvas camera={{ position: [0, 0, 5] }}>
        <ambientLight intensity={0.5} />
        <directionalLight position={[10, 10, 5]} />
        <primitive object={scene} />
        <OrbitControls />
      </Canvas>
    )
  }
  ```

  ```typescript Advanced Features theme={null}
  // components/3d/configurator.tsx
  export function Configurator({ model, options }) {
    const [config, setConfig] = useState(defaultConfig)

    return (
      <div className="flex">
        <Canvas className="flex-1">
          <Model config={config} />
          <Annotations items={config.annotations} />
          <Environment preset="studio" />
        </Canvas>
        <ConfigPanel
          options={options}
          onChange={setConfig}
        />
      </div>
    )
  }
  ```
</CodeGroup>

### Light Dashboards

<CardGroup cols={2}>
  <Card title="Admin Panels" icon="user-gear">
    User management, settings, logs
  </Card>

  <Card title="Analytics" icon="chart-line">
    Charts, KPIs, reports, exports
  </Card>

  <Card title="CRUD Apps" icon="table">
    Data tables, forms, filters
  </Card>

  <Card title="Workflows" icon="diagram-project">
    Multi-step processes, approvals
  </Card>
</CardGroup>

## Development Process

### Timeline Expectations

<Table>
  <thead>
    <tr>
      <th>Project Type</th>
      <th>Typical Duration</th>
      <th>Team Size</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Landing Page (Framer)</td>
      <td>1-2 weeks</td>
      <td>1 developer</td>
    </tr>

    <tr>
      <td>Marketing Site (Next.js)</td>
      <td>2-4 weeks</td>
      <td>1-2 developers</td>
    </tr>

    <tr>
      <td>Event Platform</td>
      <td>4-6 weeks</td>
      <td>2 developers</td>
    </tr>

    <tr>
      <td>3D Viewer</td>
      <td>3-5 weeks</td>
      <td>1-2 developers</td>
    </tr>

    <tr>
      <td>Dashboard/Admin</td>
      <td>4-8 weeks</td>
      <td>2-3 developers</td>
    </tr>
  </tbody>
</Table>

### Delivery Phases

<Steps>
  <Step title="Discovery">
    Requirements gathering, technical planning
  </Step>

  <Step title="Design">
    Mockups, component library, interactions
  </Step>

  <Step title="Development">
    Iterative builds with client reviews
  </Step>

  <Step title="Testing">
    QA, user acceptance, performance
  </Step>

  <Step title="Deployment">
    Production setup, monitoring, handoff
  </Step>
</Steps>

## Common Implementations

### Authentication Pattern

```typescript theme={null}
// lib/auth/middleware.ts
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient({ req, res })

  const { data: { session } } = await supabase.auth.getSession()

  if (!session) {
    return NextResponse.redirect('/login')
  }

  return res
}
```

### Data Table Pattern

```tsx theme={null}
// components/data-table.tsx
import { DataTable } from '@/components/ui/data-table'

export function UsersTable() {
  const { data, isLoading } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers
  })

  const columns = [
    { header: 'Name', accessorKey: 'name' },
    { header: 'Email', accessorKey: 'email' },
    { header: 'Status', accessorKey: 'status' }
  ]

  return (
    <DataTable
      columns={columns}
      data={data}
      loading={isLoading}
    />
  )
}
```

## Quality Standards

<Checklist>
  <Check>Responsive design (mobile-first)</Check>
  <Check>Accessibility (WCAG 2.1 AA)</Check>
  <Check>Performance (Core Web Vitals)</Check>
  <Check>SEO optimization</Check>
  <Check>Security best practices</Check>
  <Check>Cross-browser compatibility</Check>
  <Check>Error handling</Check>
  <Check>Documentation</Check>
</Checklist>

## Pricing Tiers

<Tabs>
  <Tab title="Starter">
    **$5K - $15K**

    * Landing pages
    * Basic sites
    * Simple forms
    * 2-4 week delivery
  </Tab>

  <Tab title="Professional">
    **$15K - $50K**

    * Custom applications
    * Database integration
    * User authentication
    * 4-8 week delivery
  </Tab>

  <Tab title="Enterprise">
    **\$50K+**

    * Complex platforms
    * Multiple integrations
    * Ongoing support
    * 8+ week delivery
  </Tab>
</Tabs>

## Support & Maintenance

<CardGroup cols={2}>
  <Card title="Launch Support" icon="rocket">
    30-day post-launch bug fixes
  </Card>

  <Card title="Maintenance Plans" icon="wrench">
    Monthly retainers for updates
  </Card>
</CardGroup>

<Info>
  **Next Steps**: Review our [workflow documentation](/workflows/new-project) to understand our development process.
</Info>