BlocWeave BlocWeave
Home› Tutorials› Build a Team Task Manager› Part 1
Build a Team Task Manager · Part 1

Set Up Your Next.js 14 Project

Published 2026-06-12

What you'll build

This is Part 1 of a series where you build a Team Task Manager from scratch. By the end of the series you'll have a fully functional app with:

By the end of this part you'll have a running Next.js 14 project with TypeScript, Tailwind CSS, and a base layout, ready for the features we add in later parts.

Prerequisites

That's it. No Supabase or Firebase setup yet — those come in later parts.

Create the Next.js project

Open a terminal in the folder where you keep your projects and run:

npx create-next-app@latest task-manager \
  --typescript \
  --tailwind \
  --eslint \
  --app \
  --src-dir \
  --import-alias "@/*"

When prompted, accept all defaults. The --app flag enables the App Router, which we'll use throughout this series.

Once it finishes, open the project in VS Code:

cd task-manager && code .

Tell BlocWeave about the project

Before asking BlocWeave to write any code, create a BLOCWEAVE_PLAN.md file in the root of the project. This file tells BlocWeave the conventions to follow in every response.

Create BLOCWEAVE_PLAN.md:

# Task Manager — Project Plan

## Stack
- Next.js 14, App Router, TypeScript, Tailwind CSS
- Firebase Auth for authentication
- Supabase (PostgreSQL) for data
- Cloudflare Pages for deployment

## Conventions
- Components in src/components/, pages in src/app/
- Use server components by default; add "use client" only when needed
- Tailwind for all styling — no CSS modules, no inline styles
- Fetch data in server components using async/await
- All types in src/types/index.ts

BlocWeave reads this automatically on every request in this workspace. You don't need to repeat the stack or conventions in your prompts.

Clean up the default files

The default Next.js template has placeholder content we don't need. Use BlocWeave to remove it cleanly:

BlocWeave prompt

Clean up the default Next.js template. Remove the placeholder content from src/app/page.tsx and replace it with a simple centred heading that says "Task Manager" and a paragraph that says "Sign in to get started." Keep the existing layout.tsx unchanged. Remove globals.css content below the @tailwind directives.

BlocWeave will edit src/app/page.tsx and src/app/globals.css for you. Check the changes look right in the diff viewer before confirming.

Create the base layout

The app needs a consistent navigation bar and page wrapper. Rather than building this component by component, describe the whole thing in one prompt:

BlocWeave prompt

Create a responsive navigation bar component at src/components/Navbar.tsx. It should show the app name "Task Manager" on the left and two navigation links on the right: "Dashboard" linking to /dashboard and "Sign in" linking to /login. Use Tailwind CSS. Make it a server component. Then update src/app/layout.tsx to include the Navbar above the main content area, with a max-width wrapper of 1280px centred on the page.

After BlocWeave writes the files, you'll see the navbar appear at the top when you run the dev server.

Verify the setup

Start the development server:

npm run dev

Open http://localhost:3000. You should see a clean page with the navigation bar, the "Task Manager" heading, and the "Sign in to get started" text.

Run the TypeScript check to confirm there are no errors:

npm run build

If the build completes without errors, Part 1 is done.

Project structure so far

After completing this part, your src/ directory looks like this:

src/
  app/
    layout.tsx       ← root layout with Navbar
    page.tsx         ← home page
    globals.css      ← Tailwind base styles
  components/
    Navbar.tsx       ← navigation bar

Tip: If BlocWeave creates a file in the wrong place, tell it the correct path in a follow-up message. It reads the file tree before writing, so it will also update any imports automatically.

What's next

In Part 2 we add Firebase Authentication — email/password and Google sign-in — and protect all routes under /dashboard with a middleware check. BlocWeave will write the entire auth flow from a single prompt.

Next →