Team5-Novelty-Travels
Name of the project - All you need to plan your next journey in one place. :-
(Novelty Travel) [https://gsg-cf05.github.io/Team5-Novelty-Travels/]
Why did we create this app?(the problem)
Who does not want to travel and explore the world? But is travel available to each of us at any time we want? The answer is of course not. Because if you want to travel, you have to wait for the holidays because you are busy at work. Also, you need to know the holidays in the country you want to go to. This means that travel requires a lot of planning in advance, you will browse many websites on the Internet, then you will need other websites to display hotels, and perhaps any website that does not have all the hotels in the city you want to go to, meaning that you need to search for every information you need and may be confused between all these websites and information that you need.
What is Novelty Travel? (the solution)
Novelty Travel is a web app built to help you plan your next journey more effectively. The site suggests popular places around the globe to be your next destination. The site has three main features of listing the annual holidays in a particular country, viewing hotels in that country and displaying relevant details about each hotel.
Wireframe:
User journey in the app:
- The user finds the landing page, it includes the name of the project, the logo, and a button “start your journey”
- The user clicks to the button, that leads to the second page
- The second page includes two sections, the first is the search bar, and the second is the explore section (recommended cities, recommended hotels, etc.)
- The user enters the country he wants to visit in search bar, it leads him to third page
- The results of the search will show the annual holidays in that country, which is on the third page.
- The user clicks to any holiday he wants, he will be moved to the fourth page which includes tourist cities of that country.
- when the user choose the visited city, he will be moved to the last page
- The user will find all hotels in the last page, there is a lot of information there. location of the hotel, book price, etc. and also he can check the date he wants to go, the rooms, tours if available.
User story:
- As a user, I can see the explore (recommended cities and hotels)
- As a user, when I search for any country I want to visit, I can see the results and choose any holiday date I want.
- As a user, It will be shown to me the tourist cities
- As a user, when I choose the city, all hotels in that city will be listed with different information for each hotel.
The way of installation the project to run it locally:
- Open the repository of the project
- Click on the 'Code' green button on the right.
- Copy the provided HTTPS link.
- In a file on your PC, open the Git bash terminal -- right click then choose Git bash here –
- Write "git clone" then paste the link.
- Write "code ." to open visual studio code
git clone `https://user-images.githubusercontent.com/94310993/159134474-b2df9ba0-1a82-40f6-86d9-f81bc5516e15.PNG`
cd Team5-Novelty-Travels
code . `open in vscode`- From the mouse on html page click right and choose open with live server the project will be opened in your browser
Technology used and the purpose:
Design phase:
The technology used for the design was (figma)[https://www.figma.com/file/6WlbgyqNiaW4ytfX0pGhXF/Novelty-Travels?node-id=0%3A1].
Coding phase:
All codes are written on Visual Studio Code, there are
- Html ➙ It was used to build the main structure
- CSS ➙ It was used to style the pages and make the website and app more professional
- Javascript ➙ It was used for fetching the needed data and make the website more dynamic
- API ➙ It was used to get the needed data (Holidays API, Hotels API)
- Local Storage ➙ It was used to save the country you search for, the holiday you choose and the hotel you choose.
Teamwork:
- Github were used as a main channel.
- Discord group was for chatting and contacting.
- Whatapp group.
Teamwork:
- (Salwa Siksik)[https://github.com/salwasiksik]
- (Abdul Aziz Al-Kurd)[https://github.com/azzsal]
- (Ahmed Hammad)[https://github.com/ahmedhmmad]
- (Mohamed Sbaih)[https://github.com/MohamedSbaih]