DEV Community

Cover image for Vacation Planner Application using AWS
Chinwe O. for AWS Community Builders

Posted on

Vacation Planner Application using AWS

Traveling is a popular and enjoyable activity for people all over the world.  I've been going on some spontaneous trips lately, and it's been tough to plan for them properly. So, I started working on a little side project to help with that. It's still in the early stages, but it could turn into something big eventually.

Let's start building! The main goal is to create a web app that gives users estimated flight costs, recommended travel dates, and hotel choices for a specific destination, all tailored to their budget.

Leveraging AWS for Vacation Planning Application

AWS Architecture Diagram

Technologies and Services

  • Frontend: HTML, CSS, JavaScript using AWS Cloud9 (I used MaterialUI for the design)
  • Backend: AWS Lambda for serverless backend logic.
  • Database: Amazon DynamoDB to store any necessary data like user preferences or historical data.
  • APIs: Integrate third-party APIs for flight data, hotel listings, and travel recommendations. Hosting: Amazon S3 for hosting the static website, Amazon API Gateway for RESTful API.

Key Features of an Vacation Planner App

  • Destination Input: users can input their desired vacation location.
  • Travel Date Suggestions: the tool suggests the best times to visit based on factors like weather, local events, or historical data.
  • Flight Cost Estimates: this will provide estimated flight costs for the suggested dates.
  • Hotel Recommendations: to list the different hotel options in the destination area.
  • Budget: users can input their budget and the app will provide recommendations within that price range.

Frontend Development

I had to create a basic web app where users can enter their vacation preferences and use CSS Framework (with MaterialUI) to manage user inputs and show results.

Step 1: Set Up AWS Cloud9

  • Log into your AWS Account and go to the AWS Cloud9 service.
  • Create a new environment: I gave it a name and proceeded with the default settings.
  • Launch the environment: This will open the Cloud9 IDE in your browser.

Image of Cloud9

I personally love the Preview feature offered in Cloud9, as it allows me to observe the website in real time while developing the application. Once I had created the static website, I required a method for hosting it to make it accessible to the public. This is where Amazon S3 became essential. To achieve this, I:

  • Created an S3 Bucket
  • Uploaded my Website Files
  • Enabled Static Website Hosting
  • Set Bucket Permissions (which is set to Public). What this means is that the bucket will be public is a necessary step when hosting a static website on Amazon S3 because it allows anyone on the internet to view and access your website.
  • Got Access to the website endpoint AWS provided to me and launched it on my browser

Uploaded files to S3

Web View

Launched the web app using Cloudfront URL

Static Website on Cloudfront URL

Backend Setup with AWS Lambda

Here, I will be using AWS Lambda for serverless backend logic. I set up the backend with AWS Lambda to process user inputs and also interact with the third-party API. I chose a preferred API of my choice (there are others out there that are available which are also free to use). I built the Lambda function using python

AWS Lambda

Testing out the API using POSTMAN

Before testing out the API, I had to employ the use of Postman to ensure the API was indeed going to fetch results. As you can see in the image below, it does return the expected results

Postman

What to expect next?

The next phase will be to implement security measures for protecting user data on AWS, Cost Analysis of Running a Vacation Planner on AWS, Testing my AWS-Based Vacation Planner Application amongst others.

I am excited about this fun-little project and look forward to using it to plan my trips, you should too !

Top comments (1)

Collapse
 
gksk profile image
gks

Can you share the Code URL Please!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.