This project is a user-friendly solution for showcasing a Realtor's properties on a webpage. It utilizes Node.js and Facebook's Graph API to automatically retrieve and display the Realtor's Facebook posts on the website. TypeScript and React are employed to ensure long-term maintainability and scalability.
In the backend, seamless integration with SQL and PostgreSQL facilitates efficient data management, while Supabase enhances storage capabilities. This amalgamation creates a robust solution, bridging the retrieval of information between Node.js, Facebook's Graph API, SQL, and Supabase, offering a streamlined and impactful web experience.
A standout feature is its SEO optimization and enhanced user experience, thanks to the integration of Next.js for server-side rendering (SSR), significantly improving performance and SEO ranking. The Realtor doesn't need to be involved, as everything is managed by the API function.
The original repository is here, with the appropriate commit history and changes made before the Next.js export on the 17th of October, 2023.
- Frontend
- Next.js
- React
- TypeScript
- Greensock (Animations)
- Tailwind CSS
- Backend
- Node.js
- Supabase
- SQL
- PostgreSQL
- Facebook Graph API
The Realtor's Properties Display Webpage is designed to streamline the process of presenting the Realtor's properties in an attractive and user-friendly manner. To achieve this, the following key features and technologies were utilized:
- Facebook's Graph API Integration - The project integrates with Facebook's Graph API to fetch the Realtor's Facebook posts, which likely contain details about the properties she wants to showcase. By leveraging the Graph API, the solution ensures that the webpage automatically stays up-to-date with the latest posts on the Realtor's Facebook page.
- Eye-catching Image Carousel - We've implemented an Image Carousel to showcase the Realtor's properties in a visually captivating way. This dynamic carousel leaves a lasting impression on the visitors, making property browsing an engaging experience.
- Node.js Backend System: The project employs Node.js to establish a robust backend responsible for interfacing with the Facebook Graph API. This backend is tasked with retrieving and filtering pertinent data from the API, ensuring that only property-related posts from Realtors are displayed on the webpage. Simultaneously, it communicates with the SQL database and sends both data and images to Supabase.
- Supabase (SQL and PostgreSQL) Backend: The Supabase platform serves as the primary data storage solution, facilitating data storage and retrieval through SQL queries managed by the PostgreSQL database management system. Additionally, images are stored and retrieved from the Supabase storage.
- TypeScript for Maintainability - TypeScript is employed throughout the project to add static typing to the JavaScript codebase. This helps catch potential errors during development, makes the codebase more maintainable.
- Tailwind CSS for Styling - Tailwind CSS is used as the styling framework for the project, ensuring a sleek and modern design.
- Next.js Implementation - We've harnessed the power of Next.js to bring several advantages to this project. Next.js offers efficient routing, which makes navigation seamless for users. It also contributes to SEO optimization by enabling server-side rendering (SSR), which significantly improves performance and search engine ranking. This implementation ensures that the Realtor's properties are not only beautifully presented but also easily discoverable online.
Thank you for your interest in the Eka Bienes Raices project! If you have any questions or feedback, please don't hesitate to reach out.