Project: Zillow clone

About the project

The Zillow clone project is a real estate website that demonstrates expertise in a range of technical skills. It utilizes Vue.js and Vite for frontend development, delivering an interactive user interface, while Inertia connects the PHP backend seamlessly with the frontend. Styling is achieved using Tailwind CSS, ensuring a modern design. The backend relies on PHP and Laravel for server and API development, while CockroachDB serves as the database solution. Cloudinary is utilized for file storage, and Sendinblue enhances user engagement through email functionalities. This combination of technologies results in a robust, secure, and user-friendly real estate website.

Technologies

iconTailwind CSSiconLaraveliconVue.jsiconInertia.jsiconVite.jsiconCloudinaryiconVerceliconCoachroachDBiconSendinblue

Project respository

Project details

Home PageListing detailsAll ListingsYour OffersManage ListingsManage Profile
View image
carouselImage

Frontend development

The project utilizes Vue.js and Vite.js for frontend development. Vue.js is a powerful JavaScript framework that facilitates the creation of dynamic and interactive user interfaces through its component-based approach. It allows developers to build reusable UI components and effectively manage their states. Vite.js, on the other hand, serves as the build tool, offering a fast development server and build process that optimizes performance and enhances productivity.
To connect the frontend with the PHP backend, Inertia is employed. Inertia acts as a bridge between the two, providing seamless communication without the need for a separate API layer. This approach, similar to server-side rendering, renders frontend components on the server and rehydrates them on the client side. It enhances performance by reducing unnecessary round trips to the server and simplifies development by leveraging existing PHP backend logic.
For styling, Tailwind CSS is utilized, a utility-first CSS framework that offers a comprehensive set of pre-designed components and utilities. It allows for rapid development and consistent design throughout the real estate site by composing small utility classes. With Tailwind CSS, developers can easily customize the website's appearance while maintaining a cohesive visual language.

Backend development

The backend development of the project incorporates PHP and Laravel for server and API development, CockroachDB for the database, Cloudinary for storage, and Sendinblue for sending email, including verification and notification emails.
PHP, a widely used server-side scripting language, is combined with the Laravel framework to build a robust backend infrastructure. Laravel provides a comprehensive set of tools and features for developing APIs and handling server-side logic. It simplifies routing, database management, and authentication, making it an ideal choice for creating complex web applications such as the Zillow clone project.
CockroachDB is utilized as the database solution for its scalability, fault-tolerance, and distributed nature. Being a distributed SQL database, it ensures strong consistency, high availability, and horizontal scalability. CockroachDB enables the storage and retrieval of large volumes of data while maintaining data integrity across multiple nodes, ensuring the smooth operation of the real estate website.
To manage file storage, Cloudinary is employed. As a cloud-based media management platform, Cloudinary simplifies the storage, transformation, and delivery of images and other media assets. It offers an easy-to-use API for uploading, retrieving, and manipulating images, ensuring efficient storage and seamless delivery of property images and other media assets on the Zillow clone website.
For sending emails, including verification and notification emails, Sendinblue is integrated into the backend. Sendinblue is a powerful email marketing and automation platform that provides reliable email delivery services. It facilitates the sending of transactional emails, such as verification emails for user registration, as well as notifications for various user activities or updates on the real estate platform.
Authentication CookiesVerified email only route
View image
carouselImage

Authentication and security

The website prioritizes authentication and security by leveraging Laravel's built-in authentication system. It utilizes session cookies and CSRF tokens to ensure secure user authentication. Session tokens are stored in the database, maintaining authenticated user sessions. Additionally, Laravel's guard API and auth middleware protect API endpoints by checking for verified email addresses and authenticated users, enhancing overall security.
For user sessions, Laravel's authentication system employs session cookies, storing session tokens securely in the database. This enables secure and authenticated user sessions throughout their interaction with the website. CSRF tokens are generated and validated to prevent cross-site request forgery attacks, safeguarding against unauthorized manipulation of user data.
To enhance security further, the website employs Laravel's guard API and auth middleware. The guard API authenticates and authorizes API requests, ensuring that only authenticated users can access protected resources and endpoints. The auth middleware verifies email addresses and user authentication, adding an extra layer of security by granting access only to users with verified email ownership.

Deployment

Initially, the website was deployed using Heroku and Docker, but the cost-efficiency was a concern. To address this, the deployment strategy shifted to Vercel's serverless function. This option offered both affordability and speed, ensuring optimal performance. Additionally, Vercel's integration with GitHub provided a seamless continuous deployment process, allowing for automatic deployments whenever changes were pushed to the repository.
By migrating the deployment to Vercel's serverless function, the website achieved a more cost-effective solution without compromising on performance. Leveraging Vercel's serverless architecture and its integration with GitHub, the deployment process became faster and more efficient. This approach provided a reliable and affordable deployment option for the Zillow clone project, ensuring that the website stays up to date with the latest code changes and minimizing the overall deployment costs.