PetSitter

Contents

• Task
• Introduction
• Initial Concept
• Final Product
• Code Structure
  • SQL CRUD Guidelines
  • server route paths
  • Front-end Logic Stricture
• Work Splitting
• Difficulties
• Credits

Env variable

Before you run the server localy, make sure to create .env file in the root directory and then:

• DATABASE_URL = postgres://[username]:[password]@localhost:5432/[databasename]

Task

Our goal this week was to build a website associated with database and all the work surrounding it.

introduction

One of the main Project aims was to build a website that includes all the materials we've learned until now, from front-end until the database. Second we we wanted to make sure that every one from the team members work on everything and split up the work according to that we will talk about that in next sections as well.

The first idea behind this project is to make an app that can help people find jobs as pet sitters, which could be very helpful for students and freelancers, since it's not a fullday job and the sitter can register daily for his available hours that day. Second, is to make it easier for pet owners to find a sitter for them when they need it!!!

The app is very easy to use, no registeration needed for the users, they just have to enter their name and phone number, and then they can start searching for sitters, when they find one they can ask for reserve, and that will send an email for the sitter so he or she can contact their potential customer.

Initial Concept

our initial concept was to build an app similar to the concept art below:

• intoduction page
  • here the user can either register as a sitter or enter as a user
• sitter registration page
  • here the user specifies is details, availability hours and the cost he asks for
• "enter as a user"
  • leads the user to the "search page for sitter"
  • here the user enter his credentials and the hours he's seeking
• the search result page
  • here the user recieves a list of the sitters he can reserve
  • by hitting the reserve button, the sitter won't be availabe for these hours in the next search

---

Final Product

Here is the final product, we can gladly say that it is very similar to the concept

• Intoduction page
  • here the guest can either register as a sitter or start searching for a sitter
• Sitter registration page
  • this page includes details for the sitter that he needs to enter, in order to register and be shown on the list of sitters on out app.
• Search for a sitter as a user
  • The user enters his name and his phone number and clicks the Search button
  • this leads the user to the next page - the result page
• Search result page
  • the user will browse through list of sitters which he can reserve
  • by hitting the reserve button, the sitter won't be availabe for these hours in the next search

---

Code Structure

before and while we worked on the project we took some time to plan the working proccess thoroughly which helped us split the work between the group members.

the main code flow:

we even took time to plan and design some the code guidelines for the project, such as:

---

SQL CRUD Guidelines

• readAll(cb)

  • returns the entire table
  • cb = (err,rows)=>{}

• read(count, offset.cb)

  • returns the number of elements starting from the offset index
  • cb = (err,rows)=>{}

• count(cb)

  • returns the number of rows
  • cb = (error,count) => {}

• create(obj,cb)

  • obj - key value pairs matching the column name and their values
  • cb => (err)=>{}

• isInputValid(obj) : boolean

  • recieves an object representing the column names and the values to add
  • returns true if the input is valid

• delete(id, cb)

  • cb = (err)=>{}

• [reservation table only] updateReserved(isReserved,cb)

  • cb = (err)=>{}

---

server route paths

• /sitter

  • get params:
    • [optional] count
    • [optional] offset
    • without params - return all data
  • post recieves a json object with the following keys:
    • name (: string)
    • startingHr (: string - HH:MM)
    • EndHr (: string - HH:MM)
    • cost (: string or number)

• /reservations

  • get params:
    • [optional] count
    • [optional] offset
    • without params - return all data
  • post recieves a json object with the following keys:
    • name (: string)
    • phone (: string or number)
    • startingHr (: string - HH:MM)
    • EndHr (: string - HH:MM)
    • sitterId (: string or number)

• /availableSitters?start=...&end=...

  • returns an array of sitters that are available between the provided hours (: string - HH:MM)

object keys for the SQL create functions
sitter	reservation
name startingHr EndHr cost	name phone startingHr EndHr sitterId

---

front-end logic Stricture

• getAllReservations(cb)
  • cb: (error, jsonObj)=> {}
• getReservations(count,offset,cb)
  • count: the number of elements to
  • offset: the index to start the retrival from
  • cb: (error, jsonObj)=> {}
• addReservation(name,phone,startingHour,endHour,sitterId,cb)
  • cb: (err) =>{}
• getAllSitters(cb)
  • cb: (error, jsonObj)=> {}
• getSitters(count,offset,cb)
  • count: the number of elements to
  • offset: the index to start the retrival from
  • cb: (error, jsonObj)=> {}
• addSitter(name,phone,startingHour,endHour,cb)
  • cb: (err) =>{}

---

Work Splitting

one of our primary goals in this week's project was to split the work as evenly as possible, so the eveyone will get to do a little bit of everything

our initial split + todos

• Marwan + Morad:

  • server
    • /reservation route
    • validate /reservation with params (check if the params that were passsed are valid)
  • SQL
    • reserveCRUD
      • read
      • readAll
      • count
      • delete
      • create
      • updateReserved
      • isInputValid
  • logic
    • send a get request to /sitters
    • send a get request to /sitters with params
    • send a post request to /sitters
  • dom
    • link the "sitter registration form" with the logic
    • link the "search button" with the logic

• Moris + Khaled

  • server
    • /sitters route
    • redirect user after adding an item to the sitters list
    • validate /sitters with params
  • SQL
    • settirsCRUD
      • read
      • readAll
      • count
      • delete
      • create
      • isInputValid
  • logic
    • send a get request to /reservation
    • send a get request to /reservation with params
    • send a post request to /reservation
  • dom
    • link the "reserve button" with the logic
    • link the "sitters list" with the logic

• testing

  • test server (router)
  • test database
  • test logic?

• Others

  • [x]join both tables to get all available sitters
  • [x]read me file
  • [ ]host page on Heroku
  • [ ]host db on Heroku
  • [ ]push envirement keys to Heroku
  • [ ]Security - protect against script injections
  • [ ]accessibility

and obviously we sidetracked aloootttttttt and the split got a lil messy (some waanted to work on some very specific topics only.. so.. 🤷‍♂️🤷‍♂️🤷‍♂️) , but I can gladly say that we successfully managed to achieve about 80% of the split

Difficulties

to name a few:

• time management

  • we were unable to achive all the bullet points we had initially planned.
  • creating the database took us more time the we first anticipated
  • on the first day we split into groups of two, in two different breakout rooms and we ended up working on the same common parts code parts... which lead to the loss of a lot of precious hours.

• defining everything in the project before hand

  • while we did manage to plan most of the work beforehand, we ended up facing some really turning point decisions later on that we could've avoided.

• not all the team members ended up wotking on their weaker spots

  • if we were to follow out initial planning it could've been achieved. (I also blame the lack of time aad our semi high goals

• some code struggles we had to work out way out of by drawing & planning

https://hackmd.io/zTqnvGRaQDSIadxALDIFjQ?both https://hackmd.io/@qkHgX7jGSCC3bWyVhIsGgQ/BJC4WrRuU/edit

Credits

Special Thanks to everyone who worked on this project and put efforts, and to all our WebAhead5 mentors!!