FRO N TE N D
CHALLENGE
Duration: 4 days
Challenge Overview
Develop a website using React. The website will replicate a property rental platform with
essential features, including property listings and booking management. This challenge
combines coding, UI design, logical thinking, user interaction, and critical problem-solving.
Challenge Details
1. Property Listings:
➔ Display a variety of properties with images, titles, descriptions, prices, and "Book
Now" buttons.
➔ Implement filters to allow users to sort properties by location, price range,
number of bedrooms, or amenities.
2. Booking Management:
➔ Implement a booking management system to allow users to book properties.
➔ Display a cart section to manage booked properties, showing property details,
booking dates, and total cost.
➔ Allow users to increase, decrease, or remove booked properties from the cart.
➔ Display real-time updates of the cart total and booking count.
3. Checkout Process:
➔ Implement a checkout process that calculates the total cost of booked
properties.
➔ Allow users to enter booking details, including contact information and payment
details.
4. Responsive Design:
➔ Ensure the website is responsive and works seamlessly on both desktop and
mobile devices.
➔ Optimize the layout for different screen sizes to provide an optimal viewing
experience.
Submission Details
➔ Create a GitHub repository with the name ‘totality-frontend-challenge' and upload your
code there.
➔ In the README file, elaborate on your approach, tech stack details, and any additional
notes.
➔ Deploy your application on a hosting platform such as Netlify, Vercel, or any similar
platform.
➔ Share the link to your deployed application along with the GitHub repository when
submitting the challenge.
Additional Challenges (Optional)
● User Authentication:
➔ Provide user registration and login functionalities.
➔ Display the user's name and avatar when logged in.
● Implement additional features such as property reviews or favorites list
Evaluation Criteria
➔ Coding Skills: Assess the candidate's ability to write clean and structured code,
implementing features such as property listings, user authentication, and booking
management.
➔ Problem-Solving: Evaluate how well the candidate addresses challenges related to cart
updates, authentication, and user data handling.
➔ User Experience Design: Consider the user-friendliness, visual appeal, and
responsiveness of the property rental platform.
Points to Remember
➔ Use of Next JS is a plus
➔ Candidates may use any third-party UI libraries for designing components
➔ Use of TypeScript is a plus.