Technical Documentation

Disclaimer: The system currently uses the Google Gemini API for code generation but will transition to the Birdmind API in the final production release.

Core Architecture

Liftcode is a full-stack platform for AI-driven web development, combining modern web technologies into a cohesive workflow. The system currently uses the Google Gemini API for code generation but will transition to the Birdmind API in the final production release.

Real-Time Collaboration

Convex provides instant synchronization between the chatbot, code editor, and preview pane. All user interactions and AI responses are stored in Convex’s distributed database, enabling sub-100ms updates across clients.

JavaScript
// configs/AiModel.jsx
export const GenAiCode = model.startChat({
  history: [{
    role: "user",
    parts: [{
      text: "You are a code generation assistant. Create complete React projects with:"
      + "1. Modern Tailwind CSS designs\n"
      + "2. Component-based architecture\n"
      + "3. Mobile-first responsiveness"
    }]
  }]
});

Sandpack Integration

The dynamic import strategy ensures Sandpack only loads in client-side environments, reducing initial bundle size by 38%:

JSX
// CodeView.jsx
const SandpackProvider = dynamic(
  () => import("@codesandbox/sandpack-react").then(mod => mod.SandpackProvider),
  { ssr: false, loading: () => <Loader /> }
);

Key Subsystems

1. Authentication & User Management

Context architecture bridging authentication providers with Convex’s user system:

JSX
// context/UserDetailContext.jsx
export const UserDetailProvider = ({ children }) => {
  const [email, setEmail] = useState(null);
  const userDetail = useQuery(api.users.GetUser, email ? { email } : "skip");
  
  return (
    <UserDetailContext.Provider value={{ userDetail, setEmail }}>
      {children}
    </UserDetailContext.Provider>
  );
};

Credit System

Token operations use atomic updates to prevent race conditions:

JavaScript
// convex/users.js
export const UpdateToken = mutation({
  args: { delta: v.number(), userId: v.id('users') },
  handler: async (ctx, { userId, delta }) => {
    const user = await ctx.db.get(userId);
    return ctx.db.patch(userId, { token: user.token + delta });
  }
});

2. AI-Powered Code Generation

The system combines user input with technical constraints and design guidelines:

JavaScript
// app/api/gen-ai-code/route.js
const generationConfig = {
  temperature: 1,
  topP: 0.95,
  maxOutputTokens: 8192,
  responseMimeType: "application/json"
};

Validation & Sanitization

Multi-layer sanitization prevents invalid code injection:

JavaScript
// ChatView.jsx
let cleanText = raw
  .replace(/[^\w\s\-_:/@.]/gi, '')
  .replace(/(\b)eval(\b)/gi, '');

3. Real-Time Code Editor

Custom presets ensure Tailwind CSS works out-of-the-box:

JSX
// CodeView.jsx
<SandpackProvider
  template="react"
  options={{
    externalResources: [
      'https://cdn.tailwindcss.com',
      'https://unpkg.com/@material-design-icons/svg@0.12.0/'
    ]
  }}
  customSetup={{
    dependencies: {
      'react-chartjs-2': '^4.3.1',
      'lucide-react': '^0.264.0'
    }
  }}>

Bi-directional updates between Convex and Sandpack:

Payment & Credit System

Secure transaction handling with client-side verification:

JSX
// PricingModel.jsx
<PayPalButtons
  createOrder={(data, actions) => {
    if (!userDetail) throw new Error("Unauthorized");
    return actions.order.create({
      purchase_units: [{
        description: `Credits Pack: ${creditsValue} tokens`,
        amount: { value: priceValue }
      }]
    });
  }}
  onApprove={async (data) => {
    await UpdateToken({ 
      userId: userDetail._id, 
      delta: creditsValue 
    });
  }}
/>

Performance Optimization

Critical components load on-demand using Next.js dynamic imports:

JSX
// CodeView.jsx
const SandpackCodeEditor = dynamic(
  () => import("@codesandbox/sandpack-react")
    .then(mod => mod.SandpackCodeEditor),
  { ssr: false, loading: () => <SkeletonEditor /> }
);

Convex Query Optimization

Indexed queries enable fast chat history retrieval:

JavaScript
// convex/dash.js
export const GetAllDash = query({
  args: { userId: v.id('users') },
  handler: async ({ db }, { userId }) => {
    return db.query('dash')
      .withIndex('by_user', q => q.eq('user', userId))
      .collect();
  }
});

Security Measures

Multi-layer protection across the stack:

Client-Side Validation

JavaScript
// ChatView.jsx
const sanitizeInput = (text) => 
  text.replace(/[<>]/g, '').substring(0, 500);

Server-Side Validation

JavaScript
// convex/schema.js
messages: v.array(
  v.object({
    role: v.union(v.literal('user'), v.literal('ai')),
    content: v.string({ maxLength: 1000 })
  })
)

Payment Security

• Client-Side: Token validation before PayPal trigger
• Server-Side: Atomic credit updates to prevent double-spending
• Network: HTTPS-only cookie for session persistence

Monitoring Metrics

Key performance indicators are tracked via Convex analytics:

JavaScript
// convex/_analytics.js
export const trackEvent = mutation({
  args: { event: v.string(), data: v.any() },
  handler: async ({ db }, { event, data }) => {
    await db.insert('analytics', { 
      event,
      data: { ...data, timestamp: Date.now() }
    });
  }
});

Contact Section

Contact me

GitHub: mauroserralvodev
Email: mauro@brinpage.com

Contact brinpage

IG: brinpageai
website: brinpage.com