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 verify the RC LLM endpoint.
  • Configure OpenCode — connect your coding assistant to the RC LLM gateway.
  • Node.js — install Node.js if it is not already available.

Confirm Node.js and npm are installed and working before you start:

node --version   # expect v20 or newer (the current LTS)
npm --version
node -e "console.log('Node is working:', process.version)"

If node is not found, install the LTS build from nodejs.org or use a version manager such as nvm. Close and reopen your terminal, then run the checks again.

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​