Don't worry about actually trying to call Kombo's API endpoints. let's remove that complexity and just assume that we have the data we need/would be able to add the actual API integration at some later interation of this product. We just want to create an MVP of the front end, so the overall UI/UX is more important that the actual data flow or things happening on the backend. The main goal is to create an MVP that shows what the UI/UX would look like, and not that it's fully functional and integrated with Kombo or other 3rd party APIs for now.
In case it's helpful though, here is an example response of Kombo's GET jobs endpoint, so you can see what the data would look like:
{ "status": "success", "data": { "next": "eyJwYWdlIjoxMiwibm90ZSI6InRoaXMgaXMganVzdCBhbiBleGFtcGxlIGFuZCBub3QgcmVwcmVzZW50YXRpdmUgZm9yIGEgcmVhbCBjdXJzb3IhIn0=", "results": [ { "id": "26vafvWSRmbhNcxJYqjCzuJg", "remote_id": "32", "name": "Backend Engineer", "job_code": "BE-2021-01", "description": "<p>Kombo is hiring engineers! If you are reading this and you are located in Berlin, Germany, feel free to contact us about this position.</p>", "confidential": false, "weekly_hours": 37, "employment_type": "FULL_TIME", "status": "OPEN", "visibility": "PUBLIC", "category": "Technical Job", "department": "Engineering", "post_url": "https://jobs.example.com/post/159829112", "experience_level": "Mid-Senior", "remote_work_status": "HYBRID", "salary_amount": 4200, "salary_amount_from": null, "salary_amount_to": null, "salary_currency": "EUR", "salary_period": "MONTH", "location": { "city": "Berlin", "country": "DE", "raw": "Berlin, Germany", "state": "Berlin", "street_1": "Lohmühlenstraße 65", "street_2": null, "zip_code": "12435" }, "custom_fields": {}, "integration_fields": [], "opened_at": "2022-08-07T14:01:29.196Z", "closed_at": null, "remote_created_at": "2022-08-07T14:01:29.196Z", "remote_updated_at": "2022-08-07T14:01:29.196Z", "contact_id": "6gT2yLMBEipd3zpezATv3Rhu", "remote_data": null, "changed_at": "2022-08-07T14:01:29.196Z", "remote_deleted_at": null, "stages": [ { "id": "26vafvWSRmbhNcxJYqjCzuJg", "remote_id": "32", "name": "Initial Screening", "index": 0 } ], "screening_questions": [ { "id": "26vafvWSRmbhNcxJYqjCzuJg", "remote_id": "48b4d36a-1d4b-4c50-ada7-9519078e65b4", "title": "Which is your primary programming language?", "description": "Please enter the language you are most comfortable with.", "format": { "display_type": "SINGLE_LINE", "max_length": null, "type": "TEXT" }, "index": 0, "required": true, "precondition_question_id": "4ZVteCSSgDw3BdwGzcQqGEPk", "precondition_options": [ "7qd5qjPwDHarsMLFMGzXYG1K" ] } ], "job_postings": [ { "id": "26vafvWSRmbhNcxJYqjCzuJg", "remote_id": "48b4d36a-1d4b-4c50-ada7-9519078e65b4", "title": "Frontend Engineer", "description_html": "<p>We are looking for a Frontend Engineer.</p>", "status": "ACTIVE", "visibility": "PUBLIC", "url": "https://jobs.example.com/post/159829112", "remote_data": null } ], "hiring_team": [ { "id": "26vafvWSRmbhNcxJYqjCzuJg", "remote_id": "32", "first_name": "John", "last_name": "Doe", "email": "john.doe@kombo.dev", "hiring_team_roles": [ "RECRUITER" ] } ] } ] } }
I'm also including an example below of what a POST request to Kombo's create application endpoint would look like, just for reference so you know which data points it includes:
curl --request POST
--url https://api.kombo.dev/v1/ats/jobs/{job_id}/applications
--header 'Authorization: Bearer ks_prod_8Pfh5yJkKhTQKhVPUoRtYgSkHUZQPpKM'
--header 'Content-Type: application/json'
--header 'X-Integration-Id: <x-integration-id>'
--data '{
"candidate": {
"first_name": "Frank",
"last_name": "Doe",
"company": "Acme Inc.",
"title": "Head of Integrations",
"email_address": "frank.doe@example.com",
"phone_number": "+1-541-754-3010",
"gender": "MALE",
"salary_expectations": {
"amount": 100000,
"period": "YEAR"
},
"availability_date": "2021-01-01",
"location": {
"city": "New York",
"country": "US"
}
},
"stage_id": "8x3YKRDcuRnwShdh96ShBNn1",
"attachments": [
{
"name": "Frank Doe CV.txt",
"data": "SGkgdGhlcmUsIEtvbWJvIGlzIGN1cnJlbnRseSBoaXJpbmcgZW5naW5lZXJzIHRoYXQgbG92ZSB0byB3b3JrIG9uIGRldmVsb3BlciBwcm9kdWN0cy4=",
"type": "CV",
"content_type": "text/plain"
}
],
"screening_question_answers": [
{
"question_id": "3phFBNXRweGnDmsU9o2vdPuQ",
"answer": "Yes"
},
{
"question_id": "EYJjhMQT3LtVKXnTbnRT8s6U",
"answer": [
"GUzE666zfyjeoCJX6A8n7wh6",
"5WPHzzKAv8cx97KtHRUV96U8",
"7yZfKGzWigXxxRTygqAfHvyE"
]
}
]
}'
Understood. Let's simplify the implementation and focus on creating an MVP that showcases the UI/UX without worrying about the actual API integration. We'll use mock data based on the example response you provided.
this UI looks like it's from 2005, it's super outdated and ugly. can you apply some nicer looking styling, to make this look more modern and sleek? the UI should look and feel like it's designed by a top notch designer, and the UX/UI and overal visual appeal needs to be at the same standard that top tech firms like meta or linkedin would have for themselves. a sleek design is one of the most important aspects of what we're building.
I apologize for the outdated design. You're absolutely right that a sleek, modern design is crucial for this application. Let's revamp the UI to meet the standards of top tech firms. We'll use a more modern color scheme, add some subtle animations, and improve the overall layout and typography.
This looks better already, but lets see if we can improve it further. I'm attaching some screenshots of what LinkedIn's easy apply UX/UI flow looks like, which I'd assume had some top designers working on it and optimizing it -- i.e. I imagine they've heavily user tested it and optimized it for various target metrics that matter most.
Can you analyze some of the differences and update our app to make the overall flow and UX more similar to LinkedIn?
Keep in mind that these are just screenshots from one individual job example, and don't include the entire user/candidate flow. Nevertheless, there should be insights/learnings that we can apply to our app to make it better.
