Content is user-generated and unverified.

Full-Stack AI UI Generator - Coding Test

Overview

Build a web application that converts requirement documents into UI screens using AI. The system should take user requirements, process them through an AI model, and render the resulting UI components on screen.

Timeline

  • Phase 1: Plan submission (2 days)
  • Phase 2: Implementation (3 days, if shortlisted)
  • Final Deliverable: Live Firebase-hosted URL for testing

Technical Requirements

Architecture

User Input (Requirements) 
    ↓
React Web App (Firebase Hosting)
    ↓
Firebase Cloud Function (Backend)
    ↓
OpenAI API Call
    ↓
Markdown Response
    ↓
Firebase Function Returns Markdown
    ↓
React App Renders Markdown as UI

Core Components

1. Frontend (React + Firebase Hosting)

  • Input Interface: Accept requirement documents (text input or file upload)
  • Processing State: Show loading/processing indicators
  • Output Display: Render AI-generated markdown as actual UI components
  • Error Handling: Graceful error states and user feedback

2. Backend (Firebase Cloud Functions)

  • API Endpoint: Receive requirement documents from frontend
  • AI Integration: Make API calls to OpenAI (GPT-4.1, GPT-4o, or free alternatives)
  • Response Processing: Handle AI responses and return markdown
  • Error Management: Proper error handling and logging

3. AI Integration

  • Model Options:
    • Preferred: OpenAI GPT-4.1 or GPT-4o (latest models)
    • Free Alternatives: GPT-3.5-turbo, Anthropic Claude (free tier), Google Gemini (free tier), or Ollama (local models)
  • Prompt Engineering: Convert requirements to markdown UI specifications
  • Output Format: Structured markdown that can be rendered as React components

4. Markdown Rendering

  • Convert AI-generated markdown to HTML/React components
  • Support common UI elements: forms, buttons, layouts, text, etc.
  • Ensure responsive design and basic styling

Sample Requirement Document (PRD Format)

markdown
# E-commerce Admin Dashboard - Product Requirements Document

## Problem Statement
Our e-commerce platform currently lacks a centralized admin interface for product management. Store administrators are using multiple disconnected tools, leading to inefficiencies, data inconsistencies, and delayed response to inventory issues. We need a unified dashboard to streamline admin workflows and improve operational efficiency.

## Business Objectives
- Reduce time spent on product management tasks by 40%
- Improve inventory accuracy and reduce stockouts
- Enable faster response to customer orders and inquiries
- Provide real-time visibility into key business metrics

## Target Users
**Primary**: E-commerce store administrators and managers
**Secondary**: Customer service representatives with product access
**User Context**: Daily users who manage 100-500 products across multiple categories

## User Stories

### Core Functionality
- **As an admin**, I want to see key business metrics at a glance so I can quickly assess store performance
- **As an admin**, I want to efficiently search and filter products so I can find specific items quickly
- **As an admin**, I want to view product details and inventory status so I can make informed decisions
- **As an admin**, I want to add new products to the catalog so I can expand our offerings
- **As an admin**, I want to update product information so I can keep listings accurate and current
- **As an admin**, I want to see recent order activity so I can monitor sales trends

### Business Intelligence
- **As a store manager**, I want to see revenue trends so I can track business performance
- **As an admin**, I want to identify low-stock items so I can reorder before stockouts occur
- **As an admin**, I want to see which products are performing well so I can optimize our catalog

## Functional Requirements

### Dashboard Overview
- Display critical business metrics (revenue, orders, inventory levels)
- Show performance indicators and trends
- Provide quick access to common admin tasks
- Display recent activity and alerts

### Product Management
- Search products by name, SKU, or category
- Filter products by various criteria (price, stock status, category)
- View comprehensive product information
- Enable bulk operations on multiple products
- Support adding new products with required information
- Allow editing of existing product details

### Inventory Tracking
- Real-time stock level monitoring
- Low inventory alerts and notifications
- Track products across different categories
- Monitor product performance metrics

### Order Visibility
- View recent order activity
- Track pending orders requiring attention
- Monitor order fulfillment status

## Success Metrics
- **Efficiency**: Reduce average time to find and update a product from 3 minutes to under 1 minute
- **Accuracy**: Achieve 99%+ inventory accuracy
- **User Adoption**: 100% of admin users actively using the dashboard within 2 weeks
- **Business Impact**: Reduce stockouts by 25% within first quarter

## Technical Considerations
- Must support 1000+ concurrent product updates
- Response time under 2 seconds for all user interactions
- Mobile-responsive for tablet access
- Integration with existing inventory management system
- Secure access controls for different admin roles

## Out of Scope (V1)
- Advanced analytics and reporting
- Multi-store management
- Customer-facing features
- Third-party marketplace integrations
- Automated reordering workflows

## Business Priority
High - This addresses critical operational inefficiencies affecting daily admin productivity and customer satisfaction.

Technical Specifications

Frontend Requirements

  • Framework: React
  • Hosting: Firebase Hosting
  • Styling: CSS/SCSS, styled-components, or Tailwind CSS
  • State Management: React hooks (useState, useEffect, etc.)
  • Markdown Rendering: react-markdown, custom implementation, or whichever works best with AI output

Backend Requirements

  • Platform: Firebase Cloud Functions
  • Runtime: Node.js
  • AI API: OpenAI API (GPT-4.1/4o preferred) or free alternatives (GPT-3.5-turbo, Claude, Gemini)

Phase 1: Plan Submission (2 Days)

Submit a detailed plan including:

1. Architecture Document

  • System architecture diagram
  • Technology stack justification
  • Data flow explanation
  • API design (endpoints, request/response formats)

Phase 2: Implementation (3 Days)

Deliver a complete working solution with the following components:

Required Deliverables

  • Working Backend: Firebase Cloud Functions that accept requirements and return AI-generated markdown
  • Functional Frontend: React application that allows input of requirements and displays rendered UI
  • AI Integration: Successfully converts requirement documents to UI markdown using your chosen AI model
  • Deployed Application: Live Firebase-hosted URL that we can access and test
  • End-to-End Functionality: Complete workflow from requirement input to UI output

Success Criteria

  • User can input or upload requirement documents
  • System processes requirements through AI and returns appropriate UI markdown
  • Generated markdown renders as functional UI components
  • Application handles errors gracefully
  • Deployed solution is accessible via provided URL

Evaluation Criteria

We'll evaluate based on:

  • Working Solution: Does the end-to-end system function as expected?
  • Code Quality: Clean, readable code with good structure
  • AI Integration: Effective conversion of requirements to UI
  • User Experience: Intuitive interface and proper error handling
  • Deployment: Live, accessible Firebase-hosted application

Final Deliverables

  1. Live Application: Firebase-hosted URL that we can test
  2. Source Code: GitHub repository with clear README
  3. Documentation: Setup instructions and API documentation
  4. Demo Video: 3-5 minute walkthrough of your application
  5. Reflection Document: Challenges faced and solutions implemented

Submission Guidelines

Phase 1 Submission

Email your plan documents as PDF or markdown files to hello@litethink.ai with:

  • Subject: "Intern Application - Phase 1 Plan - [Your Name]"
  • Include estimated completion timeline
  • Attach all planning documents

If shortlisted: We'll schedule a 30-minute Google Meet call where you'll explain your approach and planning. Selected candidates will receive ₹2,000 compensation for their Phase 1 effort.

Phase 2 Submission

Email the following to hello@litethink.ai:

  • Subject: "Intern Application - Phase 2 Implementation - [Your Name]"
  • Live URL: Firebase-hosted application link
  • GitHub Repository: Public repo with source code
  • Documentation: README with setup instructions

If shortlisted: We'll schedule a 1-hour Google Meet demo call where you'll walk through your implementation. Selected candidates will receive an additional ₹3,000 compensation for their Phase 2 effort.

Questions?

If you have any technical questions or need clarification, feel free to reach out. Good luck, and we're excited to see your solution!


Note: This test evaluates your ability to work with modern web technologies, integrate AI services, and deliver a complete solution. Focus on creating a working end-to-end system rather than perfect code - we value problem-solving and implementation skills over perfection.

Content is user-generated and unverified.
    Full-Stack AI UI Generator - Coding Test | Claude