├── react-beach-resort-dev ├── public │ ├── _redirects │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html ├── src │ ├── assets │ │ └── img │ │ │ ├── jpeg │ │ │ ├── room-1.jpeg │ │ │ ├── room-10.jpeg │ │ │ ├── room-11.jpeg │ │ │ ├── room-12.jpeg │ │ │ ├── room-2.jpeg │ │ │ ├── room-3.jpeg │ │ │ ├── room-4.jpeg │ │ │ ├── room-5.jpeg │ │ │ ├── room-6.jpeg │ │ │ ├── room-7.jpeg │ │ │ ├── room-8.jpeg │ │ │ ├── room-9.jpeg │ │ │ ├── defaultBcg.jpeg │ │ │ ├── defaultBcg2.jpg │ │ │ ├── details-1.jpeg │ │ │ ├── details-2.jpeg │ │ │ ├── details-3.jpeg │ │ │ └── details-4.jpeg │ │ │ ├── gif │ │ │ ├── loading-gear.gif │ │ │ └── loading-arrow.gif │ │ │ └── svg │ │ │ └── logo.svg │ ├── Components │ │ ├── Title │ │ │ └── Title.jsx │ │ ├── Hero │ │ │ └── Hero.jsx │ │ ├── Banner │ │ │ └── Banner.jsx │ │ ├── Loading │ │ │ └── Loading.jsx │ │ ├── StyledHero │ │ │ └── StyledHero.jsx │ │ ├── Footer │ │ │ └── Footer.jsx │ │ ├── RoomsContainer │ │ │ ├── RoomsList.jsx │ │ │ ├── RoomsContainer.jsx │ │ │ └── RoomsFilter.jsx │ │ ├── FeaturedRooms │ │ │ └── FeaturedRooms.jsx │ │ ├── Room │ │ │ └── Room.jsx │ │ ├── Navbar │ │ │ └── Navbar.jsx │ │ └── Services │ │ │ └── Services.jsx │ ├── setupTests.js │ ├── App │ │ ├── App.test.js │ │ ├── App.js │ │ └── App.css │ ├── index.css │ ├── reportWebVitals.js │ ├── Pages │ │ ├── Error.jsx │ │ ├── Room.jsx │ │ ├── Home.jsx │ │ └── SingleRoom.jsx │ ├── index.js │ ├── logo.svg │ ├── Context │ │ └── Context.jsx │ └── Data │ │ └── data.js ├── .gitignore ├── instraction_folder │ └── instraction_file.txt ├── package.json └── README.md ├── README.md ├── .gitignore └── LICENSE /react-beach-resort-dev/public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 2 | -------------------------------------------------------------------------------- /react-beach-resort-dev/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /react-beach-resort-dev/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/public/favicon.ico -------------------------------------------------------------------------------- /react-beach-resort-dev/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/public/logo192.png -------------------------------------------------------------------------------- /react-beach-resort-dev/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/public/logo512.png -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-1.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-10.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-11.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-12.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-2.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-3.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-4.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-5.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-6.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-7.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-8.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/room-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/room-9.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/gif/loading-gear.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/gif/loading-gear.gif -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/defaultBcg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/defaultBcg.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/defaultBcg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/defaultBcg2.jpg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/details-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/details-1.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/details-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/details-2.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/details-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/details-3.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/jpeg/details-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/jpeg/details-4.jpeg -------------------------------------------------------------------------------- /react-beach-resort-dev/src/assets/img/gif/loading-arrow.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Upwork-Job32/Hotel-Room-Booking.react-project/HEAD/react-beach-resort-dev/src/assets/img/gif/loading-arrow.gif -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Components/Title/Title.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Title({ title }) { 4 | return ( 5 |
6 |

{title}

7 |
8 |
9 | ); 10 | } 11 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Components/Hero/Hero.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Hero({ children, hero }) { 4 | return
{children}
; 5 | } 6 | 7 | Hero.defaultProps = { 8 | hero: "defaultHero", 9 | }; 10 | 11 | export default Hero; 12 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import "@testing-library/jest-dom"; 6 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/App/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from "@testing-library/react"; 2 | import App from "./App"; 3 | 4 | test("renders learn react link", () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Components/Banner/Banner.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Banner({ children, title, subtitle }) { 4 | return ( 5 |
6 |

{title}

7 |
8 |

{subtitle}

9 | {children} 10 |
11 | ); 12 | } 13 | 14 | export default Banner; 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React-Project-Hotel-Room-Booking 2 | 3 | ### 🔰 Live Preview Projects: 4 | 5 | - Complete "Beach Resort | Hotel Room Book" Project - [Click To Live Preview][beach-resort] 6 | 7 |
8 | 9 | HAPPY DEVELOPING 🤣 10 | 11 | 12 | 13 | [beach-resort]: https://mukul-breach-resort-project.netlify.app/ 14 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Components/Loading/Loading.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // import loading gif image 4 | import loadingGif from "../../assets/img/gif/loading-arrow.gif"; 5 | 6 | export default function Loading() { 7 | return ( 8 |
9 |

rooms data loading ...

10 | loading gif 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Build and Release Folders 2 | bin-debug/ 3 | bin-release/ 4 | [Oo]bj/ 5 | [Bb]in/ 6 | 7 | # Other files and folders 8 | .settings/ 9 | 10 | # Executables 11 | *.swf 12 | *.air 13 | *.ipa 14 | *.apk 15 | 16 | # Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties` 17 | # should NOT be excluded as they contain compiler settings and other important 18 | # information for Eclipse / Flash Builder. 19 | -------------------------------------------------------------------------------- /react-beach-resort-dev/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /react-beach-resort-dev/instraction_folder/instraction_file.txt: -------------------------------------------------------------------------------- 1 | =====> React || Beach Resort Project <===== 2 | Hotel Room Booking System 3 | ------------------------------------------- 4 | 5 | 1. CREATE-A-NEW-REACT-APP - npx create-react-app react-beach-resort-dev 6 | 7 | 2. module install - 8 | i. REACT-ICONS: npm install react-icons 9 | ii. REACT-ROUTER-DOM: npm i react-router-dom --save 10 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 4 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = (onPerfEntry) => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Components/StyledHero/StyledHero.jsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | // import assets 3 | import defaultImg from "./../../assets/img/jpeg/room-1.jpeg"; 4 | 5 | const StyledHero = styled.header` 6 | min-height: 60vh; 7 | background: url(${(props) => (props.img ? props.img : defaultImg)}) 8 | center/cover no-repeat; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | `; 13 | 14 | export default StyledHero; 15 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Pages/Error.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // import react-router-dom 4 | import { Link } from "react-router-dom"; 5 | 6 | // imports components 7 | import Hero from "../Components/Hero/Hero"; 8 | import Banner from "../Components/Banner/Banner"; 9 | 10 | function Error() { 11 | return ( 12 | 13 | 14 | 15 | return home 16 | 17 | 18 | 19 | ); 20 | } 21 | 22 | export default Error; 23 | -------------------------------------------------------------------------------- /react-beach-resort-dev/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Footer() { 4 | const year = new Date().getFullYear(); 5 | 6 | return ( 7 |
8 |

Beach Resort | Hotel Room Book

9 |

10 | © {year} BeachResort.com - All Rights Copyright 11 | Reserved To{" "} 12 | 17 | Samiur Rahman Mukul 18 | 19 |

20 |
21 | ); 22 | } 23 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Components/RoomsContainer/RoomsList.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // import components 4 | import Room from "../Room/Room"; 5 | 6 | export default function RoomList({ rooms }) { 7 | if (rooms.length === 0) { 8 | return ( 9 |
10 |

unfortunately no rooms matched your search parameters

11 |
12 | ); 13 | } 14 | 15 | return ( 16 |
17 |
18 | {rooms.map((item) => { 19 | return ; 20 | })} 21 |
22 |
23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Pages/Room.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | // import react-router-dom 4 | import { Link } from "react-router-dom"; 5 | 6 | // imports components 7 | import Hero from "../Components/Hero/Hero"; 8 | import Banner from "../Components/Banner/Banner"; 9 | import RoomContainer from "../Components/RoomsContainer/RoomsContainer"; 10 | 11 | function Room() { 12 | return ( 13 | <> 14 | 15 | 16 | 17 | return home 18 | 19 | 20 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default Room; 28 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import reportWebVitals from "./reportWebVitals"; 4 | import App from "./App/App"; 5 | import "./index.css"; 6 | 7 | // import react-router-dom 8 | import { BrowserRouter as Router } from "react-router-dom"; 9 | 10 | // import context 11 | import { RoomProvider } from "./Context/Context"; 12 | 13 | ReactDOM.render( 14 | 15 | 16 | 17 | 18 | , 19 | document.getElementById("root") 20 | ); 21 | 22 | // If you want to start measuring performance in your app, pass a function 23 | // to log results (for example: reportWebVitals(console.log)) 24 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 25 | reportWebVitals(); 26 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/Pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | // import react-router-dom 3 | import { Link } from "react-router-dom"; 4 | import Banner from "../Components/Banner/Banner"; 5 | import FeaturedRooms from "../Components/FeaturedRooms/FeaturedRooms"; 6 | // imports components 7 | import Hero from "../Components/Hero/Hero"; 8 | import Services from "../Components/Services/Services"; 9 | 10 | function Home() { 11 | return ( 12 | <> 13 | 14 | 18 | 19 | our rooms 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | } 28 | 29 | export default Home; 30 | -------------------------------------------------------------------------------- /react-beach-resort-dev/src/App/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | 3 | // import react-router-dom 4 | import { Route, Switch } from "react-router-dom"; 5 | 6 | // imports pages 7 | import Home from "../Pages/Home"; 8 | import Room from "../Pages/Room"; 9 | import SingleRoom from "../Pages/SingleRoom"; 10 | import Error from "../Pages/Error"; 11 | 12 | // import components 13 | import Navbar from "../Components/Navbar/Navbar"; 14 | import Footer from "../Components/Footer/Footer"; 15 | 16 | function App() { 17 | return ( 18 | <> 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |