SmartVacation is a web application designed for mature adults who are wanting to travel to a particular destination and know more about the currency type, currency exchange rate against their native currency and find out what there is to do in their travel destination.
This project has been created as part of the Code Institute Hack-a-Thon January 2023, the theme of which was Revolutioning Finance for 2023.
Click here for deployed website.
- The initial user design was that users of the web app would be able to use APIs to:
- Match a currency with a country of choice
- Match that particular currency with their own native currency and find out the exchange rate
- Match a city to find out what there is to do in that destination with prices
Travelling enthusiasts and individuals that want to be able to find out more about a specific country of choice.
- As a First Time Visitor, I want to be able to view the navigation bar brand logo and information.
- As a First Time Visitor, I want to be able to find useful information in the footer.
- As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about it.
- As a First Time Visitor, I want to be able to easily navigate throughout the web app with a consistent design.
- As a First Time Visitor, I want to be able to find content related to the web app and its services.
- As a First Time Visitor, I want to look for information about the company and the team behind it.
- As a First Time Visitor, I want to be able to easily get in touch with the company with any questions I may have.
- As a First Time Visitor, I want to find the app useful, consistent and easy to use.
- As a Frequent User, I want to be able to easily get the currency of a country I need.
- As a Frequent User, I want to be able to easily get the exchange rate for the currency I need.
- As a Frequent User, I want to get travelling advice for the places I want to visit and estimate the cost of my trip in advance.
- As a Frequent User, I want to be able to use a reliable app on my desktop and mobile.
- As a Frequent User, I want to be able to comfortably use web app without any errors.
- HTML: the markup language used to create the website.
- CSS: the styling language used to style the website.
- JS: the primary language used to develop the client side of the website.
- MaterializeCSS: a modern responsive front-end framework based on Material Design.
- Git: the version control system used to manage the code.
- RESTCountriesAPI: used to fetch the country data (name and currency).
- ExchangeRateAPI: used to fetch the exchange rate data.
- NinjaAPI: used to fetch the longitude and latitude data from the city name.
- AmadeusAPI: used to fetch the travel data (city and activities).
- W3C Validator: was used to validate HTML5 code for the website.
- {CSS} Portal: was used to validate CSS code for the website.
- JShint: was used to validate the JS code for the website. GitHub: used to host the website's source code.
- VSCode: the IDE used to develop the website.
- Chrome DevTools: was used for debugging the website.
- Font Awesome: was used to create the icons used in the website.
- Favicon Generator. For real.: for providing a free platform to generate favicons.
- Adobe Illustrator to build own SVG images.
- Balsamiq to create wireframes.
- Responsive Viewer: for providing a free platform to test website responsiveness
- GoFullPage: for allowing to create free full web page screenshots;
The design of the application is based on the Material Design principles. The central theme of the application is the simplicity of use. Thus, all the components are designed to be easy to use. The minimalistic approach was used to create something meaningful without moving out of focus.
- The wireframes were created using Balsamiq.
- The wireframes were created for mobile and desktop versions of the website.
- The wireframes were created to show the basic layout of the website and provide a guide for the development of the website.
Green color was chosen as the main color for the project due to the the fact that it is associated with nature and positivity. Green can inspire feelings of harmony, growth, safety, and success. It’s also a calming color that makes people feel safe and comfortable which is highly important when it comes to finance.
The fonts used in this project are:
Lato is sans serif typeface and works well in contrast to the header/title font, providing balance while maintaining a modern, simple appearance. Lato font also increase readability and legibility of the text throughout the website. It is highly important to provide the user with a good reading experience as it will help them to understand the content of the website.
All images that have been picked for this project have been chosen based on their relevancy to the theme at hand: finance and travel.
The SmartVacations web application consists of a single landing page with diverse yet simple features. They are split into the following components:
- Navigation bar
- Information grid
- Top grid
- Bottom grid
- Currency calculator
- City attractions and prices
- Search results
- Footer
Navigation bar
- Located at the top of the page, it includes the website brand name and logo.
- Contains a light green background.
Information grid
-
Top Grid
- Contains a large, eye-catching title
- Located below the navigation bar feature
- Serves as an introduction for the user
- Contains an image representing the theme of travelling
- Contains a 'Get Started' button, which brings user down to the currency calculator when clicked.
-
Bottom Grid
- Compliments the top grid for appealing user design
- Contains a large, eye-catching title
- Contains an image representing the theme of finance
- Contains further information for the user
Currency calculator
- Contained within a green coloured card. Green colour is slighter darker than navigation bar and footer to compliment colour design.
- Contains a clear title for the Currency calculator.
- Contains drop-down select feature for picking a resident country.
- Contains automatic input that updates currency data from API based on picked country.
- Contains a drop-down select feature for picking a go-to country.
- Contains automatic input that updates currency data from API based on that same picked country.
- Features an input bar where user enters the amount of money to convert
- Contains 'Convert' button which carries out the calculation with the API currency data.
City attractions and prices
- Contains a clear title that matches the colour scheme with a dark green colour.
- Features an input field for users to enter their desired city destination
- Features a 'Search' button which matches the colour scheme with a darker green colour.
- Also contains a loading icon when API is being requested and loaded.
City attractions and prices search results
- Features a list of results relating to the searched city destination
- Contains a title of the particular event or location popularly known in user search results
- Contains a 'Sight' sub-title to inform user of search results
- Contains a 'Go Somewhere' button that redirects users to a list of google results related to user searched item.
- Information is contained within a card that corresponds with the colour scheme.
Footer
- Contains a colour design that corresponds to the web app colour scheme design
- Green colour tone corresponds with that of the navigation bar so as to maintain colour scheme consistency.
- Contains the logo of the brand
- Logo brand can be clicked on and returns user back to the top of the page, so as to maintain user-friendly design
- Contains the brand name with a consistent design to the navigation bar
- Features a 'Thank You' note
- Features an alphabetical list of the collaborators on this project
- Each collaborator name can be clicked on to open a separate tab to their GitHub profile.
- Contains a 'Copyright' section at the very bottom, with a slightly darker green tone design to compliment colour scheme.
- The 'Copyright' date has been created with a simple yet smart JavaScript code that allows it update itself automatically every coming year.
- Adding a feature for estimating savings through cryptocurrency / index markets.
- Extending the Amadeus API to the paid version which would give access to a Tour trips package library.
- Adding a feature where you select the country you are traveling to and the app will automatically setup a travel budget for you depending on user input of budget limits(Over the top exclusive / exclusive / Mediocre / cheap / under the rug cheap).
- Setting up a savings goal for a trip in mind.
- Creating pre-built travel packages.
- Live currency exchange charts.
- Currency / cryptocurrency historical charts readily available.
| First Time Visitor Goals User Stories | Comments | Testing |
|---|---|---|
| As a First Time Visitor, I want to be able to view the navigation bar brand logo and information. | Navigation bar is present on all pages. | Pass |
| As a First Time Visitor, I want to be able to find useful information in the footer. | Footer is present on all pages. | Pass |
| As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about it. | The information is presented in a clear and concise manner. | Pass |
| As a First Time Visitor, I want to be able to easily navigate throughout the web app with a consistent design. | The content split into different blocks with a consistent design. | Pass |
| As a First Time Visitor, I want to be able to find content related to the web app and its services. | Each section provides information about the web app and its services. | Pass |
| As a First Time Visitor, I want to look for information about the company and the team behind it. | Footer is present on all pages. | Pass |
| As a First Time Visitor, I want to be able to easily get in touch with the company with any questions I may have. | The footer contains a Collaborators section with links to their GitHub profiles. | Pass |
| As a First Time Visitor, I want to find the app useful, consistent and easy to use. | the app provides a consistent design and is easy to use and understand. | Pass |
| Frequent User Goals User Stories | Comments | Testing |
|---|---|---|
| As a Frequent User, I want to be able to easily get the currency of a country I need. | Currency calculator is present that provides the currency of a chosen country. | Pass |
| As a Frequent User, I want to be able to easily get the exchange rate for the currency I need. | Currency calculator is present and provides the exchange rate for the currency of a chosen country. | Pass |
| As a Frequent User, I want to get travelling advice for the places I want to visit and estimate the cost of my trip in advance. | * Travel API is present on all pages and provides information about the places I want to visit in a chosen city. | Pass |
| As a Frequent User, I want to be able to use a reliable app on my desktop and mobile. | The app is fully responsive and works on all devices. | Pass |
| As a Frequent User, I want to be able to comfortably use web app without any errors. | The app is fully functional and works without any errors. | Pass |
| Feature | Comments | Testing |
|---|---|---|
| Get started button | Button is present on the landing page and redirects user to the currency calculator. | Pass |
| Currency calculator | ||
| From Country select | Selecting a country from the dropdown menu changes the currency symbol. | Pass |
| To Country select | Selecting a country from the dropdown menu changes the currency symbol. | Pass |
| Amount input | Inputting a number changes the amount in the To Country currency. | Pass |
| Convert button | Button is present and changes the amount in the To Country currency. | Pass |
| City attractions and prices search | ||
| City input | Inputting a city name and clicking search button changes the search results. | Pass |
| Search Price button | Button is present and redirects user to the search results to the google search results with the name of an attraction and price options. | Pass |
| Footer | ||
| Brand logo | Brand logo is present and redirects user to the top of the page. | Pass |
| Collaborators links | Links are present and redirect user to the collaborators GitHub profiles. | Pass |
- index.html validation
-
Official CSS validation website did not work at the time of weekends testing W3C CSS Validation Service
-
CSS validation through {CSS} Portal. According to validation report, there are no errors in the CSS code and only multiple warnings regarding the use of
!importantand root's variable usage. Regardless, the website is still fully functional and responsive.
-
currency.js validation
-
rest_countries.js validation
-
travel_advice.js validation
-
The website has been tested on multiple devices and browsers to ensure responsiveness and compatibility.
-
The website has been tested on the following devices:
- Desktop
- Laptop
- Tablet
- Mobile The responsiveness report was created using Responsive Viewer
-
The website has been tested on the following browsers:
- Chrome
- Firefox
- Brave
The development environment used for this project was GitPod and VSCode.
Each software developer on the team created their own individual branch divergent from main from the get-go and have communicated via Slack to collaborate, pitch ideas, fix bugs and talk about relevant Pull Requests. Regular commits and pushes to Github have been employed to be able to track and trace the development process of the web application.
For local deployments instructions shall be written below, along with instructions with deployment to GitHub Pages, the hosting service used to deploy this particular website.
This repository can be cloned and run locally with the following steps:
- Login to GitHub.
- Select repository named: IuliiaKonovalova/revolutionising-finance-hackathon.
- Click code toggle button and copy the url (i.e., https://github.com/IuliiaKonovalova/revolutionising-finance-hackathon.git).
- In your IDE, open terminal and run the git clone command (i.e.,
git clone https://github.com/IuliiaKonovalova/revolutionising-finance-hackathon.git). The repository will now be cloned in your workspace.
The live version of the project is deployed at GitHub pages.
The procedure for deployment followed the "Creating your site" steps provided in GitHub Docs.
- Log into Github.
- Select desired GitHub Repository to be deployed live.
- Underneath the repository name, click the “Settings” option.
- In the sub-section list on the left, under “Code and automation”, click “Pages”.
- Within the ”Source” section choose ”main” as Branch and root as folder and click ”Save”.
- The page refreshes and a website shall then deploy via a link.
- The following is the live link deployed: https://iuliiakonovalova.github.io/revolutionising-finance-hackathon/
- Adobe - for information regarding the meaning of 'green' in design.
- Pexels - for brilliant choice of generic, high quality images for the Hack-a-thon theme.
- ExchangeRateAPI - for the data fetched by the network request for Currency Exchange.
- RESTCountriesAPI - for the data fetched by the network request for Countries.
- AmadeusAPI - for the data fetched by the network request for travel information on cities.
- AmIResponive - for the responsive design photo of the web application.
- GitHub- for the development environment used for this project and hosting service for the README.md file.
- GitPod - for the development environment used for this project.
- VSCode - for the development environment used for this project.
-
For images displayed in grid contents:
A big thank you to the Code Institute Hack-a-Thon team for voluntarily organising these brilliant events that challenges us software developers to be able to continuously learn, grow and collaborate with other like-minded developers.
Our team is made up of a wonderful group of people from around the world - all of which are either past or present students of the Code Institue