Frontend Take-Home Assignment - Senior Frontend Position

Hello, and thank you for taking the time to complete our take-home assignment! We've designed this task to simulate a real-world engineering challenge here at Vio.com and to give you a chance to showcase your skills and thought process.

Overview

This repository contains a Frontend Take-Home Assignment for candidates applying for a Frontend Developer Position at Vio.com. The challenge focuses on building a hotels search widget with an autocomplete search bar.

This assignment is designed to be completed in approximately 4-8 hours.

Technical Stack

• Styling: Tailwind CSS
• API: Vio Partners API (API Profile Key will be provided)
• Framework: Next.js/React

API Documentation

• Endpoint: Vio Partners API
• API Profile Key: Will be provided separately

The Challenge

Create a hotels search widget with an autocomplete search bar, date pickers, a guest count input and a search button. Display the results as a hotel list below the input fields.

You can find more detailed instructions here.

Implementation Notes

• Implement the solution the same way you would in a real-world project, including changing the existing components and codebase as you see fit
• Apply your expertise and best judgment. We value code that is robust, performant, and provides a great user experience
• Use the existing UI components from /src/components/ui
• Follow the API patterns established in lib/api/vio-api.ts
• You can use AI to help you with the assignment. If you do, please include a brief summary in your NOTES.md file of which tools you used and for what purpose

Getting Started

1. Clone this repository to your local machine
2. Set up your API Key: Rename the .env.example file in the root directory to .env.local. Add the API key we provided to you inside this file
3. Install the required dependencies: npm install
4. Run the development server: npm run dev
5. Open http://localhost:3000 to see the application

Submission

Please provide:

1. Create a new private GitHub repository with this codebase
2. Create a pull request (PR) with all your changes, including:
   • Your HotelsSearchWidget component
   • All other changes you made to the codebase
   • An updated NOTES.md file with a brief explanation of your approach and any improvements made, as well as any notes about your AI usage
3. Add the findhotel-reviewers user as a reviewer to your PR

Questions?

If you have any questions about the challenge, please don't hesitate to reach out. We're looking forward to seeing your solution!

---

Good luck, and have fun!