# VueJS Practice Challenge
## Challenge Overview
Welcome to the **VueJS Practice Challenge**!
This challenge is designed to help you learn/practice VueJS Framework at Topcoder by submitting to this simple competition!
It is an approachable, performant and versatile framework for building web user interfaces.
We are launching this practice challenge for you so that you can adapt and get accustomed to VueJS in future challenges.
This is not a standard challenge. The prize $1 is just marker.
## Challenge Details
### Requirements for this challenge
Recent years, Villa party is very popular in some countries. But not everyone has a villa or not every villa house has entertainment facilities. In order to have a villa party, we need to rent a villa which has some entertainment facilities.
Our purpose is to design a simple web application to show villa and let the customer to book it.
In this practice challenge, you're encouraged to design and develop two screens for this villa rent application.
1. Display Villas screen
In this screen, display villas available for rent in list mode or tiles mode for users to browse.
- Should allow input date to select villas for rent. Default, we show villas available for current date.
- Should show villa thumbnail, location(city), price, capacity, facilities. Should be able to filter and sort by location, price, capacity.
- Show only X villas when the screen loads, here X should be configurable value, such as 5, 10, 15, etc.
- A LOAD MORE button, clicking on it will load next X villas.
- Click on the row in list mode or the square in tiles mode, it will go to villa detail screen.
- Add an BOOK button to the last column of the list or the bottom of each square in the tiles, clicking on it will book the villa with a confirmation modal.
2. Villa detail screen
- In this detail screen, show 3 images in slider mode at the top of the screen, and show the villa name, location details, price, description (including more images, capacity, features and descriptions of entertainment facilities, etc.)
- Provide a BOOK button to book the villa with a confirmation modal.
- Provide a Back button to go back to previous screen.
we do not have exist design to follow. So, it all depends on you to stimulate creativity. But please make sure the following criteria are met:
- Make sure follow VueJS best practices;
- Make sure the app is responsive on different devices;
## Tech stack
- Vue 3
- Latest Chrome, Edge, Firefox
## Submission deliverable
Submit a zip folder containing these:
- Source code of the application.
- A README about how to deploy&verify the application.