Skip to main content

Create a Basic Lab Web Portal

Level: Beginner · Time: 35–45 min · Category: Web app

Tags: Next.js · Portal · Prompting

Use AI coding assistance to build a small internal homepage for lab updates, project status, links, and people.

Start by setting up AI coding assistance, then create a normal Next.js project. The point is to guide the assistant with a clear brief, not paste in a finished portal.

Prerequisites​

  • LLM API Guide — create an API key and copy a model ID.
  • Set up OpenCode — install your AI coding assistant and connect it to the RC gateway. This tutorial uses OpenCode to write the code, so set it up first.
New to this? What are Node.js and npm?

Node.js is the program that runs JavaScript on your own computer instead of inside a web browser. The web tutorials use it to build and preview your site locally.

npm ("Node Package Manager") comes bundled with Node.js. It downloads the building blocks your project needs (like Next.js) and runs project commands such as npm run dev. You do not install npm separately — installing Node.js gives you both.

npx also comes with Node.js. It runs a tool once without installing it permanently, which is how the tutorials create a starter project with npx create-next-app.

Node.js runs the web project. Install the LTS ("Long-Term Support") release — the stable version recommended for most people — if you do not already have it. Pick your operating system:

The simplest path is the official installer: download the LTS package from nodejs.org/en/download, open the .pkg file, and click through the installer.

If you already use Homebrew, you can instead run:

brew install node

After it finishes, quit and reopen your terminal so it picks up the new commands.

Now confirm both commands work. Each should print a version number:

node --version   # expect v20 or newer (the current LTS)
npm --version    # any version is fine
If a command is "not found"

node: command not found almost always means your terminal was already open when Node was installed. Fully quit and reopen the terminal, then run the checks again. If it still fails, reinstall using the steps above and make sure any "Add to PATH" option stayed checked.

What you will do​

  • Create and run a starter Next.js project.
  • Write a clear first prompt for a static lab portal.
  • Review generated changes before accepting them.
  • Ask for focused adjustments without letting the project sprawl.

Build it step by step​

1. Create the project and install dependencies​

Use the standard Next.js starter. This gives the assistant a known structure and avoids custom setup problems.

  • Run the commands from a development folder.
  • Choose TypeScript, Tailwind, ESLint, and the App Router when prompted.
  • Open the project in your editor before asking the assistant to edit it.
npx create-next-app@latest lab-portal --ts --tailwind --eslint --app
cd lab-portal
npm run dev

2. Ask for a first version​

Give the assistant the goal, constraints, content, and definition of done. This keeps the first pass useful and small.

You are helping me build a beginner-friendly lab web portal.

Project goal:
- A simple internal homepage for a research lab.
- It should show lab updates, active projects, useful links, and contact info.
- Use Next.js App Router, TypeScript, and Tailwind.
- Keep the first version static. Do not add a database, authentication, or external services.

Content to include:
- Lab name: Example Lab
- Sections: Updates, Projects, Quick Links, People
- Make the layout readable on desktop and mobile.

Please:
1. Replace the starter app/page.tsx with a clean first version.
2. Keep editable data in arrays near the top of the file.
3. Explain what changed and how I can edit the content.

3. Review before asking for more​

Treat generated code like a draft from a teammate. Run it, read the diff, and check that it stayed within your constraints.

  • Confirm it only changed files you expected.
  • Replace example lab names, URLs, and contact addresses.
  • Check mobile width and long project names.
  • Ask the assistant to explain any code you do not understand.
npm run lint
npm run build

4. Ask for one adjustment at a time​

Good follow-up prompts name one change, keep constraints visible, and ask the assistant to explain how to test it.

I like the first version. Please make one focused adjustment:

Change requested:
- Add a Publications section with title, venue, year, and link.

Constraints:
- Keep the same visual style.
- Keep all data static in arrays.
- Do not add new dependencies.
- Explain only the files changed and anything I should test.

More prompts to try​

  • Make the page easier for a new graduate student to scan. Keep the same sections and explain the layout changes.
  • Add a People section with name, role, email, and project. Keep the data static.
  • Review the page for accessibility and mobile layout. Suggest changes before editing.

Troubleshooting​

  • If create-next-app fails, check that Node.js is installed with node --version and npm --version.
  • If the assistant adds a database, authentication, or API routes, remind it that this tutorial is static only.
  • If the page looks too generic, provide real section names and example content instead of asking for a better design.
  • If a follow-up prompt changes too much, ask the assistant to revert that change and make only the smallest useful edit.

Next steps​