How to start the service yourself: everything that is given on courses on vibcoding - in one article

npm install -g @anthropic-ai/claude-code
claude # will launch browser authorization

npm install -g @openai/codex # @openai/codex, not just codex
codex auth # browser authorization via ChatGPT

claude   # для Claude Code
codex    # для Codex

I want to make a form for collecting applications with a simple admin.
Ask me questions one by one, I'll answer.
Write everything down to SPEC.md.
When you collect enough information, show the final file.

#SPEC. md

# What is it?
Form for accepting applications for consultation.
Guest fills out form → application is saved
The owner sees all applications in a closed admin.

## Users
- Guest - fills out the form, does not register
Admin – logs in, sees all applications, changes status

#Flow guest
1. Opens the page and sees the form
2. Enter name, email, query text → click “Send”
3. Sees gratitude screen: "Contact during the day"

#Flow admin
1. Opens /admin → redirect to /admin/login if not login
2. Enters email and password in the list of applications
3. Sees applications: name, email, text, date, status (new / in work / closed)
4. Click on the application may change the status

## Screens and states

### Form (/):
Condition: ordinary - the form is partially filled or empty
- Status: Sending - button is inactive, shows "Send..."
Status: Validation error - highlight unfilled fields, error text
Status: Server error – “Something went wrong, try it later”
Status: Success - hide the form, show the message

### List of applications (/admin):
- Status: loading - row skeleton
- Status: empty - "No applications yet"
Status: List - table sorted by date (new at the top)

What is NOT included in the first version
- Notifications by email on a new application
Search and filter applications
- Several admins.
- Deletion of applications

##Stack
Next.js App Router, TypeScript, Tailwind CSS, Supabase

Create a new Next.js project in the request-form folder.
Stack: TypeScript strict mode, Tailwind CSS, App Router.
Start the dev server and make sure that localhost:3000 opens.

npx create-next-app@latest request-form --typescript --tailwind --app
cd request-form
npm run dev

#agents.md (or claude). md)

#Context
Read SPEC.md before starting any task.
If something is not described in SPEC.md – ask, do not invent.

##Stack
Next.js App Router, TypeScript strict mode
Tailwind CSS – No arbitrary hex values, only Tailwind classes
- Supabase - auth and database via @supabase/ssr

#
Each screen in a separate component
All states from SPEC.md are required: download, error, empty
After the changes, run npm run build - make sure TypeScript doesn't swear
- Don't add features that aren't in SPEC. md

## Structure
src/
app/ - route
components/
lib/ - utility, supabase client

Read SPEC.md.

Create the main page src/app/page.tsx with the application form.
Fields: Name (mandatory), Email (mandatory, format validation),
The text of the request (mandatory, at least 10 characters).
Send button.

Button states: Normal/Send... with disabled at the time of request.
Form states: empty → validation → success (hide form, show text)
server error (toast or text under the button).

While using console.log instead of a real query, we will add the real one later.
Adaptive: mobile and desktop.

The send button on mobile is too small – less than 44px in height.
The validation error message appears only after pressing the button.
It is necessary if you lose focus (onBlur) on each field.

After sending the form, cut it and show the block with the text:
Thank you! We will contact you during the day.”
And the "Send Another Application" link that returns the form.

Create src/app/admin/page.tsx.
Table of applications: columns - Name, Email, Date, Status, Action.
Status: three options - "New", "In work", "Closed".
Sorting: new ones on top.

Conditions: download (skeleton for 5 lines), empty ("No Applications yet"), list.
While using wet data - an array of 3 objects.
We will connect real data when we configure Supabase.

npm install -g vercel
vercel

This next.js project is on my VPS.
IP: [address]
User: root
Password: [password]

What needs to be done:
Install Node.js 20, nginx, PM2
- Start the project in the new GitHub repository [link]
- Close to the server, run npm install and npm run build
- Launch via PM2 on port 3000
- Configure Nginx as reverse proxy: localhost:3000
Write an SSL certificate through Let’s Encrypt for the domain [domain]
PM2 in auto-run when the server is restarted

After each step, report the result.

Connect Supabase to the project.
Project URL: [insert]
Anon key: [insert]

Need:
1. Install @supabase/ssr and @supabase/supabase-js
2. Create src/lib/supabase/client.ts – a browser client
3. Create a src/lib/supabase/server.ts server client for App Router
4. Add variables to .env.local:
NEXT PUBLIC SUPABASE URL
Next PUBLIC SUPABASE ANON KEY
5. Make sure .env.local is in .gitignore

Create a SQL migration for the requests table in Supabase.

Fields:
- id: uuid, primary key, default gen random uuid()
- name: text, not null
- email: text, not null
- message: text, not null
- status: text, not null, default 'new',
check (status in ('new', 'in progress', 'closed')
- created at: timestamptz, default now()

Enable Row Level Security (RLS):
Insert: Allow everyone (also anonymous)
Select: only to authorized users
Update: Authorized only

Give me SQL ready to run in Supabase Dashboard → SQL Editor.

Add authorization for /admin via Supabase Auth.

Need:
1. Page /admin/login:
Form: email + password
- buttons "Enter" and "Register"
In case of error: show the text of the error under the form
If successful: redirect to /admin

2. Middleware (middleware.ts root):
- Any request /admin/* - check the session
If there is no session, redirect to /admin/login

3. The exit button on the /admin page
- When pressed: signOut → redirect to /admin/login

The form on the homepage now makes console.log.
Replace it with a real shipment to Supabase.

Use Server Action (src/app/actions.ts file):
- Receives: name, email, message
Validates: all fields are mandatory, email is valid format
- Inserts in the request table
- Returns: { success: true } or { error: 'error text' }

In the form: in case of an error, show the text to the user.
When successful, switch to a state of success.

The /admin page now shows wet data.
Replace it with a download from Supabase.

The list of applications is a server component, a request through a server client.
Sorted: created at DESC.

Client Component with Server Action:
- Drop-down list: New / In work / Closed
- When changing: update the record in the database,
Reload data via revalidatePath('/admin')

Add to .env.local:
Openrouter API KEY=sk-or-...

Create src/lib/openrouter.ts:

async function generateReply()
CustomerName: string,
CustomerMessage: string
): Promise<string >>

The function sends a request to OpenRouter.
Model: anthropic/claude-sonnet-4
System Prompt: “You are a customer service assistant.”
Write politely, in Russian, briefly - 2-3 sentences.
Custom prompt: “Write a draft response to the client [name].”
who wrote: [Message]

If the request error is to return null, do not throw an exception.

In the application table, add the “Draft Answer” button next to each application.

Press:
- The button shows the spinner
- Calls generateReply with the name and text of the application
- Shows the result in the modal window with the buttons "Copy" and "Close"
The “Copy” button copies the text to the buffer, changes the text to “Copied ✓” for 2 seconds

If you successfully insert an application in Supabase, send a notification to Telegram.

In Server Action after INSERT add:
fetch('https://api.telegram.org/bot[токен]/sendMessage',)
method: 'POST',
headers: { 'Content-type': 'application/json'},
body: JSON.stringify({{}
chat id: "[chat id],"
text: `Новая заявка от ${name}\nEmail: ${email}\n\n${message}`
}
}

Asynchronous request - does not wait, does not block the response to the user.
The sending error does not affect the preservation of the application.

Install Vitest and write tests for basic features.

What to test:

1. Form validation (src/lib/validate.ts – create if not):
Empty name = Empty name / Enter name error
Error: Enter the correct email
Message shorter than 10 characters → error 'Too short message' -
All fields filled correctly → returns null (no errors)

2. generateReply from openrouter.ts:
- Shut the fetch.
A successful answer returns the line.
Network error returns null, does not throw an exception

After writing, run npx vitest run – all tests must pass.

Set @playwright/test and write the e2e test:

1. Open the main page
2. Fill in the form: “Test”, email “test@example.com”,
Message "Test message for verification"
3. Press "Send"
4. Check to see if there is a “thank you” text.
5. Check that the shape is no longer visible

The test must use the test base (assign via env SUPABASE URL TEST)
Or wet Server Action.

Set up a pre-commit hook via husky and lint-staged:

Before each committ:
1. npx vitest run - unit tests
2. npm run build – TypeScript check and builds

If something falls, the commit does not pass, it shows which test failed.

##The challenge
What I wanted to do and why in one paragraph.

## How to describe the task
Show the first and final version of the Prompt for one feature.
What was specified, what was refused and why.

# What was unconventional
One or two moments where the agent failed the first time.
What was wrong and how the task was reformulated.

##The result
Link to live service.
Screenshot or short video.