Welcome to Voiceflow's Frontend Project!
Congrats on making it to this part of the interview process. 🥳
The goal of this project is to create a chat client that allows multiple users to interface with a Voiceflow project.
It’ll help you gain a much better understanding of how conversational interfaces work and how Voiceflow plugs into that flow.
Make sure you have Node.js and yarn on your computer.
Clone this repository (keep your repo private).
to install all dependencies (node_modules) :
yarn install
to start the server on http://localhost:3000 :
yarn start
if your http://localhost automatically resolves to https://localhost - try on incognito mode or a different browser
Go on http://localhost:3000, you should see a window like this:
Login/sign up for Voiceflow Creator, and build a simple Custom Assistant project. If you need inspiration you can check out the Templates. Test it out to make sure it's working!
On the "Launch" tab of your Voiceflow project, you'll be able to get the API keys as well as the version. Under src/Chat/utils.ts you'll find a utility function that shows how the API can be called. Click here for more documentation on the Voiceflow API.
Use this API to create a back and forth chat where every single new input submission generates a series of responses.
Along with the response you'll see that the "type": "speak" traces also contain Audio, so that needs to get played in sequence. (there can be multiple speak traces in a response)
The goal of this app is to allow multiple users to start a chat with the bot you've made. We should be able to switch between different users and the Chat section should retain the history of that particular person's chat when switching around.
For example, if I select Steve and chat for a bit, I can back out and select Luke and start a new conversation. When I return to Steve his conversation is still there.
Right now the dashboard and chat are hard coded - but this should be all be dynamic. Feel free to add in a bit of styling as well to make it look a little better. (We're really not judging design or how pretty it is, but it's a good opportunity to show off styling code).
Feel free to modify the code as much as you want, as the template is more of a suggestion. Use any libraries, packages, existing code - nothing is off limits.
- The chat should be scrollable and go as far back as the conversation start
- Reset after a chat is finished
- The chat should play the MP3 audio if included in the
Speaktrace in the response, audio should never overlap. - User's chat history and state should be stored even if the page refreshes
- Start with 0 users, but should be able to create new ones, and delete old ones
- Chat should always scroll to the most recent message when updated
- Set up a build to turn the Typescript project into a browser compatible JS static Single Page Application
Unless you get fancy and go off the rails (which isn't a bad thing 👍) this project takes around ~1-3 hours if you are familiar with the stack. Keep in mind this isn't a race to get it done - it's about getting it done well.
- use Typescript proficiently
- use repeatable, scalable patterns
- make modular, nicely separated components
- account for edge cases
- manage sensitive data securely
- manage data passing properly
- set up a good build process
Send the link to your working repository to your recruiter's email.