Skip to main content

Building web apps

Create modern React web applications with instant deployment.

Getting started​

Select web platform​

  1. Go to the prompt input
  2. Click the platform toggle
  3. Select Web (usually default)

Write your prompt​

Build a project management dashboard with:
- Kanban board with drag-and-drop
- Project list with status indicators
- Team member assignment
- Due date tracking
- Dark mode support

Tech stack​

Appifex generates web apps using:

  • React - UI framework
  • Vite - Fast build tool
  • TailwindCSS - Utility-first styling
  • TypeScript - Type safety
  • React Router - Navigation

Project structure​

web/
├── src/
│   ├── components/     # Reusable UI components
│   │   ├── Button.tsx
│   │   ├── Card.tsx
│   │   └── Modal.tsx
│   ├── pages/          # Route pages
│   │   ├── Home.tsx
│   │   ├── Dashboard.tsx
│   │   └── Settings.tsx
│   ├── hooks/          # Custom React hooks
│   ├── services/       # API calls
│   ├── types/          # TypeScript types
│   └── App.tsx         # Root component
├── public/             # Static assets
└── package.json

Styling your app​

Using TailwindCSS​

Request specific styles:

"Use a minimalist design with lots of whitespace"
"Make the sidebar dark with light text"
"Use rounded corners on all cards"

Custom colors​

"Use these brand colors:
 - Primary: #6366f1 (indigo)
 - Secondary: #8b5cf6 (violet)
 - Background: #f8fafc (light gray)"

Responsive design​

All apps are responsive by default. Be specific if needed:

"On mobile, stack the sidebar below the main content"
"Hide the secondary navigation on screens under 768px"

Common patterns​

Dashboard layout​

Build a dashboard with:
- Fixed sidebar navigation (left)
- Top header with search and user menu
- Main content area with cards
- Responsive: sidebar becomes hamburger menu on mobile

Form handling​

Create a multi-step form for user onboarding:
- Step 1: Basic info (name, email)
- Step 2: Preferences (theme, notifications)
- Step 3: Confirmation
- Progress indicator at top
- Validation on each step

Data tables​

Build a data table component with:
- Sortable columns
- Search/filter
- Pagination
- Row selection with checkboxes
- Export to CSV button

Adding interactivity​

Real-time features​

"Add real-time updates using WebSocket
 when new tasks are created"

Animations​

"Add smooth transitions when cards appear"
"Animate the sidebar open/close"

Charts and graphs​

"Add a line chart showing weekly progress
 using Recharts library"

Deployment​

Web apps deploy automatically to Vercel:

  1. Push to GitHub - Automatic
  2. Build on Vercel - Triggered automatically
  3. Live URL - Available in seconds

Your URL: your-project.vercel.app

Custom domains​

  1. Go to Vercel dashboard
  2. Add your domain
  3. Update DNS settings
  4. SSL configured automatically

Best practices​

Performance​

"Lazy load images below the fold"
"Use code splitting for the admin section"

SEO​

"Add meta tags for SEO"
"Include Open Graph tags for social sharing"

Accessibility​

"Ensure all interactive elements are keyboard accessible"
"Add ARIA labels to icon buttons"

Example prompts​

SaaS dashboard:

Build a SaaS analytics dashboard with:
- Overview metrics (cards with numbers)
- Line chart for trends over time
- Table of recent activity
- Date range picker
- Export data button

Portfolio site:

Create a portfolio website with:
- Hero section with name and tagline
- Project gallery with filters
- About page with timeline
- Contact form
- Smooth scroll navigation

Admin panel:

Build an admin panel with:
- User management (CRUD)
- Role-based permissions
- Activity logs
- System settings
- Dark mode toggle