Building an AI-Powered Interview Question Generator. How to setup Symfony 7 API + Vue 3 Frontend? Part 1

In this series, we build a small full-stack application where:

A user selects role, position, and seniority level,
we send this data to an AI with a prepared prompt,
and the AI returns a list of interview questions.

This is Part 1- setting up the foundation: Symfony API and Vue frontend connected together.

⚠️ This guide uses Symfony 7. Symfony 8 has some differences in defaults which I’ll mention later.

Get unaGata’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

🎥 There is also a video version for those who prefer watching -link is here.

What we are building

Final flow of the app:

1. User fills the form (role, position, level)
2. Vue sends request to Symfony API
3. Symfony sends a prompt to AI
4. AI returns structured interview questions
5. We display them in the frontend

But before the interesting part — we need a clean full-stack base.

1. Install Symfony CLI

Download from:

https://symfony.com/download

Check installation:

symfony -v

2. Create Symfony project

mkdir developer-interview
cd developer-interview
symfony new api --webapp
symfony serve -d

Backend is running.

3. Create a test API endpoint

We need a simple JSON response to verify frontend ↔ backend connection.

php bin/console make:controller Api/TestController

Replace controller with:

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\Routing\Annotation\Route;

class TestController extends AbstractController
{
    #[Route('/api/ping', name: 'api_ping', methods: ['GET'])]
    public function ping(): JsonResponse
    {
        return $this->json(['message' => 'pong']);
    }
}

Check in browser:

http://127.0.0.1:8000/api/ping

4. Create Vue 3 frontend

From root:

npm create vue@latest frontend

Select Router and Prettier.

cd frontend
npm install
npm run dev

Runs on:

http://localhost:5173

5. Connect Vue to Symfony

In App.vue:

import { ref, onMounted } from 'vue'

const apiResponse = ref(null);

onMounted(async () => {
  const res = await fetch('http://127.0.0.1:8000/api/ping')
  apiResponse.value = await res.json()
})

Template:

<template>
  <h1>Backend connection test</h1>
  <p>Response: {{ apiResponse }}</p>
</template>

You will see a CORS error.

6. Fix CORS

composer require nelmio/cors-bundle

config/packages/nelmio_cors.yaml:

nelmio_cors:
    paths:
        '^/':
            allow_origin: ['http://localhost:5173']
            allow_methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
            allow_headers: ['Content-Type', 'Authorization']

Restart server:

symfony serve:stop
symfony serve -d

7. Add Tailwind (optional)

npm install tailwindcss @tailwindcss/vite

In CSS:

@import "tailwindcss";

What we have now

Working base for:

• Vue form Symfony
• API endpoint
• Future AI integration
• Real full-stack data flow

This is the foundation for our AI interview question generator. In a next part we will connect free NEON DB.