A modern, responsive web application for predicting and analyzing marketing campaign performance. Built with React, TypeScript, and enhanced with beautiful animations using Framer Motion.
This section documents the AI prompts used to build this application, demonstrating the power of AI-assisted development.
You're a world-class UI/UX designer of sleek, modern mobile apps.
Create a responsive layout with two empty columns. The first column should be 1/4 of the content area. The second column should be 3/4 of the content area.
The content area should have max width of 7xl and it should be centered. Use flex. Use darker tones for the background colors.
Use react.js, tailwind css and headless ui to create the layout.
Replace the current app component
You are a world class UI/UX designer who creates sleek and modern mobile apps.
Design a controlled input field as a separate component and put it under the common folder.
Make sure you are using headless UI and tailwind CSS. Make it look cool.
Then put four such fields in the first column of layout. Place all field under headless UI Field component and pack them with a Label component.
The first field must have a label "Campaign start" and it must be date field. The second field must be also a date field, but with label Campaign End. The third field must be a number input field with max value of 100000 and a min value of 1. Its label is Target Revenue. The fourth field must be a number input field with max value of 100000 and min value of 1. The label says Avg. Order Value.
You're a world-class UI/UX designer of modern mobile apps.
Create a currency switcher component by using headless UI list component and Tailwind CSS to style it.
The available currencies are USD, EUR, GBP, and BGN with proper symbols.
Place it in the first column below the language switcher.
You're a world-class UI/UX designer of modern mobile apps.
Create a language switcher component by using headless UI list component and Tailwind CSS to style it.
The available languages are Bulgarian and US English.
Place one above the currency switcher in the first column.
Use the svg images in the assets folder
You're a world-class UI/UX designer of modern mobile apps.
Create a stats card with three rows of content. The first row has an icon placeholder and a title "prospects" in the left corner and a percentage (100%) in the right corner.
The middle row has big number 21.
And the third row contains a progress bar.
Make sure you use Tailwind CSS to create the card.
Place one at the top of the second column of the layout.
You're a world-class UI/UX designer of modern mobile apps.
By using the library rc-slider create a new component slider.
Place two sliders in the second div of the second column. The min value is 0 and the max value is 100 percent. The first slider has the label "Avg. Lead Response Rate" and second slider has the label "Avg. Prospect Response Rate"
You're a world-class UI/UX designer of modern mobile apps.
Create a nice horizontal bar chart in a separate component placed in the component folder. It depicts the metrics of number of customers, number of leads and number of prospects in time.
The period type is month. The graph shows overlapping horizontal bars of customers, leads, and prospects for each month.
The x-axis shows the total number of people which is the number of prospects. And the y-axis shows the period number.
Use the library Observable Plot.
Then put an instance at the top of the second column beside the stats card.
export type Metric = {
id: string,
value: number,
title: string,
color: string,
percentage: number,
periodType: string,
period: number,
}Create a function with the name getTotalCustomers that accepts two parameters totalRevenue: number and avgOrderValue: number. Implement the function.
Create a function getTotalLeads that accepts the number of totalCustomers as float number and the average lead response rate as float number. Implement the logic
Create a function getTotalProspects that accepts the number of totalLeads as float number and the average prospect response rate as float number. Implement the logic
Create three functions. All of the three accept two arguments startDate and endDate which are strings. The first function is getNumberOfDays, the second is getNumberOfWeeks and the third is getNumberOfMonths. Implement the functions.
Extract all labels and other strings and prepare the application for internationalization. The available languages are Bulgarian and English. Provide translations in Bulgarian.
Use react-i18next
You are a world-class UI/UX designer, please add some visual effects and animations by using Framer Motion and TailwindCSS. Keep the colors the same.
- Real-time Calculations: Dynamic lead and prospect calculations based on your inputs
- Visual Progress Tracking: Animated progress bars and statistics cards
- Monthly Projections: Interactive charts showing campaign progression over time
- Multi-language Support: English and Bulgarian translations
- Dynamic Language Switching: Real-time language changes with flag-based switcher
- Localized Content: All UI elements, business terminology, and help text translated
- 4 Currencies: USD, EUR, GBP, BGN
- Currency Symbols: Proper formatting with currency symbols
- Real-time Switching: Instant currency changes
- Dark Theme: Professional dark mode interface
- Glass Morphism: Backdrop blur effects and translucent elements
- Smooth Animations: Framer Motion powered transitions and interactions
- Responsive Design: Mobile-first approach with breakpoint optimization
- WCAG 2.1 AA Compliance: Full accessibility standards compliance
- Keyboard Navigation: Complete keyboard accessibility
- Screen Reader Support: Proper ARIA labels and live regions
- Focus Management: Enhanced focus indicators and management
- Node.js 18+
- npm or yarn
# Clone the repository
git clone <repository-url>
cd softuni-presentation2
# Install dependencies
npm install
# Start development server
npm start# Run in development mode
npm start
# Build for production
npm run build
# Run tests
npm test
# Preview production build
npm run preview- React 18 - Modern React with hooks and concurrent features
- TypeScript - Type-safe development
- Vite - Fast build tool and development server
- Tailwind CSS 4.x - Utility-first CSS framework
- Headless UI 2.0 - Unstyled, accessible UI components
- Heroicons - Beautiful hand-crafted SVG icons
- Framer Motion - Production-ready motion library
- RC Slider - Customizable slider components
- Observable Plot 0.6.17 - Grammar of graphics for JavaScript
- react-i18next 15.5.1 - Internationalization framework
- i18next 25.1.2 - Internationalization ecosystem
src/
├── components/ # Reusable UI components
│ └── common/ # Shared components
│ ├── ControlledInput.tsx
│ ├── CurrencySwitcher.tsx
│ ├── CustomSlider.tsx
│ ├── LanguageSwitcher.tsx
│ └── StatsCard.tsx
├── assets/ # Static assets
│ ├── flag-bg.svg # Bulgarian flag
│ ├── flag-us.svg # US flag
│ └── logo-text-gray.png
├── i18n.ts # Internationalization configuration
├── types.ts # TypeScript type definitions
├── utils.ts # Business logic utilities
├── app.tsx # Main application component
├── index.tsx # Application entry point
└── index.css # Global styles and CSS variables
Create a .env file in the root directory:
# Application configuration
VITE_APP_TITLE="Lead Predictor"
VITE_DEFAULT_LANGUAGE="en"
VITE_DEFAULT_CURRENCY="USD"The application uses CSS custom properties for theming:
:root {
--color-prospects: #1e3a8a; /* Blue for prospects */
--color-leads: #7c3aed; /* Purple for leads */
--color-customers: #059669; /* Green for customers */
--color-slider: #3b82f6; /* Slider track color */
--color-slider-track: #374151; /* Slider rail color */
}// Calculate total customers needed
const totalCustomers = targetRevenue / avgOrderValue
// Calculate leads needed (based on lead response rate)
const totalLeads = totalCustomers / (leadResponseRate / 100)
// Calculate prospects needed (based on prospect response rate)
const totalProspects = totalLeads / (prospectResponseRate / 100)- Days: For campaigns < 3 weeks
- Weeks: For campaigns 3 weeks - 3 months
- Months: For campaigns > 3 months
- Background:
bg-gray-900- Main dark background - Cards:
bg-gray-800- Card backgrounds - Borders:
border-gray-700- Subtle borders - Text:
text-gray-100- Primary text - Accent: Blue/Purple gradient for interactive elements
- Headings: Font weight 600-700, tracking wide
- Body: Font weight 400-500
- Labels: Font weight 600, uppercase tracking
- Containers:
p-6for large sections,p-4for mobile - Gaps:
gap-6for main layout,gap-4for components - Margins:
mb-4for component spacing
interface StatsCardProps {
title: string // Card title
percentage: number // Percentage value
value: number // Main display value
progress: number // Progress bar value (0-100)
icon?: React.ReactNode // Optional icon
className?: string // Additional CSS classes
color?: string // Background color
}interface ControlledInputProps {
label: string // Input label
type?: 'text' | 'date' | 'number' // Input type
value: string | number // Current value
onChange: (value: string | number) => void // Change handler
placeholder?: string // Placeholder text
min?: number // Min value (number inputs)
max?: number // Max value (number inputs)
required?: boolean // Required field
className?: string // Additional CSS classes
error?: string // Error message
helpText?: string // Help text
}interface CustomSliderProps {
label: string // Slider label
value: number // Current value
onChange: (value: number) => void // Change handler
min?: number // Minimum value
max?: number // Maximum value
step?: number // Step increment
className?: string // Additional CSS classes
}- Add language configuration in
src/i18n.ts - Create translation files in the resources object
- Add language option to
LanguageSwitchercomponent - Add corresponding flag SVG to assets
const translations = {
// Navigation & UI
appTitle: "Lead Predictor",
// Form Labels
campaignStart: "Campaign Start",
campaignEnd: "Campaign End",
// Business Terms
prospects: "Prospects",
leads: "Leads",
customers: "Customers",
// Settings
responseRateSettings: "Response Rate Settings"
}- Mobile: Default styles (< 768px)
- Tablet:
md:prefix (768px+) - Desktop:
lg:prefix (1024px+)
- Mobile: Single column stack layout
- Tablet+: Two-column layout (1/4 sidebar, 3/4 main)
- Cards: Grid adapts from 1 to 3 columns
- Charts: Responsive sizing and orientation
- All form inputs work correctly
- Language switching updates all text
- Currency switching updates display
- Calculations update in real-time
- Animations play smoothly
- Responsive layout works on all devices
- Accessibility features function properly
npm run buildnpm install -g vercel
vercel --prodnpm install -g netlify-cli
netlify deploy --prod --dir=dist- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Observable Plot for powerful data visualization
- Headless UI for accessible component primitives
- Framer Motion for smooth animations
- Tailwind CSS for rapid UI development
- React i18next for internationalization
Александър Вучков
- Website: ContentDevs.com
- SoftUni Course: AI in Practice
Built with ❤️ using AI-assisted development principles and modern web technologies.