pdybowski / booking-clone-web

Booking Clone Web

This is a Frontend application for Booking Clone Api

Available at Booking Clone Web

Running the application

git clone https://github.com/pdybowski/booking-clone-Web.git
npm install #to install all the dependencies
npm start #to build and run the app on localhost

Also you need to have Booking Clone Api installed on your operating system. To set up api properly reffer to this documentation

Home Page

Getting hotels

Making reservation

Hotel Owner Panel

Create New Hotel

Admin Panel

Build With

• HTML
• CSS
• React

Tools used

• React
• React-Router
• Material UI
• Prettier
• Babel
• Webpack
• Bootstrap

Authors

• Piotr Dybowski
• Ireneusz Bednorz
• Szymon Kin
• Jakub Góra

booking-clone-web's Issues

Move general routes to the bottom of the router

readme (effort 2)

add readme

Add Admin Basic UI (effort 4)

1. nav bar: Users | Hotel Owners | Hotels | Reservations

2. Users - display table with users
   display table with checkbox | firstName | lastName | phoneNumber | email

3. Hotel Owner
   display table with checkbox | firstName | lastName | phoneNumber | email | status

there are buttons: "Verify", "Remove"
when checkbox is checked then after clicking on of those buttons we should verify or remove elected owners

NOTE Szymon is caeting table reusable component

add loadUserInfo after registration (effort 1)

Add reservation card (effort 4)

Once Hotel Card is finished we want to make a resevation.
We click 'Select' and it should navigate to /hotels/{city}/{hotelId}

Then we should get all available rooms for selected hotel and display them (you can create additionl component to present room).

Room should have button 'Make Reservation'

after clicking it should navigate us to /hotels/{hotelId}/{roomId}reservation

dont make this view (just navigate)

NOTE: if user is not logged in we shouldnt enable making reservation. Instead add alert with message: "Please log in to make reservation". If user is admin or hotelOwner you should display alert("You are not allowed to make reservation")

Add Main Page UI (effort 4)

Finish main page view
Add /hotels/{city} page - it should show title and get all hotels for individual cases

1. initial view (you should style everything to look good - this requires Ireks Ticket to be done #4 )
   

2. after clicking City image
   after clicking City, it should show all hotels in the city (we dont need to verify if hotel is available or not) - navigate to '/hotels/{city}
   

3. after searching hotels (using search bar)
   we should move to page hotels/{city}
   

NOTE that there is different title in point 2 and 3

move all imports to /core (effort 1)

move ALL material-ui imports to '@material-ui/core
see img:

but checks if there wont be any errors

Add table component (effort 3)

we should crate shared component, lets say 'Table'

we should be able to pass multiple props by which table will be built.

examples: table with hotels in admin/hotel owner panel, table with reservations for admin/owner/user

So we need headers and body to set

add styles for an active navigation tab (effort 2)

add styles when navigation tab is selected

font color can be changed to the yellow color that we use to display 'register' buton

every input text should have OUR DarkYellow color (effort 2)

example: when we log in we type email and password. I want them to have the same color as input border border

do it in search bar and everywhere. Make it nice

fix register form (effort 2)

fix register form ui

BIGGER SCREEN (not laptop) xd:

clean webpack configurations for dev and prod (effort 3)

check if admin/owner etc is logged in berfore component is being rendered (effort 1)

Create Search Bar Component (effort 4)

you can make it like on booking.com

remember that you need to add js logic to handle all of these variables

Add Hotel Owner Basic UI (effort 5)

When not verified:

when verified:

Add ability to Add hotel:
Use Stepper from material UI

1. name, email, phoneNumber
2. localization: country, city, zipcode, street, building number
3. rooms (we should be able to add many rooms)
   example:
   

after save all we should send request to:
https://booking-clone-api.herokuapp.com/api/hotelOwner/hotels

body:

{
    "localization": {
        "country": "Poland",
        "city": "Wroclaw",
        "zipcode": "50-111",
        "street": "Dark Street",
        "buildingNumber": 15
    },
    "phoneNumber": "123456789",
    "name": "Piotr Dark Hotel",
    "clientsRate": [],
    "email": "[email protected]",
    "rooms": [
        {
            "roomNumber": "1A",
            "beds": {
                "single": 2,
                "double": 2
            },
            "price": 500
        },
        {
            "roomNumber": "1B",
            "beds": {
                "single": 2,
                "double": 0
            },
            "price": 150
        },
        {
            "roomNumber": "1C",
            "beds": {
                "single": 2,
                "double": 1
            },
            "price": 200
        },
        {
            "roomNumber": "1D",
            "beds": {
                "single": 2,
                "double": 1
            },
            "price": 200
        },
        {
            "roomNumber": "1E",
            "beds": {
                "single": 2,
                "double": 0
            },
            "price": 150
        }
    ]
}

Add Page For Registering User (effort 3)

There is a logic for it in components/Register.js or sth similar to this.

Make it look nice and allow new user to register xd

if smsAllowed then phonenumber textField should be required

add to webpack option to reload page after code update (effort 2)

create hook that checks if user is logged in and sets userData to the state (effort 2)

create hook that checks if user is logged in and sets userData to the state. Should use useEffect inside of it. Look at the TopSection

Add Page For User (effor 3)

1. nav bar: reservation | reset password
2. reservation show table with user reservations
   checkbox | hotel name | hotel phone number | hotel email | city | startDate | endDate

if checkbox is checked then after clicking 'Delete' button we should remove all checked reservationss

Need Help page (effort 2)

add logic to logout button (effort 1)

remove cookie with token,
remove local storage with user info,
back to the main page

Add Ability To Add New Room (effort 3)

click 'Add Room' in Edit hotel page and add ability to add one new room there (popup).

Add Ability To Edit Hotel (effort 4)

REMOVE 'Edit Hotel' from menu dropdown

After clicking "Hotels->Show All" display:
table with all hotels for logged in hotel owner
columns:
action | HotelName | roomsCount | email | phoneNumber | adress | CreatedDate | EdittedDate

action column should have 'pencil icon' from fontawasome. if someone clicks on it, it shows view (but on the same page - instead of the table) with selected hotel.
show inputs there with: HotelName, email, phoneNumber and adress proprties..
Add button 'Add New Room' (this will be the next ticket to add logic to this button)

at the righ bottom you should have buttons 'Cancel' (navigates us back) and 'Save' (saves data and navigates us back)

Add pagination for rooms (effort 3)

Add pagination for rooms for a selected hotel:

1. when we are looking for a hotels and click it - we see list of available hotel rooms
2. when we are logged in as hotel owner and we select hotel from All hotels list

10 per page

deploy (effort 2)

deploy app on heroku

Add pagination when receiving hotels (effort 3)

We should be able to see 10 hotels per page

Fix register visuals

remove default inputs from search bar (effort 1)

we dont need default values there

Add Top Section UI (effort 4)

add top section styles and additional elements

just make it looks nice (you can take a look at booking.com)

po zalogowaniu
po zarejestrowaniu (rejestracja potem)

Show All reservations for hotel Owner (effort 3)

in /hotelOwner dont disply anything

after clicking 'reservation' show all reservations - columns:
reservationId | user name (first and last name) | hotelName | roomNumber | startdate | enddate |

Add ability to make reservation after selecting hotel (effort 3)

After clicking 'Reserve' open popup with:

1. Payment details:

• by card (now)
• by card (arriving day)
• by cash (arriving day)

2. right bottom corner add button 'Cancel' 'Save'

send to api reseravtion details
and
if someone checks 'by card (now)' send to api that room has been paid

admin should be able to add new city to DB (effort 2)

Add in admin menu 'add city'
When click show ui with input and button to add new City

(make sure that you finished api)

Fix pagination

Fix Main Page UI, Fix reservations (effort 3)

Main Page UI:

• 1. Show hotels for a selected city or using Search Bar
• 2. Remove 'All Hotels' just show city name in the left top corner
• 3. Search bar should be a form and everything should be required
• 4. 'Anywhere' City in Seach Bar should be set by deault
• 5. after clicking Search we navigte to view with all hotels with available rooms. Add UI for it (check if Irek havne t done it). Then when we click hotel, open page with rooms for this hotel and SHOW room price for selected period of time (eg. 6days, room price $150, then show 6*150)

Add Hotel Card (effort 3)

Add hotel card reusable component:

• image (find some white-gray icon)
• hotel name
• city name
• rates (stars) whatever (additional)
• description
• button to select hotel 'Select' whatever

take a look at booking, we dont need the same UI.

*NOTE: for tests you can pass hard coded props (dont need to make additional request for now)

Remove webpack configs

add prettier

Add dropdown with cities (effort 2)

Wherever city is provided add dropdown instead of input

1. SearchBar
2. add hotel
3. edit hotel
   find everything

there is api call to get all cities
GET /api/cities

remove background from .mainPageContainer (effort 1)

Add ability to remove hotels (effort 3)

hotels - remove hotel
openes page with table of all hotels for a current hotelOwner
In action column we should have 'bin' icon. when click on it trigger popup with Confirmation message:
"Are you sure to remove this hotel?"
[] "force delete" - checkbox with label
"Cancel" | "Yes" - buttons

fix search bar ui (effort 2)

make it wider (its hardly to see long dates):

when we are searching instead of "Search" button add loading circle that should spin until we have respose

add drodpown with (make sure you spell it correctly db must undrestand it):
Warsaw
Wroclaw
Bydgoszcz
(with the cities we have hotels in) - we will change backend later

move register button after 'forgot password' (effort 1)

initial login/register logic (effort 4)

add logic to login
add logic to register

add some helpers(utils)

change edit hotel UI (effort 4)

Current UI can be used on mobile phones.
I want to have desktop UI like this:

create nav bar (effort 3)

We should be able to pass those values and a props and cb functions asigned to them

"Hotel" "Reservtion" are just an example and they are inputs/buttons

we can also be able to select type of those inputs

fix top section ui (effort 3)

text is hardly visible, Login, password etc
Move eberything to the right

add some space

when we are logging in instead of
'Login' button add loading circle like it was before....

This is not part of th login... (remove it from here....) - this will be probably removed by Jakub

Create Popup (effort 3)

create shared component Popup (add logic to it)

we should be able to pass props:
header,
body - html,
two buttons inside footer (text should be custom and cb functions should be also passed as a part of a button prop)

add 'city' dropdown in admin nav (effort 2)

Admin navigation should have city instead of 'add city'

city (dropdown)

• cities (show table with cities)
• add city (ui is already done)

add title, metadata, description etc to indx.html, favicon - icon (effort 1)

Change hotels, hotel rooms and reservation interface (effort 3)