Welcome to Lumea!

Let’s get you up and running with your first application. This guide will walk you through the basics of using Lumea to build a functional web app.

Prerequisites: You just need a web browser and a Lumea account. No coding experience required!

Step 1: Create Your Account

1

Sign Up

Visit app.lumea.dev and click “Get Started Free”

2

Choose Your Plan

Start with the free tier - you can always upgrade later

3

Verify Your Email

Check your inbox and click the verification link

Step 2: Your First Project

Once logged in, you’ll see the Lumea dashboard.

Create New Project

Click the “New Project” button to start building

Project Setup

You’ll be guided through a simple setup:

  1. Project Name: Give your app a memorable name
  2. Project Type: Choose from templates or start from scratch
  3. Description: Tell Lumea what you want to build

Example Prompts to Get Started

Create a personal portfolio website with:
- Home page with hero section
- About me page
- Projects gallery
- Contact form
- Dark mode toggle

Step 3: Watch the Magic

After submitting your description, Lumea will:

  1. Analyze your requirements
  2. Generate the application structure
  3. Create all necessary files and code
  4. Preview your app in real-time

Generation typically takes 30-60 seconds for simple apps, up to a few minutes for complex applications.

Step 4: Customize Your App

Once generated, you can customize your application using:

Natural Language Updates

Simply describe what you want to change:

"Change the primary color to blue and add a newsletter signup to the footer"

Visual Editor

  • Drag and drop components
  • Adjust styles and layouts
  • Add new pages
  • Configure integrations

Code Editor

For advanced users, directly edit the generated code:

export default function Hero() {
  return (
    <section className="hero">
      <h1>Welcome to My App</h1>
      <p>Built with Lumea in minutes!</p>
    </section>
  );
}

Step 5: Preview and Test

Live Preview

See changes instantly as you make them

Device Preview

Test on different screen sizes

Share Preview

Get a temporary URL to share with others

Debug Console

Check for any issues or errors

Step 6: Deploy Your App

When you’re happy with your application:

Deployment Process

1

Choose Platform

Select where you want to host your app

2

Configure Settings

Set environment variables if needed

3

Deploy

Click deploy and wait for confirmation

4

Access Your App

Get your live URL and share with the world!

Common First Projects

Beginner-Friendly Ideas

Tips for Success

Be Specific: The more details you provide, the better Lumea understands your needs

Iterate Quickly: Don’t aim for perfection on the first try - you can always refine

Use Examples: Reference existing websites or apps for inspiration

Ask for Help: Join our Discord community for tips and support

Troubleshooting

If your app doesn’t generate as expected, try these tips:

  1. Simplify your request: Start basic and add features incrementally
  2. Use clear language: Avoid ambiguous terms
  3. Check examples: Look at similar projects in our gallery
  4. Contact support: We’re here to help at support@lumea.dev

What’s Next?

Welcome to Lumea!

Let’s get you up and running with your first application. This guide will walk you through the basics of using Lumea to build a functional web app.

Prerequisites: You just need a web browser and a Lumea account. No coding experience required!

Step 1: Create Your Account

1

Sign Up

Visit app.lumea.dev and click “Get Started Free”

2

Choose Your Plan

Start with the free tier - you can always upgrade later

3

Verify Your Email

Check your inbox and click the verification link

Step 2: Your First Project

Once logged in, you’ll see the Lumea dashboard.

Create New Project

Click the “New Project” button to start building

Project Setup

You’ll be guided through a simple setup:

  1. Project Name: Give your app a memorable name
  2. Project Type: Choose from templates or start from scratch
  3. Description: Tell Lumea what you want to build

Example Prompts to Get Started

Create a personal portfolio website with:
- Home page with hero section
- About me page
- Projects gallery
- Contact form
- Dark mode toggle

Step 3: Watch the Magic

After submitting your description, Lumea will:

  1. Analyze your requirements
  2. Generate the application structure
  3. Create all necessary files and code
  4. Preview your app in real-time

Generation typically takes 30-60 seconds for simple apps, up to a few minutes for complex applications.

Step 4: Customize Your App

Once generated, you can customize your application using:

Natural Language Updates

Simply describe what you want to change:

"Change the primary color to blue and add a newsletter signup to the footer"

Visual Editor

  • Drag and drop components
  • Adjust styles and layouts
  • Add new pages
  • Configure integrations

Code Editor

For advanced users, directly edit the generated code:

export default function Hero() {
  return (
    <section className="hero">
      <h1>Welcome to My App</h1>
      <p>Built with Lumea in minutes!</p>
    </section>
  );
}

Step 5: Preview and Test

Live Preview

See changes instantly as you make them

Device Preview

Test on different screen sizes

Share Preview

Get a temporary URL to share with others

Debug Console

Check for any issues or errors

Step 6: Deploy Your App

When you’re happy with your application:

Deployment Process

1

Choose Platform

Select where you want to host your app

2

Configure Settings

Set environment variables if needed

3

Deploy

Click deploy and wait for confirmation

4

Access Your App

Get your live URL and share with the world!

Common First Projects

Beginner-Friendly Ideas

Tips for Success

Be Specific: The more details you provide, the better Lumea understands your needs

Iterate Quickly: Don’t aim for perfection on the first try - you can always refine

Use Examples: Reference existing websites or apps for inspiration

Ask for Help: Join our Discord community for tips and support

Troubleshooting

If your app doesn’t generate as expected, try these tips:

  1. Simplify your request: Start basic and add features incrementally
  2. Use clear language: Avoid ambiguous terms
  3. Check examples: Look at similar projects in our gallery
  4. Contact support: We’re here to help at support@lumea.dev

What’s Next?