Creating Projects

Creating Projects

Learn different ways to create new projects in Juliet and start building immediately.

Overview Every conversation in Juliet creates or works within a project. Projects contain all your code files, configurations, and development environment.

Key Points: • Each chat session = one project • Projects created instantly • No manual setup required • Unlimited projects (plan dependent)

Methods to Create Projects

Method 1: From Homepage Start from the landing page:

1. Visit Juliet's homepage

2. See welcome message: "Say Hi To Juliet"

3. Find chat input at bottom

4. Type your project idea

5. Press Enter

6. Sign in if prompted

7. New project created automatically

Example prompts: • "Build a todo app with React" • "Create a landing page for my coffee shop" • "Make a weather dashboard"

What happens: • New project created with unique ID • Chat opens in builder interface • AI starts planning implementation • Project added to your dashboard

Method 2: From Dashboard Create from your projects dashboard:

1. Go to Dashboard (top navigation)

2. Click "Projects" section

3. Click "+ New Project" button

4. New chat opens

5. Describe what you want to build

6. AI creates the project

Benefits: • Organized workflow • See all projects first • Deliberate project creation

Method 3: Direct Chat Link From any page with a new chat button:

1. Look for "New Project" or "+" button

2. Click to start new chat

3. Enter your project idea

4. Project created

Quick access: Fastest way to start building when you're already in Juliet.

Project Creation Flow

Step 1: Initial Prompt What you provide:

• Project description

• Desired features

• Optional: Design mockups (images)

• Optional: Technical preferences

Example: "Build an expense tracker with:

• Add/edit/delete expenses

• Categories (food, transport, etc.)

• Monthly summary

• Charts showing spending

• Use React and Chart.js"

Step 2: AI Planning AI analyzes your request:

• Determines appropriate tech stack

• Plans project structure

• Outlines implementation steps

• Creates todo checklist

You'll see:

• Proposed plan in chat

• Technology choices

• File structure

• Features to implement

Your options: ✅ Accept - Proceed with plan ✏ Edit - Modify the plan 💬 Respond - Provide feedback 🚫 Ignore - Start over

Step 3: Project Initialization Once you approve:

• Project files created

• package.json generated

• Dependencies defined

• Folder structure established

You'll see:

• Files appearing in file tree

• Project structure taking shape

• Progress updates in chat

Step 4: Implementation AI builds your project:

• Creates components

• Writes code

• Sets up configuration

• Prepares development environment

Duration: 30 seconds to 2 minutes typically

Step 5: Ready to Develop Project is now active:

• Live preview available

• Code editor ready

• Terminal showing output

• Fully functional development environment

What you can do:

• Test in preview

• Edit code

• Add features

• Download project

• Share with collaborators

  Project Types

  Web Applications Frontend apps:

  • React applications

  • Vue.js apps

  • Next.js projects

  • Static HTML/CSS/JS sites

  • Angular apps

  Example: "Create a React app for managing recipes with search and filters"

  Landing Pages Marketing sites:

  • Product landing pages

  • Service pages

  • Portfolio sites

  • Event pages

  Example: "Build a landing page for a fitness app with hero section, features, pricing, and contact form"

  Full-Stack Applications Frontend + Backend:

  • API integration

  • Database connectivity

  • Authentication

  • Server-side logic

  Example: "Create a blog platform with Frontend in Next.js, Backend API, User authentication, Post creation and editing"

  Component Libraries Reusable UI components:

  • Button components

  • Form elements

  • Navigation patterns

  • Card layouts

  Example: "Build a set of reusable UI components: Button (primary, secondary, danger), Input field with validation, Modal dialog, Toast notifications"

  Dashboards Data visualization and admin panels:

  • Analytics dashboards

  • Admin interfaces

  • Monitoring tools

  • Data displays

  Example: "Create an admin dashboard with User statistics, Sales charts, Recent activity feed, Settings panel"

  APIs and Services Backend services:

  • RESTful APIs

  • GraphQL endpoints

  • Microservices

  • Utilities and tools

  Example: "Build a REST API for a task management system with CRUD operations for tasks and users"

  Naming Your Project

  Auto-Generated Names By default:

  • Juliet auto-generates project name

  • Based on your initial description

  • Usually descriptive (e.g., "Todo App", "Landing Page")

  Example: Prompt: "Build a weather app" Project name: "Weather App"

  Custom Names Rename anytime:

  1. Click project name in builder interface

  2. Edit inline

  3. Press Enter to save

  Or from dashboard:

  1. Go to Dashboard → Projects

  2. Click project card

  3. Click settings/edit

  4. Change name

  5. Save

  Naming tips:

  • Keep it descriptive

  • Use clear language

  • Avoid generic names ("My Project")

  • Include purpose ("E-commerce Store", "Portfolio Site")

    Project Settings

    Initial Configuration Auto-configured:

    • Development environment

    • Package manager (npm, pnpm, yarn)

    • Build tools

    • Port assignments

    Based on:

    • Your project type

    • AI's technology choices

    • Best practices

    Usually no manual config needed!

    Customizing Later You can modify:

    • Project name and description

    • Dependencies (via package.json)

    • Configuration files

    • Build scripts

    How:

    • Edit files directly

    • Ask AI to make changes

    • Manually update in code editor

    Best Practices for Creating Projects

    1. Be Specific in Initial Prompt Better specificity = better results ❌ Vague: "Make a website" ✅ Specific: "Create a portfolio website with homepage, about page, projects gallery, and contact form"

    2. Mention Key Features Upfront Include in initial prompt:

    • Core functionality

    • Must-have features

    • Technology preferences

    • Design requirements

    Why: AI plans better with complete requirements.

    Example: "Build a recipe app with Search recipes by ingredients, Save favorites, Step-by-step instructions, Ingredient lists, Cooking timer, Use React and Tailwind CSS"

    3. Attach Design Mockups Early If you have designs:

    • Attach in first message

    • Provide context

    • Specify what to implement

    Benefits:

    • AI sees complete vision

    • Generates matching code

    • Saves iteration time

    4. Start Simple, Add Features Later Incremental approach:

    5. Create basic version first

    6. Test core functionality

    7. Add features one by one

    8. Refine and polish

    Why:

    • Easier to debug

    • See progress faster

    • Iterate based on actual results

    • Better final product

    5. Specify Technology If You Have Preferences AI chooses by default:

    • React for most web apps

    • Vite for build tool

    • Tailwind or CSS for styling

    Override if needed: "Build a todo app using Vue.js instead of React" "Use vanilla JavaScript, no frameworks" "Build with Next.js for server-side rendering"

    6. Review the Plan Before Accepting Take time to:

    • Read proposed approach

    • Check technology choices

    • Verify features list

    • Ensure nothing critical missing

    Provide feedback if:

    • Wrong tech stack chosen

    • Missing features

    • Incorrect approach

    • Better idea occurs to you

      Project Limits

      Based on Your Plan Limits vary:

      • Free Plan: Limited projects per month

      • Paid Plans: More/unlimited projects

      Check your limits:

      • Dashboard → Billing

      • View "Projects" usage

      • See remaining quota

      • Upgrade if needed

      What Counts as a Project Each unique chat = one project:

      • New chat from homepage = new project

      • New chat from dashboard = new project

      • Continuing existing chat = same project

      Deleting projects:

      • Frees up quota

      • Can't be undone

      • Download before deleting if needed

      Hitting Your Limit When limit reached:

      • Can't create new projects

      • Existing projects still accessible

      • Upgrade prompt shown

      • Options: delete old projects or upgrade plan

      After Creating a Project

      Immediate Next Steps

      1. Test in Preview

      • Check if it runs

      • Test basic functionality

      • Verify it matches expectations

      2. Review Code

      • Open key files

      • Understand structure

      • Check AI's implementation

      3. Iterate

      • Request changes

      • Add missing features

      • Fix any issues

      • Refine design

      4. Save Progress

      • Save any manual edits

      • Download backup

      • Add collaborators if team project

      Organizing Multiple Projects

      Tips:

      • Use descriptive names

      • Add project descriptions

      • Tag or categorize (if available)

      • Delete old experiments

      • Keep dashboard clean

      Common Questions

      Q: How long does project creation take? A: Usually 1-3 minutes from prompt to live preview, depending on complexity.

      Q: Can I create multiple projects at once? A: No, but you can switch between projects freely from dashboard.

      Q: What if I don't like the initial result? A: Iterate with AI, request changes, or start a new project with better prompt.

      Q: Do projects expire? A: No, projects remain indefinitely (unless you delete them or account is inactive for extended period).

      Q: Can I copy an existing project? A: Not directly, but you can download and create new project from exported code.

      Q: What if AI chooses wrong technology? A: Respond during planning phase to correct it, or specify in your prompt.

      Q: Can I import existing code? A: Yes, ask AI: "Here's my existing code..." and paste code, AI can work with it.