top of page
villar
Introduction
Villar is real estate filtering web application developed in React JS. It specifically displays houses in Rhode Island, including the address, price, location, and property type. Users are able to filter by location, property type, or listing as well as sort by price. It's people's one stop shop for home searching!
Styles & Assets
#90BC3E
#EBEDEE
#FFFFFF
#57595A
Circular Std Black.ttf
Circular Std Book.ttf
I chose bright icons and colors for the web application. I wanted to keep the theme clean with just a single color as the main color scheme along with plain white. For the text and div background colors, I used two different shades of gray: hex #57595A and #EBEDEE.
I chose to keep the icons fun with bright colors and a rainbow loading spinner that is displayed when the page is initially launched. I chose to keep the div icons in the same color dark gray as the text in order to keep the theme consistent.
I chose the Circular Std Black and Circular Std Book font family. The logo and other headings are in Circular Std Black, and all other text is in Circular Std Book.
Development
Villar is developed from seven components in React JS (with accompanying CSS). I used a couple APIs, including the OpenWeather API and Axios to display the current location weather widget in the top right corner of the site. It also contains several functional components in order to filter the villas when a radio button in the left div is clicked. The user is also able to favorite villas by clicking on the heart icon - in the sidebar, they are able to show only their favorite houses by checking the "Show Favorites" box. Users can also search for a villa's address by using the search bar, which works in tandem with the filtering and sorting features.
Improvements
In the future, I would perform user testing regarding Villar's interface and overall design. By developing this application, I was able to better my understanding of React and improve my web app development skills. Creating an application from start to finish - sketches to final product - allows me to gain more insight into a product's development cycle. In order to improve Villar, I would want to add more sorting features, user account information and authentication as well as villa options, expanding to different locations.
bottom of page