Vasil1001/rently-reactjs

A real estate property portal to assist with finding the right home to rent or buy. It focuses more on the renting market, gathering rent listings within people's desired filters to choose the right home.

Rently - react.js

A React + Vite + Firebase + Tailwind + DaisyUI app. FINISHED

Project 3 of the 'React Front to Back 2022' Udemy course, with my own twist in layout design and features.

Link to app: https://rently-marketplace.netlify.app/

Features:

• Tailwind CSS for layouts
• Firebase Auth: Login, Register, Logout, Google Auth, Profile page
• Firestore Database
• Explore page with Sale or Rent categories
• Listings that when clicked open a listing page that contains a gallery slider and information fetched from Firestore
• User profile page where listings can be created, with images, name and property information
• User created listings can be deleted and edited only when same user is logged in
• Contact landlord page that allows users to send email to person who posted

Table of Contents

1. App Screenshots
2. General Info
3. Setup
4. Usage
5. Status
6. Contact

App screenshots

Explore Page

Rent Category Page

Listing Page

Listing Page 2

Profile Page

Create/Edit listing Page

Contact landlord Page

Register Page	Login View

Responsive Navigation Bar

Technologies used

1. React.js
2. TailwindCSS layouts
3. DaisyUI library for components
4. VSCode

General Info

• A property renting platform where users can post their listings to sell or rent
• Users can use it to browse available listings and get in contact with landlords

Learning Outcomes

• The target learning outcomes are:
  • Further expand React skills
  • Learn to use Firebase firestore
  • Practice with CRUD functionality with creating rent listings, deleting and editing them.

Setup

• This project was bootstrapped with [Vite]

• The project has been deployed to Netlify: try it online following the link: https://rently-marketplace.netlify.app/

• To Run Locally

  • In the project directory, you can run:

  • npm install

  • npm run dev

  • Open http://localhost:5174/ to view it in your browser

Usage

• Clone Project

• npm install

• npm run dev

Project Status

Project is: Work in Progress

Contact

Created by [Vasil] - feel free to contact me!