🔥 TECHGRILL

Face the AI Senior Dev. No mercy.

TechGrill is a full-stack technical interview practice app. Pick a role and experience level, take on an AI interviewer, work in a browser-based code editor, and get a final evaluation of your interview and solution.

The grill is on. Expect concise questions, direct feedback, and a challenging follow-up.

---

✨ What you can do

• Set the challenge — choose a target role and Junior, Mid-Level, or Senior difficulty.
• Practice live — chat with an AI interviewer while drafting a JavaScript solution in Monaco Editor.
• Keep the conversation — interview details and chat transcript are stored in Neon Postgres.
• Get a final review — finish the session to request a score, a Hire/No Hire recommendation, and feedback on your transcript and code.

🧰 Built with

Area	Technology
Application	Next.js 16 App Router, React 19, TypeScript
Styling	Tailwind CSS 4
AI	Groq API via groq-sdk
Database	Neon serverless Postgres
Database toolkit	Drizzle ORM and Drizzle Kit
Code editor	Monaco Editor

🚀 Get started

Requirements

• Node.js 20.9 or later
• npm
• A Groq API key
• A Neon Postgres database

1. Install dependencies

Run these commands from the project directory:

npm install

2. Configure environment variables

Create a .env.local file in the project root:

GROQ_API_KEY=your_groq_api_key
DATABASE_URL=your_neon_postgres_connection_string

Keep real credentials private. .env.local is ignored by Git; do not commit or share it. If you replace a key while the app is running, restart the dev server so it reloads the environment.

3. Create the database table

Generate and apply a migration from the Drizzle schema:

npx drizzle-kit generate
npx drizzle-kit migrate

These commands use drizzle.config.ts, which loads .env.local and points to src/db/schema.ts. The schema defines an interviews table with a generated UUID, role, difficulty, transcript, score, feedback, and creation timestamp.

4. Start the app

npm run dev

Open http://localhost:3000. Always run the command from the project directory so Next.js and Turbopack resolve the project’s local dependencies and configuration.

📜 Available commands

Command	Description
npm run dev	Start the development server
npm run build	Compile and build for production
npm run start	Serve a production build (run npm run build first)
npm run lint	Run ESLint
npx drizzle-kit generate	Generate SQL migrations from the Drizzle schema
npx drizzle-kit migrate	Apply pending SQL migrations

🗺️ How an interview works

1. The home page submits the target role and difficulty to a server action.
2. Groq generates an opening question, and the app stores the new interview in Neon.
3. The interview page loads its transcript and presents the chat beside a JavaScript editor.
4. Chat messages are sent to the app’s API route; the response is added to the transcript and saved to the database.
5. Finish Interview sends the transcript and current editor contents for a final AI evaluation.

The Groq model currently configured for interview generation, chat, and evaluation is openai/gpt-oss-120b.

🗂️ Project layout

src/
├── app/
│   ├── actions/interview.ts   # Start and finish interview server actions
│   ├── api/chat/route.ts      # AI interviewer endpoint and transcript updates
│   ├── interview/[id]/page.tsx# Loads a saved interview
│   ├── page.tsx               # Interview setup form
│   └── globals.css            # Global styles and Tailwind theme
├── components/
│   └── TechGrillUI.tsx        # Interview chat and code editor
└── db/
    ├── index.ts               # Neon and Drizzle connection
    └── schema.ts              # Interview table definition

🔐 Environment variable reference

Variable	Used for
GROQ_API_KEY	Authorizes model requests for opening questions, chat, and evaluation
DATABASE_URL	Connects Drizzle to your Neon Postgres database

Set both variables in your deployment provider’s environment settings as well as locally. Never expose them in client-side code or commit them to the repository.

🧪 Before deploying

npm run lint
npm run build

Configure GROQ_API_KEY and DATABASE_URL in the deployment environment, and apply database migrations before serving requests that read or write interviews.

⚠️ Current scope

• The editor is configured for JavaScript.
• The selected role and difficulty shape the generated interview; there is no separate question bank.
• The final evaluation is generated by the AI and is intended as practice feedback, not a real hiring decision.
• A working Groq key, a reachable Neon database, and the interviews table are required for the interview flow.

---

Built to make practice feel like the real thing. Show your reasoning. Handle the pressure. Earn your way off the grill. 🔥