Building with Peak Multiplatform

Welcome to the comprehensive guide on modern web development using Peak Multiplatform. This course will take you from zero to a fully functional Next.js application, leveraging the power of Peak's integrated developer tools and AI assistance.

Web Concepts Crash Course

Before we dive into the tools, let's briefly touch on what we are building. The modern web is built on three pillars, plus a powerful framework.

The Building Blocks

• HTML (Structure): The skeleton of your site. It defines elements like paragraphs, headers, and buttons.
• CSS (Style): The skin. It controls colors, fonts, layout, and responsiveness.
• JavaScript (Behavior): The brain. It handles interactions, data fetching, and logic.

The Framework: Next.js

We will be using Next.js, a framework built on top of React. It simplifies the process of building complex web applications by handling routing, optimization, and server-side rendering out of the box. Think of it as a set of pre-made tools that makes building a house much faster than starting with raw lumber.

Peak Developer Tools

Peak Multiplatform isn't just a browser; it's a workspace. It unifies your terminal, code editor, and browser into a single interface.

You can access the developer tools by creating a new tab and selecting Project or Terminal mode, or by opening an existing folder on your computer.

The Terminal

The Terminal is your direct line to the computer's operating system. Instead of clicking icons, you type text commands to perform powerful actions. We will use it to create our project files.

Opening the Terminal

1. Open a new tab in Peak Multiplatform (Cmd + T).
2. In the Launcher, select Terminal.
3. A terminal session will start in your home directory or the last visited folder.

Step 1: Create the Project

Let's create a new Next.js project. We will use `npx`, a tool that comes with Node.js to execute packages.

Run the Create Command

In your Peak Terminal tab, type the following command and press Enter:

npx create-next-app@latest my-peak-app

The terminal will ask you a series of questions. Press Enter to accept the defaults for most of them:

• TypeScript: Yes
• ESLint: Yes
• Tailwind CSS: Yes (Recommended for easy styling)
• App Router: Yes

Once the process completes, you will have a new folder named my-peak-app containing your website's source code.

Step 2: Open in Project Mode

Now that we have the files, let's open them in Peak's Project Editor.

1. Close the terminal tab (or keep it open if you like).
2. Open a New Tab.
3. Click on the Project icon or type "Project".
4. Navigate to the my-peak-app folder we just created and select Open.

You are now in Project Mode. on the left, you see the file explorer. On the right, the main editor area.

Understanding the Structure

• src/app/page.tsx: This is the homepage of your website.
• src/app/layout.tsx: Defines the global shell (html/body tags).
• public/: Stores images and static assets.

Step 3: AI-Assisted Development

Here is where Peak shines. You don't need to be a masterful coder to build something beautiful. We will use Peak's AI Assistant to write the code for us.

Opening the Sidebar

In the Project View, look at the top right of the editor toolbar. Click the Sidebar Toggle icon to reveal the AI Assistant panel.

Prompting the AI

Select the file you want to edit (e.g., src/app/page.tsx) in the file explorer. Then, in the AI chat input, type what you want the page to look like.

The AI will generate the code. You can either copy-paste it into the editor or, if available, click "Apply to File".

Step 4: Live Preview

To see your website in action, we need to run the development server.

Start the Server

1. In the Project View, open the Integrated Terminal panel (usually at the bottom, or toggle via the menu).
2. Type npm run dev and press Enter.
3. Wait for the terminal to say Ready in ... ms.

View the Site

Now, you can split your view or open a new browser tab.

• Go to the address bar and type localhost:3000.

You should see your "Brew Peak" landing page live! Any changes you make in the code (or via AI) will automatically update here when you save (Cmd + S).