Your task is to implement a simple web application with a Laravel backend and Vue frontend that takes a user input and runs it through a two-step LLM prompt then render the output. User input will consist of two fields:
- A question posed by the user
- A modifier that will transform the output of the first prompt in some way defined by the user (ex. translate to another language or rephrase to use a particular tone or accent).
This could be done all within a single prompt, but we'd like to see how you architect a simple system that chains two prompts together.
The boilerplate should include everything you need to get started, including all required dependencies and some example controllers and pages using Inertia. We'll provide links to the relevant documentation in the Resources section of the readme.
- Create a simple UI that accepts the 2 text inputs from the user and then shows the LLM output at each stage (the boilerplate project comes with TailwindCSS installed).
- Architect any migrations, models, and relationships you'll need to solve the challenge.
- The web app should be stateful, i.e. it should be specific to the currently logged-in user (credentials will be seeded into the boilerplate project), and at least the prompt output should persist across page reloads.
- Implement a two-step prompt using the user inputs (OpenAI SDK for Laravel is installed and we've provided you with a temporary OpenAI API key).
- Render the LLM output at each stage of the process.
- Write a Pest test to validate the happy path of at least one of your controller actions.
- When you're done, submit you work as a Pull Request on boilerplate repo.
We just want to see how you approach problems, how you architect your solutions, and how you write your code. Feel free to be creative, as long as you complete the task at hand. Add clarifying comments if you feel a particular implementation could be potentially confusing, but try to let your code speak for itself.
If you can't complete all tasks within a reasonable amount of time, do as much as you feel accurately conveys your skills as a developer and include a written explanation of how you would go about implementing the remainder of the tasks if you had time in the PR description.
- PHP ^8.2
- Composer
- Node/NPM
- Clone the boilerplate repo
git clone https://github.com/PromptHubUS/Coding-Challenge.git - Install composer dependencies
composer install - Install NPM dependencies
npm i - Run migrations and seeders
art migrate:fresh --seed
- Serve the backend
art serve - Run the bundler
viteornpm run dev - Login using test credentials
[email protected]andpassword
The boilerplate includes all the necessary packages and configuration out of the box. Please utilize the resources listed below. There are also some optional resources installed, which you are free to use or not based on your preferences.
- Laravel 11 (backend)
- Vue 3 (frontend)
- InertiaJS (passing data to frontend)
- TailwindCSS (frontend styles)
- Ziggy (reference backend routes on the frontend using
route()helper) - OpenAI-PHP/Laravel (OpenAI SDK for PHP/Laravel)
- OpenAI API (you're free to use either the legacy
/completionsendpoint or the new/chat/completionsendpoint which supports the newer models) - Pest (testing framework)
- Vite (frontend bundler - should be fully configured out of the box)
- Laravel-Actions (single-file controllers, you're free to use regular Laravel controllers if you like)
- HeadlessUI (UI components for Vue)
- Heroicons (small collection of icons)
- Axios (HTTP client for non-inertia requests)
- Sass/SCSS (CSS preprocessor with helpful syntax)
- Inertia renders pages based on their file name and position in the folder hierarchy under
resources/js/Pages. Reference the Breeze controllers and pages as examples. - You can define global Inertia props in the
HandleInertiaRequestmiddleware. - The .env file will be committed to the boilerplate repo in encrypted form. If you need to edit it, we can provide the key to decrypt it.
- Feel free to reach out if you have any problems or questions!