This is a web app built to reserve hotel rooms all around the globe.

Related tags

Learning resource react redux javascript html5 css3 tailwind-css redux-toolkit
Overview

Microvago

This is a web app built to reserve hotel rooms all around the globe.

Live Demo 📱

To see this project's live demo, please click here.

⚠️ Note: All images you add while testing the App will be deleted after 30 mins because we used free service for the backend. ⚠️

Mockup

screenshot

Kanban Board 📋

To view the Kanban Board we built for this project please click here.

To view the issue with the Kanban Board screenshots please click here.

There were 5 contributors to this project, you can see their contact information in the Authors section of this document.

Built With ⚙️

  • JavaScript
  • React
  • Redux Toolkit, Axios

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

You must have Git and npm installed in your machine.

Setup

Run either of the following commands to clone the repository locally:

git clone https://github.com/Omar-Muhamad/final-capstone-react-frontend.git
git clone [email protected]:Omar-Muhamad/final-capstone-react-frontend.git

Install

Run npm i to install all the necessary dependencies.

Authors 👥

👤 Luis Abarca

👤 Mihreteab Misganaw

👤 Omar Muhammad

👤 Shady Shawkat

👤 Santiago Velosa

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments 🙏

📝 License

This project is MIT licensed.

Comments
  • Microvago MVP

    Microvago MVP

    Front End PR description.

    In this PR we:

    Basics

    • [x] Followed the layout of this provided design and customize the titles, descriptions, and photos in order to create a website about Booking Hotel.
    • [x] Select and used our own theme for our website.

    Features

    • [x] User can log in to the website, only by typing username and password.
    • [x] In the navigation panel, the user can see links to:
      • Hotels (Home page).
      • Add reservation form.
      • My reservations.
      • Add Hotel
      • Delete Hotel
    • [x] On the main page, the user can see a list of Hotels.
    • [x] When the user selects a specific hotel, they can see the details page for that hotel.
    • [x] In the details page, the user can click the Reserve button to reserve a hotel room.
    • [x] Only the user with admin role can see and clicks the Add Hotel link in the navigation panel they can see a form for adding a new hotel.
    • [x] Only the user with admin role can see and clicks the Delete Hotel link in the navigation panel they can see a list of all Hotels with Hotel Name and "Location" with Delete Hotel button.
    • [x] To reserve an appointment, the user has to select a Hotel name, room type, and date.
    • Used the design based on the "Book a vespa test-ride" and add all necessary inputs with our theme.
    • The user can also access the Add Reserve page from the navigation panel.
    • [x] When the user clicks the My reservations link in the navigation panel they can see a list of their reservations (with information about hotel name, room type, price, and date).
    • [x] Make the app responsive, creating both mobile and desktop versions.

    Back end PR

    opened by Mre55 1
  • Styling - final touches

    Styling - final touches

    In this PR I did:

    • [ ] Edit styling for delete hotel page in both desktop and mobile versions.
    • [ ] Edit styling for add reservation page in both desktop and mobile versions.
    • [ ] Edit styling for my reservations page in both desktop and mobile versions.
    • [ ] Fis some design glitches.
    opened by Omar-Muhamad 1
  • Implement mobile menu and add some styling

    Implement mobile menu and add some styling

    In this PR I did:

    • [ ] Implement mobile menu navbar.
    • [ ] Add mobile and desktop styling for the details page.
    • [ ] Add mobile styling to Home and Add hotel pages.
    • [ ] Fix linters.
    opened by Omar-Muhamad 1
  • [3pt] Fetch Hotels for details page - Fetch data ( 2 persons)

    [3pt] Fetch Hotels for details page - Fetch data ( 2 persons)

    • [ ] Fetch data from the backend API endpoint when a user navigates to the hotel's details page.
    • [ ] Once the data are fetched, dispatch an action to store the selected data in the Redux store.
    opened by Omar-Muhamad 0
  • [3pt] Fetch Hotels for main page - Fetch data ( 2 persons)

    [3pt] Fetch Hotels for main page - Fetch data ( 2 persons)

    • [ ] Fetch data from the backend API endpoint when a user navigates to the hotel's main page.
    • [ ] Once the data are fetched, dispatch an action to store the selected data in the Redux store.
    opened by Omar-Muhamad 0
Owner
Omar Muhammad
Full-stack developer, Former Mechanical Engineer, and Tech enthusiast. Stack: HTML, CSS, JavaScript. Looking for my next job.
Omar Muhammad
GitHub https://microvago.netlify.app/
Music World is web3 app built over Solana where anyone can add their favourite songs and see the other songs that are added by different people from around the globe.

?? Introduction Music World is web3 app built over Solana where anyone can add their favourite songs and see the other songs that are added by differe

Apoorv Dwivedi 3 Jun 10, 2022
A Web application that showcases Rockets and Missions from the SpaceX API, you can reserve Rockets and join Missions to your profile.

Space Travelers' Hub Project that showcases Rockets and missions from the SpaceX API, the user can reserve Rockets and join Missions, and save them in

David Vergaray 9 Apr 17, 2022
a chatt app build using node , express and socket IO , it has many rooms

RealTime-chatt-app you can view the app here : https://bit.ly/3zce4ON a chatt app build using node , express and socket IO . used to public chatt room

null 11 Aug 31, 2022
💪 Reserve machine/rack/bench usage at a gym to minimize waiting times.

Gym Reservation App ?? Oscar Su, Amelia Reeves, Nathan Ma Possible name: Pump Program The goal is to reduce/eliminate the time spent waiting on others

Oscar Su 4 Jul 8, 2022
A website that acts as a guide about the universities to potential students whole throughout the globe.

A website that acts as a guide about the universities to potential students whole throughout the globe.

null 1 Apr 15, 2022
A matrix bot to monitor and respond to investment scam spamming across the matrix platform, for example in rooms with a permanently offline admin.

Spam Police A matrix bot to monitor and respond to investment scam spamming across the matrix platform, for example in rooms with a permanently offlin

jjj333_p 7 Dec 26, 2022
This widget allows to conduct polls in Matrix rooms.

Matrix Poll This widget allows to conduct polls in Matrix rooms. But unlike MSC3381, it is designed for more complex scenarios, like polls with multip

Nordeck IT + Consulting GmbH 14 Dec 19, 2022
Moject is a IoC container and an app factory built around the modules idea of Angular and NestJs.

Moject Moject is an IoC container and an app factory package built around the modules idea of Angular and NestJs. Usage npm install moject Use @Mo

Alexander 4 Dec 4, 2022
A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❤️‍??.

wellá 6 Aug 18, 2022
A all around note taking and viewing portal for students as well as teachers.

Notetal Portal to notes for students and teachers. With Notetal you can take notes as well as view notes taken by others. Features Powerful Editor: A

Alson Garbuja 2 Jun 13, 2022
In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaScript index file that imported all the modules and assets

To Do List In this project, I built a simple HTML list of To-Do tasks. This simple web page was built using Webpack, creating everything from a JavaSc

Andrés Felipe Arroyave Naranjo 10 Mar 31, 2022
Event scheduler is a simple app for viewing the events happening around you

Event scheduler is a simple app for viewing the events happening around you. User can also create their event and include a location. Location can also be marked as hidden(strictly by IV). Built with React and Styled Components

Anselem Odimegwu 3 Mar 29, 2022
An App that uses an external APIs to show meals from around the world

This website displays recipes meals using APIs to retrieve details from a DataBase and also implements features like adding a functional Like button for every item and a section for adding a new comment. All these through an external API to send and receive data.

Fernando Salas 4 Mar 12, 2022
🟢 Music player app with a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more.

Music-player-app see the project here. 1. Key Features 2. Technologies I've used Key Features: ?? Fully responsive clean UI. ?? Entirely mobile respo

suraj ✨ 3 Nov 16, 2022
Progressive Web App (PWA) built in Node.js & Express that automatically reloads/refreshes your browser, web page, and app when developing.

Expresso ☕️ Checks for changes in your source and automatically reloads your browser, or web page, and app window. Makes development easier. Report Bu

Start Rev Technology 3 Oct 6, 2022
An easy-to-read, quick reference for JS best practices, accepted coding standards, and links around the Web

Feel free to contribute! Where? http://www.jstherightway.org Why? Today we have a bunch of websites running JavaScript. I think we need a place to put

BrazilJS 8.5k Jan 1, 2023
ALU Map is a web-based platform that will help students move around ALU Rwanda Campus.

ALU-MAP ALU Map is a web-based platform that will help students move around ALU Rwanda Campus. Introduction Please refer to CONTRIBUTING.md for contri

null 5 Oct 25, 2022
Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works. You all can share your ides/works here.

Hacktoberfest Submit your Work Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works.

Chinmay Patil 3 Oct 5, 2022
Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed and allows you to mark them as complete or not. Tasks can also be dragged and dropped in any position. It's a minimalistic website built using JavaScript ES6, Webpack and CSS

Todo Application Todo application is a web app that helps to organise your daily activities. It lists all the activities that you need to be completed

Shamuobe Buingo Joseph 5 May 3, 2022