Short Explanation
VERO is a platform that makes rental housing easily accessible and secure. VERO empowers renters by putting control of their applicant data back in their hands. VERO revolutionizes the rental experience, ensuring accessibility and security for all.
Project Goals
VERO makes rental housing easily accessible and secure for all. We’re putting control of applicant data back into the hands of the renter.
As the old adage goes, if you want something done right, you have to do it yourself. Two real estate veterans frustrated with leasing technology decided to take matters into their own hands. And, thus, VERO was born to transform real estate technology.
VERO eliminates application fraud and streamlines leasing workflows. We do this by providing you and your team an innovative management platform that offers a transparent picture into your applicants.
Tech Stack Used
The VERO project uses a range of technologies, including:
- React: a user interface framework used to design and build the user interface of the VERO app with its reusable components and efficient rendering capabilities.
- Redux: a state management framework used to manage the 3D graphics and manipulate the display of assets like the 3D puzzle box in the VERO app.
- Styled Components: a library for styling React components, utilized to enhance the visual presentation of the low-poly 3D design of the underworld in the VERO app.
- Express: a fast and minimalist web application framework used in the VERO app to create augmented reality and 3D experiences, enabling the provision of interactive and immersive content.
- PostgreSQL: a powerful and scalable relational database management system used in the VERO app to store and retrieve data, playing a role in displaying web content like QR codes and other web-based elements seamlessly.
We'll see the feature with the tech stack used in the next section.
Features
Prequalification
One of the key features of Accepting Qualified Applications Every Time. VETT is a suite of prequalification tools by VERO to save you time, money, and revolutionize the way your team operates. VERO Vett is the industry’s only solution to eliminate fraud and protect rental income by instantly verifying a prospective renter’s identity, income, cash balances, and employment directly from the source – all before an application is submitted.
Screening
Vero stops fraud before it begins. It eliminate application fraud with the most advanced screening engine.
- Verify identity, income, cash balances, and employment in less than 30 seconds
- Surface deeper stories about applicants with additional modern and complete data sets
- Gain confidence in decision making with recommendations customized to your criteria
- Data and dashboards illuminate actionable insights to improve rental income
Automate Leasing Workflows
Flexible workflows and game-changing technology accelerate leasing velocity so you can save staff time and grow profitably.
The Problems and How I Deal With It
Developing the VERO project has definitely come with its share of challenges. Managing time effectively has been one of the main struggles, especially when working with a team. Coordinating schedules and making sure everyone is on the same page can be tough.
One of the major challenges we faced was managing a large codebase with complex styling requirements. As the project grew, maintaining consistent styles across components became difficult and time-consuming. We needed a solution that offered scalable, maintainable, and reusable styling options.
We decided to adopt Styled Components, a popular library that enables writing CSS directly within JavaScript code. Initially, integrating Styled Components into our existing React codebase required refactoring and migrating existing styling code. This was a significant challenge as we needed to ensure smooth transitions without impacting the project's functionality or design.
To tackle this challenge, we devised a plan to incrementally migrate our codebase. We identified a few components as starting points and began rewriting their styles using Styled Components. We established a clear convention for organizing styled components and maintained consistent naming conventions across the project. This helped us gradually convert the entire codebase to use Styled Components efficiently.
Another challenge we encountered was managing theme variables and global styles effectively. We needed a mechanism to share and manage variables such as colors, fonts, and spacing across components while adhering to a consistent design system.
To address this, we leveraged the theming feature offered by Styled Components. We defined a theme object containing all the required variables and synchronized it with our project's design system. This allowed us to easily access and update theme variables throughout our components.
Additionally, we used styled components to encapsulate global styles. We created styled components specifically for global elements like the body, headings, and buttons, allowing us to maintain a cohesive and consistent design language.
While using Styled Components, we also faced challenges related to performance optimization. As the number of styled components increased, so did the CSS output. This could potentially impact our website's performance.
To mitigate this, we explored techniques like code splitting and lazy-loading to ensure that only the necessary styles were loaded when needed. We also used tools like PurgeCSS to remove any unused styles during the production build. These optimizations significantly reduced the amount of CSS delivered to the client and improved the overall performance of our website.
By successfully overcoming these challenges, we experienced the true power of Styled Components and React in website development. The combination enabled us to create clean, modular, and reusable styling solutions while maintaining a well-organized and maintainable codebase.
Lessons Learned
In a past website development project, I learned valuable lessons while utilizing Styled Components and React. Here are some unique lessons I earned:
One of the significant lessons I learned was the power of encapsulating styles within components. With Styled Components, I could create self-contained components that included both logic and styling. This approach enhanced reusability and simplified maintenance by isolating styles within the components they were applied. I found that styling customization and modifications became easier, leading to a more scalable and maintainable codebase.
Another lesson I acquired was the ability to dynamically change styles based on props or state in React components using Styled Components. I learned how to pass props to styled components and conditionally apply different styles based on those props. This allowed me to create more responsive and interactive components, resulting in a more engaging user experience. By utilizing media queries, I could also dynamically adapt styles to different device breakpoints, improving the overall responsiveness of the website.
Overall, my experience with Styled Components and React in website development taught me the importance of encapsulation, reusability, theming, responsiveness, code maintainability, performance optimization, and leveraging the broader ecosystem. These lessons not only enriched my skill set but also contributed to building high-quality and scalable web applications.