Villa Rent VueJS Practice Challenge

Key Information

Submit
Submission Ends: 253d 6h

Timezone:Etc/UTC

Registration

Starts

Aug 13, 2022

14:01

Ends

Aug 13, 2023

14:01

Submission

Starts

Aug 13, 2022

14:01

Ends

Aug 13, 2023

14:01

Review

Starts

Aug 13, 2023

14:01

Ends

Aug 15, 2023

14:01

Appeals

Starts

Aug 15, 2023

14:01

Ends

Aug 16, 2023

14:01

Appeals Response

Starts

Aug 16, 2023

14:01

Ends

Aug 17, 2023

02:01

Winners Announced

Aug 17, 2023

02:01

Challenge Overview

# 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! [VueJS](https://vuejs.org/) is a JavaScript Framework to develop web application. 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. **Important Notes:** 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. **NOTE:** 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 - JavaScript - NodeJS - 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.

ELIGIBLE EVENTS:

2023 Topcoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30296171