🤖Build Your Own AI Interview Assistant With Flask, React, and Vapi Platform🔊
by Orange Digital Center in Circuits > Software
83 Views, 3 Favorites, 0 Comments
🤖Build Your Own AI Interview Assistant With Flask, React, and Vapi Platform🔊

Powerd by: Houssam El Berrouhi
This project was developed within the Orange Digital Center Morocco , a space dedicated to fostering innovation, creativity, and rapid prototyping.
Have you ever dreamed of automating interview processes using AI? In this guide, we'll walk you through the development of an AI-powered voice call assistant for recruitment purposes — built specifically for Orange Digital Center Rabat.
The assistant automatically interviews candidates who want to join ODC's free training programs (e.g. École du Code ), processes their answers using speech-to-text and AI logic, and stores structured interview results in a backend system accessible by recruiters.
This project combines VoIP (via VAPI.ai), React, FastAPI, and PostgreSQL, and offers both candidate and admin dashboards for managing interview flows and decisions.
Before this AI assistant, A significant enterprise could face significant challenges in efficiently screening the high volume of applicants for their free training programs. Recruiters were overwhelmed with manually conducting initial phone screenings, a time-consuming process that often delayed the identification of promising candidates.
This obstacle slowed the scaling of the programs and strained resources.
The AI-powered voice call assistant directly addresses this problem by automating the initial screening phase. It handles a large volume of calls simultaneously, freeing up recruiters to focus on in-depth evaluations of qualified candidates, accelerating the selection process and allowing ODC or other enterprises to efficiently process a higher number of applications for their training programs.
Supplies

What You’ll Need is :
Basic Knowledge of Python (FastAPI or Flask)
React + JavaScript for UI
PostgreSQL for database management
VAPI.ai for handling AI phone call interactions
Github account as we'll need it to base our code on a predefined code source
Setup the Development Environment




Begin by setting up your development environment. First, install Python by downloading it from the official Python website. Once installed, verify the installation by running python --version in your terminal.
Then, install Node.js from the official Node.js website. Verify the installation by running node -v and npm -v in your terminal.
Finally, set up PostgreSQL by downloading and installing it from the official PostgreSQL website. Ensure PostgreSQL is running by connecting using the default credentials provided during installation.
Vapi Platform


First, for our main platform that provides free plan access for testing our ai agents, you need to sign in to Vapi platform Vapi - Build Advanced Voice AI Agents .
this will let you use and customize your agent logic as you see fit, as the platform provides many LLM models and VoIP system that can work with many study case.
Once logged in, you get to create an assistant and customize it.
- create your assistant by clicking the "Create assistant" button!
- give it a name
- choose blank template as we'll customize it later.
- and simply hit create.
and you'll get the same view as in the image, there you'll find the model section where you can customize your assistant, give it a first message to use once the call is started, build a system prompt to controle the assistant logic and what they are being used for, for this case i made it ask candidates questions related to the school of code program at ODC, I explained the program and draft the road and interview flow, so the agent can follow those instructions when making interview with candidates.
Cloning the Github Repository


Next and after you're logged in to your github account, visit techwithtim/VAPI-AI-Voice-Assistant github repository as we'll base on our codebase, provided by techwithtim.
you'll need to clone the repository to your workspace in VScode with :
then head to the main directory with :
Frontend Setup With React and Vite




Enter your frontend directory and install necessary dependencies:
Check your frontend structure to familiarize yourself:
- src/App.jsx: Main React component handling routing.
- src/pages/: Contains all main page components.
- src/call/: Manages voice interactions.
then you'll find a .env file in the frontend directory, that's where we connect out interface with vapi platform assistant id.
now go back to vapi dashboard to get your public key and your assistant id that we'll use for the frontend, as it shows in the picture above.
after that you can Start the frontend server with:
Your React frontend should now be running and accessible at http://localhost:5173
Backend Setup With Flask



In another terminal, Navigate back to the backend directory:
Configure your PostgreSQL connection and JWT authentication in your backend application (main.py).
then you'll find another .env file in the backend folder, for the vapi api private key that we'll need to connect our backend flask server with the platform, you'll find it the same way we did to the 1st public key
Once all configure, start the Flask server in the main app:
Your Flask backend will now run on http://localhost:5000.
This will allow us to store new candidates into our postgre database, and check credentials for users trying to login to the user-dashboard
Running and Testing Your Application




Now, let's test your setup:
User dashboard :
- Ensure both backend and frontend are running.
- Open your frontend application at http://localhost:5173, register or log in, and start an interview.
- Conduct an interview using voice interaction powered by Vapi, and view the summary report provided afterward.
- After finishing a call, a summary is generated by vapi providing details about how the interview went.
- Imagine having complete control over what's emphasized in a summary, allowing you to tailor it precisely to your needs.
Admin dashboard :
- Registered candidates are stored in postgres database, and displayed in the admins dashboard.
- each candidate has their own personal information, and a status that shows if they're accepted, refused, or postponed.
- And a dataset that fetch detailed call summary for each user.
Final Presentation and Useful Links

This project demonstrates how artificial intelligence can deeply transform recruitment processes, especially in high-volume contexts like the free training programs offered by the Orange Digital Center. By automating the initial interview phase through an intelligent voice assistant, we have not only gained in efficiency, but also in scalability and objectivity.
The integration of technologies such as VAPI.ai, FastAPI, React, and PostgreSQL shows that it is possible to design innovative, accessible, and high-performance solutions to meet real-world challenges.
This prototype is just the beginning: it paves the way for many future improvements, such as emotional analysis, automated scoring, or integration with other HR platforms. This type of solution has the potential to become a true standard in AI-assisted recruitment, both for training centers and companies looking for new talent.
Access the full source code, documentation, and installation steps on GitHub.
https://github.com/Houssam-11/VoIP-AI-assistant.git
Watch the full project in action in this short video walkthrough