Academy Lesson: Building a Multi-Page Portal & Login Flow

Building a secure internal business portal typically requires configuring distinct routing rules, styling multiple dashboard layouts, and setting up session variables across weeks of coding. In this lesson, you will learn how to use Noca AI’s prompt builder to instantly scaffold a multi-page agent workspace complete with a functional login page, an operational data dashboard, and editable user profiles from a single text request.

Step 1: Open the Prompt Workspace

To instruct the AI to construct an entire cross-page application architecture, launch your editor canvas.

1. Open your Noca Web project workspace.

2. Click inside the blank prompt builder window positioned at the bottom of the editor view.

Step 2: Prompt the Multi-Page Architecture

By drafting a multi-part prompt, you can specify individual page layouts and their exact component connections all at once.

1. Type a detailed plan outlining your target application pages.

2. Example used in the video: > "Create an internal portal for sales agents with 3 pages. Page 1: Login - simple login form with email and continue button. Page 2: Opportunities - table of assigned opportunities, filtering, sorting, and pagination. When an opportunity is clicked, open an editable modal with the opportunity details. Page 3: Profile page - editable profile of the sales agent."

3. Press enter or click the submit arrow to let Noca AI initialize the application structure.

Step 3: Explore the Generated Pages

Once the generation cycle wraps up, you will notice multiple layouts added natively to your design files.

1. Use the top Page Dropdown Menu inside the canvas toolbar to switch between views and inspect the generated frontend components:

   • LoginPage: Check out the styled entry module containing a clean title card, email input box, and “Continue” button.

   • OpportunitiesPage: Look over the data grid mapping active deals, financial pipeline values, and filtering logic.

   • ProfilePage: Examine the personal layout containing user metadata like Agent Name, Region, Title, and Annual Sales Quotas.

Step 4: Test Interactive Row Toggles and Form Actions

Noca AI automatically maps out relational data variables so clicking rows safely exposes detail editors.

1. Switch to the OpportunitiesPage inside the preview view.

2. Click directly on any opportunity data row.

3. Verify that an editable detail modal smoothly slides open over the layout, matching the cell context of the exact row clicked and permitting field updates.

Step 5: Examine the Login Trigger Logic

Noca handles backend secure session building automatically. Let’s look at how the login interaction transfers data across pages.

1. Navigate back to your LoginPage from the directory menu.

2. In the left-hand navigation column, click into the Events panel.

3. Select the On Click (Continue Button) trigger event to open the visual orchestration node manager.

4. Under the hood: Observe how Noca AI automatically generated a workspace authentication block, hooked up user schema check logic, validated input payload strings, and established automatic routing vectors to push verified users forward onto your master Opportunities tab seamlessly.

💡 Pro-Tip: If you need to lock down Page 2 and Page 3 to make sure unauthenticated guests cannot bypass the login form by typing the URL directly, simply click into the prompt field again and type: “Add a secure role-based redirect to the Opportunities and Profile pages so unauthorized visitors are kicked back to the login screen.” Noca AI will rewrite your security gateway settings instantly!