The latest articles on DEV Community by SALIM MWAURA (@saleemdev). https://dev.to/saleemdev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F875983%2F7bd9afa8-282b-438f-8cf7-6d58a6b1d2c0.jpeg https://dev.to/saleemdev en SALIM MWAURA Sun, 12 Jun 2022 09:45:23 +0000 https://dev.to/saleemdev/genesis-the-next-gen-rental-listing-app-using-reactjs-and-frappeerpnext-902 https://dev.to/saleemdev/genesis-the-next-gen-rental-listing-app-using-reactjs-and-frappeerpnext-902 <p>ReactJS is a frontend framework(or is it a library?) created and maintained by Facebook. To avoid much debate on whether it is a framework or a library, I will call it a <code>tool</code> used to create and render UI components on a browser - The Frontend.</p> <p>Frappe Framework is a batteries included web framework written in Python, JavaScript and a MariaDB database. It is used to build and deploy database driven apps.<a href="https://frappeframework.com/docs/v13/user/en/introduction">More about them here</a></p> <p>Let's be honest, all apps are database driven.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ZujGGA8d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ayx3esvjnhwseyxcipo.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ZujGGA8d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ayx3esvjnhwseyxcipo.png" alt="Image description" width="880" height="672"></a></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--EK0iva9R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/..." class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--EK0iva9R--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/..." alt="Uploading image" width="" height=""></a> </p> <p>There is lots and lots that needs to be said about those two software stacks but for now, I will narrow my focus on the Rental Listing app: its scope, set up, and the design inspiration. </p> <p><strong><u>Scope</u></strong><br> Rental listings have been built before, and you probably have seen or have used one before so let me dive into its scope.</p> <ul> <li>A React based frontend UI with a Search engine (with filter options) landlord/tenant portal, maps integration, and easy navigation.</li> <li>A backend (Frappe/ERPNext instance) with a repository of all properties in an organized structure.</li> <li>REST API of Frappe! (Frappe rocks!)</li> <li>Batteries of Frappe!(SMS, Email, Admin UI, WebHooks)</li> </ul> <p><strong><u>Setup</u></strong><br> This is going to be a high level demonstration.</p> <ul> <li>Frappe instance setup hosted on a VPS: <a href="https://www.digitalocean.com/community/tutorials/how-to-install-an-erpnext-stack-on-ubuntu-20-04%5B%5D(url)"></a> </li> <li>Frappe apps to install: facility_management <a href="https://gitlab.com/dsmwaura/facility_management_website.git"></a> and facility_management_website <a href="https://gitlab.com/dsmwaura/facility_management.git"></a> </li> </ul> <p>In your frappe bench directory run the following command.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>bench --site yoursite.com install-app appname git-repo </code></pre> </div> <ul> <li>A React App created using <code>create-react-app</code> </li> </ul> <p><strong><u>Design Inspiration<br> </u></strong><br> Zumper: <a href="https://www.zumper.com/">https://www.zumper.com/</a></p> <p>I will make more articles detailing each of the steps in the setup!</p>