Giter Club home page Giter Club logo

house-hunting-app's Introduction

House Hunting App ๐Ÿ 

house-hunting App that facilitates to access and rent available homes

Live demo ๐Ÿ“บ

Heroku link , Click here to visit our app

use these credientials:
email: [email protected] password: 123456789

Main problem ๐ŸŒš

Most of those who intend to get married or who are looking for a house find it very difficult to search and wander around to several areas to find a house that suits them at a price according to their capabilities.

Solution ๐Ÿ’ก

Build a house-hunting application that facilitates users to rent houses, most of who looking for a house faced some difficulties, help to choose a suitable house.

User Stories ๐Ÿ“–

As a renter and rented user:

  • I can Sign up into the app
  • I can log in into the app
  • I can see all available houses to rent
  • I can see specific information about any house
  • I want to search by different locations, prices and the number of room in the house
  • I can add houses to my favourite list
  • I need to create my own profile
  • I need control panel to manage my houses

User Journey โœˆ๏ธ

As a user, I can see all available houses that able to rent, search to find houses and I can add any liked house to my favorite list and see the differences between two houses from my favorite list, inside my profile I have my information and control panel for my own houses available to rent.

Prototype ๐ŸŽจ

Figma Link prototype

DATABASE Schema ๐Ÿ—„๏ธ

dbdigram dbimage

Installation Guide :

  1. Clone this repo.
  2. Navigate to the cloned repo.

Database Setup

  1. If you have pgcli skip this step.

  2. Open your terminal, run pgcli, navigate through the project to this path: ./server/database/config/build.sql

  3. Copy this file path and write in the terminal:

    \i <paste your copied path to the file>
  1. build the dummy data by using this command:
    npm run build:db

Project setup

  1. Create a .env file in the project root folder.
  2. Add the following in it This step is so important!!
SECRET_KEY=AB#%&HD

DATABASE_URL=postgres://team2:0000@localhost:5432/househunting

DEV_DB_URL=postgres://team2:123456@localhost:5432/househunting_dev

TEST_DB_URL=postgres://team2:123456@localhost:5432/househunting_test

  1. To install the dependencies, run this command only for the first time:
    npm i

Running the project:

  1. To run the server, Open your terminal and run:
    npm run dev
  1. To run the React Development server, Open another terminal and run:
    npm run client
  1. To run the tests:
    npm test

Technologies ๐Ÿ’ป

Front-end Technology:

  • ReactJS (Hooks).
  • Material UI
  • UnDraw

Back-end Technology:

  • Node JS
  • Express.

Database Technology:

  • PostgreSQL.

Stretch Goals ๐Ÿฅ…

  • The users can complete the contract and rent the apartment
  • user can see the location of the house on the map and compare between two houses
  • user can see related houses according to a specific area on the map
  • create an admin dashboard
    • admin can view, edit, delete all users
    • admin can view, edit, delete all houses
  • create chat that allows users to contact and negotiate

team

Lead Mentor ๐Ÿ˜Ž

  • Mariam Isa

Team Members ๐Ÿ‘ฅ

  • Yasmeen Attallah
  • Adham Haisami
  • Muhammed Abadsa

Resources ๐Ÿ”

house-hunting-app's People

Contributors

adhamhaisami avatar mabadsa avatar mariamisa avatar yasmeenattallah avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

house-hunting-app's Issues

GEt/Add house to favorite list

#15

  • Route Name:
  • route: /favorite-list/:houseId
  • method: GET

Acceptance Criteria

  • Response
  • Success
res.body = {
  statusCode: 201,
  message: 'House added to the favorite list',
}
  • Failed
res.body = {
  statusCode: 500,
  messgae: 'Something went wrong!'
}
  • Testing

favorite page/Compare between houses

#8
I need to compare between two houses
As a user I can:

  • choose two houses from my favorite list to compare between them.
  • See the difference between the houses according to the number of the rooms, location, cost and type.

image

Eslint and Travis CI config

#5

Eslint

  • process of checking your code for errors of any kind.
    install eslint
npm i -D eslint

initialize in the code

./node_modules/bin/eslint --init

Travis

  • automatically building and testing code changes in the development process
    configuration
  • Go to Travis-ci.com and Sign up with GitHub.
  • Accept the Authorization of Travis CI. Youโ€™ll be redirected to GitHub. For any doubts on the Travis CI GitHub Authorized OAuth App access rights message
  • Click on your profile picture in the top right of your Travis Dashboard, click Settings and then the green Activate button, and select the repositories you want to use with Travis CI.
    **initialize in the code **
  • add .travis.yml file in your file structure
    -and then add below code to build travis in your code
language:node_js
node_js:lts/*

User's house management.

#8
I need a control panel to manage my houses.

As a user I can:

  • Preview my houses
  • add a new house.
  • delete the house from the house list.
  • edit my house.
  • filter and sort houses.

image

image

image

footer component

  • Description
    footer component

  • Structure

make footer component contain :

  • copy right

  • UI
    image

DB schema

#5

  • Build database schema.
  • schema should have tables with fake data

Header component

  • Description
    Header component

  • Structure

make footer component contain :

  • logo
  • navBar

  • UI
    image

DELETE/profile-avatar

#11

  • Route

  • /profile-img

  • methods : Delete


Description
-delete user profile image


Acceptance Criteria

  • - validation

  • - request body

  • Response

  • Success

{ statusCode:200 ,message: " Deleted successfully "  }
  • Failed
{statusCode: 400, message:"bad Request "}

  • Testing

GET/get user houses

#17

  • Route Name:
    Route: /user/houses
    Method: GET

Acceptance Criteria

  • Response
  • Success
{
  statusCode: 200,
  houses: {}
}
  • Failed
{
  statusCode: 500,
  message: 'some error happend'
}
  • Testing

favorite list houses

#8
I need to compare between two houses
As a user I can:

  • choose two houses from my favorite list to compare between them.
  • See the difference between the houses according to the number of rooms, location, cost, and type.
  • delete any favorite house from my favorite list.

image

user profile

#8
I need to create my own profile
ูAs a user, I can:

  • View my profile info
  • Update my information
  • Delete my account
  • Add an avatar
  • Update my avatar
  • Delete my avatar
  • Update my houses info

image

image

houses-page

#8
I want to search by different locations, prices and the number of room in the house

As a user, I can:

  • Search by location to see all houses in a specific location
  • Search through houses with a specific numbers rooms
  • Search through houses with a specific price
  • See the final results after applying the filters.
  • Add house to my favorite list

image

DELETE/delete house from favorite list

#15

  • Route Name:
  • Route: /favorite-list/:houseId
  • Method: DELETE

Acceptance Criteria

  • Response
  • Success
{
  statusCode: 200,
  message: 'Favorite house deleted'
}
  • Failed
{
  statusCode: 500,
  messgae: 'Something went wrong!'
}
  • Testing

Front-end routes

Route Protected? Description Issues
/login false Login page ๐Ÿ‘
/register false Register page ๐Ÿ‘
/ false Landing Page ๐Ÿ‘
/houses' false houses page ๐Ÿ‘
/house/:id false more datails about house page ๐Ÿ‘
/profile true Profile page ๐Ÿ‘
/favourite true favourite list page ๐Ÿ‘
/about-us false about us page ๐Ÿ‘
/contact-us false contact us page ๐Ÿ‘
- false 404 page ๐Ÿ‘

GET/favorite list house

#15

  • Route Name:
  • Route: /favorite-list
  • Method: GET

Acceptance Criteria

  • Response
  • Success
{
  statusCode: 200,
  favHouse: {
    title: '...',
    description: '...',
    price: 100,
    rooms: 1,
    baths: 1,
    ...
  }
}
  • Failed
{
  statusCode: 500,
  messgae: 'Something went wrong!'
}
  • Testing

DELETE/delete house

#17

  • Route Name:
    Route: /houses/:houseId
    Method: DELETE

Acceptance Criteria

  • Response
  • Success
{
  statusCode: 200,
  success: true,
  message: 'House deleted'
}
  • Failed
{
  statusCode: 500,
  success: false,
  message: 'Something went wrong!'
}
  • Testing

Setup Project

  1. file structure
  2. ESlint and Travis CI config
  3. set up Heroku
  4. Readme

PATCH/update house

#17

  • Route Name:
    Route: /houses/:houseId
    Method: PATCH

Acceptance Criteria

  • Validation schema

  • Request

req.body = {
  houseId: '',
  title: '',
  description: '',
  rooms: 2,
  baths: 2,
  price: 100,
  location: '',
  category: '',
  area: '',
  image: '',
}
  • Response
  • Success
{
  statusCode: 200,
  success: true,
  message: 'House updated'
}
  • Failed
{
  statusCode: 400,
  success: false,
  message: 'Bad request'
}
  • Testing

Create sign up

#8
sign up

As a user, I can:

  • enter a user name, email, location, phone, and password to be able to sign up for the app

image

POST/login route

#14

Route Description

  • login route
  • full-route /login
  • method : post

Acceptance Criteria

Validation schema

  • using yup: validation library that allows you to build schemas to validate JavaScript objects.
{      
email : sting().email().required(),
password:string().min(6).alphanum().required(),
}

Request body

 req.body =  {
      email: adham@adham.adham,
      password: adham123
  }

Response

Success

{ statusCode: 200  ,data: {
"id": "348680c7-d46b-4adc-9be0-89a1d1a38566",
 "token": "jNK_DGszYOMEpPOFoRGjuyJ5KX9kaJQKCl3cujlWi",
"message": "Login Successfull",
"success": true
}

Failed

{statusCode: '400' , message:"user is not authorized, either username and password don't match, or user does not exist"}

Testing

  • true

General Guide

Reviewing code

  • Every PR must be approved by all the team in order to be merged
  • Don't resolve a comment on your PR but only comment back (reply), and let the comment writer resolve it

Working on a task

  1. Branch naming: branch names shall follow this style issueNumber-issue-description (e.g. 102-login-page)

  2. Committing changes:

    • any changes that are not related to the task (issue) or are not mentioned in it will not be accepted (if there is a bug that is making your task fail, open an issue for it and start working on fixing it)
    • commits must always be descriptive and with appropriate length (neither too long nor too short)
    • every and each commit must relate to the issue at the end
  3. Use of labels and projects

    • once started working on a task
      • label the issue in progress and move it to the in progress column in its project
      • label the PR awaiting review if you need it to be reviewed
      • label the PR in progress if you still working on it
      • PRs must be labeled with changes requested once a change is requested
    • once finished working on a task and got approved
      • label the PR done before merging it
      • label the issue done and move it to the done column in its project
      • close the issue
  4. closed issues and PRs

    • once a PR or an issue is closed it shall not be reopened
    • if there exists a bug related to a specific issue that was closed, another issue is to be opened and labeled bug
    • if there exists some critical bug that is causing the project to crash an issue with the labels bug, urgent, and priority is to be opened

Issue Template

#[relates1] #[relates1]
[Unit name]

Acceptance Criteria

  • crit1
  • crit2
  • ..
  • ..

crit1

[Full Description ]

crit2

[Full Description]


PATCH/update user information

  • update user information
  • full-route /users
  • method : PATCH

Acceptance Criteria

  • Validation schema

  • Request body
 req.body =  {
      username:" ",
      email: " ",
      mobile:  
  }

  • Response
  • Success
{ statusCode: 200,message:"user updated successfully"}}
  • Failed
{statusCode:500 , message:"some error happened  "}

  • Testing

GET/get houses by location

#16


  • Route Name
  • full-route /houses?location=gaza
  • method : Get

Acceptance Criteria

  • Response
  • Success
{ statusCode: 200 ,data : {
[
{...},
]
 }}
  • Failed
{statusCode: 500 , message:"some error happend "}

  • Testing
  • false

user journey

As a user, I can see all available houses that able to rent, search to find houses and I can add any liked house to my favorite list and compare the differences between two houses from my favorite list, inside my profile I have my information and control panel for my own houses available to rent.

Routes Template

#2

Back-end Routes Template


  • Route Name
  • full-route /
  • method : ...

Acceptance Criteria

  • Validation schema

  • Request body
 req.body =  {
      
  }

  • Response
  • Success
{ statusCode:  ,data : { }}
  • Failed
{statusCode: , message:" "}

  • Testing

POST/signup route

#9

  • Route
  • / signup
  • method : post

Description

  • Register page

Acceptance Criteria

  • Validation schema
  • using Yup: validation library that allows you to build schemas to validate JavaScript objects.
{      
username : string().required(),
email : sting().email().required(),
password:string().min(6).alphanum().required(),
 confirmPassword: ref('password'),
phone : number().integer().required()
}
  • Request body
{
username: guest
email : guest123@gmail.com
password:password@guest123
confirmPassword:password@guest123
phone : 0598000000
}
  • Response
  • Success
{ statusCode:201 , message : " sign up successfully " }}
  • failed
  • user exists
{ statusCode:409 , message : " already sign up try to signin  " }}
  • validation error
{ statusCode:400 , message : " Bad request check vaildation   " }}
  • Testing

GET/sign-out route

  • Route

  • /logout user

  • method: GET


Description

  • logout user

Acceptance Criteria

  • validation

  • Response

  • Success

{ statusCode:200 ,message: "Log out successfully  "  }
  • Failed
{statusCode: 400, message:"bad Request "}

  • Testing

card component

  • Description
    card component to present house object

  • Structure

make card component contain :

  • house title
  • location
  • description
  • price
  • bed rooms number and bath rooms
  • more details button
  • favorite button

  • UI

Screenshot from 2021-02-01 19-36-58

linkItem Component

  • Description
    LinkItem component to take you to another page.

  • Structure

Make LinkItem component contain :

  • Link label
  • href

  • UI

image

See available houses

#8
I can see all available houses to rent
As a user, I can

  • See the top-rated houses
  • See the newest houses
  • search for any available house.

image

POST/add new house

#17

  • Route Name:
    Route: /houses
    Method: POST

Acceptance Criteria

  • Validation schema

  • Request

req.body = {
  title: '',
  description: '',
  rooms: 2,
  baths: 2,
  price: 100,
  location: '',
  category: '',
  area: '',
  image: '',
}
  • Response
  • Success
{
  statusCode: 201,
  success: true,
  message: 'House added'
}
  • Failed
{
  statusCode: 400,
  success: false,
  message: 'Bad request'
}
  • Testing

File Structure

File Structure #5

  • client/

    • public/
    • src/
      • App/
      • components/
        • Card/
          • index.js
          • style.css
        • Header/
        • Footer/
      • Pages/
        • AboutUs/
        • ContactUs/
        • DetailsHouse/
        • FavoriteList/
        • Houses/
        • Landing/
        • Layout/
        • Login/
        • NotFound/
        • Profile/
          • index.js
          • style.css
          • AddHouse.js
        • Register/
      • Utils/
        • images
          • logo.svg
        • routes.constant.js
      • index.js
      • index.css
  • server/

    • controller/
      • routes/
        • error
          • 404.js
          • 500.js
          • index.js
        • routes
          • house
            • index.js
          • user
            • index.js
    • database/
      • config/

        • build.js
        • build.sql
        • connection.js
        • fakeData.sql
      • queries/

        • house
          • index.js
        • user
          • index.js
    • middlewares/
      • auth/
        • index.js
        • checkToken.js
      • validation
        • index.js
    • router
      • index.js
      • house.js
      • user.js
    • app.js
    • index.js
    • .env
  • test/

    • queries
      • index.js
      • user.test.js
    • routes
      • users.test.js
  • .gitignore

  • package-lock.json

  • package.json

Back-end Routes

Route Method Description Status Protect
/signup POST register user 201 False
/signin POST login user 200 False
/signout GET logout user 200 True
/users DELETE delete user acount 200 True
/users PATCH edit user information 200 True
/houses GET all houses data 200 False
/houses POST add new house 201 True
/houses PATCH edit house informmation 200 True
/houses?location= GET get house informmation by location 200 True
/houses/:id DELETE delete house 200 True
/user/houses GET get user houses 200 True
/favorite-list GET all user fav houses 200 True
/favorite-list POST add a new houses to favlist 200 True
/favorite-list/:id DELETE delete specific fav house 200 True
/profile-img PATCH edit user profile image 200 True
/profile-img DELETE delete user profile image 200 True

Get/All houses data

#16

  • Route

  • /houses

  • method: GET


Description

  • all houses data

Acceptance Criteria

  • validation

__

  • Response

  • Success

{ statusCode:200 ,data:[
{
  title: '',
  description: '',
  rooms: 2,
  baths: 2,
  price: 100,
  location: '',
  category: '',
  area: '',
  image: '',
},
  {
  title: '',
  description: '',
  rooms: 2,
  baths: 2,
  price: 100,
  location: '',
  category: '',
  area: '',
  image: '',
}
]  
}
  • Failed
{statusCode: 400, message:"bad Request "}

  • Testing

house details page

#8
I can see specific information about any house

as a user, I can

  • see more details about the house like full description, owner contact info.
  • browse related houses.
  • Add house to my favorite list

image

Create log in

#8
I can log into the app.
As a user, I can enter my username and password to be able to log into the app.
image

setup server

#5
create a server using Express.js framework

npm install express 
 

PATCH/profile-avatar

#11

  • Route

  • /profile-img

  • methods : patch


Description

  • edit user profile image

Acceptance Criteria

  • validation

  • Request body

 req.body =  {
      avatar: 'https://user-images.githubusercontent.com/25705602/106442463-f7740000-6483-11eb-8d3f-245c188c6c21.png'
  }

  • Response

  • Success

{ statusCode:200 ,message: " Updated successfully "  }
  • Failed
{statusCode: 400, message:"bad Request "}

  • Testing

Delete/delete user account

#11

  • Route Name

  • /users

  • method: DELETE


Acceptance Criteria

  • Validation schema

  • Request body
req.body =  {
 }

  • Response
  • Success
{ statusCode:200, message :"your account deleted successfully"  }
  • Failed
{statusCode: 500, message:"some error happend "}

  • Testing

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.