The tasks do not require full completion. Do as much as you can. This test is a full-stack test with a little DevOps. We understand that you might not know how to use some of the tools. It's completely ok.
You can skip this part if you don't know docker, and create a default Laravel project.
Setup two projects,
first frontend which uses vue-js. If you want to add styling, you can use TailwindCss
Second backend use Laravel for the backend.
Connect them up with docker-compose into a single network.
Acts like VueJs todo list tutorial, you can take it for reference, but instead, of one field it takes in two fields: url css_selector
The list items should be stored in localStorage.
And a button crawl. when clicked it submits a post request to the /crawl endpoint with the whole array of items in the form of [{url,css_selector}, {url,css_selector}, {url,css_selector}]
It should receive a jobId on reply.
Then query /crawl/{jobId} with a GET request every second to get an update.
It should present the current URL processed by the job in the backend.
When the query responds with success/done, make a GET query to /articles and display the results in a grid.
Bonus points:
If instead of polling the /crawl/{jobId} endpoint. You use web-sockets to push updates to the frontend
If you show the progress of the current URL parsing.
has three endpoints:
- /crawl
- /crawl/{:jobId}
- /articles
endpoint receives a POST request with a body of an array of urls with css selectors, for egzample. [{url,css_selector}, {url,css_selector}, {url,css_selector}]
Backend starts a job which iterates over the list of URLs with CSS selectors. PAKLAUSK LINO KAS CIA TURI VYKTI
On every iteration, it puts an item into Redis, which represents which URL is currently processing.
replies with a jobId;
bonus points: Track the curl/guzzle request progress, and update the cache.
Takes the info from Redis cache and returns it to the frontend.
When the job finishes, reply with a success status.
Returns the URL title and content, which is the CSS selector parsed text, it can be raw, with internal HTML.